NetBeans IDE: Visual Web Pack - parte 2

Neste artigo iremos criar a navegação das páginas, desde a sua entrada no sistema até a sua saída.

por Edson Gonçalves

No primeiro artigo vocês criaram um projeto e fizeram as páginas que irá compor o sistema administrativo. Neste artigo iremos criar a navegação das páginas, desde a sua entrada no sistema até a sua saída.

Caso não tenham visto a primeira parte do artigo, recomendo lê-la antes de prosseguir.

Criando a navegação das páginas

Após a criação das páginas administrativas, vamos criar a navegação das páginas, passando da área de “login” até o seu “logout”.

No Design de qualquer uma das páginas criadas, cliquem com o direito do mouse. Ao surgir o menu de contexto, clique no último item chamado de Navegação de página.

Inicialmente teremos apenas as páginas que criamos, sem ligação entre elas, como mostra a Figura 1 a seguir.

Figura 1

Cliquem sobre a página Page1.jsp (a página de login). A página será ampliada, exibindo seus componentes. Arrastem do componente button1 para a página admin/Page1.jsp. Observem que uma linha surgiu, indicando que estas páginas contêm uma ligação. Quem conhece JavaServer Faces, sabe que estamos configurando as regras de navegação em um XML, que no caso do Visual Web Pack, está em um arquivo separado do faces-config.xml, chamado de navigation.xml (que pode ser visto expandindo WEB-INF em Páginas da Web na janela Projetos).

Figura 2

Executando o mesmo processo, vamos arrastar do componente hyperlink1, da página admin/Page1.jsp para a página admin/Page2.jsp.

Figura 3

Da página admin/Page2.jsp, temos dois links. O link que demos o nome de logout será usado para chamar a página Page1.jsp. O outro link, iremos chamar a página admin/Page1.jsp.

Cada elemento de navegação possui uma string, que é automaticamente adicionada. Perceba que temos case1, case2 e por ai vai, dependendo do número de casos que possuímos na construção de uma navegação. Evidentemente que isso pode confundir um desenvolvedor iniciante, além de ser muito desorganizado, tendo todos o mesmo nome. Por isso, entre as páginas Page1.jsp e admin/Page1.jsp cliquem na linha de navegação. Observem que na janela Propriedades temos uma propriedade chamada Resultado, ao qual está escrito case1. Alterem para logado.

Figura 4

Na linha que liga as páginas admin/Page2.jsp à Page1.jsp, altere para logout. A Figura a seguir ilustra a navegação como poderá ficar.

Figura 5

Agora com a navegação estamos prontos para adicionar o banco de dados e em seguida os códigos para tornar esta aplicação funcional. No próximo artigo iremos criar o banco de dados e a tabela para que o usuário seja verificado no login. Aguardem.