>> Mais documentação do Visual Web Pack
Executando inserções, atualizações e exclusões
| Abril de 2007 [Número da revisão: V1-2] |
|
|
Este tutorial mostra como usar o NetBeans Visual Web Pack 5.5 para construir um aplicativo da Web que pode criar, recuperar, atualizar e excluir linhas do banco de dados. O aplicativo fornece uma lista suspensa de dados principais juntamente com uma tabela de detalhes sincronizada. O usuário do aplicativo pode adicionar, atualizar e excluir os registros na tabela de detalhes e do banco de dados associado.
Este tutorial usa conceitos introduzidos em outros tutoriais mais básicos. Se você não tiver conhecimento básico do IDE e de seus componentes de design, primeiro leia os tutoriais introdutórios, como Guia de introdução do NetBeans Visual Web Pack e Usando componentes de vinculação de dados para acessar um banco de dados. |
Este tutorial funciona com as tecnologias e os recursos seguintes
Componentes JavaServer Faces/ Plataforma Java EE |
1.2 com Java EE 5* 1.1 com J2EE 1.4
|
| Banco de dados Viagem |
Necessário |
| Biblioteca de componentes Blueprints Ajax |
Não é necessário |
* Na data da publicação deste tutorial, somente o servidor de aplicativos Sun Java System oferecia suporte ao Java EE 5.
Este tutorial foi adaptado para ser usado com o Servidor de aplicativos Sun Java System PE 9.0, versão atualizada 1 e posterior, e o Tomcat 5.5.17. Se você estiver usando um servidor diferente, consulte as Notas de versão e as Perguntas freqüentes para obter informações sobre problemas conhecidos e soluções sugeridas. Para obter informações detalhadas sobre os servidores suportados e a plataforma Java EE, consulte as Notas de versão.
Criando o projeto
Neste tutorial, você cria um aplicativo da Web de uma única página. Você começa fazendo o layout da página, que inclui uma pessoa e viagens correspondentes, como mostrado na figura abaixo.
Figura 1: Layout da página inicial |
Desenhando uma página
- Crie um novo aplicativo da Web visual e nomeie-o
InsertUpdateDelete.
- Na seção Básico, da Paleta, arraste o componente Lista suspensa até o canto esquerdo superior da página. Na janela Propriedades, altere a propriedade do
id para personDD.
-
Arraste um componente Grupo de mensagens da Paleta Básico e coloque-o à direita da Lista suspensa.
O componente Grupo de mensagens exibe erros de validação e conversão, assim como mensagens escritas para o contexto do Java Server Faces pelos métodos info e erro. Essas mensagens poderão ser úteis, se for necessário depurar o projeto.
- Coloque um componente Tabela abaixo dos outros dois componentes.
Configurando a lista suspensa
-
Na janela Tempo de execução, expanda o nó Bancos de dados e verifique se o banco de dados Viagem está conectado.
Se o nó jdbc do emblema do banco de dados VIAGEM estiver partido
e você não puder expandir o nó, o IDE não está conectado ao banco de dados. Para conectar ao banco de dados VIAGEM, clique com o botão direito do mouse no nó jdbc de VIAGEM e escolha Conectar no menu pop-up. Se a caixa de diálogo Conectar for exibida, digite viagem como Senha, selecione Lembrar senha durante esta sessão e clique em OK. Se você não vir um nó jdbc no banco de dados VIAGEM, consulte Instruções de instalação do NetBeans Visual Web Pack 5.5 para obter informações sobre como disponibilizar o banco de dados para o IDE.
Observação: Se estiver usando o Apache Tomcat, copie o arquivo derbyClient.jar no diretório <tomcat_install>/common/lib antes de tentar conectar-se ao banco de dados.
Expanda o nó jdbc para o banco de dados Viagem e, em seguida, expanda o nó Tabelas.
Observação: O nó jdbc para o banco de dados VIAGEM será chamado nó Viagem no restante deste tutorial.
-
Arraste o nó PESSOA para a Lista suspensa no Visual Designer.
A janela Esboço mostra um nó personDataProvider na seção da Page1 e um nó personRowSet na seção SessionBean1.
-
Clique com o botão direito do mouse na Lista suspensa e escolha Enviar automaticamente ao alterar, no menu pop-up.
Esta configuração faz com que a página seja enviada para o servidor sempre que um novo valor é escolhido na lista.
-
Clique com o botão direito do mouse na Lista suspensa e escolha Configurar formulários virtuais, no menu pop-up.
Na caixa de diálogo resultante, observe que personDD é exibido no canto esquerdo superior da janela para mostrar que a Lista suspensa foi selecionada.
-
Clique em Novo e insira pessoa na coluna Nome. Clique duas vezes no campo da coluna Participar, defina-o como Sim e, em seguida, faça o mesmo para a coluna Enviar, como mostrado na figura abaixo.
Figura 2: Configurando formulários virtuais |
Com o uso de um formulário virtual, o aplicativo evita validações desnecessárias para dados na Tabela.
- Clique em OK.
-
Clique no botão Mostrar formulários virtuais na barra de ferramentas Visual Designer, como mostrado na Figura 3.
Visualizando formulários virtuais você pode ver as relações entre componentes no Visual Designer e quaisquer outros formulários virtuais que você tenha configurado.
Figura 3: Mostrando formulários virtuais |
Configurando a tabela
- Arraste o nó Viagem > Tabelas > TRIP da janela Tempo de execução e solte-o no componente Tabela, no Visual Designer. Se a caixa de diálogo Escolher destino for exibida, verifique se table1 está selecionado e clique em OK.
-
Clique com o botão direito do mouse na Tabela e escolha Layout da tabela no menu pop-up.
A caixa de diálogo mostra os campos disponíveis no tripDataProvider que você acabou de criar e permite que você controle os campos a serem exibidos na tabela.
-
Use o botão < para remover TRIP.TRIPID, TRIP.PERSONID e TRIP.LASTUPDATED na lista selecionada à direita, como mostrado na figura abaixo.

