Olá desenvolvedores, neste tutorial desenvolveremos uma barra de menu com PrimeFaces. Se você deseja aprender como instalá-lo, clique aqui para ser redirecionado ao tutorial.

O PrimeFaces é uma estrutura de código aberto para o JSF – JavaServer Faces com componentes otimizados para dispositivo mobile, validação do lado do cliente e muito mais. Ou ainda podemos defini-lo como uma biblioteca de componentes de UI – User Interface ou Interface de Usuários. Com o suporte da Oracle, seu desenvolvimento teve início no final de 2008

Avançando em nosso projeto, à medida que mais páginas vão sendo adicionadas é preciso criar um meio de navegar entre elas. E para isso criaremos o menu de navegação, que se repetirá em todas as páginas do projeto. Neste tutorial aprenderemos como criar este menu utilizando PrimeFaces e o JSF.

MENU COM JSF

Implementaremos o menu dentro do h:bory antes do h:form. O JSF traz o componente h:link que renderiza um elemento HTML – HyperText Markup Language, do tipo âncora.

A tag implementa os atributos value que como valor recebe o nome do item de menu, que é o nome que será exibido para o usuário e o outcome, que receberá o “endereço” para a página qual seremos redirecionados. Insira o mesmo código em ambas as páginas, index.jsf e primefaces.jsf.

MENU COM PRIMEFACES

A implementação com o JSF embora funcione bem para o propósito de navegação entre as páginas, não é visualmente atrativo. E ainda, requer o uso de alguns recursos adicionais para criar uma interface minimamente agradável.

O PrimeFaces por sua vez permite a criação de interfaces muito mais agradáveis.  E da mesma forma como procedemos com o JSF Implementaremos o menu dentro do h:bory antes do h:form.

Mas, para criar o menu com o PrimeFaces será preciso inserir suas tags dentro de um componente de formulário do tipo h:form. Desse modo dentro do no novo h:form criado teremos o componente p:breadCrumb que fornece informações contextuais sobre a hierarquia da página.

No escopo do p:breadCrumb insira os itens de menu com o p:menuitem, onde o primeiro p:itemmenu deverá ser vazio. Desse modo o PrimeFaces entenderá que este item vazio se refere a página Home, isto é, a página principal.

A tag receberá ainda o atributo value qual será atribuído o nome do item que será exibido para o usuário. E também o action que receberá o link para a página qual seremos redirecionados ao clicarmos sobre ele. Insira o mesmo código em ambas as páginas, index.jsf e primefaces.jsf.

EM POUCAS PALAVRAS

Lembrando que todas as páginas deverão conter a declaração do PrimeFaces, que traz componentes de interface visualmente muito mais agradáveis que o JSF.