SlideShare ist ein Scribd-Unternehmen logo
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)                              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
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?          <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)
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?

Weitere ähnliche Inhalte

Ähnlich wie Einführung in Flex Mobile

Spiele entwickeln mit dem Adobe AIR SDK
Spiele entwickeln mit dem Adobe AIR SDKSpiele entwickeln mit dem Adobe AIR SDK
Spiele entwickeln mit dem Adobe AIR SDK
IndieOutpost
 
Rich Graphics & OpenGL mit Android
Rich Graphics & OpenGL mit AndroidRich Graphics & OpenGL mit Android
Rich Graphics & OpenGL mit Android
Dominik Helleberg
 
Smartphone Betriebssysteme iOS
Smartphone Betriebssysteme iOSSmartphone Betriebssysteme iOS
Smartphone Betriebssysteme iOS
dm-development
 
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
grosser
 
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
guest9606ac
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
Markus Eiglsperger
 
Smartphone Betriebssysteme BlackBerry
Smartphone Betriebssysteme BlackBerrySmartphone Betriebssysteme BlackBerry
Smartphone Betriebssysteme BlackBerry
dm-development
 
Mobile web #bch11
Mobile web #bch11Mobile web #bch11
Mobile web #bch11
Leif Janzik
 
Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!
inovex GmbH
 
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
Christian Heindel
 
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
IKS Gesellschaft für Informations- und Kommunikationssysteme mbH
 
Devopenspace 2013 slides
Devopenspace 2013 slidesDevopenspace 2013 slides
Devopenspace 2013 slidesTimur Zanagar
 
CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...
CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...
CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...
Gordon Breuer
 
Smartphone Betriebssysteme Windows Phone
Smartphone Betriebssysteme Windows PhoneSmartphone Betriebssysteme Windows Phone
Smartphone Betriebssysteme Windows Phone
dm-development
 
Mobile Facts 2013: Apps & Websites
Mobile Facts 2013: Apps & WebsitesMobile Facts 2013: Apps & Websites
Mobile Facts 2013: Apps & Websites
Adrian Oggenfuss
 
Android Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickelnAndroid Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickeln
André Krämer
 
Windows phone 7 talk
Windows phone 7 talkWindows phone 7 talk
Windows phone 7 talkBenny Reimold
 
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
greenrobot
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
Stefan Kolb
 

Ähnlich wie Einführung in Flex Mobile (20)

Spiele entwickeln mit dem Adobe AIR SDK
Spiele entwickeln mit dem Adobe AIR SDKSpiele entwickeln mit dem Adobe AIR SDK
Spiele entwickeln mit dem Adobe AIR SDK
 
Rich Graphics & OpenGL mit Android
Rich Graphics & OpenGL mit AndroidRich Graphics & OpenGL mit Android
Rich Graphics & OpenGL mit Android
 
Smartphone Betriebssysteme iOS
Smartphone Betriebssysteme iOSSmartphone Betriebssysteme iOS
Smartphone Betriebssysteme iOS
 
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
 
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
 
Smartphone Betriebssysteme BlackBerry
Smartphone Betriebssysteme BlackBerrySmartphone Betriebssysteme BlackBerry
Smartphone Betriebssysteme BlackBerry
 
Mobile web #bch11
Mobile web #bch11Mobile web #bch11
Mobile web #bch11
 
Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!
 
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
 
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
 
Devopenspace 2013 slides
Devopenspace 2013 slidesDevopenspace 2013 slides
Devopenspace 2013 slides
 
CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...
CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...
CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...
 
Smartphone Betriebssysteme Windows Phone
Smartphone Betriebssysteme Windows PhoneSmartphone Betriebssysteme Windows Phone
Smartphone Betriebssysteme Windows Phone
 
Mobile Facts 2013: Apps & Websites
Mobile Facts 2013: Apps & WebsitesMobile Facts 2013: Apps & Websites
Mobile Facts 2013: Apps & Websites
 
Android Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickelnAndroid Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickeln
 
Windows phone 7 talk
Windows phone 7 talkWindows phone 7 talk
Windows phone 7 talk
 
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
Hdc2012 cordova-präsi
Hdc2012 cordova-präsiHdc2012 cordova-präsi
Hdc2012 cordova-präsi
 

Einführung in Flex Mobile

  • 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