Introdução ao Primefaces
1. Introdução
Primefaces é um aplicativoopen source UI component suite for Java Server Faces(JSF).
Neste tutorial, daremos uma introdução ao Primefaces e demonstraremos como configurá-lo e usar alguns de seus principais recursos.
2. Visão geral
2.1. Faces do servidor Java
Java Server Faces é umcomponent-oriented framework for building user interfaces for Java web applications. A especificação JSF é formalizada através do Java Community Process e é uma tecnologia de exibição padronizada.
Mais sobre JSF no ambiente Spring pode ser encontradohere.
2.2. Primefaces
Construído sobre o JSF,Primefaces supports rapid application development by providing pre-built UI components que pode ser adicionado a qualquer projeto.
Além do Primefaces, existe também o projetoPrimefaces Extensions. Esse projeto de código aberto baseado na comunidade fornece componentes adicionais além dos padrão.
3. Configuração do aplicativo
Com o objetivo de demonstrar alguns componentes do Primefaces, vamos criar um aplicativo da web simples usando Maven.
3.1. Configuração do Maven
Primefaces tem uma configuração leve com apenas um jar, então, para começar, vamos adicionar a dependência ao nossopom.xml:
org.primefaces
primefaces
6.2
A versão mais recente pode ser encontradahere.
3.2. Controlador - Feijão Gerenciado
A seguir, vamos criar a classe de bean para nosso componente:
@ManagedBean(name = "helloPFBean")
public class HelloPFBean {
}Precisamos fornecer uma anotação@ManagedBean para vincular nosso controlador a um componente de visualização.
3.3. View
Por fim, vamos declarar o namespace Primefaces em nosso arquivo.xhtml:
4. Componentes de exemplo
Para renderizar a página, inicie o servidor e navegue para:
http://localhost:8080/jsf/pf_intro.xhtml4.1. PanelGrid
Vamos usarPanelGrid como umextension to standard JSF panelGrid:
Aqui, definimos umpanelGrid com duas colunas e configuramosoutputText from JSF facelets para exibir dados de um bean gerenciado.
Os valores declarados em cadaoutputText correspond afirstName andlastName properties declaradas em nosso@ManagedBean:
private String firstName;
private String lastName;Vamos dar uma olhada em nosso primeiro componente simples:
4.2. SelectOneRadio
Podemosuse selectOneRadio component to provide a radio button functionality:
Precisamos declarar a variável value no bean de suporte para manter o valor do botão de opção:
private String componentSuite;Esta configuração resultará em um botão de opção de 2 que está vinculado à propriedadeStringcomponentSuite subjacente:
4.3. Tabela de dados
A seguir, vamosuse the dataTable component to display data in a table layout:
Da mesma forma, precisamos fornecer uma propriedade Bean para armazenar os dados da nossa tabela:
private List technologies; Aqui, temos uma lista de várias tecnologias e seus números de versão:
4.4. Ajax comInputText
Também podemosuse p:ajax to provide Ajax features to our components.
Por exemplo, vamos usar este componente para aplicar um evento de desfoque:
Assim, precisaremos fornecer propriedades no bean:
private String inputText;
private String outputText;Além disso, também precisamos fornecer um método listener em nosso bean para o nosso evento de desfoque AJAX:
public void onBlurEvent() {
outputText = inputText.toUpperCase();
}Aqui, simplesmente convertemos o texto em maiúsculas para demonstrar o mecanismo:
4.5. Botão
Além disso, também podemos usarp:commandButton asan extension to the standard h:commandButton component.
Por exemplo:
Como resultado, com esta configuração, temos o botão que usaremos para abrir a caixa de diálogo (usando o atributoonclick):
4.6. Diálogo
Além disso,to provide the functionality of the dialog, we can use p:dialog component.
Vamos também usar o botão do último exemplo para abrir a caixa de diálogo ao clicar:
Nesse caso, temos uma caixa de diálogo com a configuração básica que pode ser acionada usando ocommandButton descrito na seção anterior:
5. Primefaces Mobile
Primefaces Mobile (PFM)provides a UI kit to create Primefaces applications for mobile devices.
Por esse motivo, o PFM suporta design responsivo ajustado para dispositivos móveis.
5.1. Configuração
Para começar, precisamos habilitar o suporte à navegação móvel em nossofaces-config.xml:
org.primefaces.mobile.application.MobileNavigationHandler
5.2. Namespace
Então, para usar componentes PFM, precisamos incluir o namespace PFM em nosso arquivo.xhtml:
xmlns:pm="http://primefaces.org/mobile"Além do jar padrão do Primefaces, não há necessidade de nenhuma biblioteca adicional em nossa configuração.
5.3. RenderKit
Por último, precisamos fornecerRenderKit, which is used to render the components in the mobile environment.
No caso de uma única página PFM dentro de um aplicativo, podemos definir umRenderKit dentro de nossa página:
Com um aplicativo PFM completo, podemos definir nossoRenderKit no escopo do aplicativo dentro defaces-config.xml:
PRIMEFACES_MOBILE 5.4. Página de exemplo
Agora, vamos criar uma página de PFM de exemplo:
Como pode ser visto, usamospage, headerecontent component do PFM para construir um formulário simples com um cabeçalho:
Além disso, usamos nosso bean de apoio para verificação e navegação de entrada do usuário:
public String go() {
if(this.magicWord != null
&& this.magicWord.toUpperCase().equals("example")) {
return "pm:success";
}
return "pm:failure";
}No caso de uma palavra correta, navegamos para a próxima página:
Essa configuração resulta neste layout:
No caso de uma palavra incorreta, navegamos para a próxima página:
Essa configuração resultará neste layout:
Observe quePFM is deprecated na versão 6.2 e será removido na versão 6.3 em favor de um kit padrão responsivo.
6. Conclusão
Neste tutorial, explicamos os benefícios de usar o pacote de componentes JSF Primefaces e demonstramos como configurar e usar Primefaces em um projeto baseado em Maven.
Além disso, apresentamos o Primefaces Mobile, kit de interface do usuário especializado para dispositivos móveis.
Como sempre, os exemplos de código deste tutorial são fornecidosover on GitHub.