Flex开发笔记.docx
- 文档编号:17405741
- 上传时间:2023-07-25
- 格式:DOCX
- 页数:13
- 大小:179.03KB
Flex开发笔记.docx
《Flex开发笔记.docx》由会员分享,可在线阅读,更多相关《Flex开发笔记.docx(13页珍藏版)》请在冰点文库上搜索。
Flex开发笔记
Flex开发笔记
本文以“流程图绘制工具”的二次开发为例,简单介绍Flex开发的相关技术问题。
一、工程结构认识
图1.1工程结构
如图1.1所示为“流程图绘制工具”的工程文件结构。
通常flex工程采用如图的文件结构:
component包——自定义的组件、弹出窗口;control包——actionScript类文件;CSS——样式文件;img——图片;skins——皮肤文件。
该结构并无强制要求,视个人习惯而定。
二、MXML基础知识
组件文件(mxml)主要包括三部分:
Script>、 Declarations>和标签。 Script类似于JSP中的javaScript,页面上的相应函数都写在这一部份,比如事件响应、初始化函数等等;declaration是声明部分,包含remoteObject或下拉列表的选项的定义等数据的声明;标签部分相当于JSP中 如下图为一个mxml文件内容的例子。 图1.2mxml文件示例 需要注意的一点是: 在Flex4中,很多标签是有两套的,一套属于Spark包,一套属于mx包,特殊的历史原因造成的…给我们带来的麻烦是,同名的两套组件在一些细节上是不同的,比如含有的属性,比如一些属性的默认值等等,使用时要根据需求选择好。 最重要的是,比如你在mxml文件中使用了一个组件,它属于mx包。 而在其他文件中需要调用这一组件时可能需要进行import操作,千万注意,不要错误的引入spark包中的同名类,这可能会导致工程错误。 import包时一定保持一致。 三、与JAVA交互 作为主工程中的一个模块,Flex与Java的数据交互是必须的,这里介绍一下二者整合的方法。 本文使用的是借助BlazeDS实现交互的方法。 准备BlazeDS的war包,解压后得到META-INF和WEB-INF两个文件夹,覆盖工程原有的两个文件夹(注意,覆盖前要查看工程的web.xml文件,如果已有内容,WEB-INF文件夹不要进行全部覆盖操作。 可先将WEB-INF下的其他文件加入工程,再手动将BlazeDS的web.xml文件的内容添加进工程的web.xml文件中)。 修改WEB-INF/flex文件夹下的flex-config.xml文件。 添加如下标签: edu.hrbeu.platform.requirements.workflow.dao.OperationParams Source的值是将与Flex交互的java文件的路径。 接下来在需要进行数据交互的MXML文件的 Declarations>中添加java类的声明,如下所示: Declarations> RemoteObjectdestination="operation_params"id="operParams"> RemoteObject> Declarations> Destination属性值是该JAVA类在flex-config.xml中注册时的ID属性值,而此处的ID属性值将是该RemoteObject对象在当前文件的调用过程中的“别名”。 下面就可以在函数中调用java类中的方法了。 privatefunctiongetObjectClassList(): void { operParams.getObjectClassList(); operParams.addEventListener(ResultEvent.RESULT,fillObjectClassList); } 注意,这里的getObjectClassList()方法是有返回值的,但却并未在调用时就声明返回值接收容器,而是添加了事件监听,这样做是Flex的机制决定的。 Flex是在访问RemoteObject时是异步的,当它调用了RemoteObject中指向的java类的某个方法后,会立即执行下面的flex代码,而不是等待java方法执行结束。 因此,如果你想调用的java方法有返回值且需要取得这个值,用varstr: String=operParams.getName();这样的语句是行不通的。 正确的方法是operParams.getName();,然后为operParams添加监听(ResultEvent.RESULT),在监听函数中获得e.result,即函数返回值。 privatefunctionfillObjectClassList(e: ResultEvent): void { varlist: ArrayCollection=e.resultasArrayCollection; operParams.removeEventListener(ResultEvent.RESULT,fillObjectClassList); this.ObjectClassList=list; } 由于在工程内可能会多次调用该java类,每次有返回值的调用都要借助ResultEvent.RESULT事件,且处理函数不同。 因此在每次处理返回结果后最好将绑定在该事件上的监听去掉,方便下次重新配置对该事件的监听。 四、整合Spring 流程图绘制工具是整个平台的一个模块,因此需要与平台的框架保持一致。 平台主工程使用了Spring+hibernate的结构,因此本模块也要使用这一框架。 将Java类中的代码按要求划分并写好Spring的配置文件后,运行程序会发现一直报错,检查错误信息是由于在各层的调用过程中使用的接口变量为空,换句话说,Spring的自动注入没能触发。 这可能是Flex机制的问题,它的访问与Web工程对java类的访问有所不同,没能触发Spring的注入操作,解决办法是对Flex和Spring进行整合。 关于整合,网上有很多的教程,可每篇选用的方法、涉及的文件修改、环境要求又都不相同。 。 。 。 由于本次开发是在主工程已搭建好Spring环境的前提下进行的,为了使对主工程的文件最小修改,选用了一种利用SpringFactory进行整合的办法,只需要修改本模块的部分配置文件而不会改变主工程的文件内容。 1.在Flex的services-config.xml文件里注册Spring工厂: Class属性值是SpringFactory类的路径。 2.在Spring里面定义bean: class="edu.hrbeu.platform.requirements.workflow.action.WorkflowAction"> 3.在flex的远程对象配置文件里配置远程对象,这里要指定远程对象的创建工厂为第1步配置的工厂,远程对象的source要指向Spring里定义的bean 4.在页面就可以使用远程对象了(在页面注册了RemoteObject之后) privatefunctionprepareParams(): void { operParams.getParams(); operParams.addEventListener(ResultEvent.RESULT,fillParams); } 需要的SpringFactory类可在下面的网址查看: 五、Flex与Java的数据传递 1、基本数据类型 已经知道了如何在Flex中调用Java类中的函数,但有的函数是有返回值的,有的函数需要传参,但二者的数据类型并不是统一的,想要交互数据就需要解决二者间的数据映射问题。 下表列出了部分常用的数据类型的映射关系: ActionScriptJava Date java.util.Date int java.lang.Integer Number java.lang.Double java.lang.String XML org.w3c.dom.Document XMLDocument org.w3c.dom.Document ActionScriptJava int java.lang.Integer int java.lang.Short int java.lang.Byte Number java.lang.Double Number java.lang.Long Number java.lang.Float mx.collection.ArrayCollection java.util.Collection Array(sparse) java.util.Map 2、Map Java中的Map类型数据传递至Flex端还有一个不错的选择,就是用Object接收。 将key值作为对象的属性名使用,如: Map 3、XML Flex端的XML对象如果传至Java端,一定要用org.w3c.dom.Document的对象接收,而不要使用诸如DOM4J的xml对象。 反之当Java需要给Flex传递xml对象时也需要使用org.w3c.dom.Document类型。 4、自定义对象 有时需要在Flex与Java间传递自定义的对象,尤其是当主工程使用了hibernate时。 比如,数据库中有OperationInfo表,通过hibernate配置后形成对应的OperationInfo.java及OperationInfo.nbm.xml文件。 我们希望的是,在前台页面,即Flex端填写好各项属性信息后,能够传给Java端进行入库操作。 Java端的代码不必多说,利用hiberna的add方法即可实现,关键在Flex端。 在Flex中创建同名as类,将java实体类中的属性定义复制到as类中,按as语言规则修改定义格式(注: 二者类名、属性数量、属性类型必须保持一致)。 在as类的类声明前添加声明: [Bindable] [RemoteClass(alias="mon.pojo.OperationInfo")] Alias属性值时对应的java类的路径。 这样,两个类形成了映射关系,可以互相接收了。 使用过程如下: 1.varbean: OperationInfo=newOperationInfo(); 2.bean.operationName=operate_name.text;//省略其他属性的赋值过程 3.operParams.saveOperToDb(bean);//调用RemoteObject关联的类的方法将对象传至java中 4.this.add(bean);//调用hibernate的add方法向数据表中插入记录 六、Flex端开发 解决了与Java的交互问题,剩下的就是在Flex端进行开发,实现前台的功能,改善用户体验。 下面以本次对“流程图绘制工具”的二次开发为例,列举Flex开发中的一些技术问题。 1、弹出窗口 这里的弹出窗口不是指弹出的提示框或选择框,而是指一个新的窗口,如下图的“操作描述”窗口。 在Flex中,这样的弹出窗口都是通过自定义组件来实现的。 新建一个MXML文件并按需要依次布局、添加标签、添加事件处理,最终形成一个新的组件(页面、窗口)。 想要它能够在点击某个按钮时弹出来,就要借助PopUpManager了。 在父页面的按钮上添加单击事件监听,在处理函数中调用PopUpManager的addPopUp方法,将需要弹出的组件的实例化对象作为参数,就可以将自定义组件窗口弹出了。 但Flex中,默认的弹出位置是左上角,而通常的习惯是在容器中央弹出窗口,因此对上面的代码稍作修改可实现在中央弹出窗口: PopUpManager.addPopUp(window,this,true); PopUpManager.centerPopUp(window); 2、下拉列表 Flex中有两个组件可实现下拉列表: DropDownList和ComboBox。 区别在于前者只能选,后者可输可选。 当需要在下拉列表上显示一些默认值的时候,后者要方便一些。 关于下拉列表的数据项,这里不介绍在页面写死的情况了,主要介绍通过与Java交互后如何将数据项赋给下拉列表。 通常会将下拉列表需要显示的数据项装在List或Array中传给标签,因此,与Flex交互的Java类中的相应的函数返回值可设为ArrayList或List,并通过前面介绍过的方法在Flex中用ArrayCollection接收该返回值。 下拉列表组件有一个属性是dataProvider,用来为组件提供显示的数据。 因此在获得了Java传来的列表后,可通过如下代码将数据项列表赋给下拉列表: inform_shape.dataProvider=ArrayCollection(map.info_form); Combox是可填可选的,选用它是因为在设置默认值这一功能上实现起来更方便一些。 但如果工程要求下拉框只能选,不允许用户输入,除了改用DropDownList组件,也可以对Combox的属性进行设置达到同样的效果。 用于Combox实际上是复合使用了TextInput,因此可以通过设置这个TextInput的属性实现下拉框的可选不可填。 代码如下: ComboBoxid="cbo"dataProvider="{数据源}"selectedIndex="0"initialize="cbo.textInput.editable=false"/> 3、滚轮控制缩放 由于绘图时需要的图形可能很多,整体的缩放能够让用户更全面的观看整个流程图的情况。 这里的整体缩放使用的是Zoom组件。 [1]在 Declarations>中定义Zoom标签 Zoomid="zoomAll"zoomWidthTo="1"zoomHeightTo="1"> Zoom> [2]编写滚轮监听类 /** *监听鼠标滚轮事件,实现缩放 */ privatefunctiononMouseWheel(event: MouseEvent): void{ varw: Number=event.delta; varz: Number=zoomAll.zoomWidthTo; if(w>0&&z<3){ zoomAll.stop(); zoomAll.zoomHeightTo+=0.1; zoomAll.zoomWidthTo+=0.1; zoomAll.play([myDrawBoard]); }elseif(w<0&&z>0.2){ zoomAll.stop(); zoomAll.zoomHeightTo-=0.1; zoomAll.zoomWidthTo-=0.1; zoomAll.play([myDrawBoard]); } } [3]给需要实现此功能的标签添加滚轮事件监听myDrawBoard.addEventListener(MouseEvent.MOUSE_WHEEL,onMouseWheel) 4、全屏 在Flex4中实现全屏并不难,下面一句便可以: stage.displayState=StageDisplayState.FULL_SCREEN; 需要注意的是,Adobe对全屏做了限制。 当swf嵌入在网页中而不是使用独立FlashPlayer播放的文件或不在AIR中运行的文件时,键盘输入被禁止了(ESC键除外),只有鼠标操作是好使的。 因此要么只用全屏来绘图、观看,要么将属性全部做为用下拉菜单等组件鼠标选择的,输入框只能在非全屏下输入。 当然,如果发布为airapp不受此限制。 5、坐标转换 Flex包含3种坐标: 全局坐标、本地坐标、内容坐标 全局坐标: stage级别,坐标原点为舞台的左上角,如MouseEvent的stageX、stageY坐标。 本地坐标: 组件级别的坐标系,相对坐标,坐标原点为相对的组件的左上角,如MouseEvent的localX、localY坐标,以及容器中组件的x、y属性都为本地相对坐标。 内容坐标: 组件级别的坐标系,相对坐标,在有滚动条的情况下,全部内容所占的区域的坐标系,坐标原点为相对的组件的左上角,可以理解为包含滚动条的整个内容面板为一个坐标系。 如组件的contentMouseX、contentMouseY属性为内容坐标。 全局坐标、本地坐标、内容坐标可以通过系统内置方法互相转换 (代码示例见附录) 6、鼠标拖拽 任何扩展了mx.core.UIComponent类的组件都支持拖拽。 在一个拖拽操作中,有一个初始方(initiator)和一个接收方(receiver)。 任何一个UIComponent的实例都能接受由拖拽动作初始的释放操作。 DragManager类用于管理在你的程序里执行的拖拽操作。 DragSource是Flex框架中的核心成员,处理拖拽中的数据传递。 DragEvent拖拽操作中的事件对象。 提供数据 mouseDown 鼠标按下。 mouseMove 鼠标移动。 dragComplete 鼠标释放。 判断目标是否接受数据,如果可以,拖放成功。 接收方阶段 dragEnter 被拖动对象移动到目标范围中。 dragDrop 鼠标在目标上松开。 dragOver 鼠标移动到目标上。 dragExit 独享被拖离目标范围。 基本流程如下: 1在数据提供方监听鼠标事件 1.1初始化DragSource,把需要传递的数据使用addData的方式添加进DragSource 1.2把拖拽源和DragSource通过静态方法doDrag增加到DragManager。 2监听目标组件的dragEnter事件 2.1判断DragSource与释放目标的format是否一致 2.2如果format类型一致则使用DragManager的静态方法acceptDragDrop允许目标组件接收拖拽。 3监听目标组件的dragDrop事件 3.1取得拖拽时DragSource中的数据,进行操作。 “流程图绘制工具”工程中使用的不是将图片拖拽复制到目标位置,而是在鼠标拖拽结束位置新建一个图形对象,这一特点使得该工程与示例代码在DragDrop方法中的处理不同。 (代码示例见附录) 更多内容可参看附录。 附录 [1]Flex整合Java [2]Flex整合Spring [3]Flex拖动 [4]Flex坐标系统及转换 [5]Flex小问题汇总
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Flex 开发 笔记