Adobe Flex Grundlagen - States

In Flex gibt es die Möglichkeit sogenannte States zu definieren. States sind, wie der Name schon sagt, Zustände derselben Komponente und werden immer genutzt, wenn man kleine (meist auf die Darstellung bezogene) Änderungen einer Komponente darstellen möchte. Bei einem Blog könnte das zum Beispiel der Unterschied zwischen der Teaser- und der Volltext-Ansicht eines Artikels sein.

Am besten lässt sich das an einem Beispiel verdeutlichen. Hier ein kleines Beispiel:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

    <mx:Panel title="Wikipedia Auszug zum Begriff 'Teaser'" width="400">
        <mx:Text id="anrisstext" text="Im Online-Journalismus wird ein 'Anreißer', der auf der Startseite als Einstieg in den ausführlichen Beitrag auf einer nachfolgenden Webseite fungiert, auch Teaser genannt." width="100%"/>
    </mx:Panel>

    <mx:Button id="more" label="Weiterlesen" />
   
</mx:Application>

Das Programm erstellt mir ein Panel mit einem Anrisstext darin und setzt darunter einen Weiterlesen-Button. Um dem Button jetzt eine Funktion zu geben, kann man einen neuen State erstellen. Dafür ergänzt man das Programm zuerst um folgenden Code:

<mx:states>
    <mx:State name="volltext">
        <mx:SetProperty target="{anrisstext}" name="text">
            <mx:value>Im Online-Journalismus wird ein 'Anreißer', der auf der Startseite als Einstieg in den ausführlichen Beitrag auf einer nachfolgenden Webseite fungiert, auch Teaser genannt. Journalistisch ähnelt der Teaser dem ersten Satz eines längeren Beitrags, dem Leadsatz. 'Als Teaser werden die Anreißer auf der Homepage oder einer Themenüberblicksseite bezeichnet. Sie verweisen auf einen Beitrag und sollen sowohl Orientierung über den Inhalt bieten als auch zum Klicken verlocken' (Klaus Meier).</mx:value>
        </mx:SetProperty>
    </mx:State>
</mx:states>

Hier passiert folgendes: Zuerst wird ein neuer Bereich definiert, namens <mx:states>. Darin kann man alle States festlegen, die man für sein Programm benötigt. Also nicht nur einen einzelnen, wie in unserem Beispiel. Der State selber wird dann mit <mx:State> festgelegt. die Eigenschaft name gibt dem State einen Namen, den man später benutzen kann, um diesen anzusteuern.

Als nächstes wird gesagt, was in diesem State alles "anders" laufen soll. "Anders" bedeutet, dass alles was hier nicht explizit im Vergleich zum Hauptprogramm geändert wird, ganz einfach gleich bleibt. Was ich in diesem Beispiel ändern möchte ist der Text. In meinem neuen State "volltext" soll ja jetzt der ganze Text erscheinen, und nicht nur der Anrisstext.

Ich verwende also <mx:SetProperty> um die Eigenschaft eines bestehenden Elementes abzuändern. In diesem Fall heisst mein Element "anrisstext" und die zu ändernde Eigenschaft dieses Elementes heisst "text". Innerhalb des <mx:SetProperty> Tags kommt jetzt ein Text der den neuen Wert definiert und deshalb logischerweise <mx:value> heisst.

Fehlt nur noch eine Sache und das Programm ist fertig: Der Knopf muss bei einem Click-Event den State wechseln. Das geht mit dieser kleinen Ergänzung:

<mx:Button id="more" label="Weiterlesen" click="currentState='volltext'"/>

Natürlich ist das jetzt alles nicht besonders beeindruckend. Viel schneller wäre es gewesen, einfach ein Click-Event zu bauen, dass den Text einfach austauscht. Der Vorteil dieser Variante liegt aber darin, dass man mit dem State noch viel mehr anfangen kann, als nur einen Textwert zu ändern.

Zum Beispiel kann ich über <mx:AddChild> und <mx:RemoveChild> Elemente hinzufügen oder entfernen. Zum Beispiel könnte ich den "Weiterlesen" Knopf entfernen, sobald der Volltext aufgerufen wird:

<mx:RemoveChild target="{more}" />

Oder ich füge einen neuen Knopf hinzu, der mich wieder zurück zum Anrisstext führt.

<mx:AddChild>
    <mx:Button id="less" label="Weniger lesen" click="currentState=''"/>
</mx:AddChild>

Wie man sieht ist hier der Wert für currentState leergelassen. Das bedeutet, dass der Basis-State gemeint ist.

Der Übersicht halber hier noch einmal das vollständige Programm:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

    <mx:states>
        <mx:State name="volltext">
            <mx:SetProperty target="{anrisstext}" name="text">
                <mx:value>Im Online-Journalismus wird ein 'Anreißer', der auf der Startseite als Einstieg in den ausführlichen Beitrag auf einer nachfolgenden Webseite fungiert, auch Teaser genannt. Journalistisch ähnelt der Teaser dem ersten Satz eines längeren Beitrags, dem Leadsatz. 'Als Teaser werden die Anreißer auf der Homepage oder einer Themenüberblicksseite bezeichnet. Sie verweisen auf einen Beitrag und sollen sowohl Orientierung über den Inhalt bieten als auch zum Klicken verlocken' (Klaus Meier).</mx:value>
            </mx:SetProperty>
            <mx:RemoveChild target="{more}" />
            <mx:AddChild>
                <mx:Button id="less" label="Weniger lesen" click="currentState=''"/>
            </mx:AddChild>
        </mx:State>
    </mx:states>

    <mx:Panel title="Wikipedia Auszug zum Begriff 'Teaser'" width="400">
        <mx:Text id="anrisstext" text="Im Online-Journalismus wird ein 'Anreißer', der auf der Startseite als Einstieg in den ausführlichen Beitrag auf einer nachfolgenden Webseite fungiert, auch Teaser genannt." width="100%"/>
    </mx:Panel>
    <mx:Button id="more" label="Mehr lesen" click="currentState='volltext'"/>
   
</mx:Application>

Ein letzter Hinweis noch: Die States müssen nicht notwendigerweise immer programmiert werden. Es gibt im Design View oben rechts ein kleines Fenster mit dem States sehr einfach erstellt werden können. Einfach Rechtsklick ins Fenster und neuen State erstellen. Wählt man einen State dann aus, wirken sich alle folgenden Änderungen im Design-Fenster nur auf diesen State aus. Manchmal geht das so schneller, als wenn man alles per Hand programmiert.