伪ssh2框架集成open flash chart2全记录（一）

首先阐明为何是伪ssh2框架，因为这是公司的一个项目，集成了Struts2和spring3，并没有涉及到到hibernate的使用，所以暂且称它为伪SSH2框架，应为在真正的SSH2框架中使用open flash chart2的技术和在此框架是一样的。废话有点多啊、、、

    先概括下什么是open flash chart2，open flash chart 是一个用来生成flash图标的组件，2当然就是第二个版本了，目前最新版本是2.0。使用该组件可以轻松的在web 前端绘制出令人激动的flash伪动态图表（怎么都是伪的？这里指的伪是图表示可以动的，flash就可以动的啦，废话嘛），其实open flash chart是可以绘制出真正的动态图表的，动态请求新数据。

    在ssh框架要集成open flash chart2需要去官网下载open flash chart2的组件包，官网地址：http://openflashchart.com/

在DOWNDOWNS标签页里选择这个包下载：

这是一个包含demo的完整包，下载下来备用。

下载后解压缩，看到文件夹里有好多东西啊、、、兴奋时刻开始啦、、

痛苦的学习经历就此开始了，谁让你那么想成为牛逼人物呢，就从简单的开始学吧、、、

data-files里有很多html和txt文件 ，html源码中就调用了这些txt文件作为数据来源，在此，我们明确了一点，txt文件时可以作为open flash chart的数据源的，这一点很重要，在之后遇到问题debug时会有用处。

    【最重要的上场啦】文件夹根目录里有2个文件，open flash chart.swf，和swfobject.js，从文件名上就可以看出前者是生成flash用的工具文件，后者是需要用到的javascript文件。

    这时候我们就会想到，既然open flash chart是一个组件，那么想要让java支持这个组件我们似乎还需要做点什么吧，第一个想到的必然是添加必要jar包，ssh框架使用open flash chart 必须要添加2个相关jar包，这在网上可以下载到xstream-1.3.1.jar和jofc-jofc2.jar，下载好这2个jar包后把它们加入到工程的classpath中去，这事我们想起了刚才文件夹里的2个文件open flash chart.swf，和swfobject.js，这2个文件怎么用？在看过官方demo后，我们知道，我们应该把这2个文件归档到工程中，在WebContent新建个目录，名字随便，我这里取名为ShapeReport，把这2个文件拷贝到这个文件夹下，这时候我们的开发环境是不是基本集成好了呢？我们先来看下官方demo中的html

其中有一段是这样的

<script type="text/javascript">

swfobject.embedSWF("open-flash-chart.swf", 

"my_chart", "1024", "500", "9.0.0","expressInstall.swf",

{"data-file":"data.txt"});

        </script>

data-file肯定是接受数据的，数据源是一个txt文件，我们看一下txt文件的内容大概是这样的：

{

  "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" :   [4,9,6,7,9,5,7,6,9]

    }

  ],

  "x_axis":{

    "stroke":1,

    "tick_height":10,

    "colour":"#d000d0",

    "grid_colour":"#00ff00",

    "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

  }

/* &x_axis_steps=2& */

}

    一看这个文件内容是不是很有亲切感，没错，这就是json数据嘛，好了，问题出来了，我们如何把我们的数据组装成这个格式的数据呢？这时是不是想到了我们刚刚从网上下载的2个jar包，没错，着个jar用来生成图表对象，例如PieChart(饼图)，LineChart(线图),BarChart(柱状图)，这些对象的模型都包含在jar包内了，我们可以直接来生成一个对象，然后给改对象设置属性，是不是就生成一个图了？答案是肯定的！！现在的问题是，虽然我们生成了图的数据，但前台data-file接受的是json数据，我们怎么样把这些对象生成json数据传回前台供解析呢？这时我们就会想到SSH的struts框架了，它不是可以按照规定的要求返回到前台合适的数据类型吗？我们公司的工程在这个环节上废了我九牛二虎之力啊，我在struts.xml中配置了返回json类型，我一开始的代码大概是这样的：

下载json包加入classpath，<action name="testAction" class="com.json.action.TestAction" method="testMethod">   

<interceptor-ref name="json" /><!--处理以JSON文本提交的请求-->   
    <result type="json" /> <!--将action的bean属性以json字符串返回浏览器-->   
</action>   

这样配置了之后，我发现前台始终无法解析我传回的json数据，后来发现与我们项目的系统框架有冲突，那怎么办呢？算了，自己动手丰衣足食，自己写返回类型。

写了个返回类型的类:

OFC2Result.javaimport java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import jofc2.model.Chart;

import org.apache.struts2.StrutsStatics;

import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionInvocation;
import com.opensymphony.xwork2.Result;
import com.opensymphony.xwork2.util.ValueStack;

public class OFC2Result implements Result {
private static final long serialVersionUID = 6881760833309063964L;

@Override
public void execute(ActionInvocation invocation) throws Exception {
ActionContext actionContext = invocation.getInvocationContext();
        HttpServletResponse response = (HttpServletResponse) actionContext
                .get(StrutsStatics.HTTP_RESPONSE);
        
        try {
            ValueStack stack = invocation.getStack();
            Chart chart = (Chart)stack.findValue("ofcChart");
            
            response.setContentType("application/json-rpc;charset=utf-8");
            response.setHeader("Cache-Control", "no-cache");
            response.setHeader("Expires", "0");
            response.setHeader("Pragma", "No-cache");
            
            PrintWriter out = response.getWriter();
            out.print(chart.toString());
        } catch (IOException exception) {
            throw exception;
        }

}

}

 

struts.xml的配置文件中改为：

<package name="ofc2-default" extends="struts-default">
        <result-types>
            <result-type name="ofc2" class="com.****.reportshape.utils.OFC2Result"/>
        </result-types>
    </package>

 

现在我们就可把ofc2作为返回类型啦。

到此，组件集成基本就大功告成了，下一篇中我会把我写的demo的代码贴出来，欢迎拍砖啥的、、、