Mostrando postagens com marcador Open Flash Chart. Mostrar todas as postagens
Mostrando postagens com marcador Open Flash Chart. Mostrar todas as postagens

17 de jun. de 2009

Open Flash Chart - Utilizando JOFC para executar em um projeto Struts 2

No primeiro post sobre o Open Flash Chart 2 eu mostrei como fazer um primeiro exemplo utilizando um html simples e um arquivo JSON para gerar um gráfico em Flash. Neste post vou demonstrar a utilização do JOFC2 que é uma API para utilização do OFC 2 com java. O arquivo open-flash-chart.swf já deve ter sido colocado na raiz do projeto web do appfuse conforme descrito no primeiro post sobre esse assunto.

Passo a passo:
1) Faça o download do JOFC neste link.

2)Crie uma User librarie no struts com a biblioteca do JOFC e adicione como dependência do seu projeto do Appfuse. Para executar esse passo no eclipse vá em Window > Preferences vá em User libraries de Java e adicione uma nova librarie chamada Jofc2 e nesta librarie adicione o jar do Jofc e a dependência XStream conforme a imagem abaixo.



Não se esqueça de adicionar essa nova librarie como dependência no seu projeto do Appfuse, para isso clique com o botão direito do mouse sobre o nome do projeto no eclipse e depois properties , procure java build path e adicione a librarie como dependência no projeto.

3)Crie uma Action e registre no struts.xml

Para criar a action vá na estrutura do projeto sob a estrutura do projeto do appfuse src>main>java , selecione o diretório das actions e com botão direito do mouse selecione new>Class e crie uma action chamada JOFC2Action conforme o código mostrado abaixo(os imports foram omitidos para simplificar):

package br.com.maweb.webapp.action;

import...

public class JOFC2Action extends BaseAction {

 private static final long serialVersionUID = 4486376620652216855L;

 public String processaOFC() {
  Chart chart = new Chart();
  chart.setTitle(new Text("Java OFC test"));
  chart.setBackgroundColour("#FFFFFF");
  
  LineChart lc = new LineChart();
  lc.setText("Text 1");
  lc.addDots(new Dot(7, "#0000FF", 2, 2));
  lc.addValues(5, 6, 7, 8, 7);
  
  LineChart lc2 = new LineChart();
  lc2.setColour("#000000");
  lc2.setText("Text 2");
  lc2.addDots(new Dot(2, "#FF0000", 2, 2));
  lc2.addValues(1, 2);
  
  BarChart bc3 = new BarChart(BarChart.Style.NORMAL);
//  bc3.setAlpha(0.3f);
  Bar b2 = new Bar(5.0);
  Bar b3 = new Bar(6.0);
  Bar b4 = new Bar(4.0);
  bc3.addBars(b2, b3, b4);
  
  
  chart.addElements(bc3, lc, lc2);
  
  YAxis ya = new YAxis();
  ya.setGridColour("#DDDEE1");
  ya.setColour("#96A9C5");
  ya.setOffset(false);
  chart.setYAxis(ya);
  
  XAxis xa = new XAxis();
  xa.setGridColour("#DDDEE1");
  xa.setColour("#96A9C5");
  chart.setXAxis(xa);
  
  chart.setFixedNumDecimalsForced(true);
  chart.setDecimalSeparatorIsComma(true);
  
  
  String grafico = chart.toString();
  try {
   grafico = URLEncoder.encode(grafico, "UTF-8");
  } catch (UnsupportedEncodingException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
  getRequest().getSession().setAttribute("grafico", chart.toString());
  return SUCCESS;
 }

}



Esta Action do struts 2 faz a geração de um gráfico DEMO para utilizarmos no exemplo e coloca o resultado gerado que é um JSON na sessão com a chave grafico que será recuperada depois. Após gerar a action temos que registrá-la no struts.xml do projeto conforme trecho de código abaixo:


