本文向大家展示了Flex组件如何实现逐步增强一个Web应用:开源SWFObjec库使得嵌入FlashPlayer变的简化——一个Flex应用的实施环境——到HTML内。FlashPlayer,依次允许委派与用户界面相关的逻辑到Flex组件内。Flex指定的用户界面语言不仅仅使得用户界面代码更简单,而且使得你的应用程序从FlashPlayer的实时编译、用户界面结果、多种手段支持等等中获益匪浅。另外,因为Flex支持以CSS为基础的样式,你的Flex组件将会与外界环境HTML页面相处得十分和谐。
Flex与JavaEE应用程序结合
一个关键方面在于逐步增强的Flex能够通过数据传输到达Flex组件中。在前面我们曾经提到,服务器产生的JSON阵列反映了应用程序的数据,然后它作为FlashVar传递到Flex组件内。
尽管FlashVar允许Flex成为现有的企业级应用的一部分,并且对应用程序的改变很小,FlashVar仍然有一个非常大的限制:因为FlashVar是由名称/值组成的字符串,在浏览器上面对于字符串对象的***长度有限制。对于大多数浏览器而言,这个限制是65KB。
两个阶段载入
你可以去掉这个限制,这需要你为Flex组件执行它自己的数据载入作准备。这就需要两个阶段载入的网页:
对浏览器的要求做出响应,***个阶段载入HTML页面和嵌入的SWF(Flex)对象;
一旦Flex应用完全展现在浏览器上,Flex获取应用程序的数据用来填充到Flex组件中。
第二阶段载入很多丰富客户端应用程序的一般协议,通过减少响应时间可以改善用户体验:只要用户定留在同一个HTML页面上,阶段一的执行就只进行一次。所有之后的数据存取的发生都是通过第二阶段实现的,缓解了每一次浏览器检索以及重新展示用户界面的时候对于服务器的要求。性能优势得益于这种模式充分利用了每个应用一个页面的模式,比如说谷歌的Gmail和地图应用程序。
这篇文章的其余部分将会说明Flex对于来自远程网络资源的数据载入***化的三种方法:通过HTTP载入JSON数据,通过HTTP载入XML,以及通过高性能的串行协议直接引用服务器Java对象。对于RESTful数据存取而言,前两种方法是一个好的选择,尽管远程对象引用适合RPC通信样式。***方法的一个优势是客户端以及服务器可以通过类型对象通信。Flex:EngineYard的全新云服务
JSON超越HTTP
Flex的HTTPService类使得委托JSON数据载入到Flex客户端的过程变得简单。下面的ActionScript代码获得了指定的URL的内容,作为Flex客户端完成事件处理程序的一部分。
- ...
- privatefunctiononCreationComplete():void{
- varhttp:HTTPService=newHTTPService();
- http.url="booksInventory.json";
- http.addEventListener(ResultEvent.RESULT,onResult);
- http.addEventListener(FaultEvent.FAULT,onFault);
- http.send();
- }
- privatefunctiononResult(event:ResultEvent):void{
- booksInventory.dataProvider=JSON.decode(event.resultasString)asArray;
- }
- privatefunctiononFault(event:FaultEvent):void{
- Alert.show("Can'tloaddata:"+event.message);
- }
- ...
列表一:使用HTTPService获取JSON数据
HTTPService,FlexSDK的一部分,为AjaxXMLHttpRequest对象提供相似的功能:给予一个URL,它使得你能够从HTTP数据源异步的获取数据。send()会立即调用返回。当结果返回的时候,或者采用另一个选择,就是将错误删除的时候,回调机制采用这项功能
这个实例的结果以及失败处理程序功能都是由名称引用的:编译程序将会找到与方法相匹配的名称以及必须的参数和返回类型,然后分配这些功能,作为操作者来处理这些结果或者失败的HTTP请求。
实例的结果和失败处理功能每一个都是由一个单一行组成的,你可以使用ActionScript功能让这些代码变的简练一些:
- privatefunctiononCreationComplete():void{
- varhttp:HTTPService=newHTTPService();
- http.url="booksInventory";
- http.addEventListener(ResultEvent.RESULT,
- function(event:ResultEvent):void{
- booksInventory.dataProvider=
- JSON.decode(event.resultasString)asArray;
- });
- http.addEventListener(FaultEvent.FAULT,
- function(event:FaultEvent):void{
- Alert.show("Can'tloaddata:"+event.message);
- });
- http.send();
- }
列表二:功能的成功和失败处理
ResultEvent的结果特性是非类型对象,并且我们必须在其转变为JSON阵列之前将它转变为字符串。因为这种转变确认了数据或者转变为指定的数据类型,或者返回空值。在这个例子当中,错误的处理程序仅仅是显示了一些不友好的模块,标示出了通信错误的原因。
伴随着这种改变,我们现在可以从Flex组件的外界环境HTML页面中去掉FlashVar。因为Flex组件执行它自己的数据载入,客户端可以载入的数据总量是仅由可用的记忆存量限制的。
【编辑推荐】
- 解析重写Flex组件中角色 规则和步骤
- 开源Flex组件FlexReport使用指南
- 学习总结 在Flex中如何嵌入Flex字体
- 揭开Flex正则表达式的神秘面纱
- 用ActionScript创建可视化的Flex组件