Flex: Ändern Sie den Stil der aktivierten / deaktivierten Schaltfläche in jedem Zustand

Question

Ich habe einen spezifischen Knopf, der zu einigen Zuständen hinzugefügt wurde. Ich muss ihn in diesen Zuständen deaktivieren oder aktivieren.

Aber das ist kein Problem. Eigentlich ist das Problem: Ich habe 2 verschiedene Style-Klassen und möchte jeder von ihnen den aktivierten oder deaktivierten Zustand des Knopfes zuweisen, innerhalb des aktiven Zustands.

Also muss ich innerhalb des aktiven Zustands überprüfen, ob der Knopf jetzt aktiviert ist und die [zum Beispiel] .red Style-Klasse zuweisen und wenn er deaktiviert ist, die .blue Style-Klasse zuweisen.

Wie kann ich das machen? Vielen Dank im Voraus...

Answer 1

Sie sollten in der Lage sein, die Punkt-Notation in MXML zu verwenden, um dies zu erreichen:

Ich bin mir ziemlich sicher, dass diese Syntax in Flex 4 eingeführt wurde.

---

Wenn Sie den Zustand der Schaltfläche ändern müssen, wann immer die enabled-Eigenschaft geändert wird, können Sie dies in einer Funktion nachschlagen:

geschützte Funktion changeButtonState(enabledValue:Boolean, styleName:String):void{
 this.button.enabled = enabledvalue;
 this.button.styleName = styleName;
}

Verwenden Sie anstatt die enabled-Eigenschaft direkt zu setzen, die obige Methode; und Sie können den styleName basierend auf dem Zustand bestimmen.

---

Drittes Update als Reaktion auf Kommentare in diesem Beitrag

Fast jede Eigenschaft in den Flex Framework-Klassen löst ein propertyChanged-Ereignis aus, wenn sich die Eigenschaft ändert. Sie können also auf der Schaltfläche auf das enabledChanged-Ereignis hören. Die Metadaten sind nicht eingerichtet, sodass Sie den Ereignislistener in ActionScript hinzufügen müssen:

button.addEventListener('enabledChanged',onEnabledChanged);

geschützte Funktion onEnabledChanged(event:Event):void{
  if(currentState = 'state1'){
    if(button.enabled){
      button.styleName = 'blue';
    } else {
      button.styleName = 'red';
    }
  } else if (currentState = 'state2'){
    if(button.enabled){
      button.styleName = 'green';
    } else {
      button.styleName = 'orange';
    }

  }
}