[整理]Flex嵌入jsp开发心得

最新推荐文章于 2023-05-20 17:31:42 发布

码YouMe

最新推荐文章于 2023-05-20 17:31:42 发布

阅读量9.7k

点赞数 1

分类专栏：前端文章标签： jsp flex application visualization library jfreechart

本文链接：https://blog.csdn.net/macau2008/article/details/5709647

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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代码如下：

<%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib uri="FlexTagLib" prefix="mm"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head></head> <body> <mm:mxml> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html"> <mx:Script>  </mx:Script> <mx:Panel title="PieChart Control" layout="vertical" color="0xffffff" borderAlpha="0.15" height="240" paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center"> <mx:PieChart id="chart" height="100%" width="100%" paddingRight="5" paddingLeft="5" color="0x323232" showDataTips="true" dataProvider="{medalsAC}"> <mx:series> <mx:PieSeries labelPosition="callout" field="Gold" labelFunction="displayGold"> <mx:calloutStroke> <mx:Stroke weight="0" color="0x888888" alpha="1.0" /> </mx:calloutStroke> <mx:radialStroke> <mx:Stroke weight="0" color="#FFFFFF" alpha="0.20" /> </mx:radialStroke> <mx:stroke> <mx:Stroke color="0" alpha="0.20" weight="2" /> </mx:stroke> </mx:PieSeries> </mx:series> </mx:PieChart> </mx:Panel> </mx:Application> </mm:mxml> </body> </html>

10.运行程序结果如图