Flex中如何利用Repeater组件载入XML并显示图片文件的例子

繁简对译：[繁简]  字体设置：[大中小] 2009-12-11  阅读  次

Flex中如何利用Repeater组件载入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:XML id="imagesXML" source="images.xml" />
  8.  
  9.     <mx:Zoom id="zoom" />
  10.  
  11.     <mx:HBox id="hBox">
  12.          <mx:Repeater id="rep"
  13.                  dataProvider="{imagesXML.image}">
  14.             <mx:Image source="{rep.currentItem.@src}"
  15.                     toolTip="{rep.currentIndex}:{rep.currentItem.@alt}"
  16.                     completeEffect="{zoom}" />
  17.         </mx:Repeater>
  18.     </mx:HBox>
  19.  
  20. </mx:Application>

下面是XML定义：

Download: images.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <images>
  3.     <image src="images/Button.png" alt="Button" />
  4.     <image src="images/ButtonBar.png" alt="ButtonBar" />
  5.     <image src="images/CheckBox.png" alt="CheckBox" />
  6.     <image src="images/ColorPicker.png" alt="ColorPicker" />
  7.     <image src="images/ComboBox.png" alt="ComboBox" />
  8.     <image src="images/DataGrid.png" alt="DataGrid" />
  9.     <image src="images/DateChooser.png" alt="DateChooser" />
  10.     <image src="images/DateField.png" alt="DateField" />
  11. </images>

上一篇：Flex Gumbo中如何通过restrict属性限制TextInput输入特定字符的例子 下一篇：Flex 4中如何创建去除下拉阴影效果Alert的例子

相关文章

打印 收藏 关闭