Figura 4: Vinculando tabela a provedor de dados |
- Clique na guia Opções e altere o título para
Trips Summary.
-
Clique em OK.
O componente Tabela no Visual Designer agora deve ter a aparência da figura abaixo. Observe que, se as colunas não estiverem na ordem mostrada, você reorganizá-las reabrindo a caixa de diálogo Layout da tabela, clicando na guia Colunas e usando os botões para cima e para baixo.
Figura 5: Layout da tabela da Page1 |
-
Na janela Esboço, clique com o botão direito do mouse em tripRowSet no SessionBean1 e escolha Editar instrução SQL no menu pop-up.
O Editor de consultas SQL é aberto.
-
Na área de grade perto do centro da janela, clique com o botão direito do mouse na linha PERSONID e escolha Adicionar critérios de consulta, como mostrado na figura abaixo.
Figura 6: Adicionar critérios de consulta |
-
Na caixa de diálogo, defina a lista suspensa Comparação como =Equals, selecione o botão de opção Parâmetro e, em seguida, clique em OK.
Figura 7: Caixa de diálogo Adicionar critérios de consulta |
Os caracteres "=?" aparecem no campo Critérios de PERSONID e os critérios "WHERE TRAVEL.TRIP.PERSONID=?" aparecem no fim da instrução SQL no Painel SQL, na parte inferior do editor.
- Feche o Editor de SQL para tripRowSet.
Alterando os componentes de coluna
Você agora pode alterar o conteúdo da coluna para ser campos editáveis, preparando a adição da capacidade de inserir novas viagens no banco de dados. Ao fazê-lo, você tira proveito da natureza composta do componente Tabela aninhando dentro dele outros componentes.
-
Clique com o botão direito do mouse no componente Tabela e selecione Layout da tabela.
A caixa de diálogo Layout da tabela é aberta.
-
Na guia Colunas, selecione TRIP.DEPDATE na lista Selecionado à direita. Na área Detalhes da coluna, na parte inferior da caixa de diálogo, altere o Tipo de componente de Texto estático para Campo de texto, como mostrado na figura abaixo.
Figura 8: Alterando a aparência de uma coluna |
- Execute a mesma ação para TRIP.DEPCITY e TRIP.DESTCITY.
- Selecione TRIP.TRIPTYPEID na lista Selecionado e altere o Tipo de componente de Texto estático para Lista suspensa.
-
Clique em OK.
Observação: Se as colunas da tabela ficarem muito largas apó executar as etapas acima, você poderá redimensioná-las selecionando o primeiro componente em cada coluna e arrastando as alças de seleção.
-
Arraste o nó Viagem > Tabelas TRIPTYPE para a Lista suspensa no componente Tabela. Se a caixa de diálogo Escolher destino for exibida, verifique se dropDown1 está selecionado e clique em OK.
Esta ação cria o triptypeDataProvider.
Configurando o formulário virtual para a tabela
A seguir você cria um formulário virtual para os componentes de entrada na tabela. O formulário virtual garante que, quando uma alteração na lista suspensa personDD envia a página, os componentes de entrada não sejam colocados através de validação e conversão. Isto garante que a primeira página seja sempre exibida quando outro nome for selecionado na lista suspensa.
- No Visual Designer, use Ctrl-Clique na tabela para selecionar os três componentes Campo de texto nas três colunas que contêm campos de texto e o componente Lista suspensa na coluna TRIPTYPEID.
- Clique com o botão direito do mouse nos componentes selecionados e escolha Configurar formulários virtuais, no menu pop-up.
- Na caixa de diálogo Configurar formulários virtuais, certifique-se de que os três Campos de texto na Lista suspensa estejam listados no canto esquerdo superior da janela. Se não estiverem listados como mostrado na figura abaixo, feche a caixa de diálogo, torne a selecioná-los e tente novamente. Quando estiverem listados corretamente, clique em Novo.
-
Altere o nome do novo formulário virtual para save e a configuração Participar para Sim, como mostrado na figura abaixo, e, em seguida, clique em OK.
Figura 9: Configurando formulários virtuais para elementos de tabela |
Adicionando código de evento e inicialização
Você agora associa a Lista suspensa de personDD ao componente Tabela para possibilitar o seguinte comportamento: Quando o usuário seleciona uma pessoa na lista, as viagens dessa pessoa aparecerão na tabela.
- Clique duas vezes na Lista suspensa de personDD para criar um método de evento de mudança de valor para abrir o editor de Java neste método.
-
No método de evento de mudança de valor, observe a linha de comentário // TODO: substitua pelo seu código. Substitua esta linha pelo texto em negrito na Amostra de código 1 e, em seguida, pressione Ctrl-Shift para reformatar o código.
| Amostra de código 1: Manipulador de evento da lista suspensa |
public void personDD_processValueChange(ValueChangeEvent event) {
Object selectedPersonId = personDD.getSelected();
try {
personDataProvider.setCursorRow(
personDataProvider.findFirst("PERSON.PERSONID",
selectedPersonId));
getSessionBean1().getTripRowSet().setObject(1, selectedPersonId);
tripDataProvider.refresh();
form1.discardSubmittedValues("save");
} catch (Exception e) {
error("Não é possível alternar para a pessoa " + selectedPersonId);
log("Não é possível alternar para a pessoa " + selectedPersonId, e);
}
}
|
No fim da cláusula try a instrução form1.discardSubmittedValues("save") garante que sempre que o usuário selecionar uma nova pessoa na lista suspensa as informações da viagem atual mostradas na tabela são substituídas por novas informações relacionadas à pessoa escolhida. Lembre-se de que todos os elementos da interface do usuário na tabela que exibem as informações de viagem participam no formulário virtual denominado save. Observe ainda que o manipulador de evento não lançam exceções. Em vez disso, registra-os no arquivo server.log. O manipulador de evento também chama um método error que, no caso de um erro, exibe uma mensagem no componente Grupo de mensagens.
-
Efetue rolagem na fonte Java até o método prerender ou, se preferir, pressione Ctrl-F para abrir a caixa de diálogo Localizar e procurar prerender. Adicione o seguinte código em negrito ao método.
| Amostra de código 2: Método prerender |
public void prerender() {
if ( personDD.getSelected() == null ) {
Object firstPersonId = null;
try {
personDataProvider.cursorFirst();
firstPersonId = personDataProvider.getValue("PERSON.PERSONID");
personDD.setSelected(firstPersonId);
getSessionBean1().getTripRowSet().setObject(
1, firstPersonId);
tripDataProvider.refresh();
} catch (Exception e) {
error("Não é possível alternar para a pessoa " +
firstPersonId);
log("Não é possível alternar para a pessoa " +
firstPersonId, e);
}
}
}
|
- Clique com o botão direito do mouse no editor de Java e escolha Reformatar código para que o código se alinhe corretamente.
Testando o aplicativo - Parte 1
Construa, implante e execute o projeto clicando no botão Executar projeto principal
na barra de ferramentas principal. Quando a página tiver sido carregada no navegador da Web, a lista suspensa será preenchida com nomes, e a tabela será preenchida com dados. Quando você selecionar um nome diferente na lista, as viagens associadas a esse nome aparecerão na tabela.
Figura 10: Aplicativos implantados, Teste 1 |
Adicionando um recurso de inserção
Nesta seção, você adiciona um recurso que torna possível adicionar uma viagem à tabela inserindo um conjunto de linhas no banco de dados. Primeiro, você fornece os componentes Mensagem para os campos de texto da Tabela. Esses componentes garantem que o usuário veja erros ao inserir informações corretas. Em seguida você adiciona um botão à página que permite que os usuários adicionem novas linhas ao buffer de dados.
- Clique no botão Design para exibir Page1 no Visual Designer.
- Da seção Básico da Paleta, arraste um componente Mensagem para o primeiro Campo de texto em cada uma das três colunas da Tabela.
- Selecione o primeiro componente Mensagem. Na janela Propriedades, efetue rolagem até a propriedade
for e escolha textField1 na lista suspensa. Quando a mensagem estiver associada corretamente ao Campo de texto, o texto da mensagem será alterado para exibir a associação, como mostrado na Figura 11.
-
Defina a propriedade
for do segundo componente Mensagem como textField2.
-
Defina a propriedade for do terceiro componente Mensagem como textField3.
Figura 11: Associando componentes Mensagem a campos de texto |
- Da seção Básico da Paleta, arraste um componente Botão para Page1 e coloque-o acima do componente Tabela ao lado da parte superior da segunda coluna, como mostrado na Figura 12.
- Altere o texto do
Botão para Add Trip.
- Na janela Propriedades, altere a propriedade
id do botão para add.
- No Visual Designer, clique duas vezes no botão para abrir o editor de Java com o ponto de inserção no método de manipulador de evento
add_action para o botão.
Adicione o seguinte código mostrado em negrito ao método de manipulador de evento do botão:.
| Amostra de código 3: Adicionar código de ação de viagem |
public String add_action() {
try {
RowKey rk = tripDataProvider.appendRow();
tripDataProvider.refresh();
tripDataProvider.setValue("TRIP.TRIPID", new Integer(0));
tripDataProvider.setValue("TRIP.PERSONID", personDD.getSelected());
tripDataProvider.setValue("TRIP.TRIPTYPEID", new Integer(1));
} catch (Exception ex) {
log("Descrição do erro", ex);
error(ex.getMessage());
}
return null;
}
|
-
Clique com o botão direito do mouse no editor de Java e escolha Corrigir importações para resolver o erro de RowKey não localizado.
O IDE adiciona o seguinte pacote ao bloco Page1.java de instruções de importação:
import com.sun.data.provider.RowKey;
Testando o aplicativo - Parte 2
Construa, implante e execute o projeto clicando no botão Executar projeto principal. A página é carregada no navegador da Web e o botão Adicionar viagem aparece, como mostrado na figura abaixo. Toda vez que você clicar no botão, uma nova linha vazia será anexada à parte inferior da tabela. Você pode editar as informações na linha, mas, por ainda não forneceu um mecanismo para salvar o conjunto de linhas, as alterações serão perdidas quando você escolher um nome diferente na lista suspensa.
Figura 12: Aplicativos implantados, Teste 2 |
Modificando a página para salvar conjuntos de linhas
Nesta seção, você adiciona um segundo conjunto de linhas ao projeto. O conjunto de linhas é usado para calcular o ID máximo da viagem que foi usado.
- Clique em Design na janela do editor para voltar para Page1 no Visual Designer.
-
Da janela Tempo de execução, selecione a tabela Bancos de dados> Viagem >Tabelas > TRIP e arraste-a para o nó SessionBean1 da janela Esboço.
Figura 13: Arrastando a tabela TRIP para SessionBean1 |
Esta ação abre a caixa de diálogo Adicionar novo provedor de dados.
-
Clique no botão de opção Criar SessionBean1/tripRowSet1, altere o nome do provedor de dados para maxTripRowSet e clique em OK.
Observação: Conjuntos de linhas aparecem duas vezes na caixa de diálogo. Este é um problema conhecido e deve ser ignorado. Não afeta o aplicativo neste tutorial.
Figura 14: Adicionando um novo provedor de dados a SessionBean1 |
Esta ação cria maxTripDataProvider e maxTripRowSet em SessionBean1.
- Na janela Esboço, clique duas vezes em SessionBean1 > maxTripRowSet para abrir o editor de consulta. Clique no painel Código-fonte (terceiro a partir do alto). Exclua a consulta SQL existente que encontrar e insira a seguinte consulta:
SELECT MAX(TRAVEL.TRIP.TRIPID)+1 AS MAXTRIPID FROM TRAVEL.TRIP
Você usará o valor MAXTRIPID no manipulador de ação para o botão Salvar, que você adicionará a seguir.
Feche o Editor de consultas.
Observação: Esta consulta não é suportada pelo editor gráfico do Editor de consultas. Se for exibida uma caixa de diálogo de alerta apontando para um erro léxico, pode ignorá-la com segurança clicando em Continuar.
Salvando alterações de usuários no banco de dados
- Solte um componente Botão acima do componente Tabela ao lado do alto da primeira coluna. Para posicioná-lo, consulte o botão Salvar alterações na Figura 15.
- Altere o texto do botão de
Botão para Save Changes.
- Na janela Propriedades, altere a propriedade
id para save.
- Clique com o botão direito do mouse no botão Salvar alterações e escolha Configurar formulários virtuais, no menu pop-up.
- Na caixa de diálogo Configurar formulários virtuais, certifique-se de que
save seja exibido na lista no canto esquerdo superior, para que as alterações nesta janela se apliquem ao botão Salvar alterações. Em seguida selecione o formulário virtual save, altere o valor Enviar para Sim e clique em OK.
- No Visual Designer, clique duas vezes no botão Salvar alterações para abrir o editor de Java. No editor de Java, o ponto de inserção localiza-se no método de manipulador de evento
save_action para o botão.
-
Adicione o seguinte código mostrado em negrito ao método de manipulador de evento do botão:.
| Amostra de código 4: Código de salvar ação |
public String save_action() {
try {
// Get the next key, using result of query on MaxTrip data provider
CachedRowSetDataProvider maxTrip =
getSessionBean1().getMaxTripDataProvider();
maxTrip.refresh();
maxTrip.cursorFirst();
int newTripId = ((Integer) maxTrip.getValue("MAXTRIPID")).intValue();
// Navigate through rows with data provider
if (tripDataProvider.getRowCount() > 0) {
tripDataProvider.cursorFirst();
do {
if (tripDataProvider.getValue("TRIP.TRIPID").equals
(new Integer(0))) {
tripDataProvider.setValue("TRIP.TRIPID",
new Integer(newTripId));
newTripId++;
}
} while (tripDataProvider.cursorNext());
};
tripDataProvider.commitChanges();
} catch (Exception ex) {
log("Descrição do erro", ex);
error("Error :"+ex.getMessage());
}
return null;
}
|
Testando o aplicativo - Parte 3
Construa, implante e execute o projeto clicando no botão Executar projeto principal. O aplicativo deve funcionar da seguinte forma:
- Você pode adicionar uma viagem e salvá-la. A viagem aparecerá em seguida na tabela e será preservada. Se escolher uma pessoa diferente e em seguida retornar a esta pessoa, você verá a viagem adicionada.
- Você pode editar informações de viagem existentes e salvar alterações.
- Se inserir algo que não seja uma data no campo Data, o aplicativo exibirá uma mensagem de erro.
- Você pode clicar em Adicionar viagem mais de uma vez antes de salvar, como uma forma fácil de adicionar múltiplas linhas de uma vez. Quaisquer linhas que estejam vazias quando você salvar alterações serão salvas como linhas vazias.
- Se você alternar para uma pessoa diferente antes de clicar em Salvar alterações, todas as atualizações serão perdidas.
- Se modificar alguns valores e em seguida clicar em um dos cabeçlhos de coluna para classificar por essa coluna, o componente Tabela irá se lembrar das alterações pendentes, que poderão então ser salvas.
Adicionando um recurso de exclusão
Nesta seção, você adiciona um recurso de exclusão à tabela. Usando este recurso, os usuários poderão excluir uma viagem removendo uma linha do banco de dados. Como implementada neste tutorial, a ação do botão Excluir é imediata e não requer o botão Salvar alterações para excluir a linha do banco de dados. De fato, uma vez que o manipulador de evento do botão Excluir usa o método commitChanges, ele também salva todas as alterações pendentes, assim como o faz o botão Salvar alterações.
Adicionando um botão Excluir a cada linha
-
Clique em Design na janela do editor para voltar para Page1 no Visual Designer, em seguida clique com o botão direito do mouse na tabela Resumo de viagens e escolha Layout da tabela no menu pop-up.
A caixa de diálogo Layout da tabela é aberta.
- Se necessário, clique na guia Colunas e, em seguida, clique em Novo para adicionar uma nova coluna à tabela.
-
Com o nome da nova coluna selecionado na lista Selecionado, faça as seguintes alterações na área Detalhes da coluna:
- Texto de cabeçalho e rodapé: Exclua qualquer texto padrão dos campos de texto de Cabeçalho e Rodapé e deixe-os em branco.
- Tipo de componente:
Botão
- Expressão de valor:
Excluir
- Largura: Exclua qualquer valor padrão e deixe em branco.
- Alinhamento horizontal:
Centro
- Alinhamento vertical:
Meio
- Clique em OK.
- Selecione o primeiro botão Excluir na tabela e, na janela Propriedades, defina a propriedade
id como delete.
Adicionando código de evento
- Clique duas vezes no primeiro botão na coluna Excluir para exibir o editor de Java no método manipulador de evento
delete_action.
-
Adicione o seguinte código mostrado em negrito ao método de manipulador de evento do botão:.
| Amostra de código 5: Excluir código de ação |
public String delete_action() {
form1.discardSubmittedValues("save");
try {
RowKey rk = tableRowGroup1.getRowKey();
if (rk != null) {
tripDataProvider.removeRow(rk);
tripDataProvider.commitChanges();
tripDataProvider.refresh();}
} catch (Exception ex) {
log("Descrição do erro", ex);
error(ex.getMessage());
}
return null;
}
|
Testando o aplicativo - Parte 4
Construa, implante e execute o projeto clicando no botão Executar projeto principal. A figura abaixo mostra o aplicativo em execução.
Quando implantado, você pode excluir uma linha da tabela para removê-la do banco de dados. A ação de exclusão também irá confirmar todas as alterações pendentes no banco de dados.
Figura 15: Testando o aplicativo - Parte 4 |
Adicionando um recurso de reversão
Agora adicione um recurso de conversão à página. Usando este recurso, os usuários poderão abandonar as edições e reverter para os dados salvos anteriormente. Observe que o recurso de reversão não recuperará linhas salvas ou excluídas; os botões Salvar alterações e Excluir confirmam alterações no banco de dados.
Adicionando um botão de reversão de alterações
- Clique em Design na janela do editor para voltar para Page1 no Visual Designer e, em seguida, arraste um componente Botão da Paleta para Page1. Coloque o novo botão à direita do botão Adicionar viagem.
- Altere o texto do botão para
Revert Changes.
- Na janela Propriedades, altere a propriedade
id do componente Botão para revert.
- Clique duas vezes no botão Reverter alterações para abrir o editor de Java no método
revert_action.
-
Adicione o código em negrito na seguinte amostra de código ao método revert_action
| Amostra de código 6: Reverter código de ação |
public String revert_action() {
form1.discardSubmittedValues("save");
try {
tripDataProvider.refresh();
} catch (Exception ex) {
log("Descrição do erro", ex);
error(ex.getMessage());
}
return null;
}
|
Configurando um formulário virtual
O aplicativo como configurado atualmente exibe algum comportamento indesejável. Por exemplo, se o usuário inserir uma data inválida na primeira coluna de uma linha existente e em seguida clicar no botão Adicionar, a operação irá falhar, porque um erro de conversão na data rejeita o envio do formulário. O comportamento desejado, quando o usuário clica no botão Adicionar, é processar os campos de entrada na tabela, de modo que uma nova linha possa ser adicionada independentemente de edições pendentes nas linhas existentes.
Da mesma forma, quando o usuário clica no botão Reverter, a intenção é abandonar todas as edições, de modo que as edições também deveriam ser ignoradas neste caso. No entanto, quando o usuário clica no botão Excluir, ele ainda pode desejar que a validação ocorra, porque este botão não apenas exclui uma linha como também envia quaisquer alterações pendentes, requerendo que os campos de entrada sejam processados primeiro.
Para garantir que os campos de entrada na página sejam processados (inclusive verificações de validação) quando o usuário clica no botão Adicionar ou Reveter, você fará estes botões enviarem um formulário virtual. Neste caso, você pode fazer com que os dois botões enviem o mesmo formulário virtual, porque precisam enviar um formulário virtual sem participantes.
-
No Visual Designer, efetue Ctrl-Clique para selecionar os botões Adicionar e Reverter e, em seguida, clique com o botão direito do mouse e escolha Configurar formulários virtuais, no menu pop-up.
Na janela Configurar formulários virtuais, add e revert devem aparecer no canto esquerdo superior para mostrar que estes botões foram selecionados.
-
Na janela Configurar formulários virtuais, clique em Novo, nomeie o novo formulário virtual add/revert e defina Enviar como Sim. Clique em OK.
Figura 16: Configurando formulários virtuais para os botões Adicionar, Reverter e Excluir |
Testando o aplicativo - Parte 5
Construa, implante e execute o projeto clicando no botão Executar projeto principal. A Figura 17 abaixo mostra o aplicativo em execução.
Quando implantado, você poderá executar as seguintes funções:
Figura 17: Testando o aplicativo - Parte 5 |
Resumo
Neste tutorial, você associou um componente Tabela, componentes Campo de texto e componentes Lista suspensa com informações em um banco de dados. Você definiu propriedades em componentes, adicionou prerender e código de evento para inserir, atualizar e excluir dados do banco de dados e reverter alterações inseridas no formulário. Você usou formulários virtuais, que permitiram que o aplicativo usasse uma única página e permitiu que dados enviados se desviassem de verificações de validação ao adicionar uma linha ou reverter alterações.
Consulte também:
Esta página foi modificada pela última vez em 4 de abril de 2007