在项目中使用flex——思路2

传统的HttpService方式显然对于我们项目来说不那么实用，如果既想保留传统页面，又想使用Flex就要换种思路了，就是将flex嵌入到传统页面中（其实上面例子也是这样做的，只不过是Adobe自动生成js自动帮助嵌入的）。

首先介绍两种组件，第一个不用多说，BlazeDS，Adobe提供的用于和java交互的免费项目，精简版的LCDS（LiveCycle Data Service）。

使用：将BlazeDS发布包（Adobe老窝有）中的flex目录文件夹拷到web-inf下，lib下所有类库导进来（有些用不到）就OK了，进行远程回调时主要是写remote-config.xml，下面会提到。

还有一个就是swfobject，这个是老外（可能是小外）开发的js库，目前版本2.0，主要用来方便的嵌入swf文件（flex编译后产生swf），主要就一个方法

swfobject.embedSWF(swf文件名,要嵌入的html容器名, 宽, 高, flash版本号)，另外还有提供传入swf的参数的选项等，封装的比Adobe公司提供的AC_OETags.js要强大一些，使用起来也更加方便。

下面以图表显示为例：首先是显示曲线图。

客户端js代码：

//先将html页面数据封装成JSON:

function queryAreaChart(sh){
 var qssj = $F("sssqqYear")+$F("sssqqMonth");
 var jzsj = $F("sssqzYear")+$F("sssqzMonth");
 var obj = "{'sh':'"+sh+"','qssj':'"+qssj+"','jzsj':'"+jzsj+"'}";//页面的查询条件：起始时间，截止时间，税号
 $("areachartdata").value=obj;//先缓存起来
  $("DataContent").style.display="none";
 $("AreaContent").style.display="";
 swfobject.embedSWF("/sygl/wjgssygl-flex-debug/AreaChart.swf","AreaContent", "1200", "600", "9.0.0");//开始加载flex
}

//这个方法由ActionScript调用

function getAreaChart(){
 var str = $("areachartdata").value;
 var obj = eval('('+str+')');
 return obj;
}

Flex代码（这里使用了BlazeDS远程回调）：

<?xml version="1.0"?>
<mx:Application xmlns:mx="[url]http://www.adobe.com/2006/mxml[/url]"
  backgroundGradientAlphas="[1.0, 1.0]" 
  backgroundGradientColors="[#11EDD0, #D6F3DB]"
  initialize="callremote()">

