在常規的開發中只是用flex二不和后台交互是不可能的,為此flex也提供了和后台交互的2種解決方案一種是Data Services另一種是BlazeDs,本篇博客是用的是后一種,我的開發步驟如下:
1.下載BlazeDs的war包,下載war包需要注冊,下載地址如下:
https://www.adobe.com/cfusion/entitlement/index.cfm?e=lc_blazeds
2.解壓或者部署war包,把WEB-INF下面的flex文件夾復制到項目的WEB-INF下面,把lib里面的所有jar包和目標項目合並
3.下載spring整合flex的jar包,下載地址是:
http://www.springsource.org/spring-flex/
下載好后把dist下面的jar包復制到項目的lib下面
4.編寫處理后台數據的代碼,java類也交給spring來處理,下面是我的xml配置文件
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5.xsd"> <bean id="flexPlanService" class="org.lxh.module.plan.flex.FlexPlanManagerImpl"> <property name="planManager" ref="planManager"/> </bean> </beans>
5.編寫spring和flex交互的主要配置文件,文件名稱見名知義就行,配置大致如下
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:flex="http://www.springframework.org/schema/flex" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=" http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5.xsd http://www.springframework.org/schema/flex http://www.springframework.org/schema/flex/spring-flex-1.0.xsd"> <bean id="_messageBroker" class="org.springframework.flex.core.MessageBrokerFactoryBean" > <property name="servicesConfigPath" value="WEB-INF/flex/services-config.xml"/> </bean> <!--spring mvc配置,所有請求都由_messageBroker處理--> <bean class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping"> <property name="mappings"> <value>/*=_messageBroker</value> </property> </bean> <bean class="org.springframework.flex.servlet.MessageBrokerHandlerAdapter"/> <!-- destination-id是目標ID 這個名稱在mxml頁面上會被用到--> <flex:remoting-destination ref="flexPlanService" destination-id="flexPlanService"/> </beans>
最后一行的ref熟悉就不介紹了,一般學過spring的都知道怎么用
6.在web.xml加入springmvc配置把上面的交互文件交給spring管理,配置如下
<!-- SpringMVC配置 --> <servlet> <servlet-name>SpringDispatcher</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:applicationContext-flex.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>SpringDispatcher</servlet-name> <url-pattern>/messagebroker/*</url-pattern> </servlet-mapping>
7.給項目添加flex支持
(1)鼠標右擊項目,找到Add Flex project type,如下所示
(2)在出現的窗口選擇下一步,如下所示
(3)點擊“下一步”進入下一個配置界面
需要注意的是Root folder,這里選擇項目的根目錄即可,選好后要注意點擊“validate configuration”按鈕驗證配置,驗證成功后,點擊finish之后可能會報錯,在problems里找到error,右鍵點擊選擇重建html-template即可
(4)這一步是可選的,一般我們把flex的main source folder換成別的
(5)這一步也是可選的,我們一般把webcontent或者webroot作為flex的輸出目錄
改動之后也是需要驗證的,驗證成功即可
8.編寫flex頁面,我這里只是簡單的用表格顯示出所有的部門信息,頁面代碼如下
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="300" minHeight="300" initialize="init()"> <fx:Declarations> <!-- 這里的的destination對應spring配置文件里的destination-id--> <s:RemoteObject id="planServiceRO" destination="flexPlanService" endpoint="/myssm/messagebroker/amf"> <!-- name對應的是bean里的接口方法 result配置的actionscript類似回調函數--> <s:method name="getAllPlan" result="getAllPlansSuccess(event)"/> </s:RemoteObject> </fx:Declarations> <fx:Script> <![CDATA[ import com.adobe.serialization.json.JSON import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.core.FlexGlobals; import mx.events.FlexEvent; import mx.events.ListEvent; import mx.managers.PopUpManager; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; private function init():void{ planServiceRO.getAllPlan(); } //把數據綁定到表格里,數據類型使用的是json,此處需要一個叫as3corelib.swc的類庫文件 ,把它放在libs目錄里即可 private function getAllPlansSuccess(event:ResultEvent):void{ var planData:ArrayCollection=new ArrayCollection(com.adobe.serialization.json.JSON.decode(event.result.toString())); planDataGrid.dataProvider=planData; } ]]> </fx:Script> <mx:DataGrid id="planDataGrid" x="500" y="200" width="300" height="300" allowMultipleSelection="true" alternatingItemColors="[0xe3eaf2,0xe8f1f8]"> <mx:columns> <!-- dataField屬性配置的是json的key --> <mx:DataGridColumn dataField="fid" headerText="部門ID" showDataTips="true"/> <mx:DataGridColumn dataField="fname" headerText="部門名稱" showDataTips="true"/> </mx:columns> </mx:DataGrid> </s:Application>
下面我把自己的業務實現類代碼貼出來,這個方法拼接了json字符串
package org.lxh.module.plan.flex; import java.util.*; import org.lxh.module.plan.dao.PlanManager; import org.lxh.module.plan.info.PlanInfo; public class FlexPlanManagerImpl implements FlexPlanManager { private PlanManager planManager; public PlanManager getPlanManager() { return planManager; } public void setPlanManager(PlanManager planManager) { this.planManager = planManager; } public String getAllPlan() { List<Map> json=new ArrayList<Map>(); List<PlanInfo> all=planManager.getAllPlan(); Iterator<PlanInfo> it=all.iterator(); while(it.hasNext()){ PlanInfo p=it.next(); Map<String,Object> map=new HashMap<String,Object>(); map.put("\"fid\"", "\""+p.getFID()+"\""); map.put("\"fname\"", "\""+p.getFNAME()+"\""); json.add(map); } return json.toString().replaceAll("=", ":"); } }
只有學懂了spring要整合spring是不是很簡單呢,來看下我的效果圖
下面再把我的ibatis配置文件貼出來給大家看看
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="PlanInfo"> <resultMap id="resultMap" type="org.lxh.module.plan.info.PlanInfo"> <result property="fID" column="fID"/> <result property="fNAME" column="fNAME"/> </resultMap> <select id="getAllPlan" parameterType="org.lxh.module.plan.info.PlanInfo" resultMap="resultMap"> select * from m_depart </select> </mapper>
下面是我oracle里的數據表