>> Mais documentação do Visual Web Pack

Desenvolvendo um aplicativo da Web

Conteúdo -  Criando um projeto -  Desenhando uma página -  Adicionando alguns comportamentos -  Executando o aplicativo -  Substituindo o campo de texto por uma lista suspensa -  Vinculando a lista suspensa à tabela de banco de dados -  Adicionando alguns comportamentos -  Executando o aplicativo -  Fazendo mais

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 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 um projeto

1. No menu principal, escolha Arquivo > Novo arquivo.
2. No assistente para Novo projeto, selecione Web na lista Categorias e selecione Visual Web Application na lista Projetos.
3. Clique em Próximo.

4. Nomeie o projeto de OláWeb e clique em Finalizar.

   Seu projeto aparece com a página inicial (Page1) aberta no Visual Designer.

Desenhando uma página

Para começar, você desenha uma página como a ilustrada na figura abaixo.

Figura 1: Design da Page1

1. Digite Olá Web na caixa de texto da propriedade Title na janela Propriedades como mostrado na figura abaixo.

   O valor da propriedade Title é exibido na barra de título do navegador quando o navegador acessa a página.

   Figura 2: Propriedades da página na janela Propriedades

   
   Dica: Para acessar as propriedades de um componente na janela Propriedades, selecione o componente no Visual Designer ou na janela Esboço. Para acessar as propriedades da página, clique em uma parte em branco da página.

2. Se o nó Básico da janela Paleta não estiver expandido, expanda-o.

   Todos os componentes usados neste exemplo estão na seção Básico da Paleta.

   Se a janela Paleta não estiver visível, escolha Janela > Paleta para que ela seja exibida.

3. Arraste um componente Rótulo da seção Básico da Paleta para o lado esquerdo da página no Visual Designer, digite Nome: e pressione Enter.

   Observe que o componente se alinha à grade na página. Observe também que o valor da propriedade text na janela Propriedades é Nome:.

   Dica: Você pode passar o componente para o modo de edição clicando com o botão direito do mouse no componente e escolhendo Editar texto no menu pop-up.
4. Arraste um componente Campo de texto da seção Básico da Paleta para o Visual Designer, digite Inserir seu nome e pressione Enter.
5. Na janela Propriedades, altere a propriedade id do Campo de texto de textField1 para nameField.

6. Selecione o componente Rótulo e pressione Control+Shift e arraste do componente Rótulo para o componente Campo de texto.

   Observe que a propriedade for do componente Rótulo está definida agora como nameField.
7. Arraste o componente Botão à direita do componente Campo de texto, digite Diga olá e pressione Enter.
8. Na janela Propriedades, altere a propriedade id do componente Botão de button1 para helloButton.
9. Arraste um componente Texto estático para um lugar abaixo do componente Rótulo.
10. Altere a propriedade id do componente Texto estático de staticText1 para helloText.

11. Arraste um componente Grupo de mensagens para fora da página, por exemplo, embaixo do componente Texto estático.

    A adição de um componente Grupo de mensagens, que exibe erros em tempo de execução entre outros tipos de mensagens, é útil para diagnosticar erros de programação.

12. Na barra de ferramentas de edição, clique em JSP para passar para o Editor de fontes do JavaServer Pages (JSP).

    Examine o código e observe como foram salvas as alterações feitas na janela Propriedades. Quando um página é exibida pela primeira vez no navegador, a página aparece exatamente conforme indicado pelas marcas na página JSP. Se o seu Bean de página tiver códigos que alteram os valores da propriedade, tais alterações aparecem somente em solicitações em que a página é enviada e subseqüentemente reexibida.

Adicionando alguns comportamentos

1. Na barra de ferramentas Edição, clique em Design para alternar para o Visual Designer.

2. Clique duas vezes no componente Botão.

   A área de edição alterna para o editor de Java e mostra o Bean de página da Page1. O manipulador de eventos do botão, helloButton_action, foi adicionado ao Bean de página.

