最近因为工作需要,接触了一下Flex技术,给我的感觉是很好很强大在页面表现方面很灵活很丰富。下面的例子是可用于在动态运行时通过配置文件引入图片。
1。配置文件为xml格式文件,描述了要动态引入的文件的基本信息。(backgroundImage.xml)基本内容如下:
<?xml version="1.0" encoding="UTF-8"?>
<root>
<background>
<!-- 图片存放路径,在此同mxml文件放同一目录下了 -->
<imagePath>china.jpg</imagePath>
<positionX>0</positionX>
<positionY>0</positionY>
<percentWidth>100</percentWidth>
<percentHeight>100</percentHeight>
</background>
</root>
2.mxml主程序,本程序主要使用actionscript3.0实现
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#E4F2FD"
initialize="initBackgroundImage()" >
<mx:Script>
<![CDATA[
import mx.controls.Image;
import mx.controls.Alert;
var getConfigURL:String = "backgroundImage.xml";
function initBackgroundImage():void{
sendHttpReq(getConfigURL);
}
function sendHttpReq(httpURL:String):void{
try{
var loader = new URLStream();
loader.addEventListener(Event.COMPLETE,getHttpReq);
var request:URLRequest = new URLRequest(httpURL);
loader.load(request);
}catch(error:Error){
Alert.show("连接出现错误"+error.message);
}
}
function getHttpReq(event:Event):void{
try{
var us:URLStream = event.target as URLStream;
var xmldata = us.readMultiByte(us.bytesAvailable,"UTF-8");
parseConfigXML(xmldata);
}catch(error:Error){
Alert.show("请求出现错误:"+error.message);
}
}
function parseConfigXML(value:String):void{
try{
var xmlStr:XMLList = new XMLList(value);
var ImagePath:String = xmlStr.child("background").child("imagePath").text();
var positionx:int = xmlStr.child("background").child("positionX").text();
var positiony:int = xmlStr.child("background").child("positionY").text();
var percentWidth:int = xmlStr.child("background").child("percentWidth").text();
var percentHeight:int = xmlStr.child("background").child("percentHeight").text();
setBackgroundImage(ImagePath,positionx,positiony,percentWidth,percentHeight);
}catch(error:Error){
Alert.show("解析XML文件"+error.message);
}
}
function setBackgroundImage(src:String,pX:int,pY:int,pw:int,ph:int):void{
var bkImage:Image = new Image();
bkImage.source = src;
bkImage.x = pX;
bkImage.y = pY;
bkImage.percentWidth = pw;
bkImage.percentHeight = ph;
myPanel.addChild(bkImage);
}
]]>
</mx:Script>
<mx:Panel width="100%" height="100%" id="myPanel" >
</mx:Panel>
</mx:Application>