PM搞了个外包的小项目,要求使用jsp显示数据统计图表。研究了一下JFreeChart,感觉图片怪怪的。
前段时间也看过Flex,于是就想着用Flex来绘制图表在jsp上显示。一开始百度,google很没头绪,
后来查看自己的文件的时候发现了一个好东西——FlexModule_j2ee.zip。
马上解压一下,读了读readme.txt有了头绪了。研究了一把,把心得跟大伙分享一下。
1.首先下载并解压FlexModule_j2ee.zip这个就不多说了
2.把webtier.war解压,如图
3.在MyEclipse里新建web project,如图
4.复制第2步解压的文件到新建的项目中,如图
5.现在可以在jsp里面写flex代码了,不过写之前还是看看第1步里面的readme.txt吧,下面是原文的片段:
*******************************
* Using the JSP Tag Library *
*******************************
To use the Flex 3 Tag Library in a JSP page, add the following tag library declaration
to your JSP page:
<%@ taglib uri="FlexTagLib" prefix="mm" %>
As with any JSP taglib directive, this line must appear before you use any tags in the
Flex JSP tag library.
You can then use the <mxml> tag to insert a Flex application in the JSP page. You can
either reference a separate MXML file to be included in the JSP page, or you can add the MXML
syntax directly in the JSP page.
The following example shows the <mxml> tag with the source attribute to include an external
MXML file:
<mm:mxml source="CustomerServiceChat.mxml"/>
Alternatively, you can use the <mxml> tag with inline MXML source code, as the following
example shows:
<mm:mxml>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*">
<mx:Text label="Hello World">
</mx:Application>
</mm:mxml>
6.看了上文,现在我们可以在jsp里面写flex代码了。新建一个jsp文件,如图
7.按第5步所述,我们修改这个jsp文件,修改后如图
8.接着我们要在jsp里面写flex代码了,这里我们直接从adobe提供的demo里面拷贝一份PieChart的代码,如图
9.在jsp文件的<body></body>之间加入
<mm:mxml>
</mm:mxml>
标记,将第8步中的mxml源码拷贝到<mm:mxml></mm:mxml>之间,完成后的jsp代码如下:
10.运行程序结果如图
11.美中不足的是,flash中有Flex Data Visualization Trial水印字样,下图是除去水印的效果(除水印的方法不便公开,大家自己研究一下吧。)