3. Substitua o corpo do método helloButton_action pelas linhas de código abaixo (mostradas em negrito). Em seguida, pressione Ctrl-Shift-F para reformatar o código.

   Amostra de código 1: código helloButton_action()

   public String helloButton_action() { String name = (String)nameField.getText(); helloText.setText("Olá, " + name + "!"); return null;

   
   

   A primeira linha em negrito obtém os valores da propriedade text do componente Campo de texto nameField usando o método getText. Este valor é um objeto de tipo Object, que precisa ser uma seqüência, de modo que é convertido em um objeto String. O objeto é, então, atribuído à variável name.

   A segunda linha em negrito define o valor da propriedade text do componente Texto estático helloText. Este valor contém o nome que o usuário inseriu no componente Campo de texto nameField. Por exemplo, se o usuário inserir Fred, esta linha de código define a propriedade text do componente Texto estático como Olá, Fred!

Executando o aplicativo

1. Certifique-se de que o código Java não contenha erros no editor de Java.

   Os erros são indicados por sublinhados ou caixas em vermelho no lado esquerdo do código. Seu projeto não será construído se houver erros no código.

   Dica: Mantenha o cursor sobre a caixa vermelha no lado esquerdo do código para ver a descrição do erro.

2. Clique no botão Executar projeto principal .

   O IDE salva seus arquivos e constrói seu projeto. A janela Saída de construção aparece na parte inferior da tela e exibe as mensagens de status relevantes. Depois que o seu aplicativo tiver sido construído e implantado, o IDE inicia o navegador da Web (se ainda não estiver em execução) e o seu aplicativo da Web é exibido.

3. Digite o seu nome e clique em Diga olá.

   O navegador envia o formulário ao servidor da Web, que chama o seu aplicativo da Web. O aplicativo executa o método de ação do botão, atualiza os elementos da página, renderiza novamente a mesma página com os dados alterados e a envia de volta ao navegador da Web. A figura abaixo ilustra o resultado se o nome enviado for Gus Townsend.

   Figure 3: Olá Web, com resultado

Substituindo o campo de texto por uma lista suspensa

O restante deste tutorial mostra como usar o componente Lista suspensa, em vez do Campo de texto, para receber a entrada do usuário, como mostrado na figura abaixo. Este componente Lista suspensa obtém sua lista de opções da tabela de banco de dados incorporada PERSON.

Figure 4: Olá Web, versão final

1. Na barra de ferramentas Edição, clique em Design para alternar para o Visual Designer.
2. Na janela Visual Designer, clique com o botão direito do mouse no componente Campo de texto nameField e escolha Excluir no menu pop-up.

3. Arraste um componente Lista suspensa da seção Básico da Paleta para a sua página no Visual Designer. Mova o componente para a área onde estava o componente Campo de texto.

   Observe que, como mostrado na figura abaixo, a janela Esboço mostra um componente dropDown1 e um objeto dropDown1DefaultOptions. A propriedade items do componente Lista suspensa identifica o objeto que contém as opções da lista. Quando um componente Lista suspensa é adicionado, o IDE cria o objeto de opções padrão (dropDown1DefaultOptions) e define este objeto como o valor da propriedade items do componente Lista suspensa. Somente o componente Lista suspensa fica visível no Visual Designer. O objeto de opções padrão simplesmente fornece as opções que aparecem na lista. Mais adiante neste tutorial, você modifica o componente Lista suspensa para obter as opções de diferentes fontes.

   Figura 5: Componentes na janela Esboço

4. Na janela Propriedades, altere o id do componente para nameDropDown.

5. Selecione o componente Rótulo e pressione Control+Shift e arraste do componente Rótulo para o componente Lista suspensa.

   Observe que a propriedade for do componente Rótulo está definida agora como nameDropDown.

Vinculando a lista suspensa à tabela de banco de dados

1. 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 para obter informações sobre como disponibilizar o banco de dados para o IDE.

2. Expanda o nó Tabelas.

   Em Tabelas, você vê os nós de cada tabela no banco de dados, como ALUGUELDECARRO e VÔO. A figura abaixo mostra a janela Tempo de execução com o nó Tabelas expandido.

   Figura 6: Janela Tempo de execução

3. Arraste PESSOA da janela Tempo de execução e solte-o na Lista suspensa.

   A exibição na lista se altera de item1 para abc, indicando que a lista está exibindo dados vinculados e que os dados exibidos são do tipo String.

   O IDE adiciona um componente personDataProvider não visual na tabela do banco de dados. O componente personDataProvider é exibido na janela Esboço. O IDE adiciona também uma propriedade personRowSet ao SessionBean1.

4. Clique com o botão direito do mouse em Lista suspensa e escolha Vincular aos dados no menu pop-up. A caixa de diálogo Vincular aos dados é exibida, como mostrado na figura abaixo.

   Figura 7: Vinculando dados à lista suspensa

   
   Ao vincular dados a um componente Lista suspensa, você deve especificar o que será exibido na lista (o Campo de exibição) e que valores serão usados no programa subjacente (o Campo de valor). Normalmente, opta-se por exibir valores significativos da tabela de banco de dados, como o nome da pessoa, mas você quer usar um identificador exclusivo no programa subjacente, como o ID da pessoa. Com este aplicativo, no entanto, você opta por vincular os campos Valor e Exibição à mesma coluna de banco de dados, a coluna PERSON.NAME, conforme descrito nas duas etapas seguintes.
5. Defina como PERSON.NAME o campo Valor da caixa de diálogo.
6. Deixe o campo Exibição definido como PERSON.NAME.
7. Clique em OK.

Adicionando alguns comportamentos

1. No Visual Designer, clique duas vezes no componente Botão.

   A área de edição alterna para o editor de Java e se move para o método helloButton_action.

2. Substitua o corpo do método helloButton_action pelas linhas de código abaixo (mostradas em negrito).

   Amostra de código 2: código de substituição helloButton_action

   public String helloButton_action() { String name = (String)nameDropDown.getSelected(); String splitnames[] = name.split(","); helloText.setText("Olá, " + splitnames[1] + "!"); return null;

   
   

   A primeira linha usa o método getSelected para obter o valor atual do componente Lista suspensa, que corresponde ao nome atualmente selecionado na lista.

   Devido ao fato de os dados serem armazenados como sobrenome, nome, a seqüência deve ser modificada antes de ser exibida. Caso contrário, o aplicativo exibirá "Olá, sobrenome, nome!" A segunda linha usa o método split para dividir a seqüência dentro de uma matriz, com a vírgula como delimitadora. O primeiro item da matriz (na posição 0) contém o sobrenome e a posição 1 contém o nome.

   Na terceira linha, a propriedade text do componente Texto estático é definida como um valor que inclui o nome.

   Observação: Este método supõe que todos os valores desta tabela estão no formato sobrenome, nome. E não manipula com determinação as seqüências que não seguem este formato.

3. Adicione o seguinte código ao método prerender. Este código define o primeiro item da lista como a seleção padrão.

   Amostra de código 3: código do método prerender

   public void prerender() { // Se não houver seleção, definir a seleção padrão if (nameDropDown.getSelected() == null) { personDataProvider.cursorFirst(); nameDropDown.setSelected ((String)personDataProvider.getValue("person.name")); } }

Executando o aplicativo

1. Clique no botão Executar projeto principal.

   O IDE constrói e implanta o aplicativo e exibe a página no navegador da Web.

2. Selecione o nome da lista e clique em Diga olá.

   O navegador envia ao servidor o valor selecionado do componente Lista suspensa e o servidor executa o método helloButton_action do botão.

Fazendo mais

Experimente. Um componente Caixa de listagem é semelhante a um componente Lista suspensa. Tente substituir um componente Lista suspensa por um componente Caixa de listagem. Neste aplicativo, a propriedade multiple do componente Caixa de listagem não deve ser marcada porque é possível selecionar apenas um item de cada vez. Lembre-se de vincular a Caixa de listagem à tabela do banco de dados e de alterar o método helloButton_action para obter o valor selecionado do componente Caixa de listagem.

Experimente. Usando etapas semelhas às descritas neste tutorial, tente construir um aplicativo da Web com um componente Lista suspensa que mostre todos os valores de DESCRIPTION na tabela TRIPTYPE. Faça a página exibir o TRIPTYPEID do tipo de viagem quando o usuário clicar no botão Exibir id do tipo. Para isso, você deve vincular o campo Exibição do componente Lista suspensa ao TRIPTYPE.DESCRIPTION e o campo Valor ao TRIPTYPE.TRIPTYPEID.

Resumo

1. Criar a página.
2. Determinar o lugar dos componentes, como o componente Campo de texto e o componente Botão, na página.
3. Editar as propriedades dos componentes para alterar a aparência e o comportamento destes.
4. Vincular os componentes à conexão de dados, quando apropriado.
5. Editar o código-fonte Java para controlar o comportamento no lado do cliente, como a manipulação de eventos.
6. Construir e executar o aplicativo.

Consulte também:

• Guia de introdução do NetBeans Visual Web Pack 5.5
• Usando componentes de vinculação de dados para acessar um banco de dados