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

来源：互联网发布：采购一般用什么软件编辑：程序博客网时间：2024/05/29 06:46

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

运行结果预览：

案例解析：

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="{rep.currentItem.@src}"
            toolTip="{rep.currentIndex}:{rep.currentItem.@alt}"
            completeEffect="{zoom}"/>
        </mx:Repeater>
    </mx:HBox>
</mx:Application>

4) 保存运行，就OK了。

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

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