• 
• 
• 
• 
• 
• 
• 
• 0

August 2009

Layout und States in Flex 4

Neues Applikationslayout und überarbeitetes State-Konzept

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

Während der vorangegangene, erste Teil unserer Kurztutorialreihe zu Flex 4 das neue Komponentenmodell Spark behandelte, geht es an dieser Stelle um die Neuerungen im Applikationslayout und dem überarbeiteten State-Konzept.

Text: Kai König

Ein RIA User Interface mit Flex 4 besteht in aller Regel (sowohl mit Halo als auch mit Spark) immer aus einem Mix von UI-Containern und UI-Komponenten. Technisch gesehen sind auch Container letztlich Flex-Komponenten, dennoch ist eine Trennung in zwei Hauptkategorien semantisch sehr wichtig. Eine der üblichen Herangehensweisen zum Erstellen eines Anwendungslayouts ist die Nutzung von Containern zur Platzierung von Komponenten wie Buttons, Select Controls oder Texteingabefeldern. Zur Feinsteuerung des Layouts wurden in Flex 3 auch oftmals ineinander geschachtelt Container verwendet – eine Alternative ist die absolute Positionierung von Komponenten mittels Angabe von x- und y-Koordinaten.

Mit dem neuen Spark-Komponentenframework hat sich die Herangehensweise beim Gestalten einer Anwendung nun geändert. In Flex 3 und den Halo-Komponenten war jeder Container für das Layout seiner zugeordneten Inhalte verantwortlich, und jeder Container stammte von mx.core.-Container ab (das selbst wiederum von der Klasse UIComponent erbt). Diese Vererbungshierarchie macht das Rendering und den Komponentenlebenszyklus unnötig komplex. Die Layoutregeln in Halo-Komponenten sind des Weiteren sehr stark an die funktionalen Elemente des Containers gekoppelt.

In Spark ist nun das Layout eines Containers flexibel und zur Laufzeit anpassbar geworden. Man kann einen Container sogar ähnlich wie Komponenten in Spark skinnen. Anstelle von Containern wie HBox oder VBox, deren einziger Zweck letztlich die Anordnung von Komponenten war, nutzt Spark in Flex 4 generische Container – Entwickler und Designer ordnen diesen Containern mittels Delegation-Layouts zu. Das folgende Beispiel zeigt einen Group-Container mit vier Buttons, dessen Inhalt horizontal angeordnet ist.

1. <?xml version="1.0" encoding="utf-8"?>
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
3. xmlns:mx="library://ns.adobe.com/flex/halo"
4. xmlns:s="library://ns.adobe.com/flex/spark">
5. <s:Group>
6. <s:layout>
7. <s:HorizontalLayout/>
8. </s:layout>
9. <s:Button label="Button 1"/>
10. <s:Button label="Button 2"/>
11. <s:Button label="Button 3"/>
12. <s:Button label="Button 4"/>
13. </s:Group>
14. </s:Application>

Beim Group-Container handelt es sich um den leichtgewichtigsten der Spark-Container. Er unterstützt, im Sinne von erlaubten Inhalten, Klassen die das Interface IVisualElement implementieren und erlaubt daher Objekte vom Typ UIComponent und GraphicElement. Der Hauptunterschied zwischen dem Group-Container und dem ebenfalls oftmals verwendeten Containter SkinnableContainer ist, dass letztgenannter geskinnt werden kann.

Wie bereits weiter oben erwähnt, werden Containern in Flex 4 Layouts per Delegation zugeordnet. Default-Layouts für Group und SkinnableContainer sind BasicLayout bzw. VerticalLayout. BasicLayout entspricht dem aus Flex 3 bekannten absoluten Layout und erzwingt explizite Positionierungsangaben vom Entwickler oder Designer. Das obige Beispiel ließe sich auch verkürzt mithilfe des HGroup-Containers darstellen:

1. <s:HGroup>
2. <s:Button label="Button 1"/>
3. <s:Button label="Button 2"/>
4. <s:Button label="Button 3"/>
5. <s:Button label="Button 4"/>
6. </s:HGroup>

Ein Beispiel für einen Container mit Custom Skin zeigt der folgende Codeschnipsel. In dieser Applikation wird eine Instanz des SkinnableContainers mit einem Skin versehen, der einen blauen Rahmen um die Gruppe zieht, den Hintergrund des Containers hellgrau färbt und die Inhalte des Containers als Default vertikal übereinander anordnet. Man sieht hier zudem, dass der SkinnableContainer in der Anwendung keinen <s:layout>-Block hat, also die vertikale Default-Anordnung nicht überschreibt.

1. <s:SkinnableContainer skinClass="nz.co.ventego.skins.container.GrayRectGroupSkin">
2. <s:Button label="Button 1"/>
3. <s:Button label="Button 2"/>
4. <s:Button label="Button 3"/>
5. <s:Button label="Button 4"/>
6. </s:SkinnableContainer>

Im Skin sehen wir Verweise auf States, dabei handelt es sich um die verschiedenen Zustände einer Komponente oder eines Containers. Wie bereits im ersten Teil des Tutorials gezeigt, muss man beim Erzeugen eines Skins die vom entsprechenden Container oder der jeweiligen Komponente unterstützten States angeben. In diesem Fall ist der Container entweder im Zustand normal oder disabled.

1. <?xml version="1.0" encoding="utf-8"?>
2. <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
3. xmlns:s="library://ns.adobe.com/flex/spark"
4. alpha.disabled="0.5">
5. <fx:Metadata>
6. [HostComponent("spark.components.SkinnableContainer")]
7. </fx:Metadata>
8. <s:states>
9. <s:State name="normal" />
10. <s:State name="disabled" />
11. </s:states>
12. <s:Rect x="0" y="0" radiusX="6" radiusY="6" height="100%" width="100%">
13. <s:stroke>
14. <s:LinearGradientStroke weight="2">
15. <s:entries>
16. <mx:GradientEntry color="0x0000FF"/>
17. </s:entries>
18. </s:LinearGradientStroke>
19. </s:stroke>
20. <s:fill>
21. <s:LinearGradient>
22. <s:entries>
23. <mx:GradientEntry color="0xDDDDDD"/>
24. </s:entries>
25. </s:LinearGradient>
26. </s:fill>
27. </s:Rect>
28. <s:Group id="contentGroup" left="10" right="10" top="10" bottom="10">
29. <s:layout>
30. <s:VerticalLayout/>
31. </s:layout>
32. </s:Group>
33. </s:Skin>

Ähnliche Beispiele lassen sich mithilfe der Container DataGroup und SkinnableDataContainer erzeugen, diese ersetzen im weitesten Sinne die listenbasierten Container aus Flex 3. Bereits anhand dieser kurzen Einführung kann man sehen, dass die Limitierung und Überarbeitung der zur Verfügung stehenden Containerlayout, Inhalt und Skin sehr sauber trennen und die delegationsbasierten Layouts die Entwicklung eines Anwendungslayouts deutlich klarer macht. Ein sehr schön anzusehender Container, der seine Inhalte in einem Kreis anordnet, wurde von Andrew Trice bereitgestellt.

• 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