SlideShare ist ein Scribd-Unternehmen logo
Mobile Anwendungen
mit Sencha Touch

Alberto Assmann I 08. September 2011




                                       © Mayflower GmbH 2011
Erfahrungen?



I   Javascript?

I   ExtJS?

I   Mobile Anwendungsentwicklung?

I   Native Entwicklung (Objective-C, Java)?

I   Mobile Javascript Frameworks
    (jQuery Mobile, PhoneGap, Titanium)?

I   Sencha Touch?



                                              Mayflower GmbH I 2
Sencha Touch?



I   Javascript Framework für mobile Anwendungen

I   Zur Entwicklung von Webanwendungen für mobile Geräte

I   Nativer Look

I   Beschränkung auf Touch-Eingaben

I   Nur Webkit Support

I   Verwendet HTML5 & CSS3

I   MVC Anwendungen



                                                           Mayflower GmbH I 3
Mayflower GmbH I 4
Warum trotzdem Sencha Touch?



I   Optimiert für Touchgeräte

I   2009 Anteil d. Smartphones mit Touchscreen 55%

I   2010 Anteil d. Smartphones mit Touchscreen 75%

I   2006 - 2010 325% Zuwachs bei Smartphones mit Touchscreen

I   Touch !== Click

I   Multitouch

I   Gesten



                                                        Mayflower GmbH I 5
Touch Events



I       Event Manager zum registrieren von EventListenern

I       Tap

I       Gesten
    I      Pinch
    I      Swipe
    I      Drag




                                                            Mayflower GmbH I 6
Event Manager

Ext.fly(„div“).on({
         tap: function() {
                  alert(„Tap, tap“);
         },
         swift: function() {
                  alert(„Swing“);
         }
});




                                       Mayflower GmbH I 7
Ordnerstruktur



I   sencha-touch.js für Produktiv

I   sencha-touch-debug-w-comment.js
    für Entwicklung
I   css Ordner für Produktiv
I   css-debug für Entwicklung
I   Inklusive Doku (docs)
I   Inklusive SASS Files (für Style
    Anpassungen)
I   Beispiele (examples)

                                      Mayflower GmbH I 8
Komponenten



I       Alles ist eine Komponente


I       Komponenten können andere Komponenten enthalten


I       Nutzbar als
    I      Objektinstanz eines zuvor erzeugten Objektes
    I      xtype innerhalb einer Komponente




                                                          Mayflower GmbH I 9
Objektinstanz

var myButton = new Ext.Button({
       text: 'Senden'
});

var myPanel = new Ext.Panel({
       items: [myButton, ...]
});




                                  Mayflower GmbH I 10
xtype

var myPanel = new Ext.Panel({
       items: [{
                xtype: 'Button',
                id: 'myButton',
                text: 'Senden'
                }, …]
});




                                    Mayflower GmbH I 11
Layout



I    Legen die Anordnung der Komponenten fest

I    Panel Komponente als Container

I    Anordnung verschiedener Panels

I    Layouts
    · Fit
    · Card
    · Hbox
    · Vbox

                                                Mayflower GmbH I 12
Fit




      Mayflower GmbH I 13
Card




       Mayflower GmbH I 14
HBox




       Mayflower GmbH I 15
VBox




       Mayflower GmbH I 16
Komponenten – Formularelemente



I       Buttons

I       Picker

I       Slides

I       Inputs
    I      Email
    I      Nummern
    I      Passwort
    I      URL



                                 Mayflower GmbH I 17
Komponenten – Listen



I   Einfache Listen



I   Gruppierte Listen



I   Verschachtelte Listen
    (nested)




                            Mayflower GmbH I 18
Komponenten – Toolbars



I   Tabs



I   Toolbars



I   Bottom Tabs




                         Mayflower GmbH I 19
Komponenten – Carousel




I   Horizontal



I   Vertikal




                         Mayflower GmbH I 20
Komponenten – Dialogs/Overlays




I   Action Sheet

I   Overlay

I   Alert

I   Prompt

I   Confirm




                                 Mayflower GmbH I 21
Komponenten – Maps



I       Google Maps Integration
    I      Kartenansicht
    I      Sattelitenansicht
    I      Zoombar
    I      Bewegbar




                                  Mayflower GmbH I 22
MVC



I   Vollständige MVC Implementierung

I   Anpassbarer Router mit statischen Routen

I   Controller sind in Actions unterteil

