Modification des propriétés de plusieurs objets dans Flex

Question

Dans mon exemple ci-dessous, j'ai plusieurs objets. Je veux changer l'étiquette de tous les objets en une fois, sans appeler chaque élément par id. Je sais comment le faire en HTML, mais pas en 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"); 

Voici comment je définirais normalement la couleur de 3 objets en gris sur une ligne.

// 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'; 

Est-il possible que je peux changer les étiquettes de tous les 3 boutons avec une seule ligne de code similaire à l'exemple jQuery? Merci d'avance.

Answer 1

Comme l'a souligné @ www.Flextras.com - vous pouvez écrire un cours pour cela.

Je vous encouragerais à envisager une approche alternative, car la boucle à travers les enfants à la recherche d'une propriété spécifique est assez lente. Cela dit, cela constitue un défi de codage intéressant.

Voici un exemple de classe & qui devrait atteindre ce que vous recherchez.

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); 
    } 
} 

Et un exemple:

<?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> 

Remarque - Je ne l'ai pas testé, mais en théorie il devrait fonctionner.

Answer 2

Je ne connais aucun sélecteur de type css3/jquery pour flex. Mais une solution de contournement consistera à utiliser un tableau de boutons au lieu de plusieurs variables de boutons, puis de les parcourir tous (bouton [i] au lieu de buttoni)

Answer 3

Je suis assez sûr que la réponse est non, avec une mise en garde . Gardez à l'esprit que JQuery est un framework qui cache la complexité de ce qu'il fait. (Beaucoup de cadres le font, y compris le cadre flexible). Dans Flex, je peux créer un DataGrid dans une ligne de code. Cependant, il y a des milliers de lignes de code, et plusieurs classes déjà écrites me permettent de le faire. Je soupçonne la même chose pour beaucoup de fonctionnalités JQuery.

Il n'y a aucune raison pour laquelle vous ne pouvez pas encapsuler cette fonctionnalité pour effectuer la modification, puis l'appeler avec une ligne de code.