>> Mais documentação do Visual Web Pack

Guia de introdução do NetBeans Visual Web Pack

Maio de 2007 [Número da revisão: V5.5.1-1]

Este tutorial lhe oferece um tour rapidíssimo do NetBeans Visual Web Pack. O tutorial mostra-lhe como usar os recursos do Visual Web Pack para realizar as fases típicas do desenvolvimento de um aplicativo da Web. O tutorial é projetado de forma que você não precise seguir uma ordem específica. Talvez você queira passar rapidamente por ele e depois retornar a cada seção quando houver tempo. Se preferir um tutorial passo a passo, talvez queira tentar primeiro o Desenvolvendo um aplicativo da Web.

Conteúdo -  Software necessário para este tutorial -  Iniciando um projeto -  Criando páginas da Web -  Adicionando componentes a uma página da Web -  Obtendo Ajuda -  Construindo e testando um aplicativo da Web -  Conectando páginas da Web e manipulando ações do usuário -  Editando código Java -  Manipulando entradas do usuário -  Armazenando e passando dados -  Conectando a bancos de dados -  Depurando um aplicativo da Web

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 para algumas seções
Biblioteca de componentes Blueprints Ajax	Não é necessário

* Na data que este tutorial foi publicado, somente o servidor de aplicativos Sun Java System oferecia suporte ao Java EE 5.

Este tutorial foi adaptado para ser usado com o Sun Java System Application Server 9.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.

Iniciando um projeto

Um projeto é o equivalente ao ambiente de trabalho de um aplicativo da Web. Quando você cria um projeto do Visual Web Application e possui o Sun Java System Application Server PE 9.0 atualização 1 especificado ou posterior como um servidor de aplicativos no NetBeans, o IDE pode criar um aplicativo da Web baseado no Java EE 5 que usa os componentes JavaServer Faces 1.2. Por padrão, o aplicativo da Web é criado em uma estrutura de diretórios que esteja conforme com as convenções do projeto Java BluePrints para aplicativos da Web.

Crie um projeto do Visual Web Application, escolhendo Arquivo > Novo projeto no menu principal, selecionando a categoria Web e o tipo de projeto do Visual Web Application.

1. Inicie o IDE usando a etapa apropriada da lista seguinte:

   • Windows. Clique duas vezes no ícone da área de trabalho do NetBeans.
   • Mac. Clique duas vezes no ícone do NetBeans na pasta de instalação.
   • Sistema operacional Solaris (SPARC e x86 Platform Editions) e Linux. Vá até o diretório bin de sua instalação do NetBeans, digite ./netbeans e pressione Enter.
2. Crie um projeto escolhendo Arquivo > Novo projeto no menu principal. No painel de categorias, selecione Web, e no painel Projetos, selecione Visual Web Application.
3. Clique em Próximo.
4. Insira GettingStarted como o nome do projeto.
5. Escolha um servidor e uma versão do Java EE. Por exemplo, você pode escolher o servidor de aplicativos Sun Java System como o servidor e Java EE 5 como a versão do Java EE.

6. Clique em Finalizar para criar o novo projeto no local padrão.

   O IDE cria o diretório do projeto sob o seu diretório inicial e lhe dá o mesmo nome que o do projeto.

7. Explore a janela Projetos. Como mostrado na figura seguinte, a janela Projetos agrupa os itens por categoria. Expanda cada um dos nós para ver que tipo existe em cada categoria.

   Figura 1: Janela Projetos

8. O nó Page1.jsp fica abaixo do nó Páginas da Web. O IDE cria esta página por padrão e a transforma na página inicial. O símbolo de seta  ao lado do nó identifica a página como a inicial. Se quiser usar uma página diferente como a inicial, clique com o botão direito do mouse no nó dessa página e escolha Definir como página inicial no menu pop-up.

9. Clique na guia Arquivos, ou escolha Janela > Arquivos no menu principal, para trazer a janela Arquivos para frente. Esta janela organiza os itens pelo armazenamento físico. Expanda os nós para ver a estrutura. Observe o símbolo  que aparece ao lado do nó ApplicationBean1.java e de alguns outros nós abaixo dele, tal como Page1.java. Esse emblema indica que o arquivo precisa ser compilado. O IDE compila os arquivos automaticamente quando você constrói o projeto.

   Figura 2: Janela Arquivos

10. Na Figura 2, observe o nó WebApplication1 > src > java > gettingstarted > Page1.java. Esta classe Java é o Bean de apoio do arquivo Page1.jsp. Sempre que você adiciona uma página ao projeto, o IDE cria um arquivo .jsp e um arquivo .java da página. Aprenda mais sobre os arquivos .jsp e .java na próxima seção.

Para obter mais informações

• No menu principal, escolha Ajuda > Conteúdo da Ajuda para abrir o arquivo da ajuda. No painel Conteúdo, à esquerda, selecione Visual Web Pack > Começando com projetos do Visual Web Application > Sobre os projetos do Visual Web Application.

Criando páginas da Web

Com os aplicativos do Visual Web, use a tecnologia de páginas JavaServer (JSP) e Beans de página (também conhecidos como Beans de apoio) em vez de páginas HTML. A página JSP é um modelo a partir do qual o servidor gera a resposta HTML a ser exibida no navegador (o cliente). O Bean de página contém a lógica que o servidor executa ao gerar a resposta HTML e depois que um usuário envia a página.

Quando você adiciona uma página da Web em um aplicativo do Visual Web, o IDE cria um arquivo JSP e um arquivo de origem Java para você. Você usa na maior parte do tempo o Visual Designer e a janela Propriedades para desenvolver uma página da Web. O IDE modifica o código JSP e o código Java para implementar o que você criar. A maior parte do trabalho pode ser feita no Visual Designer e na janela Propriedades.

Observação: As páginas JSP que o IDE gera são documentos JSP. Um documento JSP é um documento XML e, portanto, deve ser bem formado. Enquanto a maioria dos elementos JSP estão em conformidade com a sintaxe XML, existem alguns elementos que não estão em conformidade com a sintaxe XML, tais como comentários, declarações, diretivas, expressões e scriptlets. Consulte a Referência de sintaxe de páginas JavaServer para obter informações sobre a sintaxe de documentos JSP.

1. Na janela Projetos, clique com o botão direito do mouse no nó Páginas da Web e escolha Novo > Página, conforme mostrado na figura seguinte.

   Figura 3: Clicando com o botão direito do mouse no nó Páginas da Web

2. Aceite o nome padrão Page2 e clique em Finalizar. O IDE abre a Page2 no Visual Designer, que fica na área de edição, conforme mostrado na figura seguinte.

   Figura 4: Visual Designer

3. Clique no botão Java na barra de ferramentas de edição para ver o código-fonte do Bean de página, conforme mostrado na figura seguinte. Quando a área de edição mostra o código-fonte Java, a janela Navegador é aberta. Esta janela lista todos os campos e métodos de membro. Observe que o código-fonte da página possui métodos para acessar o Bean de aplicativo, o Bean de sessão e o Bean de solicitação. Consulte a seção Armazenando e passando dados neste tutorial para obter uma explicação sobre esses tipos de Beans.

   Figura 5: Código-fonte Java do Bean de página

