Aprenda a trabalhar com gráficos no PrimeFaces

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>, ...