|
MacromediaFlex标记语言简介 MacromediaFlex(开发代号为Royale)是一个展现服务器开发者可以用它来开发新一代的复杂Internet应用(RIAsRichInternetApplications)复杂Internet应用融合了桌面应用的可用性和web应用的易于管理的优点 Flex是一个在JEE应用服务器或servlet容器安装的展现服务器它拥有丰富的用户界面组件用于排布这些组件的基于XML的标记语言以及可以处理用户交互的面向对象编程语言这些技术的给我们带来的是使用Flash播放器渲染复杂Internet应用使用工业标准和开发者熟悉的方式进行开发 本文将专注于Flex语言的关键部分 为了运行本文中提到的代码你可能需要加入Flex的Beta测试Flex运行于象MacromediaJRunIBMWebsphereBEAWebLogicorApacheTomcat这样的JEE应用服务器之上Flex未来将支持MicrosoftNET服务器 Flex语言简介 由于标记语言和面向对象程序设计语言广泛应用因此基于这两项技术的Flex语言也将从中获益标记语言是成功的排布用户界面也相对容易MXML由Flex引入的基于XML的标记语言将延续其成功和HTML很象你可以用MXML来排布应用的用户界面同为基于XML的标记语言MXML比HTML有更强的结构更少的语法歧义比起HTMLMXML还引入了更丰富的标签集如DataGridTreeTabNavigatorAccordion和Menu这些都是标准标签集中的一部分你还可以扩展MXML标签创建自己的组件此外二者最大的区别是MXML定义的用户界面是用Flash播放器运行的相对传统的基于HTML页面为中心的web应用而言这将更具吸引力 除了排布可视组件还可以用MXML来定义应用中其他重要方面如可以把应用定义为一个web服务的客户或是在应用中开发动画用于提示用户进度 但是标记语言提供的编程逻辑仍难以满足用户交互的需求在Flex中可以用ActionScript编程语言来编写事件监听器来满足此种需求ActionScript是一种基于ECMA标准的强类型的面向对象语言和其他编程语言——java和C#很相似因此也很易于上手 总而言之当编写一个Flex的应用时需要用MXML来设置用户界面并用ActionScript来编写响应用户交互的逻辑 作为一个开发者你可以根据自己的喜好用自己所熟悉的IDE（比如Eclipes或Intellij）手工编写MXML也可以使用Flex支持的所见即所得开发环境（目前开发代号为Brady）即使你选择手工编写MXML仍可使用Flex提供的XMLschema在IDE中为你提供代码提示（codehinting）和代码自动填充（codecompletion）的功能 下面例子是一个名为HelloWordmxml的简单Flex应用的源代码该应用程序有两个TextInput组件当点击Copy时sourceTextInput的内容就会显示在destinationTextInput域中以下例子显示如何用MXML和ActionScript来创建应用用MXML定义用户界面再用ActionScript为Button组件的事件监听器编写拷贝逻辑 <?xmlversion=encoding=iso?> <mx:Applicationxmlns:mx=> <mx:TextInputid=sourcewidth=/> <mx:Buttonlabel=Copyclick=destinationtext=sourcetext/> <mx:TextInputid=destinationwidth=/> </mx:Application> Flex开发与部署模型 要开发并部署这个应用一般要经过以下步骤 用你熟悉的IDE或Flex的所见即所得开发工具编写HelloWoldmxml文件 把该文件部署到应用服务器上一般可以通过拷贝HelloWorldmxml到某个web应用的目录下或将HelloWorldmxml作为应用的一部分打包到WAR文件中去 当一个用户首次请求HelloWorldmxml的时候服务器会将MXML代码编译为Flash字节码（一个SWF文件）然后服务器将产生的SWF文件发往客户端让Flash播放器执行对同一个MXML文档的并发请求服务器将跳过编译过程直接返回相同的编译结果 如果你对JavaServerPages比较熟悉就会发现它们的模型非常相似就像JSPs被编译为Java字节码(servlets)一样MXML文件将被编译为Flash字节码二者的主要不同在于在Flex中产生的字节码是在客户端执行的而由JSP产生的Java字节码（servlet）是在服务器端执行的通过Flex你可以将复杂客户端应用无缝的集成到已有的商业逻辑中 使用MXML用户界面组件 拥有丰富的用户组件是Flex的一大特色除了传统的数据输入控件（TextInputTextAreaCheckBoxRadioButtonComboBox等等）MXML还包括了一些高级组件用于维护结构化数据（Tree组件）和大数据集（DataGrid组件）为了清晰的组织数据及其处理过程Flex还提供了导航组件（TabViewStackAccordion等等） 为了更易于组织用户界面Flex容器还定义了布局管理策略用于指明一个组件相对与另一个组件的位置Flex组件库提供了大量的可实现不同布局策略的容器比如在HBox中的组件将被水平排列而在VBox中的组件会被垂直排列而在Grid中组件将以行列的方式进行排列就象HTML的table一样View容器中没有定义任何布局管理策略因此你可以用xy坐标来指定组件的位置 下面给出一个在Flex环境下具有三个面板的传统email界面HBox容器中的Tree是水平排列的而VBox容器中的DataGrid和TextArea则是垂直排列的 <?xmlversion=encoding=iso?> <mx:Applicationxmlns:mx=> <mx:HBox> <mx:Tree/> <mx:VBox> <mx:DataGrid/> <mx:TextArea/> </mx:VBox> </mx:HBox> </mx:Application> 编写ActionScript代码 Flex语言是事件驱动的MXML将事件作为标签的属性你可以为它编写事件监听器比如Button组件有一个click属性ComboBoxList和Tree组件有一个change属性等等 对于简单的交互可以在标签的事件属性上直接编写ActionScript语句例如在HelloWorld应用中存在Button的click事件监听器中的ActionScripts语句能把sourceTextInput的内容拷贝到destinationTextInput中 <?xmlversion=encoding=iso?> <mx:Applicationxmlns:mx=> <mx:TextInputid=sourcewidth=/> <mx:Buttonlabel=Copyclick=destinationtext=sourcetext/> <mx:TextInputid=destinationwidth=/> </mx:Application> 当逻辑更为复杂的时候可以定义独立的ActionScript函数然后在组件的事件监听器中调用例如你可以象下面一样重写HelloWorld应用 <?xmlversion=encoding=iso?> <mx:Applicationxmlns:mx=> <mx:script> functioncopy(){ destinationtext=sourcetext } </mx:script> <mx:TextInputid=sourcewidth=/> <mx:Buttonlabel=Copyclick=copy()/> <mx:TextInputid=destinationwidth=/> </mx:Application> 创建一个MXML文件实际上是创建了一个类定义在<mx:script>标签中的ActionScript函数是该类的方法你可以在MXML文件或独立的文件中定义ActionScript函数选择哪种方法取决你所在的组织后一种方法可以对开发团队进行更好的分工 定义自己的组件 在Flex中你可以从头开始或通过扩展Flex组件库中已有的组件来创建自己的组件创建组件就象创建一个应用一样用MXML排布用户界面用ActionScript编写用界面逻辑 下面的一个例子是通过扩展VBox类来创建简单的信用卡选择组件 <?xmlversion=encoding=iso?> <mx:VBoxxmlns:mx=> <mx:RadioButtongroupName=cardid=americanExpress label=AmericanExpressselected=true/> <mx:RadioButtongroupName=cardid=masterCardlabel=MasterCard/> <mx:RadioButtongroupName=cardid=visalabel=Visa/> </mx:VBox> 组件的名字就是源文件的名字如源文件的名字是CreditCardChoosermxml组件的名字就是CreditCardChooser这样这个标签名就可以用了下面的例子就用上了刚才创建的CreditCardChoose组件 <?xmlversion=encoding=iso?> <mx:Applicationxmlns:mx=> <mx:Labeltext=Selectacreditcard:/> <CreditCardChooser/> </mx:Application> 界面开发者还能在MacromediaFlash开发环境中创建复杂的可视化组件并存为SWC文件 当然也可以只用ActionScript定义来整个组件这种方法一般用于定义应用中的非可视组件你可能会为这样商业对象创建非可视组件——例如包含客户端逻辑的购物车或是应用中helper类 数据访问 MacromediaFlex为面向服务器架构（SOA–serviceorientedarchitecture）而开发在这一模型中应用通过与分散在不同地方的服务进行交互来完成自己的任务例如如果创建一个在线旅行应用你需要与不同的服务进行交互全球旅馆预定服务目的信息服务天气服务等等这些服务可能以不同的机制来提供并且来自不同的地方Flex使你能在客户端汇集信息并提供三种不同的数据服务组件以满足对服务提供者进行特定数据访问的需求WebService组件HTTPService组件（一般使用XML通过HTTP进行数据访问）以及RemoteObject组件MXML允许你用相应的WebServiceHTTPServiceandRemoteObject标签来设置与服务的连接 数据绑定 在许多语言中如何在用户界面控件中显示后台数据是件令人头疼的事情而且非常容易出错收集用户在控件中输入的数据并传给远程服务也常常是件乏味的事情 Flex的特色之一就是提供了双向的数据绑定机制你可以将用户界面控件绑定到服务调用的数据结果集上反过来也可以将服务的参数绑定到用户界面控件输入的值上 下面是一个简单的股票报价应用例子使用了WebService标签来设置与XMMethods提供的股价web服务进行连接这个例子阐明了Flex的双向绑定功能getQuote方法的symbol输入参数被绑定到symbolTextInput组件上quote标签被绑定到getQute方法的调用结果上 <?xmlversion=encoding=iso?> <mx:Applicationxmlns:mx=> <mx:WebServiceid=wsStockwsdl=> <mx:operationname=getQuote> <mx:request> <symbol>{symboltext}</symbol> </mx:request> </mx:operation> </mx:WebService> <mx:Labeltext=Enterasymbol:/> <mx:HBox> <mx:TextInputid=symbol/> <mx:Buttonlabel=GetQuoteclick=wsStockgetQuotesend()/> </mx:HBox> <mx:Labelid=quotefontWeight=bold>{wsStockgetQuoteresult}</mx:Label> </mx:Application> 实际上Flex数据绑定机制比传统的重取/显示（retrieve/display）方式更胜一筹在Flex应用中你可以将任意对象的任意属性绑定到另一任意对象的任意属性值上 使用层级样式表（CSS） Flex使用层级样式表标准来保证用户界面的一致性并使应用更易于维护就像在HTML中一样你可以在应用中嵌入一个指向外部的样式表或在特定的标记元素下将某种风格定义为其属性样式表还允许定义字体所需字体定义内嵌于应用的字节码中即使用户的机器上没有这样的字体也能被正确的渲染出来 下面是一个名为maincss的外部样式表 @fontface{ src:url(Lf); fontfamily:mainFont; } error{color:#FF;fontsize:;} title{fontfamily:mainFontBold;fontsize:;} TextArea{backgroundColor:#EEFEE;} 下面的例子通过使用<mx:style>标签声明了一个外部样式表并对不同的控件使用了不同的样式 <?xmlversion=encoding=iso?> <mx:Applicationxmlns:mx=> <mx:stylesrc=maincss/> <mx:LabelstyleName=errortext=Thisisanerror/> <mx:LabelstyleName=titletext=Thisisatitle/> <mx:TextAreawidth=height=wordWrap=true>ThisisaTextArea</mx:TextArea> </mx:Application> 特效 复杂Internet应用常常被拿来和客户/服务器应用进行比较因为它们提供了同一级别的用户体验但是容易忽视的区别是两者的用户各具特点使用客户/服务器应用的客户通常是备受折磨后最终适应了他们需要面对的用户界面而复杂Internet应用的客户通常是临时性的用户在这样的条件下一个不直观的用户界面将会丧失机会 适当的使用特效如浮动提示和进度状态有助于客户直观的了解当前内容在MXML中你可以通过设置动画达到这一目的 下面的例子使用了Flex特性库中的prebuilt特效在这个例子中当square组件显示时使用WipeRight特效而消失时则使用了WipeLeft特效 <?xmlversion=encoding=iso?> <mx:Applicationxmlns:mx=> <mx:Viewid=squarewidth=height=backgroundColor=#showEffect=WipeRighthideEffect=WipeLeft/> <mx:HBox> <mx:Buttonlabel=Displayclick=squarevisible=true/> <mx:Buttonlabel=Hideclick=squarevisible=false/> </mx:HBox> </mx:Application> 总结 Flex语言包含了一个丰富的用户界面组件库MXML（一种基于XML的标记语言）和ActionScript（基于ECMA的强类型面向对象编程语言）MXML用于排布用户界面和处理应用中其他方面的问题而ActionScript用来处理用户交互逻辑由于Flash平台的普及Flex使开发者可以开发广泛的应用程序开发者可以使用工业标准（如XMLCSS和SVC）和他们所熟悉的模式和范例来创建应用Flex的分离协作方式和Macromedia公用组件模型也使得开发者和界面设计者能更好的进行协作在可靠的易于维护的架构上生产出在用户体验方面有突破性的产品 关于作者: 从年ChristopheCoenraets服务于Powersoft公司该公司现在已被Sybase并购他用Java工作始于年并成为公司JavaandInternetApplication部门的技术专员Christophe后来加入Macromedia公司成为公司JEE应用服务器JRun的技术专员Christophe在这一职位上开始研究复杂Internet应用着手将Flash前端与JEE后端进行集成Christophe目前是Macromedia的newdevelopercentricRichInternetApplicationsinitiative的高级专员过去的十年间Christophe经常在全球范围的研讨会中发言 |