    /jofc2.jsp



Isso fará que um acesso a url http://localhost:8080/jofc2.html execute a action e após isso irá direcionar para a página chamada jofc2.jsp que criaremos no próximo passo.

4)Crie uma página chamada jofc2.jsp. No projeto do eclipse sob a pasta src/main/webapp crie uma página chamada jofc2.jsp com o seguinte código(as tags html, head e script foram alteradas para compatibilidade com o post neste blog e vc deve corrigí-las antes de executar o exemplo):

html>
head>
 
script type="text/javascript" src="swfobject.js">/script>
script type="text/javascript">
swfobject.embedSWF(
  "open-flash-chart.swf", "my_chart", "550", "300",
  "9.0.0", "expressInstall.swf",
{"data-file":"json.jsp"});
/script>
script type="text/javascript">
swfobject.embedSWF(
  "open-flash-chart.swf", "chart", "550", "300",
  "9.0.0", "expressInstall.swf",
{"data-file":"json.jsp"});
/script>
 
/head>
body>
 
 

Separador de gráfico

/body> /html>


Nesta página declaramos o elemento do Open Flash Chart e fazemos referência a uma página onde o json deve ser recuperado chamada json.jsp.

5)Crie uma página para colocar o JSON gerado chamada json.jsp . Crie uma página jsp com o nome json.jsp no mesmo diretório da página jofc2.jsp que irá recuperar a string JSON colocada pela action na sessão:

<%=session.getAttribute("grafico")%>


O código desta página é só esta linha mesmo. O interessante é que esta foi a única notação que funcionou para o Open Flash Chart, experimentei as notações do JSTL como c:out ou mesmo ${session.grafico} que imprimem EXATAMENTE a mesma String JSON e simplesmente não funciona. Acredito que seja alguma coisa no engine do JSTL do Jetty que cause a incompatibilidade.

