现在的位置: 首页 > 综合 > 正文

FLEX3.0 通过配置文件动态读入图片背景的方法

2013年10月02日 ⁄ 综合 ⁄ 共 2366字 ⁄ 字号 评论关闭

      最近因为工作需要,接触了一下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>

抱歉!评论已关闭.