在 Flex 中更改多个对象的属性

Question

在下面的示例中，我有几个对象。我想一次性更改所有对象的标签，而不是通过 id 调用每个元素。我知道如何在 HTML 中执行此操作，但在 Flex 中不知道。

// HTML
<div class="text" id="text1">SomeText</div>
<div class="text" id="text2">SomeText</div>
<div class="text" id="text3">SomeText</div>

// jQuery
$(".text").css("color", "#333333");

这就是我通常将 3 个对象的颜色在一行中设置为灰色的方式。

// Flex
<s:Button id="button1" label="Button 1"/>
<s:Button id="button2" label="Button 2"/>
<s:Button id="button3" label="Button 3"/>

// AS3
button1.label = 'Something else';
button2.label = 'Something else';
button3.label = 'Something else';

有什么方法可以用类似于 jQuery 示例的一行代码更改所有 3 个按钮的标签？提前致谢。

Answer 1

我很确定答案是否定的，但有一点需要注意。

请记住，JQuery 是一个隐藏其工作复杂性的框架。 （很多框架都这样做，包括 flex 框架）。在 Flex 中，我可以在一行代码中创建一个 DataGrid。但是，有数千行代码，并且已经编写了多个允许我这样做的类。我怀疑很多 JQuery 功能也是如此。

没有理由不能封装该功能来进行更改，然后用一行代码调用它。

Answer 2

正如@www.Flextras.com 指出的那样——您可以编写一个类来执行此操作。

不过，我建议您考虑另一种方法，因为在孩子之间循环查找特定属性非常慢。也就是说 - 它确实带来了一个有趣的编码挑战。

这是一个课程和示例，应该可以满足您的要求。

package com.mangofactory.util
{
    import flash.display.DisplayObject;

    import mx.core.UIComponent;

    /**
     * Utility class to set a given property of all matching children on a target.
     * Named to act as an operator, rather than a class (hence no captial letter)
     *
     * eg.,  on(someTarget).of(SomeClass).someProperty = someValue;
     * */
    public class on
    {
        private var root:UIComponent;
        private var requiredPropertyName:String;
        private var requiredType:Class;

        public function on(root:UIComponent)
        {
            this.root = root;
        }
        /**
         * Returns a list of targets which match the defined criteria.
         * Note - the root component is also evaluated
         * */
        private function get targets():void
        {
            var result:Array = [];
            if (matches(root))
            {
                result.push(root);
            }
            for (var i:int = 0; i < root.numChildren; i++)
            {
                var child:DisplayObject = root.getChildAt(i);
                if (matches(child))
                    result.push(child);
            }
        }
        /**
         * Returns true if the target param matches the defined criteria.
         * If a propertyName has been given (by calling 'having') that is checked first.
         * Otherwise, the type is checked against the value passed calling ('of')
         * */
        private function matches(target:Object):Boolean
        {
            if (requiredPropertyName && target.hasOwnProperty(requiredPropertyName))
                return true;
            if (requiredType && target is requiredType)
                return true;
            return false;

        }
        public function having(propertyName:String):PropertyCatcher
        {
            this.requiredPropertyName = propertyName;
        }
        public function setOnTargets(propertyName:*,value:*):void
        {
            for each (var matchedTarget:Object in targets)
            {
                if (matchedTarget.hasOwnProperty(propertyName))
                    matchedTarget[propertyName] = value;
            }
        }
        public function of(type:Class):PropertyCatcher
        {
            this.requiredType = type;
        }
    }
}
import com.mangofactory.util.on;

import flash.utils.Proxy;
import flash.utils.flash_proxy;
use namespace flash_proxy;

dynamic class PropertyCatcher() extends Proxy
{
    private var callbackTarget:on;
    public function PropertyCatcher(callbackTarget:on)
    {
        this.callbackTarget = callbackTarget;
    }
    override flash_proxy function setProperty(name:*, value:*):void {
        callbackTarget.setOnTargets(name,value);
    }
}

还有一个例子：

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:Button />
    <s:Button />
    <s:Button />
    <mx:Canvas  />
    <fx:Script>
        <![CDATA[
            public function doTest():void
            {
                // Sets the label of all Buttons to "Hello World" 
                on(this).of(Button).label = "Hello World";
                // Sets the visible property of all children which declare a "alpha" property to false.
                on(this).having("alpha").visible = false;
            }
        ]]>
    </fx:Script>
</mx:Canvas>

注意 - 我没有对此进行测试，但理论上它应该可以工作。

Answer 3

我不知道任何用于 flex 的 css3/jquery 类型的选择器。但是一种解决方法是使用按钮数组而不是许多按钮变量，然后遍历所有这些变量（button[i] 而不是 buttoni）