Flex 3 cookbook翻译: 2.2 生成一系列开关按钮

2.2 生成一系列开关按钮

2.2.1 问题

你需要为用户提供一系列按钮选项

2.2.2 解答

用 ToggleButtonBar 控件和 ArrayCollecton 生成一系列按钮

2.2.3 讨论

为了创建一系列按钮，先生成一个 application ，里面有一个 ToggleButtonBar 控件的实例。 ToggleButtonBar 控件定义一组横的或竖的按钮。这是一种能保持它们的选定或未选状态的按钮，我们称之为开关按钮。如下所示：

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    initialize="initApp(event)">

    <mx:ToggleButtonBar id="toggle"
        dataProvider="{dataProvider}"
        itemClick="setMode(event)"/>

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            import mx.events.ItemClickEvent;

            [Bindable]
            private var dataProvider:ArrayCollection;

            private function initApp(evt:FlexEvent):void {
                var temp:Array = new Array({label:"Show Labels",
                                            mode:"labels"},
                                            {label:"Show Titles",
                                            mode:"titles"});
                dataProvider = new ArrayCollection(temp);
            }

            private function setMode(evt:ItemClickEvent):void {
                switch (evt.item.mode) {
                    case "labels":
                        trace("George, Tim, Dean");
                        break;
                    case "titles":
                        trace("Vice President, President, Director");
                        break;
                    default:
                        break;
                }
            }
        ]]>
    </mx:Script>

</mx:Application>

 

运行效果：

 

图 2-2-1

                                         

当 application 初始化的时候， initialize 事件引用了 initApp 方法。 initApp 方法用源数据创建了名为 dataProvider 的 ArrayCollecton 对象，以供 ToggleButtonBar 使用。由于这个 ToggleButtonBar 实例的 dataProvider 属性绑定到了这个 ArrayCollection 对象，它更新了新按钮的显示内容。默认情况下， ArrayCollecton 里的项目的 label 属性作为 ToggleButtonBar 实例中按钮的标签（ label ）显示。如果要设置别的属性作为按钮的标签（比如 mode ），就要设置 ToggleButtonBar 的 labelField 属性：

<mx:ToggleButtonBar id="toggle"
        dataProvider="{dataProvider}" labelField="mode"
        itemClick="setMode(event)"/>

 

译者注：从图 2-2-1 可以看出，两个按钮是紧挨着的。这显然不好看。如何调整两个按钮之间的距离呢？ ToggleButtonBar 有 horizontalGap 属性，就是调整水平间隔的。比如 horizontalGap="10 " 效果如下：

图 2-2-2

ToggleButtonBar 实例的 itemClick 事件与 setMode 方法关联了。注意一个类型为 ItemClickEvent 的事件被传递进了 setMode 方法。 ItemClickEvent 实例的 item 属性是对作为 dataProvider 的 ArrayCollection 里的对应项的引用。

ToggleButtonBar 的通常的使用情景是在用户选择某个特定的按钮之前，所有的按钮保持未选择状态。可是，默认情况是 dataProvider 被设定后，第一个按钮就是选中状态（在上面图中可以看到）。幸运的是， Flex3 可以让你访问 SDK 源代码，你就可以扩展 ToggleButtonBar 去满足你的需要。 ToggleButtonBar 的源代码可以在如下地方找到：

<Flex 3 installation dir>/sdks/3.0.0/frameworks/projects/framework/src/mx/controls/
ToggleButtonBar.as                                         

highlightSelectedNavItem 方法里面提供了一种怎样取消选中一个 button 。它首先获取对当前选中 button 的引用，然后设置它的选中状态为 false:

child = Button(getChildAt(selectedIndex));
child.selected = false;

 

你可以创建一个自定义的 ToggleButtonBar 版本，改进来自框架代码中的信息，来满足你的特定需求。在这儿，就是在启动的时候，让所以的按钮都是未选中状态。

 

下面的例子是一个扩展自 ToggleButtonBar 的 CustomToggleButtonBar 类。这个类有这样的功能：只要 dataProvider 改变了，所以的按钮都会呈未选中状态。我们可以注意到它覆盖了 dataProvider 的 setter 方法，并用一个 dataReset 布尔标签来跟踪 dataProvider 是否重置。 updateDisplayList 方法也被覆盖，只要 dataProvider 被重置，就让当前选中的按钮呈未选中状态。最后，当显示被更新后， dataReset 标签就被重置为默认的 false 状态。

package {
    import mx.controls.Button;
    import mx.controls.ToggleButtonBar;

    public class CustomToggleButtonBar extends ToggleButtonBar     {
        public function CustomToggleButtonBar() {
                super();
         }

        private var dataReset:Boolean = false;
        override public function set dataProvider(value:Object):void {
            super.dataProvider = value;
            this.dataReset = true;
        }

        override protected function updateDisplayList(unscaledWidth:Number,
                                                        unscaledHeight:Number):void {

            super.updateDisplayList(unscaledWidth,unscaledHeight);


            if(this.dataReset) {
                if(selectedIndex != -1) {
                    var child:Button;
                    child = Button(getChildAt(selectedIndex));
                    if(child) {
                        child.selected = false;
                        this.dataReset = false;
                    }
                }
            }
        }
    }
}

                                   

 

要使用这个新组件，用 CustomToggleButtonBar 简单地替换 ToggleButtonBar 就可以了。

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:local="*"
    layout="vertical"
    initialize="initApp(event)">

    <local:CustomToggleButtonBar id="toggle" selectedIndex="-1"
        dataProvider="{dataProvider}"
        itemClick="setMode(event)"/>

 

 

图 2-2-3

 

正如你看到的那样，扩展默认的组件去符合你的需要还是比较容易的。查看 Flex SDK 源代码不仅是一个了解框架内部的好途径，它也为扩展默认组件提供了很大的帮助。不过在使用 mx_niternal 库里面的非正式的属性 / 方法的时候要小心，因为他们在未来的 SDK 版本中很可能会被修改。