flex预加载,Flex中加载外部XML

Flex Builder中,如果要加载一个外部的XML是比较简单的,将绝对路径或则是相对路径写入就可以了。但是如果是一个web的工程,这个问题就显得比较复杂了,因为这个时候,你得不到文件的绝对和相对路径,在Flex3中,解决这个问题,有如下两个方法。
【一】mx:Model的方式
程序主文件:
1 [img]/Images/OutliningIndicators/None.gif[/img] <? xml version="1.0" ?>
2 [img]/Images/OutliningIndicators/None.gif[/img] <!-- Simple example to demonstrate the LinkBar control. -->
3 [img]/Images/OutliningIndicators/None.gif[/img] < mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml" >
4 [img]/Images/OutliningIndicators/None.gif[/img] < mx:Script >
5 [img]/Images/OutliningIndicators/None.gif[/img] <![CDATA[
6 [img]/Images/OutliningIndicators/None.gif[/img] ]]>
7 [img]/Images/OutliningIndicators/None.gif[/img] </ mx:Script >
8 [img]/Images/OutliningIndicators/None.gif[/img] < mx:Model id ="catalogService" source ="news.xml" />
9 [img]/Images/OutliningIndicators/None.gif[/img] < mx:ArrayCollection id ="myXC" source ="{catalogService.news}" />
10 [img]/Images/OutliningIndicators/None.gif[/img] < mx:Panel title ="TestLinkBarForXML"
11 [img]/Images/OutliningIndicators/None.gif[/img] height ="323" width ="466" horizontalAlign ="center"
12 [img]/Images/OutliningIndicators/None.gif[/img] paddingTop ="10" paddingBottom ="10" paddingLeft ="10" paddingRight ="10" >
13 [img]/Images/OutliningIndicators/None.gif[/img]
14 [img]/Images/OutliningIndicators/None.gif[/img] < mx:Text width ="100%"
15 [img]/Images/OutliningIndicators/None.gif[/img] text ="一个LinkBar的测试" />
16 [img]/Images/OutliningIndicators/None.gif[/img]
17 [img]/Images/OutliningIndicators/None.gif[/img] < mx:LinkBar color ="#0000FF" fontWeight ="bold" dataProvider ="{myViewStack}" />
18 [img]/Images/OutliningIndicators/None.gif[/img]
19 [img]/Images/OutliningIndicators/None.gif[/img] <!-- Define the ViewStack and the three child containers. -->
20 [img]/Images/OutliningIndicators/None.gif[/img] < mx:ViewStack id ="myViewStack" borderStyle ="solid" width ="100%" height ="80%" >
21 [img]/Images/OutliningIndicators/None.gif[/img]
22 [img]/Images/OutliningIndicators/None.gif[/img] < mx:Canvas id ="show1" backgroundColor ="#FFFFCC" label ="显示一" width ="100%" height ="100%" >
23 [img]/Images/OutliningIndicators/None.gif[/img]
24 [img]/Images/OutliningIndicators/None.gif[/img] </ mx:Canvas >
25 [img]/Images/OutliningIndicators/None.gif[/img]
26 [img]/Images/OutliningIndicators/None.gif[/img] < mx:Canvas id ="show2" backgroundColor ="#CCFFFF" label ="显示二" width ="100%" height ="100%" >
27 [img]/Images/OutliningIndicators/None.gif[/img] < mx:DataGrid dataProvider ="{myXC}" />
28 [img]/Images/OutliningIndicators/None.gif[/img] </ mx:Canvas >
29 [img]/Images/OutliningIndicators/None.gif[/img]
30 [img]/Images/OutliningIndicators/None.gif[/img] < mx:Canvas id ="show3" backgroundColor ="#FFCCFF" label ="显示三" width ="100%" height ="100%" >
31 [img]/Images/OutliningIndicators/None.gif[/img] </ mx:Canvas >
32 [img]/Images/OutliningIndicators/None.gif[/img] </ mx:ViewStack >
33 [img]/Images/OutliningIndicators/None.gif[/img]
34 [img]/Images/OutliningIndicators/None.gif[/img] </ mx:Panel >
35 [img]/Images/OutliningIndicators/None.gif[/img] < mx:XML id ="myXML" source ="news.xml" />
36 [img]/Images/OutliningIndicators/None.gif[/img]
37 [img]/Images/OutliningIndicators/None.gif[/img] < mx:Text id ="myText" width ="292" />
38 [img]/Images/OutliningIndicators/None.gif[/img] </ mx:Application >
39 [img]/Images/OutliningIndicators/None.gif[/img]
40 [img]/Images/OutliningIndicators/None.gif[/img]
news.xml文件
1 [img]/Images/OutliningIndicators/None.gif[/img] <? xml version="1.0" encoding="utf-8" ?>
2 [img]/Images/OutliningIndicators/None.gif[/img] < main >
3 [img]/Images/OutliningIndicators/None.gif[/img] < news >
4 [img]/Images/OutliningIndicators/None.gif[/img] < newsTitle > 1-1 </ newsTitle >
5 [img]/Images/OutliningIndicators/None.gif[/img] < newsItem > 1-2 </ newsItem >
6 [img]/Images/OutliningIndicators/None.gif[/img] </ news >
7 [img]/Images/OutliningIndicators/None.gif[/img] < news >
8 [img]/Images/OutliningIndicators/None.gif[/img] < newsTitle > 2-1 </ newsTitle >
9 [img]/Images/OutliningIndicators/None.gif[/img] < newsItem > 2-2 </ newsItem >
10 [img]/Images/OutliningIndicators/None.gif[/img] </ news >
11 [img]/Images/OutliningIndicators/None.gif[/img] </ main >
【二】mx:HTTPService的方式
主程序:
1 [img]/Images/OutliningIndicators/None.gif[/img] <? xml version="1.0" ?>
2 [img]/Images/OutliningIndicators/None.gif[/img] < mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml" initialize ="catalogService.send()" >
3 [img]/Images/OutliningIndicators/None.gif[/img] < mx:HTTPService id ="catalogService" url ="catalog.xml" resultFormat ="e4x" />
4 [img]/Images/OutliningIndicators/None.gif[/img] < mx:XMLListCollection id ="myXC" source ="{catalogService.lastResult.product}" />
5 [img]/Images/OutliningIndicators/None.gif[/img] < mx:Repeater id ="r" dataProvider ="{myXC}" startingIndex ="1" >
6 [img]/Images/OutliningIndicators/None.gif[/img] < mx:RadioButton id ="Radio" label ="{r.currentItem.name}" />
7 [img]/Images/OutliningIndicators/None.gif[/img] </ mx:Repeater >
8 [img]/Images/OutliningIndicators/None.gif[/img] </ mx:Application >
9 [img]/Images/OutliningIndicators/None.gif[/img]
xml文件:
1 [img]/Images/OutliningIndicators/None.gif[/img] <? xml version="1.0" ?>
2 [img]/Images/OutliningIndicators/None.gif[/img] < products >
3 [img]/Images/OutliningIndicators/None.gif[/img] < product >
4 [img]/Images/OutliningIndicators/None.gif[/img] < name > Name </ name >
5 [img]/Images/OutliningIndicators/None.gif[/img] < price > Price </ price >
6 [img]/Images/OutliningIndicators/None.gif[/img] < freeship > Free Shipping? </ freeship >
7 [img]/Images/OutliningIndicators/None.gif[/img] </ product >
8 [img]/Images/OutliningIndicators/None.gif[/img] < product >
9 [img]/Images/OutliningIndicators/None.gif[/img] < name > Whirlygig </ name >
10 [img]/Images/OutliningIndicators/None.gif[/img] < price > 5 </ price >
11 [img]/Images/OutliningIndicators/None.gif[/img] < freeship > false </ freeship >
12 [img]/Images/OutliningIndicators/None.gif[/img] </ product >
13 [img]/Images/OutliningIndicators/None.gif[/img] < product >
14 [img]/Images/OutliningIndicators/None.gif[/img] < name > Tilty Thingy </ name >
15 [img]/Images/OutliningIndicators/None.gif[/img] < price > 15 </ price >
16 [img]/Images/OutliningIndicators/None.gif[/img] < freeship > true </ freeship >
17 [img]/Images/OutliningIndicators/None.gif[/img] </ product >
18 [img]/Images/OutliningIndicators/None.gif[/img] < product >
19 [img]/Images/OutliningIndicators/None.gif[/img] < name > Really Big Blocks </ name >
20 [img]/Images/OutliningIndicators/None.gif[/img] < price > 25 </ price >
21 [img]/Images/OutliningIndicators/None.gif[/img] < freeship > true </ freeship >
22 [img]/Images/OutliningIndicators/None.gif[/img] </ product >
23 [img]/Images/OutliningIndicators/None.gif[/img] </ products >
http://www.blogjava.net/rainwindboys/archive/2008/08/29/225610.html
今天项目需要根据格式化的xml数据通过用户操作动态加载图片。由于对Flex加载xml的方法没什么研究,所以自己看API研究了下加载方法。
就我所知Flex加载xml比较常用的方法就是URLLoader和HttpService,下面分享我自己做的2种方法的测试实例:
skills.xml
<skills>
<menus id="m0" label="基础战斗">
<skill label="后羿射术" url="images/skills/0.png"/>
<skill label="落石术" url="images/skills/1.png"/>
<skill label="圣盾术" url="images/skills/2.png"/>
<skill label="飞剑术" url="images/skills/3.png"/>
<skill label="疾跑" url="images/skills/4.png"/>
</menus>
<menus id="m1" label="基础攻城">
<skill label="冲锋" url="images/skills/5.png"/>
<skill label="侦察术" url="images/skills/6.png"/>
<skill label="探穴" url="images/skills/7.png"/>
<skill label="摧毁" url="images/skills/8.png"/>
<skill label="突袭" url="images/skills/9.png"/>
</menus>
<menus id="m2" label="基础守城">
<skill label="高度警觉" url="images/skills/10.png"/>
<skill label="反侦察术" url="images/skills/11.png"/>
<skill label="储藏" url="images/skills/12.png"/>
<skill label="盾墙" url="images/skills/13.png"/>
<skill label="固若金汤" url="images/skills/14.png"/>
</menus>
<menus id="m3" label="基础力量">
<skill label="坚韧" url="images/skills/15.png"/>
<skill label="活力" url="images/skills/16.png"/>
<skill label="破甲" url="images/skills/17.png"/>
<skill label="重击" url="images/skills/18.png"/>
<skill label="穿刺" url="images/skills/19.png"/>
</menus>
<menus id="m4" label="基础军事">
<skill label="强行" url="images/skills/20.png"/>
<skill label="凯旋" url="images/skills/21.png"/>
<skill label="回派" url="images/skills/22.png"/>
<skill label="运送" url="images/skills/23.png"/>
<skill label="负重" url="images/skills/24.png"/>
</menus>
<menus id="m5" label="基础幸运">
<skill label="好运" url="images/skills/25.png"/>
<skill label="百死一生" url="images/skills/26.png"/>
<skill label="佑护" url="images/skills/27.png"/>
<skill label="缴获" url="images/skills/28.png"/>
<skill label="再次出击" url="images/skills/29.png"/>
</menus>
<menus id="m6" label="基础领悟">
<skill label="免惩" url="images/skills/30.png"/>
<skill label="觉悟" url="images/skills/31.png"/>
<skill label="鉴定" url="images/skills/32.png"/>
<skill label="磨练" url="images/skills/33.png"/>
<skill label="冥想" url="images/skills/34.png"/>
</menus>
<menus id="m7" label="基础经营">
<skill label="理财术" url="images/skills/35.png"/>
<skill label="开阔资源" url="images/skills/36.png"/>
<skill label="开垦" url="images/skills/37.png"/>
<skill label="截流" url="images/skills/38.png"/>
<skill label="敛财术" url="images/skills/39.png"/>
</menus>
</skills>
悲剧了 在代码格式里用src会自己生成一个mce_src,只能把src改成url了。。。
XMLTest.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="skills.send();//init();">
<mx:HTTPService id="skills" url="skills.xml" result="getSkills(event)" resultFormat="e4x"/>
<mx:Script>
<!--[CDATA[
import mx.rpc.events.ResultEvent;
private var Mxml:XML;
[Bindable]
private var xml:XML;
// public function init():void{
// var url:URLRequest=new URLRequest("skills.xml");
// var loader:URLLoader=new URLLoader();
// loader.load(url);
// loader.addEventListener(Event.COMPLETE,CompleteHandler);
// }
// public function CompleteHandler(evt:Event):void{
// Mxml=new XML(evt.target.data);
// xml=Mxml.menus[0];
// }
private function getSkills(event:ResultEvent):void{
Mxml=new XML(event.result);
xml=Mxml.menus[0];
}
private function doClick(evt:MouseEvent):void{
var xl:XMLList=Mxml.menus.(@id==evt.target.id);
xml=xl[0];
}
]]-->
</mx:Script>
<mx:Button id="m1" click="doClick(event)" x="0"/>
<mx:Button id="m2" click="doClick(event)" x="50"/>
<mx:Button id="m3" click="doClick(event)" x="100"/>
<mx:Text y="30" text="{xml.skill[0].@label}"/>
<mx:Image y="50" source="{xml.skill[0].@url}"/>
</mx:Application>
其中要注意的是HttpService的resultFormat属性 设置为e4x,就可以从结果集中得到E4X格式的xml,就可以用"@","."进行运算与取属性。
http://blog.csdn.net/genius840215/article/details/5419558
Tags: 

延伸阅读

最新评论

发表评论