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