4. O código-fonte também possui métodos que são chamados durante certos eventos do ciclo de vida entre a hora em que a página é solicitada e a hora em que a renderização da página é concluída.

   Dica: Clicar duas vezes em um membro na janela Navegador abre o editor de código-fonte e posiciona-o na declaração desse membro. Você também pode clicar na janela Navegador e começar a digitar os primeiros caracteres de um nome de membro para abrir uma caixa de diálogo Pesquisa rápida. Continue digitando até que o IDE realce a entrada desejada na lista, conforme mostrado na figura a seguir. Você pode pressionar Enter para abrir o editor do código-fonte e posicioná-lo na declaração do membro correspondente.

   Figura 6: Pesquisa rápida na janela Navegador

5. Clique no botão JSP na barra de ferramentas de edição para ver o código JSP da página, conforme mostrado na figura seguinte. Observe como a página JSP usa a sintaxe de documento JSP.

   Figura 7: Exibição JSP

6. Clicar no botão Design na barra de ferramentas de edição alterna para o Visual Designer e exibe a representação da página na janela Esboço. Se você abrir os nós sob o nó Page2, poderá ver os nós mostrados na figura a seguir. Observe como as marcas no arquivo JSP são representadas como nós na janela Esboço.

   Figura 8: Janela Esboço

Para obter mais informações

• No menu principal, escolha Ajuda > Conteúdo da Ajuda para abrir o arquivo da ajuda. No painel Conteúdo, à esquerda, selecione Visual Web Pack > Adicionando componentes a páginas > Sobre as páginas.
• Tecnologia de páginas JavaServer - Documentação

Adicionando componentes a uma página da Web

Para criar uma página da Web, arraste os componentes da janela Paleta e solte-os na página da Web no Visual Designer. A figura seguinte mostra a Page2 com os componentes Botão, Campo de texto, Mensagem, Lista suspensa e Grupo de botões de opção. Todos esses componentes estão disponíveis na seção Básico da Paleta. Esses componentes foram personalizados pela alteração de suas propriedades. Você aprenderá sobre as propriedades posteriormente nesta seção.

Figura 9: Componentes no Visual Designer

Observação: Os componentes que estão disponíveis na Paleta são componentes JavaServer Faces (JSF) que foram aprimorados de acordo com aAPI de tempo de design para disponibilizar suas propriedades para o Visual Designer e a janela Propriedades. Você pode usar outros componentes nos aplicativos da Web criados com o IDE, mas não será possível usar recursos interativos de tempo de design do IDE nesses componentes, a não ser que eles tenham sido personalizados de acordo com os requisitos da API de tempo de design. Se a versão do EE estiver definida como Java EE 5, a Paleta oferecerá componentes JSF 1.2. Se, quando criar o projeto, você definir a versão do Java EE como 1.3 ou 1.4, a Paleta oferecerá os componentes do JSF 1.1.

A maioria dos componentes que você usa estão nas seções Básico, Layout e Composto da janela Paleta. As tabelas seguintes mostram alguns dos componentes mais comumente usados agrupados de acordo com a funcionalidade.

Tabela 1: Componentes de entrada

Componente	Descrição	Seção da Paleta
Campo de texto	Um campo de entrada de uma única linha de texto.	Básico
Área de texto	Um campo de entrada para várias linhas de texto.	Básico
Lista suspensa	Um menu suspenso, também chamado de caixa de combinação.	Básico
Caixa de listagem	Uma lista na qual o usuário pode selecionar um ou vários itens, dependendo de como o componente é configurado.	Básico
Caixa de seleção	Uma caixa de caractere único que o usuário pode selecionar (marcar) ou limpar.	Básico
Botão de opção	Um único botão de opção que o usuário pode selecionar (marcar).	Básico
Campo de senha	Um campo de entrada que ecoa os caracteres de entrada com um caractere de substituição para mascarar a entrada.	Básico
Transferência de arquivos	Um componente com um campo de entrada de texto e um botão Explorar que exibe um seletor de arquivos para especificar um arquivo a ser transferido. O aplicativo transfere o arquivo especificado quando o usuário envia a página.	Básico
Adicionar remover	Duas listas (uma para opções disponíveis, uma para opções selecionadas) com botões para mover as opções entre as listas, e para ordenar as opções selecionadas.	Composto

 

Tabela 2: Componentes de exibição

Componente	Descrição	Seção da Paleta
Rótulo	O campo de texto que pode ser associado a um campo de entrada para o qual você especifica um estilo de fonte fraco, médio ou forte.	Básico
Texto estático	Campo para exibir texto.	Básico
Imagem	Imagem in-line.	Básico
Mensagem	O campo de texto que é vinculado a um componente específico para exibir erros de validação e outras mensagens sobre esse componente.	Básico
Grupo de mensagens	O campo de texto para exibir mensagens de erro de tempo de execução, mensagens de erro geradas pelo programa e, opcionalmente, os erros de validação e outras mensagens sobre os componentes que estão na página.	Básico
Alerta da página	Semelhante a um componente Alerta (abaixo), mas que se destina a exibir o ícone e as informações em uma página separada.	Layout
Alerta	Exibe um ícone e um texto informativo, tal como um aviso, um erro ou uma mensagem de conclusão bem-sucedida de algum evento.	Composto

 

Tabela 3: Componentes de agrupamento

Componente	Descrição	Seção da Paleta
Grupo de caixas de seleção	Exibe duas ou mais caixas de seleção em um layout de grade.	Básico
Grupo de botões de opção	Exibe dois ou mais botões de opção em um layout de grade e garante que apenas um botão pode ser selecionado de cada vez.	Básico
Tabela, Grupo de linhas da tabela e Coluna de tabela	Exibe os dados de um tipo de dados composto, tal como uma tabela de banco de dados ou uma matriz.	Básico
Painel de grade	Organiza os componentes em um layout de linhas e colunas.	Layout
Agrupar painel	Agrupa um conjunto de componentes no modo de layout de fluxo.	Layout
Fazer layout do painel	Usado para agrupar um conjunto de componentes no modo de layout de fluxo ou no modo de layout de grade.	Layout
Conjunto de tabulações e tabulação	Exibe layouts diferentes na mesma página. Também pode ser usado como uma ferramenta de navegação.	Layout
Caixa de fragmento de página	Agrupa componentes que você deseja exibir consistentemente em duas ou mais páginas.	Layout
Folha de propriedades, Seção da folha de propriedades e Propriedade	Faz o layout em uma única coluna de componentes rotulados rapidamente e divide os componentes em seções.	Layout
Trilha	Faz o layout de uma série de componentes de link separados por colchetes angulares para a direita (>).	Composto

 

Tabela 4: Componentes de ação

Componente	Descrição	Seção da Paleta
Botão	Botão que envia o formulário associado.	Básico
Hyperlink	Campo de texto que envia uma URL ou um formulário.	Básico
Hyperlink da imagem	Imagem que envia uma URL ou um formulário.	Básico
Guia	Subcomponente de um conjunto de guias ou uma guia. Uma guia pode opcionalmente enviar uma URL ou um formulário.	Layout

 