6)Configure o projeto do Appfuse para não utilizar o decorator para a página do json. O projeto do Appfuse com struts 2 utiliza o Sitemesh para configurar as páginas, na página json.jsp não queremos que o template default seja utilizado pois queremos somente a String JSON para configuração do gráfico por isso deve-se acrescentar ao arquivo decorators.xml uma linha excluindo a página json.jsp da aplicação do template, segue código do arquivo decorators.xml.

    
        /40*.jsp
        /*ajax=true*
        /scripts/dojo/*
        /struts/dojo/* 
        /resources/*
        /json.jsp
     
    
        /*
    



7)Disponibilizar as libs do jofc para o maven: Registrar repositório e incluir dependências no pom.xml do projeto. Como ainda não encontrei um repositório público do maven com as bibliotecas necessárias para rodar o JOFC 2 disponibilizei no meu servidor da maweb. Por isso para poder baixar as libs do projeto e a dependência temos que registrar no pom.xml do projeto onde estas libs podem ser encontradas. Faremos isso declarando um novo repositório que irá apontar para www.maweb.com.br e registrando as libs que precisamos. Edite o pom.xml adicionando o trecho de código a seguir do repositório e das 2 libraries necessárias respectivamente:


     maweb
     http://www.maweb.com.br/mvn_repo


    jofc2
    jofc2
    1.0-0


     xstream
     xstream
     1.3.1



8)Disponibilizar na sua aplicação o javascript do JOFC (swfobject.js). O approach que utilizo neste tutorial depende de um javascript chamado swfobjec.js que vem no pacote do download do JOFC 2 e portanto copie este arquivo para o mesmo diretório das páginas criadas acima no projeto. Pronto, finalmente estamos prontos para rodar o exemplo para isso abra um console do seu sistema operacional e navegue para o diretório raiz do seu projeto, onde tem o pom.xml e rode o jetty utilizando o comando:
mvn jetty:run


Depois é só acessar a aplicação passando pela action conforme descrito no último passo abaixo. 9) Acessar a aplicação utilizando a url http://localhost:8080/jofc2.html , você deverá ver uma página com um gráfico simples renderizado conforme imagem mostrada abaixo:



Este é um gráfico de demostração para atingir o objetivo deste post, em um ambiente de projeto profissional pode-se utilizar um interceptor do struts para gerar o JSON o que facilitará quando precisarmos ter mais de um gráfico em uma página. Vários outros tipos de gráficos mais complexos podem ser gerados com esta API conforme mostrado nas páginas oficiais do projeto com exemplos em PHP neste link.

[]s

8 de jun. de 2009

Open Flash Chart - Configuração e primeiras impressões

Durante o desenvolvimento de um projeto pessoal sempre tive um sentimento de que os gráficos que estava utilizando que são gerados utilizando a Google chart api que é excelente mas por se basear em imagem não fornece o nível de gráficos que eu desejo para o meu projeto. Após alguma pesquisa encontrei a API Open Flash Chart 2 que pelas minhas pesquisas apresenta funcionalidades muito mais próxima das que eu desejo para o projeto. Este post tem por objetivo mostrar a configuração necessária e também minhas primeiras impressões na utilização da API Open Flash Chart 2 em meu projeto.

O projeto que estou desenvolvendo e onde irei testar a integração desta API utiliza a estrutura fornecida pelo Appfuse com Struts 2.

Na própria página do projeto existe uma referência a uma librarie java que pode ser utilizada para integrar o Open Flash Chart em um projeto J2EE, que é o meu caso, decidi então utilizar a librarie chamada jofc2 no projeto por considerar que é a que está mais evoluída. Neste primeiro post sobre o assunto vou demonstrar a configuração básica do OFC com um projeto do AAFuse utilizando HTML simples e um arquivo JSON seguindo o exemplo 1 dos tutoriais do JOFC2.

Como esta API é em flash seu funcionamento se baseia em baixar um arquivo flash já pronto e depois configurá-lo utilizando Json. A API jofc2 que irei utilizar permite que fiquemos abstraídos do JSon utilizando somente java para configurar os gráficos.

Para iniciar os testes o primeiro passo é criar um projeto funcional do appfuse. Após o projeto ser criado vamos executar um primeiro exemplo simples de gráfico OFC utilizando html puro e json.

Para isso copie para a raiz web do seu projeto do appfuse criado o arquivo do pacote OFC chamado open-flash-chart.swf e crie os arquivos chart.htm e data.json na estrutura do projeto e copie o arquivo open-flash-chart.swf colocando-os sob o diretório src/main/webapp conforme mostrado na imagem abaixo:


Segue código a ser inserido no arquivo chart.htm(as tags de abertura e fechamento de html e body do código foram omitidas para compatibilidade de postagem com o blogspot e devem ser corrigidas antes de rodar o exemplo) :
html>
body>
 

Hello World

/body> html>


E o código do arquivo data.json:

{
  "title":{
    "text":  "Many data lines",
    "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
  },
 
  "y_legend":{
    "text": "Open Flash Chart",
    "style": "{color: #736AFF; font-size: 12px;}"
  },
 
  "elements":[
    {
      "type":      "bar",
      "alpha":     0.5,
      "colour":    "#9933CC",
      "text":      "Page views",
      "font-size": 10,
      "values" :   [9,6,7,9,5,7,6,9,7]
    },
    {
      "type":      "bar",
      "alpha":     0.5,
      "colour":    "#CC9933",
      "text":      "Page views 2",
      "font-size": 10,
      "values" :   [6,7,9,5,7,6,9,7,3]
    }
  ],
 
  "x_axis":{
    "stroke":1,
    "tick_height":10,
    "colour":"#d000d0",
    "grid_colour":"#00ff00",
    "labels": {
        "labels": ["January","February","March","April","May","June","July","August","Spetember"]
    }
   },
 
  "y_axis":{
    "stroke":      4,
    "tick_length": 3,
    "colour":      "#d000d0",
    "grid_colour": "#00ff00",
    "offset":      0,
    "max":         20
  }
}



Após ter configurado estes 3 arquivos para ver o seu primeiro gráfico OFC funcionando execute o projeto do Appfuse gerado com o comando mvn jetty:run e acesse a url: http://localhost:8080/chart.htm?ofc=data.json

Se tudo tiver sido feito corretamente um gráfico como o mostrado na imagem abaixo deverá ser renderizado. Em um próximo post irei detalhar como utilizar a biblioteca JOFC para renderizar os gráficos utilizando struts2 e jsp.



[]s