I   Model ist in Model und Store geteilt

I   Views als Komponente, konfigurierbar über XTemplate




                                                          Mayflower GmbH I 23
MVC

         Router

        Controller




                     Model
Views
                     Store

                             Mayflower GmbH I 24
MVC – Controller



I   lädt Daten (Model) in den View (Anzeige)

I   Ermöglichen eine Gliederung

I   Haben Actions die für eine konkrete Aktion verwendet werden

I   Auch statische Routen möglich




                                                            Mayflower GmbH I 25
Controller



Ext.regController(„myController“, {
     index: function() {
          App.views.viewport.reveal(„viewName“);
     }
});




                                                   Mayflower GmbH I 26
Statische Routen



Ext.Router.draw(function(map) {
     map.connect(„/default“, { controller: ‚index‘, action: ‚index‘ };
     map.connect(„/site/ :id“, { controller: ‚site‘, action: ‚show‘ }
});




                                                                         Mayflower GmbH I 27
MVC

         Router

        Controller




                     Model
Views
                     Store

                             Mayflower GmbH I 28
MVC – Models & Stores



I       Models repräsentiert Datenstrukturen
    I         Kann Validatoren enthalten

    I         Kann Formatoren enthalten

    I         Kann Relations zu anderen Models abbilden

    I         Kann Proxy als Datenabstraktion enthalten
          I      Proxy besteht aus Reader und Writer
          I      Proxy kann Daten in Store laden




                                                          Mayflower GmbH I 29
http://www.sencha.com/blog/countdown-to-ext-js-4-data-package

                                           Mayflower GmbH I 30
Model
Ext.regModel(„myModel“, {
     fields: [
           { name: ‚id‘, type: ‚int‘ },
           { name: ‚email‘, type: ‚int‘ },
           { name: ‚birthday‘, type: ‚date‘, dateFormat: ‚Ymd‘ }
     ],
     validations: [
           {
                 type: ‚format‘,
                 name: ‚email‘,
                 matcher: ‚ /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)
                                 +([a-zA-Z0-9]{2,4})+$/‘,
                 message: ‚email is invalid‘
     }],
     proxy: {
           type: ‚localstorage‘,
           id: ‚myDataStorage‘
     }
});
                                                                          Mayflower GmbH I 31
MVC – Models & Stores



I        Stores sind Datenspeicher
     I      Struktur des Store wird über Model(s) festgelegt
     I      Kann Sorter enthalten
     I      Kann Filter enthalten
     I      Kann Grouper enthalten
     I      Nutzt ebenfalls Proxy zum Lesen/Schreiben




                                                               Mayflower GmbH I 32
Stores

Var myStore = new Ext.data.store({
     model: ‚myModel‘,
     proxy: {
          type: ‚ajax‘,
          url: ‚/data.json‘,
          reader: {
                 type: ‚json‘,
                 root: ‚data‘
          }
     },
     sorters: [{
          property: ‚id‘,
          direction: ‚DESC‘
     }]
});


                                        Mayflower GmbH I 33
MVC

         Router

        Controller




                     Model
Views
                     Store

                             Mayflower GmbH I 34
MVC – Views



I       Stellen Daten aus einem Model dar

I       Erlauben Interaktion mit Daten

I       Vorhandene Komponenten
    I       Carousel, List, Tabs, DataView etc.
    I      Änderungen über Xtemplates möglich

I       Eigene UI Komponenten
    I      z.B.: Formulare, eigene Komponenten




                                                  Mayflower GmbH I 35
App.views.ErrorField = Ext.extend(Ext.component, {
        initComponent: function() {
               config = {
                       xtype: ‚component‘,
                       cls: ‚errorfield‘,
                       id: this.fieldname + ‚ErrorField‘,
                       tpl: [ ‚<tpl if=„values.length &gt; 0“>‘,
                                          ‚<ul>‘,
                                                  ‚<tpl for=„.“>‘,
                                                           <li>{field} {message}</li>‘,
                                                  ‚</tpl>‘,
                                          ‚</ul>‘
                                  ‚</tpl>‘, ],
                       hidden: true
               };
               Ext.apply(this, config);
               App.views.ErrorField.superclass.initComponent.call(this);
        }
});
Ext.reg(‚App.views.ErrorField‘, App.views.ErrorField);

                                                                                 Mayflower GmbH I 36
What else?


I       Theming
    I      SASS Support

I       Plugins
    I      ListPagging
    I      PullRefresh

I       Charting als kommerzielle Zusatzkomponente

I       Audio/Video Komponenten

I       Offline Apps



                                                     Mayflower GmbH I 37
Phone Gap


I       Native App

I       Benötigt Build

I       Zusätzliche API‘s
    I      Direkter Netzwerkzugriff
    I      Sensoren
    I      Kamera
    I      Adressbuch
    I      Dateizugriff




                                      Mayflower GmbH I 38
Hilfe zur Selbsthilfe



I       Sencha.com
    I      Examples
    I      Kitchen Sink
    I      Learning Center

I       API wird mitgeliefert

I       Kaum öffentlicher Code




                                 Mayflower GmbH I 39
Fragen?

A: Ja

             D: Nein




                       Mayflower GmbH I 40
Vielen Dank für Ihre Aufmerksamkeit!




     Kontakt   Alberto Assmann
               alberto.assmann@mayflower.de
               +49 931 35965 1164


               Mayflower GmbH
               Pleichertorstr. 2
               Würzburg
9/15/2011                           Mayflower GmbH   41

Weitere ähnliche Inhalte

Andere mochten auch

Slideshare
SlideshareSlideshare
Slideshare
Elisa Alonzo
 
METODOLOGÍA DE LA INVESTIGACIÓN GR
METODOLOGÍA DE LA INVESTIGACIÓN GRMETODOLOGÍA DE LA INVESTIGACIÓN GR
METODOLOGÍA DE LA INVESTIGACIÓN GR
gabysicom
 
Open Educational Ressources mit Moodle
Open Educational Ressources mit MoodleOpen Educational Ressources mit Moodle
Open Educational Ressources mit Moodle
ralfhilgenstock
 
2 periodo
2 periodo2 periodo
2 periodo
Tomas Isaza
 
Diapositivas
Diapositivas Diapositivas
Diapositivas
katherineguerrero11
 
Los 3 idiotas mbf
Los 3 idiotas mbfLos 3 idiotas mbf
Los 3 idiotas mbf
MARGGY FLORES
 
Tierra de escritores
Tierra de escritoresTierra de escritores
Tierra de escritores
alejandriaco
 
Invitación final
Invitación finalInvitación final
Invitación final
Anna Forastier
 
Redes sociales
Redes socialesRedes sociales
Redes sociales
jmartinezpriego
 
Presentacion
PresentacionPresentacion
Presentacion
yennichacon
 
Quien movio mi queso
Quien movio mi quesoQuien movio mi queso
Quien movio mi queso
Yessica Ruano
 
Farias meza
Farias mezaFarias meza
Apuntes de power point
Apuntes de power pointApuntes de power point
Apuntes de power point
Andy_hope
 
Tratadodelcortedelahaya (1)
Tratadodelcortedelahaya (1)Tratadodelcortedelahaya (1)
Tratadodelcortedelahaya (1)
gianpiere1990
 
Cleanleach Iberflora. Dra. Lola Narváez
Cleanleach Iberflora. Dra. Lola NarváezCleanleach Iberflora. Dra. Lola Narváez
Cleanleach Iberflora. Dra. Lola Narváez
cleanleach
 
User-Driven Open Source Communities, auch für den Finanzsektor
User-Driven Open Source Communities, auch für den FinanzsektorUser-Driven Open Source Communities, auch für den Finanzsektor
User-Driven Open Source Communities, auch für den Finanzsektor
Matthias Stürmer
 
Autogestion diegorosado
Autogestion diegorosadoAutogestion diegorosado
Autogestion diegorosado
diego-4
 
7Verd Fluix
7Verd Fluix7Verd Fluix
7Verd Fluix
allaura2
 
5 texto conciliado gaceta 342 (31 05-11) seguridad ciudadana.pdf.nivel 3
5 texto conciliado gaceta 342 (31 05-11) seguridad ciudadana.pdf.nivel 35 texto conciliado gaceta 342 (31 05-11) seguridad ciudadana.pdf.nivel 3
5 texto conciliado gaceta 342 (31 05-11) seguridad ciudadana.pdf.nivel 3
jeramon
 
Ley federal
Ley federalLey federal
Ley federal
gamabram
 

Andere mochten auch (20)

Slideshare
SlideshareSlideshare
Slideshare
 
METODOLOGÍA DE LA INVESTIGACIÓN GR
METODOLOGÍA DE LA INVESTIGACIÓN GRMETODOLOGÍA DE LA INVESTIGACIÓN GR
METODOLOGÍA DE LA INVESTIGACIÓN GR
 
Open Educational Ressources mit Moodle
Open Educational Ressources mit MoodleOpen Educational Ressources mit Moodle
Open Educational Ressources mit Moodle
 
2 periodo
2 periodo2 periodo
2 periodo
 
Diapositivas
Diapositivas Diapositivas
Diapositivas
 
Los 3 idiotas mbf
Los 3 idiotas mbfLos 3 idiotas mbf
Los 3 idiotas mbf
 
Tierra de escritores
Tierra de escritoresTierra de escritores
Tierra de escritores
 
Invitación final
Invitación finalInvitación final
Invitación final
 
Redes sociales
Redes socialesRedes sociales
Redes sociales
 
Presentacion
PresentacionPresentacion
Presentacion
 
Quien movio mi queso
Quien movio mi quesoQuien movio mi queso
Quien movio mi queso
 
Farias meza
Farias mezaFarias meza
Farias meza
 
Apuntes de power point
Apuntes de power pointApuntes de power point
Apuntes de power point
 
Tratadodelcortedelahaya (1)
Tratadodelcortedelahaya (1)Tratadodelcortedelahaya (1)
Tratadodelcortedelahaya (1)
 
Cleanleach Iberflora. Dra. Lola Narváez
Cleanleach Iberflora. Dra. Lola NarváezCleanleach Iberflora. Dra. Lola Narváez
Cleanleach Iberflora. Dra. Lola Narváez
 
User-Driven Open Source Communities, auch für den Finanzsektor
User-Driven Open Source Communities, auch für den FinanzsektorUser-Driven Open Source Communities, auch für den Finanzsektor
User-Driven Open Source Communities, auch für den Finanzsektor
 
Autogestion diegorosado
Autogestion diegorosadoAutogestion diegorosado
Autogestion diegorosado
 
7Verd Fluix
7Verd Fluix7Verd Fluix
7Verd Fluix
 
5 texto conciliado gaceta 342 (31 05-11) seguridad ciudadana.pdf.nivel 3
5 texto conciliado gaceta 342 (31 05-11) seguridad ciudadana.pdf.nivel 35 texto conciliado gaceta 342 (31 05-11) seguridad ciudadana.pdf.nivel 3
5 texto conciliado gaceta 342 (31 05-11) seguridad ciudadana.pdf.nivel 3
 
Ley federal
Ley federalLey federal
Ley federal
 

Ähnlich wie Mobile Anwendungen mit SenchaTouch

jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
Mayflower GmbH
 
JS Best Practises Debugging und Logging
JS Best Practises Debugging und LoggingJS Best Practises Debugging und Logging
JS Best Practises Debugging und Logging
Mayflower GmbH
 
Symfony2
Symfony2Symfony2
Symfony2
Mayflower GmbH
 
YAFOWIL - Webformulare in Python ohne Kopfschmerzen
YAFOWIL - Webformulare in Python ohne KopfschmerzenYAFOWIL - Webformulare in Python ohne Kopfschmerzen
YAFOWIL - Webformulare in Python ohne Kopfschmerzen
Jens Klein
 
Präsentation webservices
Präsentation webservicesPräsentation webservices
Präsentation webservices
xxtesaxx
 
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und AlloyNative Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Mayflower GmbH
 
Stored Procedures in MySQL
Stored Procedures in MySQLStored Procedures in MySQL
Stored Procedures in MySQL
Mayflower GmbH
 
Anforderungsanalyse und UML Grundlagen
Anforderungsanalyse und UML GrundlagenAnforderungsanalyse und UML Grundlagen
Anforderungsanalyse und UML Grundlagen
Christian Baranowski
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJS
Sebastian Springer
 
Angular2
Angular2Angular2
Responsive Webdesign: Fiese Fallstricke und sexy Strategien
Responsive Webdesign: Fiese Fallstricke und sexy StrategienResponsive Webdesign: Fiese Fallstricke und sexy Strategien
Responsive Webdesign: Fiese Fallstricke und sexy Strategien
Johannes Weber
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
Thomas Kratz
 
MVVM mit WPF
MVVM mit WPFMVVM mit WPF
MVVM mit WPF
Hendrik Lösch
 
Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...
Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...
Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...
OPITZ CONSULTING Deutschland
 
App Entwicklung mit Appcelerator Titanium - MTC 2014
App Entwicklung mit Appcelerator Titanium - MTC 2014App Entwicklung mit Appcelerator Titanium - MTC 2014
App Entwicklung mit Appcelerator Titanium - MTC 2014
Marcel Pociot
 
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture LösungAndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
Eduard Hildebrandt
 
GWT: Eintauchen in MVP und Internationalisierung
GWT: Eintauchen in MVP und InternationalisierungGWT: Eintauchen in MVP und Internationalisierung
GWT: Eintauchen in MVP und Internationalisierung
Cenarion Information Systems GmbH
 
Mobile Anwendungsentwicklung mit Webtechnologien
Mobile Anwendungsentwicklung mit WebtechnologienMobile Anwendungsentwicklung mit Webtechnologien
Mobile Anwendungsentwicklung mit Webtechnologien
Mayflower GmbH
 
Modernizing Oracle Forms - DOAG 2012
Modernizing Oracle Forms - DOAG 2012Modernizing Oracle Forms - DOAG 2012
Modernizing Oracle Forms - DOAG 2012
OPITZ CONSULTING Deutschland
 

Ähnlich wie Mobile Anwendungen mit SenchaTouch (20)

jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
JS Best Practises Debugging und Logging
JS Best Practises Debugging und LoggingJS Best Practises Debugging und Logging
JS Best Practises Debugging und Logging
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
Symfony2
Symfony2Symfony2
Symfony2
 
YAFOWIL - Webformulare in Python ohne Kopfschmerzen
YAFOWIL - Webformulare in Python ohne KopfschmerzenYAFOWIL - Webformulare in Python ohne Kopfschmerzen
YAFOWIL - Webformulare in Python ohne Kopfschmerzen
 
Präsentation webservices
Präsentation webservicesPräsentation webservices
Präsentation webservices
 
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und AlloyNative Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
 
Stored Procedures in MySQL
Stored Procedures in MySQLStored Procedures in MySQL
Stored Procedures in MySQL
 
Anforderungsanalyse und UML Grundlagen
Anforderungsanalyse und UML GrundlagenAnforderungsanalyse und UML Grundlagen
Anforderungsanalyse und UML Grundlagen
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJS
 
Angular2
Angular2Angular2
Angular2
 
Responsive Webdesign: Fiese Fallstricke und sexy Strategien
Responsive Webdesign: Fiese Fallstricke und sexy StrategienResponsive Webdesign: Fiese Fallstricke und sexy Strategien
Responsive Webdesign: Fiese Fallstricke und sexy Strategien
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
 
MVVM mit WPF
MVVM mit WPFMVVM mit WPF
MVVM mit WPF
 
Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...
Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...
Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...
 
App Entwicklung mit Appcelerator Titanium - MTC 2014
App Entwicklung mit Appcelerator Titanium - MTC 2014App Entwicklung mit Appcelerator Titanium - MTC 2014
App Entwicklung mit Appcelerator Titanium - MTC 2014
 
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture LösungAndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
 
GWT: Eintauchen in MVP und Internationalisierung
GWT: Eintauchen in MVP und InternationalisierungGWT: Eintauchen in MVP und Internationalisierung
GWT: Eintauchen in MVP und Internationalisierung
 
Mobile Anwendungsentwicklung mit Webtechnologien
Mobile Anwendungsentwicklung mit WebtechnologienMobile Anwendungsentwicklung mit Webtechnologien
Mobile Anwendungsentwicklung mit Webtechnologien
 
Modernizing Oracle Forms - DOAG 2012
Modernizing Oracle Forms - DOAG 2012Modernizing Oracle Forms - DOAG 2012
Modernizing Oracle Forms - DOAG 2012
 

Mehr von Mayflower GmbH

Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mayflower GmbH
 
Why and what is go
Why and what is goWhy and what is go
Why and what is go
Mayflower GmbH
 
Agile Anti-Patterns
Agile Anti-PatternsAgile Anti-Patterns
Agile Anti-Patterns
Mayflower GmbH
 
JavaScript Days 2015: Security
JavaScript Days 2015: SecurityJavaScript Days 2015: Security
JavaScript Days 2015: Security
Mayflower GmbH
 
Vom Entwickler zur Führungskraft
Vom Entwickler zur FührungskraftVom Entwickler zur Führungskraft
Vom Entwickler zur Führungskraft
Mayflower GmbH
 
Produktive teams
Produktive teamsProduktive teams
Produktive teams
Mayflower GmbH
 
Salt and pepper — native code in the browser Browser using Google native Client
Salt and pepper — native code in the browser Browser using Google native ClientSalt and pepper — native code in the browser Browser using Google native Client
Salt and pepper — native code in the browser Browser using Google native Client
Mayflower GmbH
 
Plugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debuggingPlugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debugging
Mayflower GmbH
 
Usability im web
Usability im webUsability im web
Usability im web
Mayflower GmbH
 
Rewrites überleben
Rewrites überlebenRewrites überleben
Rewrites überleben
Mayflower GmbH
 
JavaScript Security
JavaScript SecurityJavaScript Security
JavaScript Security
Mayflower GmbH
 
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
Mayflower GmbH
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
Mayflower GmbH
 
Pair Programming Mythbusters
Pair Programming MythbustersPair Programming Mythbusters
Pair Programming Mythbusters
Mayflower GmbH
 
Shoeism - Frau im Glück
Shoeism - Frau im GlückShoeism - Frau im Glück
Shoeism - Frau im Glück
Mayflower GmbH
 
Bessere Software schneller liefern
Bessere Software schneller liefernBessere Software schneller liefern
Bessere Software schneller liefern
Mayflower GmbH
 
Von 0 auf 100 in 2 Sprints
Von 0 auf 100 in 2 SprintsVon 0 auf 100 in 2 Sprints
Von 0 auf 100 in 2 Sprints
Mayflower GmbH
 
Piwik anpassen und skalieren
Piwik anpassen und skalierenPiwik anpassen und skalieren
Piwik anpassen und skalieren
Mayflower GmbH
 
Agilitaet im E-Commerce - E-Commerce Breakfast
Agilitaet im E-Commerce - E-Commerce BreakfastAgilitaet im E-Commerce - E-Commerce Breakfast
Agilitaet im E-Commerce - E-Commerce Breakfast
Mayflower GmbH
 
Mongo DB - Segen oder Fluch
Mongo DB - Segen oder FluchMongo DB - Segen oder Fluch
Mongo DB - Segen oder Fluch
Mayflower GmbH
 

Mehr von Mayflower GmbH (20)

Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
 
Why and what is go
Why and what is goWhy and what is go
Why and what is go
 
Agile Anti-Patterns
Agile Anti-PatternsAgile Anti-Patterns
Agile Anti-Patterns
 
JavaScript Days 2015: Security
JavaScript Days 2015: SecurityJavaScript Days 2015: Security
JavaScript Days 2015: Security
 
Vom Entwickler zur Führungskraft
Vom Entwickler zur FührungskraftVom Entwickler zur Führungskraft
Vom Entwickler zur Führungskraft
 
Produktive teams
Produktive teamsProduktive teams
Produktive teams
 
Salt and pepper — native code in the browser Browser using Google native Client
Salt and pepper — native code in the browser Browser using Google native ClientSalt and pepper — native code in the browser Browser using Google native Client
Salt and pepper — native code in the browser Browser using Google native Client
 
Plugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debuggingPlugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debugging
 
Usability im web
Usability im webUsability im web
Usability im web
 
Rewrites überleben
Rewrites überlebenRewrites überleben
Rewrites überleben
 
JavaScript Security
JavaScript SecurityJavaScript Security
JavaScript Security
 
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
 
Pair Programming Mythbusters
Pair Programming MythbustersPair Programming Mythbusters
Pair Programming Mythbusters
 
Shoeism - Frau im Glück
Shoeism - Frau im GlückShoeism - Frau im Glück
Shoeism - Frau im Glück
 
Bessere Software schneller liefern
Bessere Software schneller liefernBessere Software schneller liefern
Bessere Software schneller liefern
 
Von 0 auf 100 in 2 Sprints
Von 0 auf 100 in 2 SprintsVon 0 auf 100 in 2 Sprints
Von 0 auf 100 in 2 Sprints
 
Piwik anpassen und skalieren
Piwik anpassen und skalierenPiwik anpassen und skalieren
Piwik anpassen und skalieren
 
Agilitaet im E-Commerce - E-Commerce Breakfast
Agilitaet im E-Commerce - E-Commerce BreakfastAgilitaet im E-Commerce - E-Commerce Breakfast
Agilitaet im E-Commerce - E-Commerce Breakfast
 
Mongo DB - Segen oder Fluch
Mongo DB - Segen oder FluchMongo DB - Segen oder Fluch
Mongo DB - Segen oder Fluch
 

Mobile Anwendungen mit SenchaTouch

  • 1. Mobile Anwendungen mit Sencha Touch Alberto Assmann I 08. September 2011 © Mayflower GmbH 2011
  • 2. Erfahrungen? I Javascript? I ExtJS? I Mobile Anwendungsentwicklung? I Native Entwicklung (Objective-C, Java)? I Mobile Javascript Frameworks (jQuery Mobile, PhoneGap, Titanium)? I Sencha Touch? Mayflower GmbH I 2
  • 3. Sencha Touch? I Javascript Framework für mobile Anwendungen I Zur Entwicklung von Webanwendungen für mobile Geräte I Nativer Look I Beschränkung auf Touch-Eingaben I Nur Webkit Support I Verwendet HTML5 & CSS3 I MVC Anwendungen Mayflower GmbH I 3
  • 5. Warum trotzdem Sencha Touch? I Optimiert für Touchgeräte I 2009 Anteil d. Smartphones mit Touchscreen 55% I 2010 Anteil d. Smartphones mit Touchscreen 75% I 2006 - 2010 325% Zuwachs bei Smartphones mit Touchscreen I Touch !== Click I Multitouch I Gesten Mayflower GmbH I 5
  • 6. Touch Events I Event Manager zum registrieren von EventListenern I Tap I Gesten I Pinch I Swipe I Drag Mayflower GmbH I 6
  • 7. Event Manager Ext.fly(„div“).on({ tap: function() { alert(„Tap, tap“); }, swift: function() { alert(„Swing“); } }); Mayflower GmbH I 7
  • 8. Ordnerstruktur I sencha-touch.js für Produktiv I sencha-touch-debug-w-comment.js für Entwicklung I css Ordner für Produktiv I css-debug für Entwicklung I Inklusive Doku (docs) I Inklusive SASS Files (für Style Anpassungen) I Beispiele (examples) Mayflower GmbH I 8
  • 9. Komponenten I Alles ist eine Komponente I Komponenten können andere Komponenten enthalten I Nutzbar als I Objektinstanz eines zuvor erzeugten Objektes I xtype innerhalb einer Komponente Mayflower GmbH I 9
  • 10. Objektinstanz var myButton = new Ext.Button({ text: 'Senden' }); var myPanel = new Ext.Panel({ items: [myButton, ...] }); Mayflower GmbH I 10
  • 11. xtype var myPanel = new Ext.Panel({ items: [{ xtype: 'Button', id: 'myButton', text: 'Senden' }, …] }); Mayflower GmbH I 11
  • 12. Layout I Legen die Anordnung der Komponenten fest I Panel Komponente als Container I Anordnung verschiedener Panels I Layouts · Fit · Card · Hbox · Vbox Mayflower GmbH I 12
  • 13. Fit Mayflower GmbH I 13
  • 14. Card Mayflower GmbH I 14
  • 15. HBox Mayflower GmbH I 15
  • 16. VBox Mayflower GmbH I 16
  • 17. Komponenten – Formularelemente I Buttons I Picker I Slides I Inputs I Email I Nummern I Passwort I URL Mayflower GmbH I 17
  • 18. Komponenten – Listen I Einfache Listen I Gruppierte Listen I Verschachtelte Listen (nested) Mayflower GmbH I 18
  • 19. Komponenten – Toolbars I Tabs I Toolbars I Bottom Tabs Mayflower GmbH I 19
  • 20. Komponenten – Carousel I Horizontal I Vertikal Mayflower GmbH I 20
  • 21. Komponenten – Dialogs/Overlays I Action Sheet I Overlay I Alert I Prompt I Confirm Mayflower GmbH I 21
  • 22. Komponenten – Maps I Google Maps Integration I Kartenansicht I Sattelitenansicht I Zoombar I Bewegbar Mayflower GmbH I 22
  • 23. MVC I Vollständige MVC Implementierung I Anpassbarer Router mit statischen Routen I Controller sind in Actions unterteil I Model ist in Model und Store geteilt I Views als Komponente, konfigurierbar über XTemplate Mayflower GmbH I 23
  • 24. MVC Router Controller Model Views Store Mayflower GmbH I 24
  • 25. MVC – Controller I lädt Daten (Model) in den View (Anzeige) I Ermöglichen eine Gliederung I Haben Actions die für eine konkrete Aktion verwendet werden I Auch statische Routen möglich Mayflower GmbH I 25
  • 26. Controller Ext.regController(„myController“, { index: function() { App.views.viewport.reveal(„viewName“); } }); Mayflower GmbH I 26
  • 27. Statische Routen Ext.Router.draw(function(map) { map.connect(„/default“, { controller: ‚index‘, action: ‚index‘ }; map.connect(„/site/ :id“, { controller: ‚site‘, action: ‚show‘ } }); Mayflower GmbH I 27
  • 28. MVC Router Controller Model Views Store Mayflower GmbH I 28
  • 29. MVC – Models & Stores I Models repräsentiert Datenstrukturen I Kann Validatoren enthalten I Kann Formatoren enthalten I Kann Relations zu anderen Models abbilden I Kann Proxy als Datenabstraktion enthalten I Proxy besteht aus Reader und Writer I Proxy kann Daten in Store laden Mayflower GmbH I 29
  • 31. Model Ext.regModel(„myModel“, { fields: [ { name: ‚id‘, type: ‚int‘ }, { name: ‚email‘, type: ‚int‘ }, { name: ‚birthday‘, type: ‚date‘, dateFormat: ‚Ymd‘ } ], validations: [ { type: ‚format‘, name: ‚email‘, matcher: ‚ /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.) +([a-zA-Z0-9]{2,4})+$/‘, message: ‚email is invalid‘ }], proxy: { type: ‚localstorage‘, id: ‚myDataStorage‘ } }); Mayflower GmbH I 31
  • 32. MVC – Models & Stores I Stores sind Datenspeicher I Struktur des Store wird über Model(s) festgelegt I Kann Sorter enthalten I Kann Filter enthalten I Kann Grouper enthalten I Nutzt ebenfalls Proxy zum Lesen/Schreiben Mayflower GmbH I 32
  • 33. Stores Var myStore = new Ext.data.store({ model: ‚myModel‘, proxy: { type: ‚ajax‘, url: ‚/data.json‘, reader: { type: ‚json‘, root: ‚data‘ } }, sorters: [{ property: ‚id‘, direction: ‚DESC‘ }] }); Mayflower GmbH I 33
  • 34. MVC Router Controller Model Views Store Mayflower GmbH I 34
  • 35. MVC – Views I Stellen Daten aus einem Model dar I Erlauben Interaktion mit Daten I Vorhandene Komponenten I Carousel, List, Tabs, DataView etc. I Änderungen über Xtemplates möglich I Eigene UI Komponenten I z.B.: Formulare, eigene Komponenten Mayflower GmbH I 35
  • 36. App.views.ErrorField = Ext.extend(Ext.component, { initComponent: function() { config = { xtype: ‚component‘, cls: ‚errorfield‘, id: this.fieldname + ‚ErrorField‘, tpl: [ ‚<tpl if=„values.length &gt; 0“>‘, ‚<ul>‘, ‚<tpl for=„.“>‘, <li>{field} {message}</li>‘, ‚</tpl>‘, ‚</ul>‘ ‚</tpl>‘, ], hidden: true }; Ext.apply(this, config); App.views.ErrorField.superclass.initComponent.call(this); } }); Ext.reg(‚App.views.ErrorField‘, App.views.ErrorField); Mayflower GmbH I 36
  • 37. What else? I Theming I SASS Support I Plugins I ListPagging I PullRefresh I Charting als kommerzielle Zusatzkomponente I Audio/Video Komponenten I Offline Apps Mayflower GmbH I 37
  • 38. Phone Gap I Native App I Benötigt Build I Zusätzliche API‘s I Direkter Netzwerkzugriff I Sensoren I Kamera I Adressbuch I Dateizugriff Mayflower GmbH I 38
  • 39. Hilfe zur Selbsthilfe I Sencha.com I Examples I Kitchen Sink I Learning Center I API wird mitgeliefert I Kaum öffentlicher Code Mayflower GmbH I 39
  • 40. Fragen? A: Ja D: Nein Mayflower GmbH I 40
  • 41. Vielen Dank für Ihre Aufmerksamkeit! Kontakt Alberto Assmann alberto.assmann@mayflower.de +49 931 35965 1164 Mayflower GmbH Pleichertorstr. 2 Würzburg 9/15/2011 Mayflower GmbH 41