Atualmente, se uma equipe de desenvolvimento de sistemas receber a missão de implementar uma nova aplicação web em Java, existe uma grande possibilidade do responsável pela definição da arquitetura optar pelo JSF como o framework MVC do projeto. É claro que a decisão levará em conta vários fatores, mas se esta for realmente a escolha, certamente a preferência será motivada por questões como a popularidade da biblioteca e o fato de ela pertencer à especificação Java EE.
A decisão pelo JavaServer Faces, entretanto, não é a única a ser tomada antes de iniciar a implementação. No que diz respeito à elaboração da camada de visão, é provável que alguma biblioteca de interface rica como RichFaces, ICEfaces ou PrimeFaces também seja adicionada ao projeto. Esta constatação existe por conta de algumas limitações do JSF, como:
- Os componentes visuais nativos são poucos e muito rústicos;
- Não existe suporte embarcado no framework ao uso de temas/skins;
- Modelo nativo de requisições AJAX é simples, sem suporte, por exemplo, a mecanismos de push.
Neste contexto, frameworks RIA, como os comentados anteriormente, surgiram logo após o lançamento das versões iniciais do JSF e trouxeram algumas vantagens, como uma experiência visual mais agradável para o usuário, a possibilidade de executar processamento assíncrono, diminuição no tráfego de rede – uma vez que a client engine pode efetuar processamento no lado do cliente –, redução da complexidade da aplicação, entre outras.
Para conhecermos de forma mais aprofundada um destes frameworks, este artigo explorará o PrimeFaces 5, lançado recentemente pela PrimeTek e que tem se firmado como a biblioteca RIA para JSF mais popular do mercado. Como veremos, novos componentes foram lançados nesta versão, além de várias melhorias terem sido implementadas em tags já existentes. A mais significativa delas talvez tenha sido a remodelagem do PrimeFaces Push, que agora está baseado no Atmosphere, considerado o framework para desenvolvimento assíncrono mais popular do Java. Entre as vantagens da nova implementação do Push estão o desenvolvimento dos sistemas baseado no uso de anotações, suporte a WebSockets e até mesmo integração com serviços em nuvem.
Dito isso, nesta primeira parte do artigo iremos conhecer os principais recursos do PrimeFaces através do início do desenvolvimento de um pequeno sistema de venda de veículos na modalidade leilão, no qual o usuário pode também dar sua opinião sobre os modelos de carros cadastrados.
O PrimeFaces 5
Em 2008, a PrimeTek, empresa de origem turca, especializada em desenvolvimento ágil, treinamento e consultoria Java EE, lançou no mercado uma biblioteca de componentes RIA chamada PrimeFaces. O framework foi criado pelo consultor Ҫağatay Ҫivici, autor/revisor de vários livros envolvendo desenvolvimento Java Web e JSF, e membro do JavaServer Faces Expert Group e do projeto Apache MyFaces. Contando com uma comunidade bastante ativa, o projeto possui código aberto e uma página de demonstração de dar inveja aos concorrentes.
Embora a maior parte dos desenvolvedores utilize a versão gratuita da biblioteca, existem ainda dois planos de suporte diferenciados:
- PrimeFaces Elite: oferece releases com melhorias e correções mais constantes que a versão gratuita, acesso a temas exclusivos e um plano aperfeiçoado de correção de bugs que garante a inclusão do patch no próximo release se o defeito atingir mais de 15 votos de usuários na ferramenta de acompanhamento de ocorrências da biblioteca;
- PrimeFaces Pro: traz as mesmas vantagens da versão Elite, além de acesso a uma área com conteúdo exclusivo (http://pro.primefaces.org), resposta a dúvidas ou bugs em no máximo 24 horas, participação em conferências de discussão, conexão remota à máquina do desenvolvedor, entre outras.
Na versão 5.0, lançada recentemente, o framework apresentou algumas novidades, a saber:
- O PrimeFaces Mobile foi reimplementado do zero e incorporado ao core da biblioteca. Esta melhoria evita que o desenvolvedor precise implementar duas interfaces diferentes (uma para desktop e outra para dispositivos móveis) no mesmo sistema;
- Novos componentes lançados:
- DataScroller: utilizado para recuperação de objetos sob demanda;
- Cache: reduz o tempo de carregamento de uma página;
- Spotlight: demarca uma área da página para receber um efeito de iluminação;
- ColumnToggler: permite ocultar colunas de um DataTable via AJAX;
- ContentFlow: exibe uma galeria horizontal de imagens utilizando o efeito de apresentação de slides;
- Nova API para geração de gráficos;
- Um poderoso ExceptionHandler foi disponibilizado.
No que diz respeito a componentes já existentes, também houve melhorias. Algumas delas são:
- O componente push foi remodelado baseado no framework Atmosphere;
- O método de execução de JavaScript no carregamento da página está mais simples;
- Colunas e linhas podem agora ser reorganizadas no DataTable através de ações de arrastar e soltar;
- Implementado um filtro avançado para DataTable;
- Um método de ordenação para TreeTable foi disponibilizado;
- Implementado um filtro nos componentes SelectManyMenu e SelectOneListbox;
- Implementada uma máscara para o componente Calendar.
Criando a aplicação
Como exemplo, criaremos um pequeno sistema de venda de veículos para demonstrar os principais componentes e recursos do PrimeFaces 5. Além do framework RIA, a arquitetura do nosso sistema terá ainda a injeção de dependências feita pelo CDI 1.1, o acesso ao banco se dará através da JPA 2.1, a camada de negócio envolverá EJB 3.2, o papel de controller caberá ao JSF 2.2, e o Facelets será utilizado para geração de templates na aplicação, evitando que dupliquemos código em nossas páginas.
O ambiente requerido para criar o sistema envolverá os softwares listados a seguir, que precisam estar instalados na máquina em que a implementação dos exemplos deste artigo será feita (se necessário, confira a seção Links no final do artigo para saber onde baixá-los):
- Servidor de aplicação WildFly 8.0.0. Caso queira saber mais detalhes sobre como configurá-lo, consulte a Java Magazine 128;
- Eclipse Kepler para desenvolvedores Java EE;
- Java Development Kit versão 1.7 configurado no Eclipse;
- SGBD PostgreSQL 9.3.
Após estarmos com todos os softwares configurados na máquina, vamos criar o projeto Maven. Para isso, na view Project Explorer do Eclipse, clique com o botão direito, selecione New e clique em Other.
Na tela que surge, selecione Maven e depois clique em Maven Project. Marque a opção Create a simple Project (skip archetype selection) e clique em Next. Neste passo, informe no campo Group Id o valor “br.com.javamagazine”, no Artifact Id o valor “leilaojm”, no Packaging o valor “war” e no Name o valor “leilaojm”. Em seguida, clique em Finish.
Logo após, vamos configurar nosso projeto para utilizar o JSF 2.2 e informar alguns parâmetros adicionais para a aplicação rodar corretamente. Assim, clique com o botão direito em cima da raiz do projeto, e depois na opção Properties. Na tela que surge, clique em Project Facets. No item Dynamic Web Module, selecione a versão 3.1 para trabalharmos com a versão mais recente da API de Servlets. No item Java, selecione a opção 1.7 e marque o item abaixo, JavaServer Faces, selecionando posteriormente a versão 2.2 do framework. Mais abaixo, surgirá a mensagem Further configuration available informando que é preciso confirmar alguns parâmetros do JSF. Clique nela e informe as seguintes configurações para o funcionamento da aplicação: em JSF Implementation Library, deixe marcado Disable Library Configuration; no campo URL Mapping Patterns, clique em cima da opção existente (/faces/*) e depois no botão Remove. Feito isso, clique no botão Add e no popup que aparece, informe “*.xhtml”. Então, clique em OK na primeira tela, em OK na segunda e novamente em OK na terceira para confirmar as mudanças.
Embora tenhamos informado o uso da versão 3.1 da API de Servlets no item Project Facets, precisamos configurar este parâmetro no web.xml. Aproveitaremos a edição do arquivo para determinar qual é a página inicial do sistema. Para realizar estas alterações, abra o XML mencionado, que se encontra na pasta src/main/webapp/WEB-INF, e informe o código presente na Listagem 1.
01 <?xml version="1.0" encoding="UTF-8"?>
02 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
03 xmlns="http://xmlns.jcp.org/xml/ns/javaee"
04 xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
id="WebApp_ID" version="3.1">
05
06 <display-name>leilaojm</display-name>
07
08 <welcome-file-list>
09 <welcome-file>index.xhtml</welcome-file>
10 </welcome-file-list>
11
12 <servlet>
13 <servlet-name>Faces Servlet</servlet-name>
14 <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
15 <load-on-startup>1</load-on-startup>
16 </servlet>
17 <servlet-mapping>
18 <servlet-name>Faces Servlet</servlet-name>
19 <url-pattern>*.xhtml</url-pattern>
20 </servlet-mapping>
21 </web-app>Modificando o pom.xml
Chegamos ao ponto em que é necessário configurar as bibliotecas utilizadas pelo projeto no arquivo pom.xml. Deste modo, abra o XML e selecione a aba pom.xml para editar o código fonte, que deve ficar semelhante ao da Listagem 2.
01 <project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
02 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
http://maven.apache.org/xsd/maven-4.0.0.xsd">
03 <modelVersion>4.0.0</modelVersion>
04
05 <groupId>br.com.javamagazine</groupId>
06 <artifactId>leilaojm</artifactId>
07 <version>0.0.1-SNAPSHOT</version>
08 <packaging>war</packaging>
09
10 <name>leilaojm</name>
11
12 <build>
13 <plugins>
14 <plugin>
15 <artifactId>maven-compiler-plugin</artifactId>
16 <version>2.0.2</version>
17 <configuration>
18 <source>1.7</source>
19 <target>1.7</target>
20 </configuration>
21 </plugin>
22 </plugins>
23 </build>
24
25 <dependencies>
26 <!-- Bibliotecas Java EE 7 que já estão no Wildfly, incluindo o JSF 2.2 -->
27 <dependency>
28 <groupId>javax</groupId>
29 <artifactId>javaee-api</artifactId>
30 <version>7.0</version>
31 <scope>provided</scope>
32 </dependency>
33
34 <dependency>
35 <groupId>org.primefaces</groupId>
36 <artifactId>primefaces</artifactId>
37 <version>5.0</version>
38 </dependency>
39
40 <dependency>
41 <groupId>org.apache.myfaces.tomahawk</groupId>
42 <artifactId>tomahawk21</artifactId>
43 <version>1.1.14</version>
44 </dependency>
45 </dependencies>
46 </project>As principais configurações apresentadas são as seguintes:
- Linhas 5 a 8: especificações gerais do projeto informadas no início do artigo ao criarmos a aplicação. O groupId identifica o grupo de projetos de uma organização e normalmente obedece à estrutura de pacotes do sistema. Já o artifactId é o nome utilizado para gerar o WAR;
- Linha 10: informa o nome do projeto;
- Linhas 12 a 23: configura a versão 1.7 para o plugin de compilação do código fonte do sistema. Desta forma, informamos ao Eclipse que o JDK 1.7 será usado e que ele deve constar no classpath da aplicação;
- Linhas 25 a 39: define todas as dependências utilizadas no projeto;
- Linhas 27 a 32: informa que as bibliotecas da Java EE 7 usadas no projeto já estão no classpath. No nosso caso, são fornecidas pelo WildFly;
- Linhas 34 a 38: informa a dependência do PrimeFaces 5.0;
- Linhas 40 a 45: informa a dependência do Apache Tomahawk para JSF 2.1 (também funciona com JSF 2.2). A biblioteca será utilizada para salvar o estado de objetos com escopo de requisição entre páginas, uma vez que não utilizaremos escopo de conversação nestes casos.
Após modificar o pom.xml, vamos atualizar as dependências do Maven no sistema. Para realizar esse procedimento, clique com o botão direito em cima da raiz do projeto, selecione Maven e clique em Update Project. Na tela que surge, clique em OK e aguarde alguns segundos para que o Eclipse realize o processo.
Configurando o banco de dados e o datasource
Com o PostgreSQL rodando, crie uma base de dados chamada leilaojm e rode o script da Listagem 3 para gerar as tabelas e colocar algumas informações nelas com o objetivo de já termos como realizar algumas operações no sistema sem que precisemos cadastrar dados (as linhas com os inserts foram omitidas e podem ser encontradas no arquivo completo que está na pasta src/main/resources do código-fonte que você pode baixar).
CREATE SEQUENCE anuncio_id_seq INCREMENT BY 1;
CREATE SEQUENCE avaliacao_id_seq INCREMENT BY 1;
CREATE SEQUENCE imagem_anuncio_id_seq INCREMENT BY 1;
CREATE SEQUENCE modelo_id_seq INCREMENT BY 1;
CREATE TABLE "anuncio"(
id INTEGER DEFAULT nextval('anuncio_id_seq') NOT NULL,
id_modelo INTEGER NOT NULL,
titulo VARCHAR(200) NULL,
descricao TEXT NOT NULL,
anomodelo INTEGER NOT NULL,
anofabricacao INTEGER NOT NULL,
uf CHAR(2) NULL,
cidade VARCHAR(60) NULL,
precofixo BOOL NOT NULL,
valor DOUBLE PRECISION NULL,
valorlanceatual DOUBLE PRECISION NULL,
vendido BOOL NOT NULL,
PRIMARY KEY (id));
CREATE TABLE "avaliacao"(
id INTEGER DEFAULT nextval('avaliacao_id_seq') NOT NULL,
id_modelo INTEGER NOT NULL,
nome VARCHAR(100) NOT NULL,
texto TEXT NOT NULL,
PRIMARY KEY (id));
CREATE TABLE "imagem_anuncio"(
id INTEGER DEFAULT nextval('imagem_anuncio_id_seq') NOT NULL,
id_anuncio INTEGER NOT NULL,
nome VARCHAR(45) NOT NULL,
PRIMARY KEY (id));
CREATE TABLE "marca"(
id INTEGER NOT NULL,
nome VARCHAR(45) NOT NULL,
imagem VARCHAR(20) NULL,
PRIMARY KEY (id));
CREATE TABLE "modelo"(
id INTEGER DEFAULT nextval('modelo_id_seq') NOT NULL,
id_marca INTEGER NOT NULL,
nome VARCHAR(30) NOT NULL,
motorizacao VARCHAR(20) NULL,
datalancamento DATE NULL,
qtdpassageiros INTEGER NULL,
linkvideo VARCHAR(120) NULL,
PRIMARY KEY (id));
ALTER TABLE "anuncio" ADD CONSTRAINT anuncio_modelo_fk FOREIGN KEY (id_modelo) REFERENCES "modelo" (id);
ALTER TABLE "avaliacao" ADD CONSTRAINT avaliacao_modelo_fk FOREIGN KEY (id_modelo) REFERENCES "modelo" (id);
ALTER TABLE "imagem_anuncio" ADD CONSTRAINT imagem_anuncio_anuncio_fk FOREIGN KEY (id_anuncio)
REFERENCES "anuncio" (id);
ALTER TABLE "modelo" ADD CONSTRAINT modelo_marca_fk FOREIGN KEY (id_marca) REFERENCES "marca" (id);
// inserts omitidos. Baixe o código-fonte do projeto e pegue o script completo na pasta
src/main/resources."
Artigos relacionados
-
Artigo
-
Artigo
-
Artigo
-
Artigo
-
Artigo