Use a folha de propriedades do componente na janela Propriedades para alterar a aparência e o comportamento do componente, para vincular o componente aos dados e para associar o componente a manipuladores de eventos.

A figura seguinte mostra as propriedades de um componente Caixa de listagem.

Figura 10: Propriedades da Caixa de listagem na janela Propriedades

 

Experimente

Abra a Page2 que você criou, seguindo as sugestões de Experimente na seção Criando páginas da Web, ou crie-a, se necessário.

1. Arraste um componente de botão para a página, digite Clique em mim! e pressione Enter. Na janela Propriedades, observe como a propriedade de texto possui o valor Clique em mim!. Na janela Propriedades, selecione a caixa de seleção da propriedade primária e observe como a aparência do botão se altera.
2. Arraste um componente Campo de texto para a página. Em seguida, arraste um componente Rótulo para a página, digite Nome: e pressione Enter. Pressione Ctrl+Shift e clique dentro do componente Rótulo, arraste-o para o componente Campo de texto e, em seguida, solte o botão do mouse. Selecione o componente Rótulo e observe como a sua propriedade for agora está definida como id no componente Campo de texto. Defina labelLevel como Forte (1).
3. Arraste um componente Mensagem para a direita do Campo de texto. Pressione Control+Shift e arraste do componente Mensagem para o componente Campo de texto. Como no componente Rótulo, observe como a propriedade para do componente Mensagem agora está definida como o id do componente Campo de texto.
4. Arraste um componente Lista suspensa para a página e defina sua propriedade rótulo como Cor. Clique com o botão direito do mouse no componente Lista suspensa e escolha Configurar opções padrão para abrir o Personalizador de opções.
5. Pressione Guia para entrar no modo de edição do Item 1 na coluna Exibir, e digite Azul. Pressione a guia duas vezes e altere o Item 2 para Branco. Pressione a guia duas vezes mais e altere o Item 3 para Verde. Clique em OK e observe como as suas alterações afetam o componente no Visual Designer.

6. Use etapas semelhantes para criar um componente Grupo de botões de opção com as opções Azul, Branco e Vermelho, mas não feche ainda o Personalizador de opções.

   No Perzonalizador de opções, marque a caixa de seleção Selecionar itens e selecione um dos botões de opção na coluna Selecionado para definir a seleção padrão desse item. Clique em OK para aplicar as alterações e fechar o Personalizador de opções. Na janela Propriedades, defina a propriedade de colunas como 3 para alinhar os botões de opção horizontalmente em vez de verticalmente.
7. Clique com o botão direito do mouse no plano de fundo da página, qualquer local vazio na página, e escolha Visualizar no navegador para ver como o seu navegador processa os componentes.

Para obter mais informações

• Desenvolvendo um aplicativo da Web
• Examinando componentes

Obtendo Ajuda

O IDE oferece um visualizador da Ajuda, que contém tópicos da Ajuda sobre o IDE. Além disso, quando você pressiona F1 em uma janela, caixa de diálogo ou componente da Paleta, o visualizador da Ajuda aparece e exibe informações sobre esse item. Para acessar os tópicos da Ajuda do Visual Web Pack, incluindo a ajuda sobre os componentes, você também pode escolher Ajuda > Conteúdo da Ajuda no menu principal e rolar para o Visual Web Pack.

O IDE também oferece uma janela Ajuda dinâmica, que mostra vínculos para os links da Ajuda relacionados à janela ou objeto atual. Quando você clica duas vezes em um link na janela Ajuda dinâmica, o IDE mostra as informações no visualizador apropriado, tal como um navegador, o visualizador da Ajuda ou o visualizador de Javadoc.

1. Adicione um componente Rótulo a uma página no Visual Designer. Observe os tópicos na janela Ajuda dinâmica.
2. Adicione um componente Grupo de caixas de seleção na página. Observe o novo tópico na janela Ajuda dinâmica.
3. Na janela Ajuda dinâmica, clique duas vezes no componente Grupo de caixas de seleção para exibir o tópico no visualizador da Ajuda. Feche o visualizador da Ajuda.
4. Clique dentro da janela Propriedades do Grupo de caixas de seleção. Pressione F1 para exibir o tópico sobre as propriedades do componente Grupo de caixas de seleção.
5. Selecione o nó do componente Campo de texto na seção Básico da Paleta. Pressione F1 para exibir o tópico da Ajuda sobre o componente Campo de texto.

Construindo e testando um aplicativo da Web

Quando você estiver pronto para testar um projeto, pressione F6 ou escolha Executar > Executar projeto principal, no menu principal. O IDE realiza as seguintes ações:

• Salva quaisquer arquivos que precisam ser salvos.

• Compila quaisquer arquivos que precisam ser compilados.

  Se houver complicações, o IDE exibirá as mensagens de erro relacionadas na janela Saída (mostrada abaixo) e não continuará com o processo de construir e executar. Clique no link da mensagem de erro a fim de ir para o código-fonte que causou o erro de compilação.
• Inicia o servidor de aplicativos, caso ele ainda não tenha sido iniciado.

• Implanta o aplicativo no servidor de aplicativos.

  Se houver quaisquer complicações, o IDE exibirá as mensagens de erro relacionadas na janela Saída e não continuará com o processo de construir e executar.

• Abre um navegador e envia a URL do aplicativo implantado para o navegador que, por sua vez, exibe a página inicial.

  Observação: Se você adicionou os componentes a uma página que não seja a página inicial, nesse ponto do tutorial você não os verá no navegador da Web. Consulte a seção Experimente abaixo para saber uma forma de configurar a navegação a partir da página inicial para outra página em seu aplicativo.

  Figura 11: Janela de saída

Se você tiver feito muitas alterações, excluído vários itens ou estiver percebendo algum comportamento inesperado, escolha Construir > Limpar e construir projeto principal no menu principal. O IDE limpa o diretório build e o diretório dist do projeto, desimplanta o aplicativo da Web e, em seguida, constrói e implanta o aplicativo.

1. Se o seu projeto possui menos de duas páginas, crie uma nova página, clicando com o botão direito do mouse no nó Páginas da Web na janela Projetos e escolhendo Nova > Página.
2. Abra a página inicial (a página com o símbolo de seta ) no Visual Designer.
3. Arraste um componente Hiperlink para a página, digite Próxima página e pressione Enter.
4. Na janela Propriedades do componente Hyperlink, clique no botão de reticências (...) da propriedade url, selecione uma página diferente no projeto e clique em OK. Observe como o IDE define a propriedade url como /faces/nome-da-página.jsp.
5. Pressione F6 para construir e executar o aplicativo da Web.
6. Observe as mensagens que aparecem na janela Saída durante o processo de construção. Observe também que a saída do registro do servidor é exibida na guia do servidor.
7. Observe a URL que o IDE envia para o navegador.
8. Quando a página inicial for exibida no navegador, clique no link Próxima página.
9. Retorne ao IDE e, na janela Tempo de execução, expanda Servidores, expanda o nó do servidor e, em seguida, expanda Aplicativos > Aplicativos da Web e observe que existe um nó do seu projeto, conforme mostrado na figura seguinte.

   Figura 12: Aplicativos da Web implantados

