该实例使用URLLoader向服务器获取XML和txt(properties格式数据)数据,由于获取数据由URLLoader完成,我将些操作单独放到另一个as文件中,故与视图组件分开,那么如何通告视图组件已完成数据加载功能呢?我在自己的as文件中自定义了一个事件,当URLLoader完成数据加载时,发布自定义的事件并将数据随事件一起分布,再在视图组件中订阅自定义的事件。
一、先来认识一下URLLoader:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" fontSize="12" backgroundGradientAlphas="[1.0, 1.0]"
backgroundGradientColors="[#FB7305, #FAE605]" width="621" height="385">
<mx:Script>
<![CDATA[
import com.mengya.URLLoaderTxt;
internal function doTXT():void{
var urlLoaderTxt:URLLoaderTxt = new URLLoaderTxt();
}
]]>
</mx:Script>
<mx:Button x="49" y="40" label="测试URLLoader,读取文本" width="193" height="30" click="doTXT();"/>
</mx:Application>
URLLoaderTxt 类如下:
package com.mengya{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.IEventDispatcher;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.net.URLVariables;
public class URLLoaderTxt extends Sprite {
public function URLLoaderTxt(){
var loader:URLLoader = new URLLoader();
//订阅URLLoader的事件
configListeners(loader);
var request:URLRequest = new URLRequest("myTxt.txt");
loader.load(request);
}
private function configListeners(dispatcher:IEventDispatcher):void {
dispatcher.addEventListener(Event.COMPLETE,loaderComplete);
dispatcher.addEventListener(Event.OPEN,openLoader);
}
private function loaderComplete(event:Event):void {
var urlLoader:URLLoader = URLLoader(event.target);
trace(urlLoader.data)
var urlVariables:URLVariables = new URLVariables(urlLoader.data);
trace(urlVariables.msg);
}
private function openLoader(event:Event):void{
trace("打开连接");
}
}
}
对URLLoader功能有初步的认识以后完成以上的功能,如下:
mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" fontSize="12" backgroundGradientAlphas="[1.0, 1.0]"
backgroundGradientColors="[#FB7305, #FAE605]" width="621" height="385"
applicationComplete="initApp();">
<mx:Script>
<![CDATA[
import com.mengya.LoadFinishEvent;
import com.mengya.URLLoaderXML;
[Bindable]
private var dp:XMLList;
internal function initApp():void{
//添加自己定义的数据加载完成事件
URLLoaderXML._eventDispatcher.addEventListener(LoadFinishEvent.LOADFINISHED,onLoadFinished);
}
internal function doXML():void{
var urlLoaderXML:URLLoaderXML = new URLLoaderXML();
}
internal function onLoadFinished(event:LoadFinishEvent):void{
dp = new XMLList(event.data);
}
]]>
</mx:Script>
<mx:Button x="49" y="88" label="测试URLLoader,读取XML" width="193" height="30" click="doXML();"/>
<mx:DataGrid x="49" y="147" width="529" height="193" dataProvider="{dp}">
<mx:columns>
<mx:DataGridColumn headerText="姓名" dataField="name" fontFamily="宋体" resizable="true"/>
<mx:DataGridColumn headerText="电话" dataField="phone" fontFamily="宋体" resizable="true"/>
<mx:DataGridColumn headerText="邮箱" dataField="email" fontFamily="宋体" resizable="true"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
自定义事件类LoadFinishEvent如下:
package com.mengya{
import flash.events.Event;
//自己定义一个事件,用于发布数据加载完成,将加载完数据随事件一起发布
public class LoadFinishEvent extends Event{
public static const LOADFINISHED:String = "Loadfinished";
public var data:String;
public function LoadFinishEvent(type:String,
data:String,
bubbles:Boolean=false,
cancelable:Boolean=false){
this.data = data;
super(type,bubbles,cancelable);
}
}
}
完成发布自定义的事件的类如下:
package com.mengya
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.EventDispatcher;
import flash.events.IEventDispatcher;
import flash.net.URLLoader;
import flash.net.URLRequest;
//这是一个非视图组件,在向服务器获取数据后发布一个自定义的事件,并将数据随着事件一起发布
public class URLLoaderXML extends Sprite{
public static var _eventDispatcher:EventDispatcher = new EventDispatcher();
public function URLLoaderXML(){
var loader:URLLoader = new URLLoader();
//配置对URLoader的事件订阅
configureListeners(loader);
var request:URLRequest = new URLRequest("XMLFile.xml");
try{
//获取指定的XML数据
loader.load(request);
}catch(error:Error){
trace(error.message);
}
}
private function configureListeners(dispatcher:IEventDispatcher):void{
//订阅了URLLoader的Event.COMPLETE事件,表示加载完成
dispatcher.addEventListener(Event.COMPLETE,completeHandler);
}
public function completeHandler(event:Event):void{
var urlloader:URLLoader = URLLoader(event.target);
//urlloader.data已包含加载来的数据
trace(urlloader.data);
//发布自定义的事件,并将所加载完成的数据随事件一起发布,用于在视图组件订阅捕获
var evt:LoadFinishEvent = new LoadFinishEvent(LoadFinishEvent.LOADFINISHED,
urlloader.data);
_eventDispatcher.dispatchEvent(evt);
}
}
}
分享到:
相关推荐
在Flex开发中,数据展示通常会涉及到大量的数据处理,如分页、排序、过滤和关键字搜索等。在Flex中,我们可以使用DataGrid组件来实现这些功能,提高用户体验并优化性能。 1. **Flex DataGrid 分页技术**: Flex ...
3. **数据绑定**:MXML中的数据绑定机制可以将视图组件的属性与模型数据直接关联,实现双向数据更新。 4. **事件处理**:在MXML中,可以使用event标签定义事件监听器。 5. **样式和皮肤**:通过CSS或MXML来定义...
- FLEX中的数据绑定允许Model与视图组件之间的双向通信。动态加载的数据可以自动更新与之绑定的UI元素,无需手动同步。 - `Bindable`元标签用于标记Model属性,使得它们可以被观察并自动更新视图。 - `...
2. **数据绑定**:Flex支持双向数据绑定,使得视图和模型之间的同步变得更加简单。 3. **MXML**:一种标记语言,可以与AS3.0代码混合使用,用于声明式创建用户界面和应用程序结构。 4. ** Cairngorm、PureMVC等...
5. **数据绑定**:Flex支持数据绑定,这意味着视图组件(如文本框、列表等)可以直接与应用程序数据模型关联。当模型数据改变时,视图会自动更新,反之亦然。这简化了代码,使应用更易于维护。 6. **事件处理**:在...