• 
• 
• 
• 
• 
• 
• 
• 0

August 2009

Layout und States in Flex 4

Fortsetzung, Teil 2

(Link zum Artikel: http://www.createordie.de/cod/artikel/2502)

Die oben erwähnten States können aber noch mehr als nur mögliche technische Zustände einer Komponente oder eines Containers sein, sie repräsentieren Zustände der Applikation. States in Flex 3 waren für viele Entwickler ein Tabuthema, wurden sie doch (nicht ganz zu unrecht) auf Grund ihrer Komplexität als zu nah an die Flex Builder-IDE gekoppelt angesehen.

In Flex 3 hatte jeder Container eine states-Eigenschaft vom Typ Array. Mithilfe des Tags <mx:State> konnten Entwickler Zustände definieren. Im Normalfall galt dabei, dass jegliche Inhalte außerhalb des states Arrays als Basis- und Startzustand der UI interpretiert wurden.

Innerhalb eines Zustands konnten nun unter anderem mit den Klassen RemoveChild und AddChild UI-Elemente hinzugefügt oder entfernt werden. Dabei musste jeweils mithilfe von relativen Zielangaben definiert werden, an welcher Stelle der Komponentenhierarchie das Einfügen vonstatten gehen sollte. In dem unten gezeigten – extrem einfach gehaltenen, Fall wird im Zustand mit dem Namen login eine Instanz der Komponente LoginView hinzugefügt und durch die Applikationseigenschaft currentState dieser Zustand auch als Startzustand der Anwendung gesetzt.

1. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" ... currentState="login">
2. <mx:states>
3. <mx:State name="login">
4. <mx:RemoveChild target="{dView}"/>
5. <mx:AddChild relativeTo="{vbox1}" position="lastChild">
6. <LoginView id="lView" login="loginHandler(event)"/>
7. </mx:AddChild>
8. </mx:State>
9. </mx:states>
10. ...
11. </mx:Application>

Fügt man nun zu den Zustandswechseln noch Effekte und Transitionen hinzu (die sich zu allem "Unglück" auch auf einzelne Komponenten innerhalb eines Zustands beziehen können), wird der oben gezeigte Code noch deutlich komplexer und auf manuelle Art und Weise nahezu unwartbar. An dieser Stelle hilft Flex Builder's Designmodus, der die verschiedenen Zustände verwalten kann und Änderungen im visuellen Layout in MXML- und ActionScript-Code nachhalten kann. Leider trägt diese Automatisierung nicht zur Wartbarkeit des Codes bei.

In Flex 4 gilt nun: Let's fix the States. Eines der Hauptziele in Flex 4 ist es, die Handhabung verschiedener Zustände innerhalb einer Applikation oder Komponente einfacher zu machen. Folgender Code zeigt wie das geht:

1. <?xml version="1.0"?>
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
3. xmlns:s="library://ns.adobe.com/flex/spark">
4. <s:states>
5. <s:State name="default"/>
6. <s:State name="detail"/>
7. </s:states>
8. <s:VGroup>
9. <s:HGroup>
10. <mx:Image source="../assets/images/star.png"/>
11. <s:SimpleText text="This is a simple, short text explaining the image."/>
12. <s:Button label="Show more" click="currentState='detail'" label.detail="Show less" click.detail="currentState='default'"/>
13. </s:HGroup>
14. <s:RichText includeIn="detail" text="This is a long, potentially rich text explaining the image. At least it's much longer than the short text above and that's why it's in a different view state named 'detail'"/>
15. </s:VGroup>
16. </s:Application>

Diese Anwendung definiert zwei Zustände: default und detail. Die Namensgebung "default" ist hierbei nicht verpflichtend, das erste State-Objekt im states Array wird automatisch zum Default-Zustand propagiert. Der Default-Zustand beinhaltet alle UI-Elemente, die keine abweichende Zustandsdefinition haben, solche lassen sich mit dem Tag-Attribut includeIn deklarieren. In dem obigen Beispiel wird im Default-Zustand eine HGroup bestehend aus einem Bild, einem SimpleText-Objekt und einem Button gezeigt. Das Click-Event des Buttons triggert mithilfe der Eigenschaft currentState="..." den Wechsel zum Detail-State, der auf Grund des zuvor erwähnten includeIn-Attributs das RichText-Objekt anzeigt. Analog zum includeIn-Attribut bietet Flex 4 nun auch ein excludeFrom-Attribut.

Was nun die States in Flex 4 aber so viel besser macht als ihr Equivalent in Flex 3 ist die Möglichkeit der Spezifikation von Attributwerten pro State. Diese Technik kann man sehr gut anhand des Buttons sehen: label.detail und click.detail werden verwendet, um geänderte Werte der entsprechenden Eigenschaften label sowie click im Detail-State zu spezifizieren. Befindet sich die Anwendung also im eben genannten Zustand, sorgt ein Button-Klick für einen Wechsel zurück in den Default-Zustand.

Das nächste Kurztutorial zu neuen Features in Flex 4 beschäftigt sich mit dem Textframework, auch dort gibt es einige Neuerungen zu vermelden.

• 1
• 2

 

• Gute Kommentare werden belohnt.
•   (optional)
•   (Kommentar abonnieren/Gravatar - wird nicht veröffentlicht)
•    Benachrichtige mich bei nachfolgenden Kommentaren per E-Mail
• Dein Kommentar (HTML- und sonstige Codeelemente werden nicht angezeigt)
• -+
• 

• adobe,
• flex,
• flex 4,
• tutorial