FLEX 小结2

来源:互联网 发布:茂名软件开发公司 编辑:程序博客网 时间:2024/04/27 06:22

1 两个模块(MODULE间的传输)
  主程序:
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:ModuleLoader url="m1.swf" id="m1"/>
 <mx:ModuleLoader url="m2.swf" id="m2"/>
</mx:Application>
 模块1:
   <mx:Script>
  <![CDATA[
   public function getData():String {
    return "Module数据";
   }
  ]]>
 </mx:Script>
模块2:
  <mx:Script>
 <![CDATA[
  [Bindable]
  private var title:String;
  private function changeData():void {
   title = parentApplication.m1.child.getData();
  }
 ]]>
</mx:Script>
<mx:HBox>
 <mx:Label id="l1" text="Title: "/>
 <mx:Label id="myTitle" text="{title}"/>
</mx:HBox>
<mx:Button id="b1" label="数据传输" click="changeData()"/>


2 flex+struts1+livecycle的整合小结
    先来看看单单使用HTTPSERVICE的形式去跟JAVA连通的方法。
 
  1)建立FLEX-PROJECT工程,
  2) 要下载一个flex.war的东西(好象livecycle 最新的版本居然没这玩意,要重新下载)
  3) 在建立FLEX-PROJECT时,选J2EE容器,然后不选"use remote object access service"
  4)设定好TOMCAT容器后,注意把flex.war下的WEB-INF/FLEX目录整个COPY到当前工程的WEB-INF下,把web-inf/lib下的所有包也COPY到当前工程的web-inf下的LIB下去了。
  5)要修改一下web.xml,为了能支持structs1以及能以http://xxxx.mxml的形式访问,否则TOMCAT会解析不到mxml的形式。

  <web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
 <display-name>
 UserInfoSys</display-name>
    <context-param>
        <param-name>flex.class.path</param-name>
        <param-value>/WEB-INF/flex/hotfixes,/WEB-INF/flex/jars</param-value>
    </context-param>

    <!-- Http Flex Session attribute and binding listener support -->
    <listener>
        <listener-class>flex.messaging.HttpFlexSession</listener-class>
    </listener>

    <!-- MessageBroker Servlet -->
    <servlet>
        <servlet-name>MessageBrokerServlet</servlet-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>
        <init-param>
            <param-name>flex.write.path</param-name>
            <param-value>/WEB-INF/flex</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet>
        <servlet-name>FlexMxmlServlet</servlet-name>
      
      
        <servlet-class>flex.bootstrap.BootstrapServlet</servlet-class>
        <init-param>
            <param-name>servlet.class</param-name>
            <param-value>flex.webtier.server.j2ee.MxmlServlet</param-value>
        </init-param>
        <init-param>
            <param-name>webtier.configuration.file</param-name>
            <param-value>/WEB-INF/flex/flex-webtier-config.xml</param-value>
        </init-param>
       <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet>
        <servlet-name>FlexSwfServlet</servlet-name>
      
        <servlet-class>flex.bootstrap.BootstrapServlet</servlet-class>
        <init-param>
            <param-name>servlet.class</param-name>
            <param-value>flex.webtier.server.j2ee.SwfServlet</param-value>
        </init-param>
        <!-- SwfServlet must be initialized after MxmlServlet -->
        <load-on-startup>2</load-on-startup>
    </servlet>

    <servlet>
        <servlet-name>FlexForbiddenServlet</servlet-name>
      
        <servlet-class>flex.bootstrap.BootstrapServlet</servlet-class>
        <init-param>
            <param-name>servlet.class</param-name>
            <param-value>flex.webtier.server.j2ee.ForbiddenServlet</param-value>
        </init-param>
    </servlet>

    <servlet>
        <servlet-name>FlexInternalServlet</servlet-name>
        <servlet-class>flex.bootstrap.BootstrapServlet</servlet-class>
        <init-param>
            <param-name>servlet.class</param-name>
            <param-value>flex.webtier.server.j2ee.filemanager.FileManagerServlet</param-value>
        </init-param>
        <load-on-startup>10</load-on-startup>
    </servlet>
   
    <!-- Standard Action Servlet Configuration -->
 <servlet>
     <servlet-name>action</servlet-name>
     <servlet-class>org.apache.struts.action.ActionServlet</servlet-class>
     <init-param>
       <param-name>config</param-name>
       <param-value>/WEB-INF/struts-config.xml</param-value>
     </init-param>
     <load-on-startup>2</load-on-startup>
 </servlet>   

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

    <servlet-mapping>
        <servlet-name>FlexMxmlServlet</servlet-name>
        <url-pattern>*.mxml</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>FlexSwfServlet</servlet-name>
        <url-pattern>*.swf</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>FlexForbiddenServlet</servlet-name>
        <url-pattern>*.as</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>FlexForbiddenServlet</servlet-name>
        <url-pattern>*.swc</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>FlexInternalServlet</servlet-name>
        <url-pattern>/flex-internal/*</url-pattern>
    </servlet-mapping>
   
    <!-- Standard Action Servlet Mapping -->
    <servlet-mapping>
        <servlet-name>action</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>   
6  之后就可以在src目录下象原来做STRUTS1那样去做struts1
7 在flex界面中,使用httpservice组件
   <mx:HTTPService id="listSrv" url="/UserInfoSys/ListAllUsers.do" /> 
<mx:Panel title="当前系统用户" width="100%" height="100%">
  <mx:TileList id="list" dataProvider="{listSrv.lastResult.user}"
   itemRenderer="Bref" width="100%" height="100%" />
 </mx:Panel> 

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

            private function resultHandler(event:ResultEvent):void
            {
                Alert.show("更新成功!");
            }
           
            private function faultHandler(event:FaultEvent):void
            {
                Alert.show(event.fault.message, "无法完成更新!");
            }

 ]]>
</mx:Script>

<mx:HTTPService id="updateSrv" method="GET" url="/UserInfoSys/UpdateUser.do" result="resultHandler(event)"
  fault="faultHandler(event)">
  <mx:request>
   <user_id>{list.selectedItem.user_id}</user_id>
   <name>{userName.text}</name>
   <title>{titl.text}</title>
   <image>{list.selectedItem.image}</image>
   <imagebref>{list.selectedItem.imagebref}</imagebref>
   <description>{description.text}</description>
  </mx:request>
 </mx:HTTPService>
注意,{listSrv.lastResult.user}其实就是struts1返回给界面的列表集合了,注意lastResult的运用;

<mx:HTTPService id="updateSrv">部分,指出了当更新数据信息时,需要把当前的信息发送到struts1的sevice层去处理

 

8  在flex中使用livecycle的功能
    1) 在flex-project时记得选用use remote object access service
    2) 修改web-inf/flex目录下的remoting-config.xml,修改如下:
   <destination id="user">
 <properties>
   <source>flex.userinfosys.db.user.UserService</source>
   </properties>
   </destination>
这表明要通过flex远程调用struts1中的service层

 3) 使用remoteobject组件
    <mx:RemoteObject id="srv" destination="user"/>
<mx:Panel title="所有系统用户" width="70%" height="100%">
 <mx:DataGrid width="100%" id="list" dataProvider="{srv.getUsers.lastResult}" height="100%">
  <mx:columns>
   <mx:DataGridColumn headerText="姓名" dataField="name"/>
   <mx:DataGridColumn headerText="职位" dataField="title"/>
   <mx:DataGridColumn headerText="简介" dataField="description"/>
  </mx:columns>
 </mx:DataGrid>
4) 假如我们的应用是分左右两部分,左边部分显示数据列表,右边部分要实现的效果是点每条左边的数据,右边显示出其
详细信息的话,可以这样做:
    A首先建立一个User.as,
  [Managed]
 [RemoteClass(alias="flex.userinfosys.db.user.UserProfile")]
 
 public class User
 {
  public function User()
  {
  }
  public var userId:int;
  public var name:String;
  public var title:String;
  public var image:String;
  public var imagebref:String;
  public var description:String;

 }
  remoteclass建立了一个user类(actionscript)到JAVA的POJO类之间的一个映射,会将actionscript类转化为JAVA的POJO类了

 要特别注意的是,JAVA的POJO类中,必须要默认的空的构造函数,否则会出错的。
  B 然后建立一个MX控件
    <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="367" height="522" title="详细信息" xmlns:local="*">

<local:User id="user"
userId="{user.userId}"
name="{userName.text}"
title="{titl.text}"
image="{image.text}"
imagebref="{imagebref.text}"
description="{description.text}"/>

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

            private function resultHandler(event:ResultEvent):void
            {
                Alert.show("更新成功!");
            }
           
            private function faultHandler(event:FaultEvent):void
            {
                Alert.show(event.fault.message, "无法完成更新!");
            }

 ]]>
</mx:Script>
<mx:RemoteObject id="srv" destination="user" result="resultHandler(event)" fault="faultHandler(event)"/>
<mx:Image top="10" left="28" horizontalAlign="center" source="images/{user.image}" width="140" height="210" />
 <mx:Form  width="100%" top="220" left="10" height="185">
  <mx:FormItem label="姓名">
   <mx:TextInput text="{user.name}" id="userName"/>
  </mx:FormItem>
  <mx:FormItem label="职位">
   <mx:TextInput text="{user.title}" id="titl"/>
  </mx:FormItem>
。。。。。。。
  <mx:Button label="更新" click="srv.update(user);"/>


5 注意的一点是,在建立FLEX PROJECT时,最好设置的CONTENT FOLDER为WebRoot,这样可以通过MYECLIPSE的ADD WEB project
capbilities,将工程转化为J2EE PROJECT,可以部署到TOMCAT去(注意不要选重新生成WEB。XML,否则会覆盖掉原来FLEX的web.xml)