Artigos Java Aprenda a trabalhar com gráficos no PrimeFaces
Por que eu devo ler este artigo:Este artigo é útil por apresentar como adicionar gráficos em sistemas desenvolvidos com o PrimeFaces, biblioteca para a construção de interfaces ricas (e em JSF) com o usuário e que oferece, além de componentes para a criação de telas de cadastro e listagem, opções para a criação de diferentes tipos de gráficos, que podem ser utilizados para a análise de dados ou para a geração de relatórios.
Autores: Eduardo Felipe Zambom Santana e Luiz Henrique Zambom Santana

Um dos principais diferenciais do PrimeFaces em relação aos seus concorrentes é a grande quantidade de componentes disponibilizados, que podem ser utilizados para os mais diversos fins, como para a criação de telas de cadastro, listagens, galerias de imagens, entre outras opções. Adicionalmente, são oferecidos componentes para a criação de gráficos, os quais são bastante simples de serem utilizados.

Para a geração de um gráfico, é necessário apenas informar os dados e alguns parâmetros, como o tipo do gráfico desejado (se ele será um gráfico de barras, linhas, pizza ou outro tipo) e o seu título. Os dados utilizados podem ser recuperados de diversas fontes, como de arquivos texto, criados diretamente na aplicação, coletados de um banco de dados, entre outras opções.

Com o intuito de explorar o uso de gráficos em um projeto web com o PrimeFaces, este artigo demonstrará o desenvolvimento de uma aplicação para cadastro e visualização de pesquisas eleitorais. As informações necessárias para a geração desses gráficos serão recuperadas de um banco dedados PostgreSQL, que será manipulado com o Hibernate. Para possibilitar o cadastro das informações, serão criados dois formulários: um para a inserção dos dados dos candidatos que participam de uma eleição e outro para o cadastro dos resultados das pesquisas de opinião. Por fim, será implementada uma tela para a visualização das pesquisas, na qual serão exibidos gráficos de linhas, barras e pizza.

Configuração do JSF e do PrimeFaces

Antes de começar a implementação do projeto, é necessário fazer sua configuração. Em nosso exemplo, para a gestão das dependências será empregado o Apache Maven, como mostra a Listagem 1, onde é apresentado o arquivo pom.xml com as dependências do PrimeFaces 5.1, do JSF 2.2, do Hibernate e do driver para a conexão com o banco de dados PostgreSQL.

Listagem 1. Configuração das dependências do projeto Maven.

<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.primefaces</groupId>
         <artifactId>graficos</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>org.hibernate</groupId>
                      <artifactId>hibernate-entitymanager</artifactId>
                      <version>5.1.0.Final</version>
               </dependency>
               <dependency>
                      <groupId>postgresql</groupId>
                      <artifactId>postgresql</artifactId>
                      <version>9.1-901-1.jdbc4</version>
               </dependency>
         </dependencies>
  </project>

Além das dependências, é necessário criar o arquivo web.xml, como mostrado na Listagem 2, no diretório WEB-INF. Nele devem ser realizadas a configuração do JavaServer Faces, o que é feito com a inclusão do servlet JSF na tag <servlet>, e o mapeamento das requisições que serão atendidas por esse servlet, o que é feito na tag <url-pattern>.

Listagem 2. Código do arquivo web.xml.

<?xml version="1.0" encoding="UTF-8"?>
  <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
      <display-name>com.devmedia.primefaces</display-name>
      <servlet>
          <servlet-name>Faces Servlet</servlet-name>
          <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
          <load-on-startup>1</load-on-startup>
      </servlet>
      <servlet-mapping>
          <servlet-name>Faces Servlet</servlet-name>
          <url-pattern>*.xhtml</url-pattern>
      </servlet-mapping>
      <welcome-file-list>
          <welcome-file>/index.xhtml</welcome-file>
      </welcome-file-list>
      <error-page>
          <exception-type>javax.faces.application.ViewExpiredException</exception-type>
          <location>/index.xhtml</location>
      </error-page>
  </web-app>

A última configuração necessária é a definição do banco de dados da aplicação e seus atributos. Nesse projeto utilizaremos o PostgreSQL, SGBD completo, robusto, gratuito e de código fonte aberto. Essa configuração será feita no arquivo persistence.xml, que possui todos os parâmetros para a conexão da aplicação com o banco (veja a Listagem 3).

Listagem 3. Configuração do banco de dados no arquivo persistence.xml.

<persistence xmlns="http://java.sun.com/xml/ns/persistence"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/persistence http://java.sun.com/xml/ns/persistence/persistence_2_0.xsd"
         version="2.0">
         
         <persistence-unit name="devmedia"> 
   
               <provider>org.hibernate.ejb.HibernatePersistence</provider> 
               
               <!-- entidades mapeadas -->
               <cla ...

Quer ler esse conteúdo completo? Tenha acesso completo