<mx:Style>
.ChineseFont{
fontFamily:”Verdana”,”宋体”;
fontSize:12;
}
</mx:Style>

    <mx:Script>
        <![CDATA[
        import mx.rpc.events.ResultEvent;

        import mx.collections.ArrayCollection;
         [Bindable]
         private var dp:ArrayCollection;


          //回调函数获得页面JSON，关键函数ExternalInterface.call（js函数名，参数）
        public function callremote():void{
          var f:String = "getAreaChart";
          var obj:Object = ExternalInterface.call(f);
          hs.getData(obj);//开始调用java端的方法
        } 


        public function back():void{
          var f:String = "backdata";
          var obj:Object = ExternalInterface.call(f);
        }


        public function resultHandler(event:ResultEvent):void{
         var obj:Object = event.result;//获得java服务端返回的Map,到客户端自动转型为object，List转为Array
          dp = new ArrayCollection( [
            { Month: "一月", 区局: obj["qjdata1"], 分局: obj["fjdata1"]},
            { Month: "二月", 区局: obj["qjdata2"], 分局: obj["fjdata2"]},
            { Month: "三月", 区局: obj["qjdata3"], 分局: obj["fjdata3"]},
            { Month: "四月", 区局: obj["qjdata4"], 分局: obj["fjdata4"]},
            { Month: "五月", 区局: obj["qjdata5"], 分局: obj["fjdata5"]},
            { Month: "六月", 区局: obj["qjdata6"], 分局: obj["fjdata6"]},
            { Month: "七月", 区局: obj["qjdata7"], 分局: obj["fjdata7"]},
            { Month: "八月", 区局: obj["qjdata8"], 分局: obj["fjdata8"]},
            { Month: "九月", 区局: obj["qjdata9"], 分局: obj["fjdata9"]},
            { Month: "十月", 区局: obj["qjdata10"], 分局: obj["fjdata10"]},
            { Month: "十一月", 区局: obj["qjdata11"], 分局: obj["fjdata11"]},
            { Month: "十二月", 区局: obj["qjdata12"], 分局: obj["fjdata12"]} ]);
        }
        ]]>
    </mx:Script>

 <!--flex回调对象-->
 <mx:RemoteObject  id="hs"  destination="hyyjtService" >
 <mx:method name="getData" result="resultHandler(event)"/>
 </mx:RemoteObject> 
    <!-- Define custom colors for use as fills in the AreaChart control. -->
    <mx:SolidColor id="sc1" color="blue" alpha=".3"/>
    <mx:SolidColor id="sc2" color="red" alpha=".3"/>
    <mx:SolidColor id="sc3" color="green" alpha=".3"/>

    <!-- Define custom Strokes. -->
    <mx:Stroke id = "s1" color="blue" weight="2"/>
    <mx:Stroke id = "s2" color="red" weight="2"/>
    <mx:Stroke id = "s3" color="green" weight="2"/>

    <mx:Panel title="企业税负图示"  fontSize="12"
        height="100%" width="70%" layout="horizontal">

        <mx:AreaChart id="Areachart" height="100%" width="100%"
             showDataTips="true" dataProvider="{dp}">//数据绑定到图

            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="Month"/>
            </mx:horizontalAxis>

            <mx:series>
                <mx:AreaSeries yField="区局" form="curve" displayName="区局" areaStroke="{s1}" areaFill="{sc1}"/>
                <mx:AreaSeries yField="分局" form="curve" displayName="分局" areaStroke="{s2}" areaFill="{sc2}"/>
            </mx:series>
        </mx:AreaChart>
        <mx:Button label="返回"  click="back()"/>

        <mx:Legend dataProvider="{Areachart}"  legendItemClass="BigFontLegendItem"/>

    </mx:Panel>
</mx:Application>

java服务端代码：

public class HyyjtService {
  //获得显示数据
  public Map getData(Map map){
   //测试数据
   Map m = new HashMap();
   m.put("qjdata1", 1);
   m.put("qjdata2", 2);
   m.put("qjdata3", 3);
   m.put("qjdata4", 4);
   m.put("qjdata5", 5);
   m.put("qjdata6", 6);
   m.put("qjdata7", 7);
   m.put("qjdata8", 8);
   m.put("qjdata9", 5);
//省略。。。。
   return m;
  }
}

web.xml添加配置：

    <listener>
        <listener-class>flex.messaging.HttpFlexSession</listener-class>
    </listener>

    <servlet>
        <servlet-name>MessageBrokerServlet</servlet-name>
        <display-name>MessageBrokerServlet</display-name>
        <servlet-class>flex.messaging.MessageBrokerServlet</servlet-class>
        <init-param>
            <param-name>services.configuration.file</param-name>
            <param-value>/WEB-INF/flex/services-config.xml</param-value>
       </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

<servlet-mapping>


        <servlet-name>MessageBrokerServlet</servlet-name>
        <url-pattern>/messagebroker/*</url-pattern>

</servlet-mapping>

remote-config.xml配置：

<?xml version="1.0" encoding="UTF-8"?>
<service id="remoting-service" 
    class="flex.messaging.services.RemotingService">

    <adapters>
        <adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/>
    </adapters>

    <default-channels>
        <channel ref="my-amf"/>
    </default-channels>
   //回调类定义
    <destination id="hyyjtService">      
      <properties>      
          <source>cn.tohot.sygl.yjfx.chart.HyyjtService</source >      
      </properties> 
   </destination>

</service>