Einführung in Flex Mobile
-
Upload
johannes-hohenbichler -
Category
Documents
-
view
1.877 -
download
0
description
Transcript of Einführung in Flex Mobile
EINFÜHRUNG IN FLEX-MOBILE,
SINGLE-SOURCING UND
CROSS-PLATFORM-DEVELOPMENT
WW-Techday 16.12.2011
Von Johannes Hohenbichler (WeigleWilczek GmbH)
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
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
Neue Komponenten in Flex Mobile im
Vergleich zu Flex
BusyIndicator
SpashScreen
TabbedViewNavigatorApplication, ViewNavigator
ActionBar: navigator area, title area, action area
Einiges mehr …
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
Entwicklungsprozess
Flash-Builder IDE (gleiche IDE wie für normale Flex-
Applikationen, kommerziell, 60 Tage Trail)
Neues Mobile-Projekt mit Wizard (Zielplattformen,
… wählen)
Im Emulator ablauffähig
Demo – Emulator
Demo – On Device (Android)
Demo – On Device (Android)
• Installation über USB –
Debugging aktivieren
• Daten- /
Netzwerkverbindung über
WLAN
Demo - Emulator
• Fehlende Knöpfe des Emu unter
Mac
• Screen-DPI
• Target-Device
• Vorschau in der IDE
• Was die IDE-Vorschau nicht
kann
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
Screenshots und Grenzen des Single-S. Single-Sourced – Die Desktop-Applikation im Browser
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
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
Screenshots und Grenzen des Single-S. … auf dem Gerät
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)
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.
PAIN Kinderkrankheiten? Implementierungsstand des Flex Mobile SDK
Kein Comboboxen – ist zwar einbindbar, aber nicht touchfähig – Der erste Eindruck kann täuschen!
mx:HRule?
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)
<s:Line width="100%">
<s:stroke>
<s:SolidColorStroke
color="0x000000" weight="1"/>
</s:stroke>
</s:Line>
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.
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
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
Weiterführend…
Multi-Platform-Skinning:
http://www.adobe.com/devnet/flex/articles/mobil
e-skinning-part3.html
Noch Fragen?