Einführung in Flex-Mobile,Single-Sourcing und Cross-Platform-Development

1. EINFÜHRUNG IN
FLEX-MOBILE,
SINGLE-SOURCING UND
CROSS-PLATFORM-DEVELOPMENT
WW-Techday 16.12.2011
Von Johannes Hohenbichler (WeigleWilczek GmbH)

2. Was ist Flex Mobile
 Baut auf Flex auf (letzte Präsentation)
 Gibt es seit Flex 4.5 (Mai 2011)
 Ist ein Framework zum Erstellen von Cross-Platform-
Mobile-Applications

3. Was ist Flex Mobile
 Baut auf Flex auf (letzte Präsentation)
 Gibt es seit Flex 4.5 (Mai 2011)
 Ist ein Framework zum Erstellen von Cross-Platform-
Mobile-Applications
Theoretisch: Code once, run everywhere

4. Neue Komponenten in Flex Mobile im
Vergleich zu Flex
 BusyIndicator
 SpashScreen
 TabbedViewNavigatorApplication, ViewNavigator
 ActionBar: navigator area, title area, action area
 Einiges mehr …

5. Sprache und VM
 Flex Mobile: Wie bei Flex: ActionScript3 + MXML
 Flex hat zwei Namespaces: mx und Spark
 Spark: Die „neuen“ Komponenten(Flex 4.0) bei denen sich
zwischen Layout (Skins) und Model+Logik unterscheiden lässt
 Alle Komponenten Spark zur Verfügung (nicht alle sind
Mobile-Ready!)
 Aus mx-Namespace (eigentlich) nur Charting
 Adobe AIR als Runtime
 Android: Runtime als Shared Installation
 iOS: Runtime in jedem Deployable (~10MB)
 Windows Phone 7: (Noch?) Nicht verfügbar

6. Entwicklungsprozess
 Flash-Builder IDE (gleiche IDE wie für normale Flex-
Applikationen, kommerziell, 60 Tage Trail)
 Neues Mobile-Projekt mit Wizard (Zielplattformen,
… wählen) Demo - Emulator
• Fehlende Knöpfe des Emu unter
 Im Emulator ablauffähig Mac
• Screen-DPI
• Target-Device
 Demo – Emulator • Vorschau in der IDE
• Was die IDE-Vorschau nicht
kann
 Demo – On Device (Android)
Demo – On Device (Android)
• Installation über USB –
Debugging aktivieren
• Daten- /
Netzwerkverbindung über
WLAN

7. Single-Sourcing mit Flex Mobile
 Dank Spark und der Möglichkeit in Flex Library-
Projekte zu erstellen kann eine menge Code single-
sourced werden.
 Grenzen
 MX-Komponenten nicht in Mobile verfügbar (Legacy-Code
nach Mobile nicht so einfach)
 Performance-Probleme wenn einfach der Flash-Player-Code
verwendet wird (relativiert sich mit dual-core…)
 Reuse von UI-Komponenten nur sehr beschränkt möglich 
Skinning / Vererbung  Controller-Code größtmöglicher
reuse

8. Screenshots und Grenzen des Single-S.
Single-Sourced – Die Desktop-Applikation im Browser

9. Screenshots und Grenzen des Single-S.
Single-Sourced – Ohne weitere Anpassungen
Code ohne Anpassung auf Mobile lauffähig.
Aber:
Buttons ganz links nutzlos: Kein Touch-Event abfangbar. Auch
viel zu klein für Touch-Bedienung.
Performance eher schlecht! Die Komponenten sind nicht für
Mobile Optimiert

10. Screenshots und Grenzen des Single-S.
Single-Sourced … und für Mobile angepasst
Besser: Anpassen für Mobile!
 Nicht das s:DataGrid verwenden sondern eine s:List

11. Screenshots und Grenzen des Single-S.
… auf dem Gerät

12. Screenshots und Grenzen des Single-S.
Validatoren – Handarbeit nötig
Obiges Defaultverhalten wäre für
mobile nicht brauchbar: Würden den
Screen um längen in der Horizontalen
sprengen
… Anpassung durch Verändern des
Skins für das FormsItem-Element (Leider
viel C&P)

13. Grenzen des Emulators - Hardware
Emulator kann Kamera nicht simulieren.
Schade, denn eigentlich hat mein NB
eine Webcam…
Ansprechen der Kamera sehr einfach
möglich, da nur gegen die Flex-API
programmiert werden muss. Das
unterliegende System ist egal.

14. PAIN
Kinderkrankheiten? Implementierungsstand des Flex Mobile SDK
 Kein Comboboxen – ist zwar einbindbar, aber nicht
touchfähig – Der erste Eindruck kann täuschen!
 mx:HRule? <s:Line width="100%">
<s:stroke>
<s:SolidColorStroke
color="0x000000" weight="1"/>
</s:stroke>
</s:Line>
 Verschiedene Probleme mit dem prozentualen Breiten und
Höhenangaben  screen.width und screen.height schaffen
Abhilfe
 Emu unter Mac hat die Hardware-Emulationsknöpfe nicht
 Emu lässt sich nicht starten wenn der Firefox an ist (White
Screen of Nothing)

15. Vorteile von Flex gegenüber
Alternativen
 Abstraktion von Hardware und Hardwarefunktionenen.
 Schöne, gut verwendbare API für Hardwarefunkionen.
 Kein Fragmentierungsproblem?
 Code läuft auf Android-Phones und –Pads, iPhone, iPad,
Blackberry-Playbook, Windows Phone 7 fehlt noch immer!
 Skinning, CSS macht einfache Anpassung an jeweilige
Zielplattform möglich.
 Framework bietet sehr gute Optimierungen, was die
Displayauflösung des Zielgerätes angeht.
 IDE ist hervorragend.
 Emulator und Debugger sind perfekt integriert.

16. Die Kristallkugel
Wie geht es weiter mit Flex / Flex Mobile
 Flex - inzwischen ein Apache-Projekt
 Flash-Player Support für Mobile wird eingestellt – Nicht
Adobe AIR  Flex Mobile geht weiter!
 Firma von PhoneGap übernommen durch Adobe
(03.10.2011)
 Adobe-Labs Wallaby: .fla  HTML
 Google swiffy: .swf  HTML
Persönliche Prognose:
 Flash-Player wird auf lange Sicht verdrängt durch HTML5
und Konvertierungstools (.swf/.fla  HTML5)
 Flex Mobile (Adobe AIR) wird als Plattform stärker werden

17. Alternativen für Cross-Platform-
Development
 Google Dart (10/2011 vorgestellt) – eigene
Programmiersprache  HTML5
 Natives HTML5 (JQuery Mobile …)
 Leon - http://www.leon.io/
 …
 RhoMobile(Ruby+HTML)
 Appcelerator(PHP/Phyton/Ruby+HTML)
 PhoneGap – 3 Okt. Übernommen durch Adobe

18. Weiterführend…
 Multi-Platform-Skinning:
http://www.adobe.com/devnet/flex/articles/mobil
e-skinning-part3.html

19. Noch Fragen?