Mar 31

Flex中利用HTTPService标签动态导入XML文件的例子

FlexAdd comments

在前面的利用Flex的TileList控件创建一个简单的图片展示（相册）的例子和利用Flex的HorizontalList控件创建一个简单的图片展示（相册）中，我们了解了如何利用TileList和HorizontalList创建简单的图片展示相册。

接下来的例子演示了如何利用HTTPService标签动态的读取XML文件，从而使你可以根据XML文件动态的导入不同的相册内容进行展示。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.rpc.events.ResultEvent;
  10.             import mx.rpc.events.FaultEvent;
  11.             import mx.controls.Alert;
  12.  
  13.             private var alert:Alert;
  14.  
  15.             private function loadGallery(src:String):void {
  16.                 httpService.url = src;
  17.                 httpService.send();
  18.             }
  19.  
  20.             private function httpService_fault(evt:FaultEvent):void {
  21.                 var title:String = evt.type + " (" + evt.fault.faultCode + ")";
  22.                 var text:String = evt.fault.faultString;
  23.                 alert = Alert.show(text, title);
  24.                 xmlListColl.removeAll();
  25.             }
  26.  
  27.             private function httpService_result(evt:ResultEvent):void {
  28.                 var xmlList:XMLList = XML(evt.result).images.image;
  29.                 xmlListColl = new XMLListCollection(xmlList);
  30.             }
  31.         ]]>
  32.     </mx:Script>
  33.  
  34.     <mx:XMLListCollection id="xmlListColl" />
  35.  
  36.     <mx:HTTPService id="httpService"
  37.             resultFormat="e4x"
  38.             fault="httpService_fault(event);"
  39.             result="httpService_result(event)" />
  40.  
  41.     <mx:ApplicationControlBar dock="true">
  42.         <mx:Button label="gallery 1"
  43.                 click="loadGallery('gallery1.xml');" />
  44.         <mx:Button label="gallery 2"
  45.                 click="loadGallery('gallery2.xml');" />
  46.  
  47.         <mx:Button label="gallery 404"
  48.                 click="loadGallery('gallery404.xml');" />
  49.     </mx:ApplicationControlBar>
  50.  
  51.     <mx:TileList id="tileList"
  52.             dataProvider="{xmlListColl}"
  53.             itemRenderer="TileListItemRenderer"
  54.             columnCount="3"
  55.             columnWidth="150"
  56.             rowCount="2"
  57.             rowHeight="100" />
  58.  
  59. </mx:Application>
Download: TileListItemRenderer.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
  3.  
  4.     <mx:Image source="{data.@src}"
  5.             horizontalCenter="0"
  6.             verticalCenter="0" />
  7.  
  8.     <mx:Label text="{data.@lbl}"
  9.             fontWeight="bold"
  10.             horizontalCenter="0"
  11.             bottom="0" />
  12.  
  13. </mx:Canvas>
代码：Peter deHaan 翻译：minidxer

written by Minidxer  |  tags: , , , , , ,

Related Post

One Response to “Flex中利用HTTPService标签动态导入XML文件的例子”

Trackbacks

Leave a Reply