Einführung in Flex Mobile

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

description

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

Transcript of Einführung in Flex Mobile

Page 1: 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)

Page 2: Einführung in Flex Mobile

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

Page 3: Einführung in Flex Mobile

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

Page 4: Einführung in Flex Mobile

Neue Komponenten in Flex Mobile im

Vergleich zu Flex

BusyIndicator

SpashScreen

TabbedViewNavigatorApplication, ViewNavigator

ActionBar: navigator area, title area, action area

Einiges mehr …

Page 5: Einführung in Flex Mobile

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

Page 6: Einführung in Flex Mobile

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

Page 7: Einführung in Flex Mobile

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

Page 8: Einführung in Flex Mobile

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

Page 9: Einführung in Flex Mobile

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

Page 10: Einführung in Flex Mobile

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

Page 11: Einführung in Flex Mobile

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

Page 12: Einführung in Flex Mobile

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)

Page 13: Einführung in Flex Mobile

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.

Page 14: Einführung in Flex Mobile

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>

Page 15: Einführung in Flex Mobile

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.

Page 16: Einführung in Flex Mobile

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

Page 17: Einführung in Flex Mobile

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

Page 19: Einführung in Flex Mobile

Noch Fragen?