Im Folgenden eine kleine Demo-App, die einige wichtigte Grundkonzept des mobilen Flex Frameworks zeigt. Im Wesentlichen wird ein Startbildschirm erstellt, von dem man über zwei Buttons zu jeweils einer Unterseite gelangt.

Video der Beispiel-App

MobileApplication

Über das Attribut firstView lässt sich der initiale Inhalt, also die erste View, festlegen. Außerdem kann man über splashScreenImage einen Splashscreen definieren.

XML:
  1. :MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
  2.                      xmlns:s="library://ns.adobe.com/flex/spark"
  3.                      firstView="views.Home"
  4.                      splashScreenImage="@Embed(source='images/android.png')"
  5.                     >

ActionBar und View

Die ActionBar ist der Header über den Views. Normalerweise enthält sie Elemente wie den Homebutton und einen Seitentitel. Sie kann global oder für jede Seite einzeln festgelegt werden.

Hier ein Beispiel, wie darin ein Homebutton eingefügt wird.

XML:
  1. :navigationContent>    
  2.     :Button icon="@Embed(source='images/home-icon.png')"
  3.               click="navigator.popToFirstView()"
  4.               />       
  5. :navigationContent>

Die Views (s:Views) sind die einzelnen Seiten des Content. Es handelt sich dabei einfach um einzelne MXML-Komponenten.

Als Standardübergang zwischen den Views automatisch der im Video sichtbare Übergangseffekt verwendet (Views fahren à la iPhone seitlich weg).

Wie im vorigen Codebeispiel zu entnehmen, gelangt man mit popToFirstView() zurück zum Homescreen der Anwendung. Eine neue View erreicht man generell über navigator.pushView(views.Settings) (wobei in diesem Fall „Settings” der Name der Klasse bzw. der MXML-Datei im Package „views” ist).

Möchte man Informationen an eine View übertragen, kann man ein untypisiertes Objekt übergeben: navigator.pushView(views.Content, meinObj). Dies ist von der aufgerufenen View ganz einfach über die Eigenschaft data auslesbar.

Download: Flex Projekt (.zip, für Flex Builder Burrito)