Para obter mais informações

• No menu principal, escolha Ajuda > Conteúdo da Ajuda para abrir o visualizador da Ajuda. Em seguida, no painel Conteúdo, escolha Visual Web Pack > Começando com projetos do Visual Web Application > Construindo e compilando > Construindo um projeto do Visual Web Application.

Conectando páginas da Web e manipulando ações do usuário

Quando um usuário digita uma URL, clica em um link ou clica em um botão, o navegador envia uma solicitação para o servidor. O servidor mapeia a solicitação para uma página JSP e usa essa página JSP e seu Bean de página associado para renderizar uma resposta.

Você pode especificar a navegação de página de uma das seguintes formas:

• Você adiciona um componente de link, tal como o componente Hiperlink, na página ou adiciona um componente Nó de árvore em um componente Árvore ou um componente Guia a um componente Conjunto de guias. Em seguida, você define a propriedade url do componente como /faces/nome-da-página.jsp. Quando você usa a propriedade url para navegação, os dados do formulário não são enviados. O aplicativo da Web simplesmente navega para o destino.
• Use o editor de Navegação de página para mapear ações para páginas, e o Visual Designer e o Editor de fontes Java para criar métodos de manipulação de ações. Quando você usa métodos de manipulação de ações para navegação da página, os dados do formulário são enviados e processados antes de o aplicativo da Web navegar para o destino especificado.

Para acessar o editor de Navegação de página, clique com o botão direito do mouse no plano de fundo no Visual Designer e escolha Navegação de página. O editor de navegação de página mostra os ícones de todas as páginas do projeto. Quando você clica em um ícone de página no editor Navegador de página, a página se expande e mostra todos os seus componentes de ação, componentes que possuem uma propriedade de ação, tal como um Botão, um Hiperlink ou uma Guia. Ao lado de cada componente há uma porta de conector. Você arrasta da porta do conector para um ícone de página a fim de criar o mapeamento entre a solicitação da ação e a página a ser processada como resposta à solicitação. Quando você libera o mouse, o IDE adiciona uma representação visual dessa conexão, conforme mostrado na conexão rotulada nextPage na figura seguinte.

Figura 13: Editor de navegação de página

 

Observação: Quando uma página é enviada, o aplicativo da Web realiza conversões e validações antes de executar os métodos de ação. Se uma conversão ou validação falhar, os métodos de ação não são chamados. Você deve colocar os componentes Grupo de mensagens em uma página durante o desenvolvimento para que possa detectar qualquer conversão inesperada ou erro de validação que possa eimpedir que um método de ação seja chamado.

1. Crie duas páginas chamadas LinkPage1 e LinkPage2. Clique com o botão direito do mouse em LinkPage1 e escolha Definir como página inicial para torná-la a página inicial.
2. Arraste um componente Hyperlink para LinkPage1, digite Próxima página e pressione Enter.
3. Arraste um componente Botão para LinkPage2, digite Ir e pressione Enter.

4. Clique duas vezes no componente Botão para acessar o método de ação do botão.

   Observe que o método de ação retorna nulo. Quando um método de ação retorna nulo, o aplicativo reexibe a página.
5. Clique em Design na barra de ferramentas para alternar para o Visual Designer.
6. No Visual Designer, clique com o botão direito do mouse no plano de fundo da página LinkPage2 e escolha Navegação de página.
7. No editor de Navegação de página, clique no ícone do LinkPage1.jsp para expandir o ícone da página e arraste um link da porta do conector do componente hyperlink1 para o ícone do LinkPage2.jsp.
8. Clique duas vezes no rótulo do conector case1 para alternar para o modo de edição, clique duas vezes em case1 para selecionar o texto, digite nextPage e pressione Enter.
9. Use etapas semelhantes para criar um conector do botão em LinkPage2.jsp de volta para LinkPage1.jsp e nomeie o conector ir.
10. Clique em XML na barra de ferramentas de edição para exibir o XML de mapeamento real que está implantado no servidor e, em seguida, feche o editor de navegação de página e clique em Salvar quando perguntado se deseja salvar as alterações.

11. Em LinkPage2, clique duas vezes no componente Botão para acessar o método de ação do botão.

    Observe que o método de ação agora retorna a seqüência "ir". O mapeamento que você criou no editor de navegação de página instrui o servidor a exibir LinkPage1.jsp sempre que LinkPage2.jsp retornar "ir".
12. Pressione F6 para executar o aplicativo e experimente a navegação da nova página.

Para obter mais informações

• Configurando a navegação de página
• Abra o Editor de navegação e pressione F1, ou no menu principal, escolha Ajuda > Conteúdo da Ajuda para abrir o visualizador da Ajuda e, em seguida, no painel Conteúdo, escolha Visual Web Pack > Referência > Editores > Sobre o Editor de navegação de página.

Editando código Java

O editor de Java do IDE contém vários recursos para facilitar o processo de programação, muitos mais do que podemos discutir neste tutorial introdutório. Se clicar dentro de uma janela do editor de Java e pressionar F1, você obterá ajuda na maioria dos recursos do editor.

As descrições seguintes cobrem mais alguns dos recursos de edição úteis.

• Auto-completar de código. O auto-completar de código permite que você digite alguns caracteres e, em seguida, escolha em uma lista de possíveis classes, métodos, variáveis, etc., para completar automaticamente a expressão. Para exibir a caixa de auto-completar de código, pressione Ctrl-Barra de espaço. A caixa de auto-completar de código também é exibida quando você faz uma pausa após digitar um ponto que segue um nome de pacote, uma variável ou uma chamada de método, conforme mostrado na figura seguinte.

  Figura 14: Caixa de auto-completar de código

• Javadoc. O recurso auto-completar de código também exibe qualquer Javadoc relacionado. Além disso, você pode clicar com o botão direito do mouse em um tipo, campo ou método, e escolher Mostrar Javadoc para ver o Javadoc desse item, se o Javadoc estiver disponível. Para ver o Javadoc disponível, escolha Ajuda > Referências de Javadoc. Você também pode pressionar Shift-F1 para exibir uma ferramenta de Pesquisa Javadoc por índice.
• Importações fixas. Pressione Alt-Shift-F para adicionar automaticamente as instruções de importação necessárias.

• Detecção de erro. As caixas de erro vermelhas são exibidas na margem esquerda de todas as instruções que não serão compiladas. Focalize o mouse sobre a caixa para ver a descrição do erro, conforme mostrado na figura seguinte. O IDE também exibe uma faixa de erros na margem direita. Essa faixa representa o arquivo inteiro, não apenas as linhas de código que estão visíveis. As linhas vermelhas na faixa de erros identificam os erros no código. Clique duas vezes em uma linha vermelha para saltar para a declaração incorreta. Quando você compila os arquivos, todos os erros de compilação são exibidos na janela Saída. Clique em uma mensagem de erro para exibir o código incorreto no editor de Java.

  Figura 15: Detecção de erro

