前言:本例子的源代码来自于网上,我只是小小地测试了一下这个功能,另外再做点总结

运行结果预览:

FLEX中用REPEATER组件载入XML文件并显示图片

案例解析:

1) 在PROJECT里创建image文件夹,存放显示的图片

(注:image文件夹直接建在根目录下就OK了)

2) 创建XML文件 images.xml (此文件要和FLEX运行主页面放在同一目录下)

<?xml version="1.0" encoding="utf-8"?>
<images>
<image src="image/001.jpg" alt="Button" />
<image src="image/002.jpg" alt="ButtonBar" />
<image src="image/003.jpg" alt="CheckBox" />
<image src="image/pizza1.jpg" alt="CheckBox" />
</images>

3)创建FlexRepeaterTest.mxml

<?xml version="1.0" encoding="utf-8"?>


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" color="#F6EFA3"
borderColor="#E2CCFB" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#D0C2F5, #C2F5DA]">


<mx:XML id="imagesXML" source="images.xml" />
<mx:Zoom id="zoom" />
<mx:HBox id="hBox" x="384" y="202">
<mx:Repeater id="rep"
dataProvider="{imagesXML.image}">
<mx:Image source="{[email protected]}"
toolTip="{rep.currentIndex}:{[email protected]}"
completeEffect="{zoom}"/>
</mx:Repeater>
</mx:HBox>
</mx:Application>

4) 保存运行,就OK了。

总结:关键代码为<mx:Repeater> ...... </mx:Repeater>

dataProvider确定了xml文件中的根元素,image source确定了读取文件时的图片路径来源

相关文章: