PrimeFaces 5.1 na prática

Aprenda a utilizar os novos componentes de interface do PrimeFaces.

Fique por dentro
Esse artigo é útil para estudantes e profissionais que tenham interesse em adotar a nova versão do PrimeFaces em projetos que utilizam o JavaServer Faces (JSF).

Pensando nisso, serão apresentados os novos componentes do PrimeFaces – como o Ribbon, BarCode e InputSwitch – e as melhorias realizadas em alguns componentes antigos.

Além disso, analisaremos o Grid CSS, um conjunto de classes CSS do PrimeFaces para facilitar o desenvolvimento de interfaces responsivas, que se adaptam automaticamente de acordo com o dispositivo através do qual são acessadas.
Autores: Luiz Henrique Zambom Santana e Eduardo Felipe Zambom Santana

O JavaServer Faces é um dos principais frameworks MVC disponíveis no mercado, mas a sua especificação disponibiliza apenas componentes básicos para criação de interfaces, como caixas de texto e tabelas para entrada e saída de dados.

Para melhorar o desenvolvimento de aplicações JSF foram elaboradas diversas bibliotecas de componentes que simplificam a construção de interfaces ricas.

Dentre essas bibliotecas, podemos destacar o RichFaces, o ICEfaces e, principalmente, o PrimeFaces.

A principal vantagem do PrimeFaces é a enorme quantidade de componentes disponíveis. Além disso, o framework, cuja versão 5.1 foi lançada em outubro de 2014, possui uma comunidade bastante ativa.

Nessa versão, além das melhorias esperadas, foram adicionados componentes que podem ser bastante úteis para aplicações em diversos domínios, como é o caso do componente Ribbon, que facilita a criação de barras de ferramentas, e o BarCode, que possibilita a criação de códigos de barras em diversos padrões.

Dito isso, este artigo irá apresentar os principais componentes do PrimeFaces e os destaques da versão 5.1. Para tal, veremos como instalar e configurar o ambiente de desenvolvimento para um projeto que inclua PrimeFaces, revisar os componentes de uma aplicação web simples e, finalmente, abordar como aplicar os novos componentes para proporcionar uma melhor experiência ao usuário.

Instalação e configuração do ambiente de desenvolvimento

Para o desenvolvimento da nossa aplicação vamos adotar o Eclipse e o Maven. Obviamente poderíamos apresentar os exemplos sem essas ferramentas, mas o uso de uma IDE e de um gerenciador de dependências facilita bastante o processo de codificação.

Além disso, é necessário ter acesso – local ou remoto – a um servidor que implemente a especificação do JSF; neste caso, optamos pelo Tomcat (também poderíamos utilizar servidores de aplicação como GlassFish, WildFly, entre outros).

O primeiro passo é baixar (veja a seção Links) e instalar essas ferramentas. Para a instalação das mesmas, basta descompactar os arquivos e colocá-los em qualquer diretório de sua preferência.

Em seguida é preciso adicionar o Tomcat ao Eclipse (o que é feito acessando a aba Servers desta IDE) clicando em Add Server e selecionando o caminho da instalação deste servidor web. Deste modo é possível executar os exemplos que serão apresentados no Tomcat diretamente através do Eclipse.

Com todas as ferramentas instaladas, podemos criar um projeto Maven no Eclipse e incluir as dependências do JSF e do PrimeFaces. Para tal, adicione o conteúdo presente na Listagem 1 no seu pom.xml. As dependências do JSF são a jsf-api, que contém a especificação do framework e a jsf-impl, que contém a implementação padrão fornecida pela Oracle.

Já as dependências do PrimeFaces são denominadas primefaces, grgen e barcode4j-light. A primeira contém a implementação do framework e as outras duas são utilizadas no componente BarCode, apresentado nas próximas páginas.

É importante ressaltar que caso esse componente não seja utilizado, tais dependências não são necessárias, pois não fazem parte do core do PrimeFaces.

Listagem 1. Arquivo pom.xml para um projeto PrimeFaces com o componente BarCode.

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.devmedia</groupId> <artifactId>prime</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>war</packaging> <dependencies> <dependency> <groupId>org.primefaces</groupId> <artifactId>primefaces</artifactId> <version>5.1</version> <scope>compile</scope> </dependency> <dependency> <groupId>org.glassfish</groupId> <artifactId>javax.faces</artifactId> <version>2.2.0</version> <scope>compile</scope> </dependency> <dependency> <groupId>net.glxn</groupId> <artifactId>qrgen</artifactId> <version>1.4</version> </dependency> <dependency> <groupId>net.sf.barcode4j</groupId> <artifactId>barcode4j-light</artifactId> <version>2.0</version> </dependency> </dependencies> <repositories> <repository> <id>prime-repo</id> <name>PrimeFaces Maven Repository</name> <url>http://repository.primefaces.org</url> <layout>default</layout> </repository> </repositories> </project> " [...] continue lendo...

Artigos relacionados