Adobe Flex 4.6 in der Praxis

1.02.2012 in Media & More

Mein Sohn Marc und ich entwickeln gerade eine iPad-App namens „MyFace“.
In dieser App kann man mit ein paar Schiebereglern das Gesicht einer Comicfigur gestalten. Die einzelnen Grafiken (Augen, Nase, Mund etc.) haben wir in Adobe Illustrator erstellt und als FXG-Dateien in unserem Flex-Mobile-Projekt abgelegt, in dem sie uns als programmierbare Komponenten zur Verfügung stehen.
Aus der neuen Flex-4.6-Palette haben wir gleich mal einen ToggleSwitch, eine SpinnerList und einen CalloutButton eingebaut. Das klappt prima – es gilt aber ein paar Besonderheiten zu beachten, die ich hier anhand unseres App-Codes kurz beschreibe.

ToggleSwitch

Von Hause aus beherrscht der ToggleSwitch nur die Beschriftungen „ON“ und „OFF“.

Um das zu ändern, erstellt man eine Skin, in der man alternative Label vergibt.

package skins
{
   import spark.skins.mobile.ToggleSwitchSkin;
   public class HaarToggleSwitchSkin extends ToggleSwitchSkin
   {
      public function HaarToggleSwitchSkin()
      {
          super();
          selectedLabel = "Haare";
          unselectedLabel = "Glatze"; 
      }
   }
}

Danach weist man diese Skin dem ToggleSwitch zu…

<s:ToggleSwitch skinClass="skins.HaarToggleSwitchSkin" />

… und erhält eine entsprechend beschriftete Komponente:

SpinnerList

Die verschiedenen Arten, eine SpinnerList-Komponente mit Daten zu füllen, hat Adobe in der Online-Hilfe gut dokumentiert. Unsere SpinnerList ermöglicht die Auswahl verschiedener Haarfrisuren. Wir haben sie als separate Komponente realisiert. Durch die Verwendung eines IconItemRenderer können wir auch Grafiken in der SpinnerList abbilden.

<?xml version="1.0" encoding="utf-8"?>
<s:SpinnerList xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark">

   <fx:Script>
      <![CDATA[
          [Bindable] [Embed(source="../assets/face/Haare1.png")] 
           public var haare1:Class;
          [Bindable] [Embed(source="../assets/face/Haare2.png")]
           public var haare2:Class;
          [Bindable] [Embed(source="../assets/face/Haare3.png")] 
           public var haare3:Class;
          [Bindable] [Embed(source="../assets/face/Haare4.png")]
           public var haare4:Class;
          [Bindable] [Embed(source="../assets/face/Haare5.png")]
           public var haare5:Class;
     ]]>
   </fx:Script>

   <s:ArrayList>
      <fx:Object name="Schwarz" icon="{haare1}"/>
      <fx:Object name="Braun"   icon="{haare2}"/>
      <fx:Object name="Pinsel"  icon="{haare3}"/>
      <fx:Object name="Punk"    icon="{haare4}"/>
      <fx:Object name="Blond"   icon="{haare5}"/>
   </s:ArrayList> 

   <s:itemRenderer>
      <fx:Component>
         <s:IconItemRenderer labelField="name" iconField="icon"/>
      </fx:Component>
   </s:itemRenderer> 

 </s:SpinnerList>

Hier der Code zur Einbettung unserer Komponente in die App:

<s:SpinnerListContainer width="170" height="135">
    <controls:HaarSpinner width="100%" /> 
</s:SpinnerListContainer>

Und hier unsere SpinnerList-Komponente in Aktion:

Schließlich haben wir noch einen CalloutButton eingefügt, der beim Anklicken eine Copyright-Info anzeigt.

<s:CalloutButton id="cb" left="15" bottom="10" label="Info">
   <s:calloutLayout>
      <s:VerticalLayout paddingTop="15" paddingBottom="15" paddingLeft="15" paddingRight="15"
                         horizontalAlign="center" gap="15"/>
   </s:calloutLayout>
   <s:calloutContent>
      <s:Label text="MyFace wurde programmiert von Andreas &amp; Marc Dormann," />
      <s:Label text="© 2012 by multimedia and more" />
      <s:Button label="Klasse!" click="{cb.closeDropDown()}"/>
   </s:calloutContent>
</s:CalloutButton>

Hier der CalloutButton in Aktion:

Und hier zwei Screenshots von der App:

Die iPad-App gibt’s übrigens auch in einer einfacheren Online-Variante hier:
www.andreas-dormann.de/apps/myface.

Viel Spaß beim „Grimassen schieben“ !

by Andreas Dormann