SlideShare ist ein Scribd-Unternehmen logo
Cross-Plattform Mobile Development

Sencha Touch & PhoneGap

                                      MobileTechCon 2011
                             14/Sep/2011 - Mainz, Germany

                                                              Stefan Kolb
                                                        Indiginox GmbH

                                     http://www.intomobile.com/wp-content/uploads/2011/02/pile-of-phones.jpg
Me, Myself & I
                    @stefan_kolb Social Media, baby!
                    stefankolb.de My blog is my castle

Hier macht‘s Spaß :-)




                                             Softwareentwickler
Sencha Touch




       https://lh5.googleusercontent.com/-MJUrGT-iyqQ/TYind_vJ7BI/AAAAAAAAKPM/lw7NADI2qgg/Japanese_Sencha_9_Tea.JPG
“   The first HTML5, Mobile
     Web App Framework

              http://www.sencha.com/products/touch




              http://fc04.deviantart.net/fs50/f/2009/333/1/7/Blue_Bubbles_Wallpaper_by_SonnyKingBlack.jpg
jQuery

              jQuery Wrapper
               DOM Element
<HTML>         DOM Element    append();
  DOM          DOM Element removeClass();
                     ...     position();


   $(‘#selector‘);
Sencha Touch

           Sencha Touch Widgets
                     List
<HTML>             Button
  DOM              Toolbar
                      ...

new Ext.List({ ... });
Sencha Touch


• HTML5, CSS3, JavaScript
• Basiert auf Ext JS (Platform)
• Cross-Platform
http://www.sencha.com/img/20110222-loopfuse.png
http://dev.sencha.com/deploy/touch/examples/kitchensink/
Sencha Touch
index.html
MVC
Model-View-Controller




                        http://rarewallpapers.com/_wallpapers/blueprint-1024x768.jpg
Managers


• Ext.regModel();
• Ext.regController();
• Ext.reg();
 • new Ext.###CLASS###({ });
Model erstellen
View erstellen
Controller erstellen
Funktionen
Data Package




    http://www.etleboro.com/picture_library/Server_room_4.jpg
& Sencha Touch




http://www.sencha.com/blog/countdown-to-ext-js-4-data-package/
Model


• Repräsentiert Daten
• Validierung von Daten
• Verbindung zu anderen Modellen
Store


• Sammlung von Model-Instanzen
• Datenmanagement für UI-
  Komponenten
Proxy

• Laden / Speichern von Model-Daten
• ClientProxy vs. ServerProxy
 • LocalStorageProxy, SessionStorageProxy,
   MemoryProxy
 • AjaxProxy, ScriptTagProxy

• CRUD / Operation-Objekt
User Interface
                                                   Design




  http://culturedcode.com/things/iphone/makingof/ThingsTouch-InterfaceStillLife.jpg
Components


• Visuellen Bestanteile einer App
• User Interface
Demo
Components




             http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
Container

• Wrapper für andere Components
• Hinzufügen, Einfügen und Entfernen
  von Components
• Anordnung der beinhaltenden
  Components mittels Layout
Layout


• Legt fest, wie Components innerhalb
  eines Containers gerendert wrden
• auto, fit, card, hbox, vbox
 • dock, field, box
fit
card
hbox
vbox
Container/Layout
      Konfiguration

• pack: start, center, end, justify
• align: start, center, end, stretch
• direction: normal, reverse
• width, height, flex
Container/Layout
 Konfiguration
Touch
                                Events & Gestures


                 pinch/rotate   swipe



tap/double-tap                          tap & hold




                                         http://www.sencha.com/products/touch/
Demo
Touch Solitaire




                  http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
Style & Design

• CSS3
 • Unabhängig der Bildschirmauflösung

• Icons
• Animations
 • slide, pop, fade, flip & cube
 • Eigene Animationen mittels CSS
Demo
Styles & Design




                  http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
Theming




          http://www.sencha.com/products/touch/style-design
Lizenzen

• Open Source Licenses
 • GPL v3 & FLOSS

• Commercial Software License
• Commercial OEM License
Lizenzen

• Open Source Licenses
 • GPL v3 & FLOSS

• Commercial Software License
• Commercial OEM License
Offline         ScrollView       Android
HTML5
                  Charts
  Animations                  CSS3
                                           Maps
             Windows Phone
                                     Theming
Audio

 MVC                                       Video

BlackBerry                              History
               Ajax      Templates
    Forms
                        Layouts      Touch Events
                 iOS
Data Package
                       Animations
PhoneGap




           http://lh5.ggpht.com/-rmzR397-NWM/SJFLfL6_0OI/AAAAAAAAAB8/-yL_flScXAY/UTGC0101.jpg
Web-App
HTML5
   CSS             Native APIs
JavaScript
PhoneGap


• Native Bibliothek
• JavaScript
 • navigator.*
http://www.phonegap.com/about/features
http://docs.phonegap.com
deviceready?
PhoneGap Build

 build.phonegap.com
Demo
Sencha Touch & PhoneGap




                    http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
Fragen?
               Bitte nicht so schwierige :-)




       @stefan_kolb
