• 
• 
• 
• 
• 
• 
• 
• 0

Juli 2009

Flex 4 und Spark – Revolution oder Workaround?

Das Komponentenmodell in der Praxis

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

Die neuen Features von Flex 4. Kurztutorials für den perfekten Einsatz.
Mit Multiple Choice Test am Ende des Tutorials!

Text: Kai König

Flex, Adobes Open-Source-Framework für die Entwicklung von Rich Internet Applications mit dem Flash Player als Zielplattform, erfährt derzeit eine Wandlung. Das Flex SDK ist bereits seit Version 3 Open Source und Flex 4 befindet sich gerade in der Entwicklung. Gleiches gilt für Flash Builder 4 (den Nachfolger von Flex Builder 3) als kommerziell verfügbare Entwicklungs-IDE.

In einer Serie mit Kurztutorials werden wir verschiedene neue Features im Flex-4-Framework beleuchten und anhand von Codebeispielen näher auf diese eingehen. Eine wichtige Anmerkung: Flex 4 ist Beta-Software und unterliegt somit regelmäßigen Änderungen. Es mag also gelegentlich passieren, dass hier gezeigte Vorgehensweisen oder Code-Snippets von den Lesern an spätere Beta- oder Pre-Release-Versionen angepasst werden müssen.

Spark im Einsatz

Dieses erste Kurztutorial beschäftigt sich speziell mit Spark, dem neuen Komponentenmodell in Flex 4. Der Begriff "Komponenten" bezieht sich hierbei in der Regel auf UI-Komponenten wie Buttons, Labels, Select-Elemente etc. Warum gibt es überhaupt ein neues Komponentenmodell? Flex ist doch gerade erst in Version 3 verfügbar und sollte also nicht allzu viele historische Sünden und Altlasten mit sich herumtragen, oder? Das alte (oder besser: bisherige) Komponentenmodell ist unter dem Namen "Halo" bekannt und wurde in Flash MX 2004 sowie Flex 1 als Standard-Look & Feel der User-Interface-Elemente eingeführt. Das grau-metallische Look & Feel ist dabei nur die für Entwickler, Designer und Benutzer sichtbare Oberfläche, zum Halo-Komponentenmodell gehören ebenfalls Programmier-, Styling- und Skinning-APIs.

Im Laufe der Zeit haben sich in den Halo-Komponenten verschiedene Probleme eingeschlichen. Eines davon ist das sehr komplexe interne Zusammenspiel von Funktionalität und Skin – also der Oberfläche und dem Verhalten der Komponente. Wer bereits einmal in den Quellcode einer der Halo-Komponenten im Flex 3 Open-Source-SDK geschaut hat, sieht schnell, wie schwierig es sein kann, eine solche entweder programmatisch oder grafisch (mithilfe von Bitmap- oder Vektorgrafiken) neu zu skinnen.

Spark soll mit alten Problemen Schluss machen

Spark soll mit diesen Problemen aufräumen. Die erste Hürde stellt sich bereits mit der Integration aller neuen Spark-Komponenten in bestehende Flex-Projekte, da es mit dem Release von Flex 4 laut gegenwärtigem Stand keinen vollständigen Satz von Spark-Komponenten geben wird. Das heißt, nur ein Teil der UI-Klassenbibliothek wird für das Spark-Modell umgeschrieben. Des Weiteren musste mit Einführung eines neuen Komponentensatzes (der ja durchaus wiederum Klassen wie Button, Label etc. enthalten kann) auch die gesamte Sprach- und Namespace-Definition von Flex umgearbeitet werden.

Hatte man in Flex 3 den MXML 2006 Namespace zur Verfügung, der in der Regel unter dem Prefix mx auf adobe.com/2006/mxml gemappt wird, gibt es in Flex 4 nun drei Namespaces:

* <fx:.../> – http://ns.adobe.com/mxml/2009: Dieser Namespace beinhaltet alle Flex-3-Sprachfeatures, eingebaute Typen wie Array, String etc. sowie alle in Flex 4 neu hinzugefügten Sprachfeatures.

* <s:.../> <– library://ns.adobe.com/flex/spark: Dieser Namespace repräsentiert die Spark-Komponenten. Im Spark-Namespace sind neben den UI-Komponenten auch RPC-Klassen sowie das neue Text Layout Framework (Flash Player 10) enthalten.

* <mx:.../> – library://ns.adobe.com/flex/halo: In diesem Namespace sind die bisherigen Halo-Komponenten für die Nutzung mit dem neuen MXML 2009 fx-Namespace untergebracht.

Der Wrapper einer Minimalanwendung in Flex 4 sieht demzufolge wie folgt aus:

1. <?xml version="1.0" encoding="utf-8"?>
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"></p> <p>
3. ...
4. </s:Application>

• 1
• 2

 

• Download des Quellcodes zum Artikel

• 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,
• spark,
• tutorial