• Atalhos de teclado do editor de Java. Você pode chamar muitas das tarefas de edição comuns com uma simples combinação de teclas, conforme mostrado nos exemplos seguintes. Para saber mais sobre os atalhos, escolha Ajuda > Conteúdo da Ajuda no menu principal para abrir o visualizador da Ajuda e, em seguida, no painel Conteúdo, escolha Fundamentos do IDE > Atalhos de teclado > Atalhos do editor.

  Ação	Atalho
  Reformata código	Ctrl-Shift-F
  Remove a linha atual	Ctrl-E
  Move o ponto de inserção para o colchete correspondente	Ctrl-[
  Seleciona o bloco delineado pelo colchete à esquerda do cursor	Ctrl-Shift-[
  Correspondência de palavras: avançar e voltar	Ctrl-L, Ctrl-K

• Abreviaturas. As abreviaturas são grupos curtos de caracteres que se expandem em uma palavra ou expressão completa quando você pressiona a barra de espaços, conforme mostrado nos exemplos seguintes. Para ver a lista de abreviações completa, escolha Ferramentas > Opções em um sistema Microsoft Windows ou NetBeans > Preferências em um sistema Macintosh e, em seguida, escolha Opções avançadas > Edição > Configurações do editor > Editor de Java e clique no botão de reticências (...) da propriedade Abreviações. Alguns exemplos:

  Código	Abreviatura
  for (Iterator it = collection.iterator(); it.hasNext();) {Object elem = (Object) it.next();}	forc
  for (int i = 0; i < arr.length; i++) {}	fori
  try {|} catch (Exception ex) {log("Descrição do erro", ex); } finally {}	trycatch

• Cortes de código. Quando há um editor de código de Java aberto, a janela Paleta fornece muitos cortes de código úteis que você pode arrastar e soltar para o seu código-fonte. Os cortes de código não são exibidos para arquivos de origem de Bean gerenciado, tal como o arquivo de origem de um Bean de aplicativo ou Bean de solicitação.

  Observação: Se você clicar em JSP na barra de ferramentas para abrir o editor de JSP, verá as dicas de ferramentas de JavaScript na janela Paleta que você poderá usar no arquivo JSP.
• Ferramenta Comentário automático. Escolha Ferramentas > Comentário automático para abrir uma caixa de diálogo para adicionar comentários de Javadoc.
• Pesquisa rápida. Se você clicar na janela Navegador e começar a digitar o nome de um método ou campo, a caixa de diálogo Pesquisa rápida será exibida e o IDE realçará a primeira entrada correspondente na lista. Pressione Enter para posicionar o editor de Java no código-fonte na declaração dessa entrada.

Experimente

Observação: Nos exercícios seguintes, você tem que digitar código usando o método destroy. O código que você digita se destina a ilustrar os recursos de edição. Você normalmente não colocaria um código como esse nesse método. Depois de completar as etapas, você deve remover o código.

1. Crie uma página ou abra uma página existente. Solte um componente Hyperlink na página. Clique em Java na barra de ferramentas de edição para exibir o código-fonte Java.
2. Clique com o botão direito do mouse na margem esquerda e escolha Mostrar números de linha. Pressione Ctrl-G no código-fonte Java, digite 100 na caixa de diálogo Ir para a linha e pressione Enter. Clique com o botão direito do mouse no código-fonte e escolha Ir para no menu pop-up. Observe as ações disponíveis no submenu.
3. Clique na guia da janela Navegador e, em seguida, clique duas vezes em destroy() para posicionar o código-fonte neste método. No método destroy(), digite getSessionBean1(). e faça uma pausa. A caixa de diálogo Auto-completar de código é exibida. Digite d para que a caixa restrinja a lista a destroy(). Pressione Enter para usar essa seleção. Digite ; e pressione Enter. Agora digite this.getH e faça uma pausa para que a caixa Auto-completar de código seja exibida. Se ela não for exibida, pressione Ctrl-Barra de espaço para abrir a caixa Auto-completar de código. Mova o cursor para baixo até getHyperlink1() e pressione Enter. Digite o ponto, faça uma pausa para que a caixa Auto-completar de código seja exibida, e digite set. Depois que a caixa Auto-completar de código reduz a lista a todos os métodos que começam com set, digite te para reduzir a lista a setText(Texto do objeto) e pressione Enter. O IDE insere setText() depois do ponto e posiciona o cursor dentro dos parênteses. Digite "olá", pressione End e digite ;.
4. Comece uma nova linha, digite serr e pressione a barra de espaços para expandir a abreviatura para System.err.println(""). Remova o ponto-e-vírgula do fim da linha. Pressione F9 para compilar o arquivo. A janela Saída exibe vários links para erros. Clique no primeiro link que aparece na janela. O IDE exibe a declaração que causou o erro. Substitua o ponto-e-vírgula que você acabou de remover.
5. Comece uma nova linha, digite getSes e pressione Ctrl-K. O IDE substitui a seqüência pela primeira palavra correspondente do código-fonte acima da linha atual.
6. Para limpar o código, coloque o cursor na primeira linha no corpo do método destroy e pressione Ctrl-E para remover essa linha. Use Ctrl-E para remover as linhas restantes no corpo do método.
7. Focalize os ícones na barra de ferramentas de edição e tente cada um deles.
8. Clique com o botão direito do mouse no código-fonte Java e escolha Ocultamentos de código no menu pop-up. Tente as várias ações do submenu.
9. Tente arrastar os cortes de código da Paleta para ver o que eles oferecem.

Para obter mais informações

• No menu principal, escolha Ajuda > Conteúdo da Ajuda para abrir o visualizador da Ajuda e, em seguida, no painel Conteúdo, escolha Fundamentos de projeto Java > Edição de arquivos de origem > Sobre a edição de arquivos de origem.
• No menu principal, escolha Ajuda > Conteúdo da Ajuda para abrir o visualizador da Ajuda e, em seguida, no painel Conteúdo, escolha Fundamentos do IDE > Atalhos de teclado > Atalhos do editor.

Manipulando entradas do usuário

O IDE oferece objetos de validador e de conversor para facilitar a verificação e a formatação de entradas. Esses objetos podem ser encontrados em suas respectivas seções na Paleta.

Vincule um validador a um componente de entrada, tal como um componente Campo de texto, arrastando o validador para o componente de entrada. Por exemplo, depois de adicionar um componente Campo de texto para uma página no Visual Designer, você pode arrastar um Validador de tamanho da seção Validadores na Paleta e soltá-lo no Campo de texto.

Como alternativa, você pode soltar o validador na página e definir a propriedade validador do componente de entrada para o objeto desse validador. Por exemplo, você pode soltar um Validador de intervalo longo em um lugar vazio na página, que adiciona longRangeValidator1 à janela Esboço. Em seguida, você pode selecionar um componente de entrada no Visual Designer, tal como o componente Campo de texto, e escolher longRangeValidator1 na lista suspensa da propriedade validatorExpression. Use o mesmo validador para mais de um componente.

Os mecanismos são semelhantes para conversores. Você também pode associar conversores a componentes de saída, tal como o componente Texto estático. Observe que quando você vincula um componente a um campo provedor de dados, as conversões são feitas automaticamente. Aprenda sobre vinculação a provedores de dados na seção Conectando a bancos de dados.

Use a janela Propriedades do validador para definir as regras de validação, tal como o valor mínimo e máximo ou o tamanho mínimo e máximo. Da mesma maneira, use a janela Propriedades do conversor para definir as regras de conversão, tal como o padrão a que o valor deve corresponder ou o método a ser chamado para realizar a validação. O conversor Número possui um assistente especial que é exibido quando você solta pela primeira vez o Conversor de números na página ou em um componente visual.

A seção Básico da Paleta fornece o componente Mensagem e o componente Grupo de mensagens para exibir automaticamente os erros de conversão, erros de validação e mensagens de campo obrigatório. O componente Grupo de mensagens exibe mensagens de erro globais, erros de tempo de execução e, opcionalmente, todas as mensagens de erro de componente. Um componente Mensagem exibe somente as mensagens do componente ao qual está vinculado. Vincule um componente Mensagem a outro componente, definindo a propriedade para do componente Mensagem ou pressionando Ctrl-Shift no componente Mensagem e arrastando o mouse para o componente ao qual deseja vincular o componente Mensagem.

Você pode enviar programaticamente as mensagens de erro personalizadas para o componente Grupo de mensagens usando os métodos erro, aviso, fatal e info em qualquer Bean de página. Para aprender mais sobre esses métodos, escolha Ferramentas > Pesquisa Javadoc por índice, digite FacesBean no campo de texto da lista suspensa e clique em Finalizar.

1. Crie uma página e arraste um botão para a página. Defina o texto do botão como Ir.
2. Arraste um componente Campo de texto para a página. Na janela Propriedades do componente Campo de texto, selecione a caixa de seleção da propriedade obrigatório.
3. Arraste um componente Rótulo acima do componente Caixa de texto, digite Preço: e pressione Enter.
4. Na janela Propriedades do componente Rótulo, selecione textField1 na lista suspensa da propriedade para. Observe como o rótulo no Visual Designer mostra um asterisco para indicar que essa entrada é obrigatória para o seu componente Campo de texto associado.

5. Na Paleta, expanda a seção Validadores. Arraste um Validador de intervalo duplo e solte-o no componente Campo de texto. Na janela Saída, selecione o nó doubleRangeValidator1 recém-criado. Na janela Propriedades do validador, defina o máximo como 10,0 e defina o mínimo como 1,0, conforme mostrado na figura seguinte.

   Figura 16: Propriedades do validador de intervalo duplo

6. Na Paleta, expanda a seção Conversores. Arraste um Conversor de números e solte-o no componente Campo de texto. Uma caixa de diálogo Formato de número é exibida, conforme mostrado na figura seguinte. Selecione a moeda na lista suspensa Tipo, selecione Inglês (Estados Unidos) na lista suspensa Localidade, e clique em OK.

   Figura 17: Formato de número

7. Adicione um componente Mensagem à página. Pressione Ctrl-Shift no componente e arraste para o componente Campo de texto.

   Observe que o IDE define a propriedade para do componente Mensagem como id do componente Campo de texto.
8. Adicione um componente Grupo de mensagens à página.

9. Transforme a página em inicial e execute o aplicativo. Tente clicar no botão com o preço inserido, com 1,5 inserido, com um valor não-numérico e com um preço maior que $10,00. Finalmente, digite $1,50 no campo de texto e clique no botão.

   Observe como o aplicativo rejeita todos os valores que não estão em conformidade com o formato de número e que não estão dentro do intervalo especificado. Observe as mensagens diferentes que são exibidas nos componentes Mensagem e Grupo de mensagens.
10. Experimente definir a caixa de seleção showGlobalOnly do componente Grupo de mensagens.

Armazenando e passando dados

Use o Bean de aplicativo, o Bean de sessão e o Bean de solicitação para armazenar informações a serem usadas por outras páginas.

• Use o Bean de aplicativo para informações que se aplicam a todas as sessões do usuário, tal como uma lista de opções estática de um componente Suspenso.
• Use o Bean de sessão para armazenar informações a serem usadas por outras páginas durante a sessão do usuário, tal como o nome de logon do usuário.

• Se você precisar de informações a serem usadas apenas pela próxima página, use o Bean de solicitação.

  Qualquer valor que você armazene no Bean de solicitação desaparece assim que a solicitação termina. Uma solicitação é uma transmissão única de uma solicitação HTTP do cliente para o servidor, além da resposta correspondente, que pode ser outra página. Em muitos casos, a solicitação começa com o clique em um botão ou link, e termina com a resposta de uma página HTML a ser exibida.

  Observação: O Bean de solicitação é instanciado somente se a página que inicia a solicitação armazenar valores nas propriedades do Bean de solicitação, tais como quando um componente de entrada é vinculado a uma propriedade do Bean de solicitação, conforme descrito abaixo.

  Aviso: Você não poderá usar o Bean de solicitação caso tenha incluído o elemento <redirect> dentro do elemento <navigation-case> de uma regra de navegação. (Veja essas regras ao clicar no botão Fonte no editor de navegação de página). Quando a página é enviada, o elemento <redirect> redireciona a página e termina a solicitação antes que uma página subseqüente possa usar qualquer dos valores armazenados no Bean de solicitação.

Para adicionar uma propriedade ao Bean de sessão, clique com o botão direito do mouse no nó SessionBean1 na janela Esboço e escolha Adicionar > Propriedade. O IDE adiciona uma declaração, um método getter e um método setter da propriedade. A propriedade é exibida como um subnó em SessionBean1 na janela Esboço, mas em geral não imediatamente. Use etapas semelhantes para adicionar uma propriedade ao Bean de solicitação ou ao Bean de aplicativo.

Observe que você também pode adicionar propriedades a um Bean de página (o Bean de apoio que o IDE cria para cada página). Para adicionar uma propriedade a um Bean de página, clique com o botão direito do mouse no plano de fundo no Visual Designer e escolha Adicionar > Propriedade no menu pop-up. Os valores de propriedade do Bean de página duram apenas enquanto o Bean de página é instanciado. Por exemplo, quando o usuário clica em um componente Botão que renderiza novamente a página (ou seja, o método de ação retorna nulo), uma nova instância do Bean de página é criada e os valores de propriedade do Bean de página são reinicializados. Se quiser passar um valor para o postback, use os componentes Campo oculto.

Para associar um componente à propriedade de um Bean, clique com o botão direito do mouse no componente e escolha Vincular aos dados. Na caixa de diálogo Vincular aos dados, selecione a guia Vincular ao objeto e escolha a propriedade do Bean, conforme mostrado na figura seguinte.

Figura 18: Caixa de diálogo Vincular aos dados

 

Observação: Para a maioria dos componentes, o menu pop-up oferece duas ações de vinculação - Vinculações de propriedade e Vincular aos dados. A caixa de diálogo Vinculações de propriedade permite que você vincule qualquer uma das propriedades do componente a uma propriedade de Bean gerenciado ou a um campo de provedor de dados. A caixa de diálogo Vincular aos dados é um atalho para vincular a propriedade que retém o valor do componente a uma propriedade de Bean gerenciado ou campo de provedor de dados. Use a guia Vincular aos dados para vincular qualquer provedor de dados que você tenha adicionado à página ou a um Bean gerenciado. Use a guia Vincular a um objeto para vincular uma propriedade de página ou uma propriedade de Bean gerenciado.

1. Clique com o botão direito do mouse no nó RequestBean1 na janela Esboço e escolha Adicionar > Propriedade. Se o item do menu Adicionar não aparecer, pressione Esc e, em seguida, clique novamente com o botão direito do mouse no nó. Nomeie a propriedade parm, torne-a uma String e clique em OK.

   Observe que a propriedade recém-adicionada talvez não seja exibida na janela Esboço. Para exibir a propriedade, clique com o botão direito do mouse no Visual Designer e escolha Atualizar no menu pop-up. Você também pode abrir e salvar o arquivo de origem RequestBean1 para exibir a propriedade, como nas etapas seguintes.
2. Na janela Esboço, clique com o botão direito do mouse no Bean de solicitação e escolha Editar código-fonte de Java no menu pop-up.
3. Role para a parte inferior do arquivo de origem para ver os métodos getParm e setParm que o IDE adicionou da propriedade.
4. Feche e salve o arquivo.
5. Crie uma página chamada Primeira com um componente Botão e um componente Campo de texto.
6. Clique com o botão direito do mouse no componente Campo de texto e escolha Vincular aos dados no menu pop-up. Clique na guia Vincular a um objeto, selecione RequestBean1 > parm, e clique em OK.
7. Crie uma página chamada Próxima. Adicione um componente Botão e adicione um componente Texto estático.
8. Vincule o componente Texto estático na página Próxima ao RequestBean1 > parm usando as mesmas etapas que você usou para o componente Campo de texto na página Primeira.
9. Clique com o botão direito do mouse no plano de fundo da página e escolha Navegação de página no menu pop-up.
10. No editor de navegação de página, crie um conector a partir do componente Botão na página Primeira para a página Próxima. Deixe apenas o componente Botão na página Próxima, pois você deseja que esse botão faça com que a página Próxima se renderize novamente de forma automática.
11. Defina First.jsp como a página inicial e execute o aplicativo. Insira um valor e clique no botão. Observe que a página Próxima exibe o valor que você inseriu na página Primeira. Em segundo plano, uma instância do RequestBean1 foi instanciada para armazenar o valor do componente Campo de texto na propriedade parm. O valor da propriedade parm foi subseqüentemente recuperado para a resposta (o HTML da página Próxima). Quando a resposta foi renderizada, a instância do RequestBean1 foi destruída.
12. Clique no botão que está na página Próxima para que a mesma se renderize novamente. Observe como o componente Texto estático não mostra mais um valor. Isso acontece porque a instância do RequestBean1 que mantinha o valor apenas existiu enquanto a solicitação, que começou quando a página Primeira foi enviada e terminou quando o HTML da página Próxima foi enviado de volta para o cliente.

Conectando a bancos de dados

A janela Tempo de execução inclui um nó Banco de dados, que mostra todos os bancos de dados que estão registrados com o IDE, conforme mostrado na figura seguinte. O Visual Web Pack oferece uma amostra do banco de dados VIAGEM, que você pode usar no restante deste tutorial.

Figura 19: Fontes de dados

 

Antes de acessar um banco de dados de um projeto, primeiro conecte o IDE ao banco de dados. Você deve fazer isso toda vez que iniciar o IDE e abrir um projeto que esteja conectado ao banco de dados.

Se o emblema de um banco de dados estiver quebrado e você não puder expandir o nó do banco de dados, 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ó dos bancos de dados na janela Tempo de execução e escolha Conectar no menu pop-up. Se a caixa de diálogo Conectar for exibida, digite viagem como Senha e selecione Lembrar senha durante esta sessão. Se você não vir um nó jdbc do banco de dados VIAGEM, consulte a seção Banco de dados de amostra do Visual Web Pack, nas Instruções de instalação do NetBeans Visual Web Pack, para obter informações sobre como disponibilizar o banco de dados para o IDE.

Observação: Se o seu aplicativo da Web usa um servidor diferente do Servidor de aplicativos Sun Java System, coloque uma cópia do arquivo derbyclient.jar no diretório da biblioteca do servidor. Por exemplo, se você quiser usar o banco de dados VIAGEM com o Tomcat, copie o arquivo derbyclient.jar para o diretório-de-instalação-do-netbeans\enterprise3\apache-tomcat-5.5.17\common\lib. Você pode encontrar uma cópia do derbyclient.jar em javadb\lib\derbyclient.jar no diretório de instalação do servidor de aplicativos Sun Java System.

Quando você abrir um projeto existente, o Visual Designer talvez mostre uma tela de erro. Geralmente, isso acontece porque o Visual Designer precisa obter informações do banco de dados, mas o IDE não está conectado ao banco de dados. Tente conectar ao servidor de banco de dados e clicar no botão Continuar na tela de erro para resolver o problema.

Você pode conectar uma página a uma tabela de banco de dados, arrastando a tabela das fontes de dados e soltando-a em um componente ou soltando-a na página. Quando você faz isso, o IDE adiciona um provedor de dados à página e um conjunto de linhas à classe SessionBean1, conforme mostrado na figura seguinte.

Figura 20: Provedor de dados e conjunto de linhas

 

O objeto do conjunto de linhas faz a conexão ao banco de dados, executa as consultas e gerencia o conjunto de resultados. O objeto do provedor de dados fornece uma interface comum para acessar muitos tipos de dados compostos, de tabelas de banco de dados a objetos ArrayList e objetos Enterprise JavaBeans. Geralmente, a única vez que você trabalha com o objeto de conjunto de linhas é quando precisa definir parâmetros de consulta. Na maioria dos casos, você usa o objeto de provedor de dados para acessar e manipular os dados.

Quando tiver adicionado um provedor de dados a um projeto, poderá vincular um componente ao provedor de dados, clicando com o botão direito do mouse no componente e escolhendo Vincular aos dados. Na caixa de diálogo Vincular aos dados, clique na guia Vincular ao provedor de dados para trazê-lo para frente. A lista suspensa Escolha um provedor de dados mostra todos os provedores de dados do projeto do qual você pode selecionar o provedor de dados para vincular ao componente. Depois de selecionar o provedor de dados, escolha a coluna de dados apropriada a ser vinculada ao componente. Para alguns componentes, tal como o componente Lista suspensa, você deve escolher um campo Valor e um campo Exibir.

Para definir a consulta SQL a ser usada para recuperar os dados, use o Editor de consultas, conforme mostrado na figura a seguir. Esse editor pode ser acessado através de um objeto de conjunto de linhas.

Figura 21: Editor de consultas

 

1. Crie uma página, torne-a a página inicial e solte um componente Caixa de listagem na página.
2. Na janela Tempo de execução, expanda Banco de dados, expanda o nó jdbc do banco de dados VIAGEM e expanda o nó Tabelas.

3. Arraste o nó TRIPTYPE e solte-o na página.

   Observação: Se o emblema do banco de dados VIAGEM estiver quebrado e você não puder expandir o nó do banco de dados, 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ó dos bancos de dados na janela Tempo de execução 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.
4. Clique com o botão direito do mouse no componente Caixa de listagem e escolha Vincular aos dados no menu pop-up.
5. Na caixa de diálogo Vincular aos dados, clique na guia Vincular ao provedor de dados e verifique se tripTypeDataProvider está selecionado na lista suspensa Escolha um provedor de dados.
6. Defina o campo Valor como TRIPTYPE.TRIPTYPEID (a seleção padrão) e defina o campo Exibir como TRIPTYPE.DESCRIPTION. Clique em OK.
7. Execute o aplicativo para ver como a caixa de listagem é preenchida com dados da tabela.
8. Expanda SessionBean1 na janela Esboço e clique duas vezes no nó triptypeRowSet para abrir Editor de consultas. Na linha DESCRIÇÃO do painel de grade, clique no campo da coluna Tipo de classificação e escolha Crescente na lista suspensa.
9. Clique no X na guia Editor de consultas para fechar o editor de consultas, e execute o programa novamente. Observe como os itens agora aparecem em ordem alfabética.

10. (Opcional) Observe o método _init no código-fonte Java para ver o código para associar o provedor de dados ao conjunto de linhas. Este método é dobrado por padrão. Para cancelar o dobramento de código, clique na caixa de dobramento de código que aparece ao lado da margem esquerda.

    Clique duas vezes no nó Bean de sessão na janela Projetos para abrir o código-fonte Java do Bean de sessão. Observe o método _init do Bean de sessão para ver como o código do conjunto de linhas implementa a consulta.
11. Escolha Ajuda > Referências de Javadoc > Provedor de dados e escolha Ajuda > Referências de Javadoc > Conjunto de linhas para ver as APIs dos conjuntos de linhas e provedores de dados.

Para obter mais informações

• Desenvolvendo um aplicativo da Web.
• Usando componentes de vinculação de dados para acessar um banco de dados.
• No menu principal, escolha Ajuda > Conteúdo da Ajuda para abrir o visualizador da Ajuda e, em seguida, no painel Conteúdo, expanda o Visual Web Pack > Conectando componentes a dados e leia os tópicos desta seção.

Depurando um aplicativo da Web

O IDE possui um depurador incorporado para ajudá-lo a solucionar os problemas dos seus programas, conforme mostrado na figura seguinte. Você pode usá-lo para ver as interrupções e inspeções, para percorrer o código, e para executá-lo até que ele alcance a declaração de código em que está o cursor.

Defina um ponto de interrupção, clicando na margem esquerda do editor de Java. Defina uma inspeção, clicando com o botão direito do mouse em uma variável ou expressão, escolhendo Nova inspeção. Para executar o depurador, escolha Executar > Depurar projeto principal ou Executar > Executar até o cursor no menu principal.

Figura 22: Janela do Depurador

 

Dica: Aqui estão alguns outros recursos que você pode usar para diagnosticar e resolver problemas:

• Use o Monitor de HTTP para monitorar a comunicação entre cliente-servidor e reproduzir solicitações de HTTP. A capacidade de reproduzir solicitações pode ser útil quando a sua página possui vários campos de entrada e você quer criar a solicitação de HTTP sem ter que preencher todos os campos.
• Adicione um componente Grupo de mensagens à página e use os métodos error, warn, fatal e info para exibir as mensagens de diagnóstico no componente.
• Use o método log para enviar mensagens de diagnóstico para o registro do servidor.

1. Crie, ou reutilize, uma página inicial. Adicione um componente Texto estático, defina sua propriedade text como Hello, e defina a sua propriedade id como helloText.

2. Adicione um componente Botão. Clique duas vezes no componente Botão para acessar seu método de ação (button1_action) e substitua o corpo do método pelo código a seguir.

   Amostra de código 1: button1_action Method

   String oldString = (String) this.helloText.getText(); this.helloText.setText("Até logo"); String newString = (String) this.helloText.getText(); return null;

   
   Você pode pressionar Ctrl-Shift-F para reformatar o código que acabou de adicionar.

3. Clique com o botão direito do mouse em oldString, escolha Nova inspeção, e clique em OK. Faça o mesmo para newString.

   Você vê uma janela da guia Inspeções aberta na parte inferior do IDE, e cada expressão a ser inspecionada é listada na janela.

4. Clique na margem esquerda para definir um ponto de interrupção para a primeira instrução no corpo do método.

   Você vê uma caixa rosa aparecer onde clicou e a linha de código inteira fica com um plano de fundo rosa.
5. Escolha Executar > Depurar projeto principal, no menu principal.
6. Quando a página for exibida no Navegador da Web, clique no botão. Quando o depurador for interrompido no método button1_action, clique na guia Inspeções na janela Depurador para ver o valor atual de newString e oldString.
7. Escolha Executar > Passar por cima no menu principal ou clique no botão na barra de ferramentas. Observe a guia Inspeções. Passe por cima do código duas vezes mais e observe a coluna Valor na guia Inspeções.
8. Explore as guias Variáveis locais e Pilha de chamadas.
9. Escolha Executar > Finalizar sessão de depuração para fechar a sessão do depurador.

Para obter mais informações

• No menu principal, escolha Ajuda > Conteúdo da Ajuda para abrir o visualizador da Ajuda e, em seguida, no painel Conteúdo, expanda Fundamentos do projeto Java > Depurando aplicativos Java e leia os tópicos sobre depuração.
• No menu principal, escolha Ajuda > Conteúdo da Ajuda para abrir o visualizador da Ajuda e, em seguida, no painel Conteúdo, escolha Servidores e Bancos de dados > Monitor HTTP > Sobre o Monitor HTTP.
• A seção Executando e monitorando o aplicativo no Tutorial do NetBeans IDE para aplicativos da Web.

Resumo

• Inicie um aplicativo da Web, criando um projeto do Visual Web Application.
• Você pode adicionar páginas, clicando com o botão direito do mouse no nó Páginas da Web na janela Projetos e escolhendo Nova > Página.
• Para criar uma página, arraste os componentes da Paleta para a página no Visual Designer.
• Clique no botão Executar projeto principal  na barra de ferramentas principal para salvar, construir, implantar e executar o aplicativo.
• Use o editor de navegação de página para especificar a navegação de página. Você também pode adicionar componentes de vinculação a uma página e definir seus valores de propriedade url.
• Solte os objetos Validador e Conversor em um componente para especificar as regras de formatação e de validação.
• Use os componentes Mensagem e o componente Grupo de mensagens para exibir as mensagens de erro de tempo de execução.
• Use as propriedades nas classes RequestBean1, SessionBean1 e ApplicationBean1 para armazenar e passar valores de página para página.
• Para criar um objeto de provedor de dados e seu conjunto de linhas associado de uma tabela de banco de dados, arraste uma tabela da seção Bancos de dados da janela Tempo de execução para a página ou para um de seus componentes.
• Use a ação de menu Vincular aos dados para vincular componentes a campos de provedor de dados e para vincular componentes às propriedades do Bean.
• Abra o Editor de consultas em um conjunto de linhas para modificar a consulta SQL que é usada para preencher o objeto de conjunto de linhas.
• Use o depurador, o Monitor de HTTP, o registro do servidor e o componente Grupo de mensagens para diagnosticar problemas de tempo de execução.

---

Envie-nos seus comentários