stefan.kolb@indiginox.com
THX
I‘m up for beers




                   http://hi-zu-mi.deviantart.com/art/The-Legendary-152264959

Weitere ähnliche Inhalte

Was ist angesagt?

Einführung in die webOS Programmierung
Einführung in die webOS ProgrammierungEinführung in die webOS Programmierung
Einführung in die webOS Programmierung
Markus Leutwyler
 
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionAm Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Jens Grochtdreis
 
Web Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkWeb Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 Talk
Fabian Lange
 
Frontend Best Practices
Frontend Best PracticesFrontend Best Practices
Frontend Best Practices
Jens Grochtdreis
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Dominik Helleberg
 
1&1 Frontend Workshop II
1&1 Frontend Workshop II1&1 Frontend Workshop II
1&1 Frontend Workshop II
Nico Steiner
 
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Peter Rozek
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
GFU Cyrus AG
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft AG
 
Gratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision Ausbildungen
Gratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision AusbildungenGratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision Ausbildungen
Gratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision Ausbildungen
Eduvision Ausbildungen
 

Was ist angesagt? (10)

Einführung in die webOS Programmierung
Einführung in die webOS ProgrammierungEinführung in die webOS Programmierung
Einführung in die webOS Programmierung
 
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionAm Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
 
Web Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkWeb Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 Talk
 
Frontend Best Practices
Frontend Best PracticesFrontend Best Practices
Frontend Best Practices
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011
 
1&1 Frontend Workshop II
1&1 Frontend Workshop II1&1 Frontend Workshop II
1&1 Frontend Workshop II
 
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
Gratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision Ausbildungen
Gratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision AusbildungenGratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision Ausbildungen
Gratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision Ausbildungen
 

Ähnlich wie Sencha Touch & PhoneGap

Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
Peter Hecker
 
HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
Francesco Schwarz
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
kkramhoeft
 
Mit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & AndroidMit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & Android
Björn Wibben
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsUlrich Schmidt
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Jens Grochtdreis
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichPeter Rozek
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
Jürg Stuker
 
German: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptGerman: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit Javascript
Ralf Schwoebel
 
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
die.agilen 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
 
HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)
Namics – A Merkle Company
 
.NET Gadgeteer
.NET Gadgeteer.NET Gadgeteer
.NET Gadgeteer
Holger Wendel
 
Mobile Web Apps
Mobile Web AppsMobile Web Apps
Mobile Web Apps
holgerrueprich
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-Apps
Ralf Lütke
 
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended EditionWas nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended Edition
Christoph Reinartz
 
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
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
Sven Wolfermann
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
Sven Wolfermann
 

Ähnlich wie Sencha Touch & PhoneGap (20)

Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Mit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & AndroidMit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & Android
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
German: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptGerman: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit Javascript
 
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
 
Html5 - Traum oder Wirklichkeit
Html5 - Traum oder WirklichkeitHtml5 - Traum oder Wirklichkeit
Html5 - Traum oder Wirklichkeit
 
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)
 
HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)
 
.NET Gadgeteer
.NET Gadgeteer.NET Gadgeteer
.NET Gadgeteer
 
Mobile Web Apps
Mobile Web AppsMobile Web Apps
Mobile Web Apps
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-Apps
 
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended EditionWas nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended Edition
 
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...
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 

Sencha Touch & PhoneGap