Gráficos
Com
PorBrunoPaulino
Motivação
Aprender a criar e manipular gráficos
utilizando a tecnologia JAVA WEB.
Mas, como?
Problema: Como criar gráficos com um
sistema desenvolvido em JAVA e JSF?
Solução: Utilizando a API PrimeFaces p...
Montando o cenário
Utilizaremos um cenário hipotético
expressando o total de vendas(em milhões)
por ano dos países abaixo:...
Dados hipotéticos
2011 100
2012 120
2013 50
2011 160
2012 130
2013 78
2011 30
2012 80
2013 23
País Ano Total de Vendas
Mão na massa
1. Crie um projeto Java Web no Eclipse e adicione as
dependências JSF;
2. acesse www.primefaces.org e faça o ...
Mão na massa
Estrutura final do projeto Eclipse
Mão na massa
1. Classe País:
• String nome;
• Map<String, Integer> vendas;
Armazena o nome do País e os anos e o volume de...
Gráficos em Colunas
Classe GraficoColunaBean :
• Utiliza o objeto do tipo CartesianChartModel (Classe própria do PrimeFace...
Nosso arquivo GraficoColunaBean.java - PARTE 1
Objetos ChartSeries que comporão o objeto
CartesianChartModel
Nosso arquivo GraficoColunaBean.java - PARTE 2
Classe resposável por gerar
os gráficos na visão.
Adicionamos os
objetos Ch...
Visão
Gráficos em Colunas
Nosso arquivo primecolunas.xhtml
Propriedade do tipo
CartesianChartModel do Bean
colunaBean.
tag...
Enfim... Gráficos! Label dos objetos ChartSeries
Valor minimo e máximo
definidos na view usando
a tag barChart do
PrimeFac...
Gráfico Pizza
Agora Veremos como funciona a classe
PieChartModel, reponsável por gerar o
gráfico no formato Pizza.
Nosso arquivo GraficoPizzaBean.java
Classe responsável por gerar o gráfico
Pizza na view.
Adicionamos o nome e o total de
...
Nosso arquivo PrimePizza.xhtml
Aqui acessamos a propriedade pizza
do tipo PieChartModel do Bean
pizzaBean
tag pieChart do ...
Novamente... Gráficos!
Código Fonte:
https://github.com/brunojppb/GraficosComPrimeFaces
if(DUVIDAS){
“Podem perguntar”;
}
else{
“Obrigado!”;
}
Upcoming SlideShare
Loading in...5
×

Graficos com PrimeFaces

1,918

Published on

Tutorial ensinando como trabalhar com gráficos utilizando a API PrimeFaces para JSF

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,918
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
147
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Graficos com PrimeFaces

  1. 1. Gráficos Com PorBrunoPaulino
  2. 2. Motivação Aprender a criar e manipular gráficos utilizando a tecnologia JAVA WEB.
  3. 3. Mas, como? Problema: Como criar gráficos com um sistema desenvolvido em JAVA e JSF? Solução: Utilizando a API PrimeFaces para fazer esse duro trabalho por nós.
  4. 4. Montando o cenário Utilizaremos um cenário hipotético expressando o total de vendas(em milhões) por ano dos países abaixo: Brasil; Estados Unidos; Alemanha.
  5. 5. Dados hipotéticos 2011 100 2012 120 2013 50 2011 160 2012 130 2013 78 2011 30 2012 80 2013 23 País Ano Total de Vendas
  6. 6. Mão na massa 1. Crie um projeto Java Web no Eclipse e adicione as dependências JSF; 2. acesse www.primefaces.org e faça o download do .jar mais atual (por enquanto é a versão 3.5); 3. inclua no seu projeto Eclipse o .jar do primefaces.
  7. 7. Mão na massa Estrutura final do projeto Eclipse
  8. 8. Mão na massa 1. Classe País: • String nome; • Map<String, Integer> vendas; Armazena o nome do País e os anos e o volume de vendas do respectivo ano.
  9. 9. Gráficos em Colunas Classe GraficoColunaBean : • Utiliza o objeto do tipo CartesianChartModel (Classe própria do PrimeFaces); • Utiliza o objeto do tipo ChartSeries(Classe própria do Primefaces); CartesianChartModel: •Classe resposável por manipular os objetos ChartSeries e gerar o gráfico para a view. ChartSeries: •Classe resposável por armazenar os dados de cada país(nome, ano e total de vendas) e compor o objeto CartesianChartModel.
  10. 10. Nosso arquivo GraficoColunaBean.java - PARTE 1 Objetos ChartSeries que comporão o objeto CartesianChartModel
  11. 11. Nosso arquivo GraficoColunaBean.java - PARTE 2 Classe resposável por gerar os gráficos na visão. Adicionamos os objetos ChartSeries ao objeto Colunas
  12. 12. Visão Gráficos em Colunas Nosso arquivo primecolunas.xhtml Propriedade do tipo CartesianChartModel do Bean colunaBean. tag barChart do PrimeFaces que recebe um objeto CartesianChartModel e monta o gráfico na View.
  13. 13. Enfim... Gráficos! Label dos objetos ChartSeries Valor minimo e máximo definidos na view usando a tag barChart do PrimeFaces Ano das vendas
  14. 14. Gráfico Pizza Agora Veremos como funciona a classe PieChartModel, reponsável por gerar o gráfico no formato Pizza.
  15. 15. Nosso arquivo GraficoPizzaBean.java Classe responsável por gerar o gráfico Pizza na view. Adicionamos o nome e o total de vendas de cada país no ano de 2011 ao objeto PieChartModel.
  16. 16. Nosso arquivo PrimePizza.xhtml Aqui acessamos a propriedade pizza do tipo PieChartModel do Bean pizzaBean tag pieChart do PrimeFaces que recebe um objeto PieChartModel e monta o gráfico na View.
  17. 17. Novamente... Gráficos! Código Fonte: https://github.com/brunojppb/GraficosComPrimeFaces
  18. 18. if(DUVIDAS){ “Podem perguntar”; } else{ “Obrigado!”; }
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×