`

Flex 学习小结(2)

阅读更多

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)

分享到:
评论

相关推荐

    flex 学习网址

    #### 小结 以上就是针对“flex 学习网址”的五个推荐资源。这些资料涵盖了Flex从基础知识到进阶技巧、再到实战案例的完整学习路径。无论是初学者还是有一定经验的开发者都能从中受益匪浅。希望各位通过阅读这些内容...

    FLEX从入门到精通.pdf

     1.4 本章小结  第2章 Flex3生态系统  2.1 Flex历史简介  2.2 Adobe Flex3生态系统,  2.2.1 运行时  2.2.2 语言  2.2.3 框架和API  2.2.4 数据通信  2.2.5 服务器  2.3 Adobe Flex RIA工作...

    如何在Flex中使用profile的教程

    #### 七、小结 Adobe Flex Profiler是开发者进行Flex应用性能分析的重要工具。通过本教程的学习,相信您已经掌握了如何使用Adobe Flex Profiler的基本流程。希望这些信息能够帮助您更好地理解并优化您的Flex应用...

    Flex中文帮助文档

    总的来说,这个压缩包提供的资料是一份全面的Flex学习资源,不仅覆盖了Flex的基础知识,还包含了实际项目开发的经验分享,对于想要深入理解和应用Flex的开发者来说,具有很高的参考价值。通过阅读和实践这些文档,...

    flex中tree的数据源是xml

    #### 小结 通过以上步骤,我们可以清晰地看到从数据库查询到生成XML文件的整个过程。这种方式不仅实现了数据的有效管理和传递,还极大地提高了Flex应用程序的灵活性和性能。对于开发者而言,掌握这种方法有助于更好...

    Flex从入门到实践2

    5. **小结与习题** 本章总结了导航组件的关键应用,强调了视图间的切换方法,并提出了几个关于如何使用这些组件设计导航的问题,以供读者巩固学习。 接下来,我们转向菜单设计。菜单是功能导航的重要组成部分,...

    Maven构建全栈式Flex、BlazeDS和Spring集成解决方案–第一部分_创建Maven_Flex模块

    #### 四、小结 通过上述步骤,我们可以成功构建一个完整的Flex、BlazeDS和Spring集成解决方案。这一集成方案不仅能够实现前端Flex与后端Spring的有效通信,还能够利用BlazeDS提供的远程服务功能,使得整个系统的...

    flex的mxml语言基础

    **小结** 总的来说,Flex项目由MXML和ActionScript协同完成,MXML负责界面展示,ActionScript负责逻辑处理。命名空间作为类的组织方式,避免了类名冲突。掌握MXML的基础知识,对于高效开发Flex应用至关重要。通过...

    关于打地鼠的Flex代码

    #### 小结 该Flex代码示例展示了如何使用Flex框架来实现一个简单的打地鼠游戏。通过对变量的管理和事件处理的合理安排,不仅确保了游戏逻辑的清晰性,还提高了用户体验。对于学习Flex编程的新手来说,这是一个很好的...

    Wiley.Adobe.Flash.Builder.4.and.Flex.4.Bible.Apr.2010.rar

    每个章节结尾通常会有小结和练习题,帮助巩固学习成果。对于想要深入掌握Flash Builder 4和Flex 4的开发者来说,这是一本不可多得的参考书。 总之,《Wiley Adobe Flash Builder 4 and Flex 4 Bible》涵盖了Flash ...

    CSS3小结

    **CSS3小结** 在网页设计领域,CSS3(Cascading Style Sheets Level 3)是HTML和XML文档样式表语言的最新版本,它极大地扩展了CSS2.1的功能,引入了许多新的特性和改进,使得网页设计更加丰富多彩,更具表现力。本...

    Web前端技术项目式教程(HTML5 CSS3 Flex Bootstrap)教案-美化网页.pdf

    4. **任务小结**:总结本课内容,巩固所学知识。 【教学资源】 1. **装有SublimeText3的电脑**:提供编写和测试代码的环境。 2. **教学课件PPT**:辅助教学,展示实例和讲解内容。 3. **教材**:《Web前端技术项目...

    AS3学习笔记flashdevelop平台搭建配置.pdf

    7. 小结 本学习笔记对FlashDevelop平台的搭建和配置进行了详细的介绍,并对其中涉及到的知识点进行了详细的解释。通过本学习笔记,读者可以快速掌握FlashDevelop平台的使用和配置,提高Flash项目的开发效率。

    css网页布局中注意的几个问题小结

    以下是对"css网页布局中注意的几个问题小结"的详细解释: 一、避免使用不常见的CSS属性和技巧 一些特殊的CSS属性如`break-word`用于强制换行,`z-index`用于元素的层叠顺序,以及各种垂直对齐方法,虽然在某些情况...

    Maven权威指南 很精典的学习教程,比ANT更好用

    小结 4. 定制一个Maven项目 4.1. 介绍 4.1.1. 下载本章样例 4.2. 定义Simple Weather项目 4.2.1. Yahoo! Weather RSS 4.3. 创建Simple Weather项目 4.4. 定制项目信息 4.5. 添加新的依赖 4.6. ...

    EMRESD学习教案.pptx

    EMR适合早期小肿瘤和平坦病变,而ESD则适用于EMR难以整片切除的大于2cm的病变,以及早期癌或无淋巴结转移的病例。禁忌症包括有消化道检查禁忌、凝血功能障碍、明显溃疡或瘢痕的病变,以及超声内镜显示癌细胞已侵犯...

    编译原理实验

    实验小结:概括实验过程中的主要学习点,包括编译器各阶段的理解和实践经验。 建议:提出改进编译器设计或提高实验效率的建议,如优化错误处理机制、增强代码生成的效率等。 体会:分享个人在实验中学到的新知识、...

    CSS布局最常见的八条错误小结

    2. **过度使用`&lt;div&gt;`标签**: 过度依赖`&lt;div&gt;`标签创建布局,容易导致代码冗余和可维护性降低。正确做法是根据内容结构使用合适的语义化标签,如`&lt;header&gt;`, `&lt;article&gt;`, `&lt;footer&gt;`等,这样有利于页面结构清晰,...

    一波CSS+Div实用技巧小结

    在网页设计中,CSS(层叠样式表)和Div元素是构建页面布局的重要工具。本文主要总结了一些关于CSS+Div的实用技巧,旨在帮助开发者提高工作效率,优化...在实际开发中,不断学习和实践新的CSS技术是保持竞争力的关键。

Global site tag (gtag.js) - Google Analytics