Event handlers in Repeater components

最新推荐文章于 2020-12-28 06:16:32 发布

最新推荐文章于 2020-12-28 06:16:32 发布 · 155 阅读

文章标签：

#Flex #Adobe #Flash #JavaScript #XML #ViewUI

flex 专栏收录该内容

83 篇文章

订阅专栏

本文介绍了一种使用Flex实现按钮动态导航的方法。通过Repeater组件和ArrayCollection数据绑定，为每个按钮分配不同的URL链接，当用户点击按钮时，将打开对应的网页。

<?xml version="1.0"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script> 
        <![CDATA[
             public function clicker(cName:String):void { 
                  foolabel.text=cName; 
             }    
        ]]>
    </mx:Script> 

    <mx:Label id="foolabel" text="foo"></mx:Label> 
 
    <mx:Model id="data"> 
        <color>
            <colorName>Red</colorName> 
            <colorName>Yellow</colorName> 
            <colorName>Blue</colorName>
        </color>
    </mx:Model> 
    <mx:ArrayCollection id="myAC" source="{data.colorName}"/>

    <mx:Repeater id="myrep" dataProvider="{myAC}"> 
        <mx:Button click="clicker(event.currentTarget.getRepeaterItem());"
            label="{myrep.currentItem}"/> 
    </mx:Repeater> 
</mx:Application>

After the user clicks the Yellow button, the application looks like this:

The code in the following example uses the getRepeaterItem() method to display a specific URL for each Button control that the user clicks. The Button controls must share a common data-driven click handler, because you cannot use binding expressions inside event handlers. However, the getRepeaterItem() method lets you change the functionality for each Button control.

<?xml version="1.0"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            [Bindable]
            public var dp:Array = [ { label: "Flex",
                url: "http://www.adobe.com/flex" },
                { label: "Flash", url: "http://www.adobe.com/flash" } ];
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="myAC" source="{dp}"/>
    <mx:Repeater id="r" dataProvider="{myAC}">
        <mx:Button label="{r.currentItem.label}" click="navigateToURL(new
            URLRequest(event.currentTarget.getRepeaterItem().url));"/>
    </mx:Repeater>
</mx:Application>

When executed, this example yields two buttons: one for Flex and one for Flash. When you click the button of your choice, the relevant product page loads in a new browser window.