Mobile Anwendungenmit Sencha TouchAlberto Assmann I 08. September 2011                                       © Mayflower G...
Erfahrungen?I   Javascript?I   ExtJS?I   Mobile Anwendungsentwicklung?I   Native Entwicklung (Objective-C, Java)?I   Mobil...
Sencha Touch?I   Javascript Framework für mobile AnwendungenI   Zur Entwicklung von Webanwendungen für mobile GeräteI   Na...
Mayflower GmbH I 4
Warum trotzdem Sencha Touch?I   Optimiert für TouchgeräteI   2009 Anteil d. Smartphones mit Touchscreen 55%I   2010 Anteil...
Touch EventsI       Event Manager zum registrieren von EventListenernI       TapI       Gesten    I      Pinch    I      S...
Event ManagerExt.fly(„div“).on({         tap: function() {                  alert(„Tap, tap“);         },         swift: f...
OrdnerstrukturI   sencha-touch.js für ProduktivI   sencha-touch-debug-w-comment.js    für EntwicklungI   css Ordner für Pr...
KomponentenI       Alles ist eine KomponenteI       Komponenten können andere Komponenten enthaltenI       Nutzbar als    ...
Objektinstanzvar myButton = new Ext.Button({       text: Senden});var myPanel = new Ext.Panel({       items: [myButton, .....
xtypevar myPanel = new Ext.Panel({       items: [{                xtype: Button,                id: myButton,             ...
LayoutI    Legen die Anordnung der Komponenten festI    Panel Komponente als ContainerI    Anordnung verschiedener PanelsI...
Fit      Mayflower GmbH I 13
Card       Mayflower GmbH I 14
HBox       Mayflower GmbH I 15
VBox       Mayflower GmbH I 16
Komponenten – FormularelementeI       ButtonsI       PickerI       SlidesI       Inputs    I      Email    I      Nummern ...
Komponenten – ListenI   Einfache ListenI   Gruppierte ListenI   Verschachtelte Listen    (nested)                         ...
Komponenten – ToolbarsI   TabsI   ToolbarsI   Bottom Tabs                         Mayflower GmbH I 19
Komponenten – CarouselI   HorizontalI   Vertikal                         Mayflower GmbH I 20
Komponenten – Dialogs/OverlaysI   Action SheetI   OverlayI   AlertI   PromptI   Confirm                                 Ma...
Komponenten – MapsI       Google Maps Integration    I      Kartenansicht    I      Sattelitenansicht    I      Zoombar   ...
MVCI   Vollständige MVC ImplementierungI   Anpassbarer Router mit statischen RoutenI   Controller sind in Actions untertei...
MVC         Router        Controller                     ModelViews                     Store                             ...
MVC – ControllerI   lädt Daten (Model) in den View (Anzeige)I   Ermöglichen eine GliederungI   Haben Actions die für eine ...
ControllerExt.regController(„myController“, {     index: function() {          App.views.viewport.reveal(„viewName“);     ...
Statische RoutenExt.Router.draw(function(map) {     map.connect(„/default“, { controller: ‚index‘, action: ‚index‘ };     ...
MVC         Router        Controller                     ModelViews                     Store                             ...
MVC – Models & StoresI       Models repräsentiert Datenstrukturen    I         Kann Validatoren enthalten    I         Kan...
http://www.sencha.com/blog/countdown-to-ext-js-4-data-package                                           Mayflower GmbH I 30
ModelExt.regModel(„myModel“, {     fields: [           { name: ‚id‘, type: ‚int‘ },           { name: ‚email‘, type: ‚int‘...
MVC – Models & StoresI        Stores sind Datenspeicher     I      Struktur des Store wird über Model(s) festgelegt     I ...
StoresVar myStore = new Ext.data.store({     model: ‚myModel‘,     proxy: {          type: ‚ajax‘,          url: ‚/data.js...
MVC         Router        Controller                     ModelViews                     Store                             ...
MVC – ViewsI       Stellen Daten aus einem Model darI       Erlauben Interaktion mit DatenI       Vorhandene Komponenten  ...
App.views.ErrorField = Ext.extend(Ext.component, {        initComponent: function() {               config = {            ...
What else?I       Theming    I      SASS SupportI       Plugins    I      ListPagging    I      PullRefreshI       Chartin...
Phone GapI       Native AppI       Benötigt BuildI       Zusätzliche API‘s    I      Direkter Netzwerkzugriff    I      Se...
Hilfe zur SelbsthilfeI       Sencha.com    I      Examples    I      Kitchen Sink    I      Learning CenterI       API wir...
Fragen?A: Ja             D: Nein                       Mayflower GmbH I 40
Vielen Dank für Ihre Aufmerksamkeit!     Kontakt   Alberto Assmann               alberto.assmann@mayflower.de             ...
Upcoming SlideShare
Loading in …5
×

Mobile Anwendungen mit SenchaTouch

3,781 views

Published on

Mehr als die Hälfte der Benutzer haben inzwischen ein Smartphone, mit unterschiedlichen Betriebssystemen, jedoch meist einem Touchscreen als Eingabegerät. Genau hier setzt Sencha Touch an, ein plattformübergreifendes Javascriptframework für mobile Endgeräte, welches sich auf Touchbedienung spezialisiert hat. Was für Möglichkeiten Sencha Touch bietet und welche Konzepte dahinter stecken wird Thema des Vortrags sein.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,781
On SlideShare
0
From Embeds
0
Number of Embeds
929
Actions
Shares
0
Downloads
25
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Mobile Anwendungen mit SenchaTouch

  1. 1. Mobile Anwendungenmit Sencha TouchAlberto Assmann I 08. September 2011 © Mayflower GmbH 2011
  2. 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. 3. Sencha Touch?I Javascript Framework für mobile AnwendungenI Zur Entwicklung von Webanwendungen für mobile GeräteI Nativer LookI Beschränkung auf Touch-EingabenI Nur Webkit SupportI Verwendet HTML5 & CSS3I MVC Anwendungen Mayflower GmbH I 3
  4. 4. Mayflower GmbH I 4
  5. 5. Warum trotzdem Sencha Touch?I Optimiert für TouchgeräteI 2009 Anteil d. Smartphones mit Touchscreen 55%I 2010 Anteil d. Smartphones mit Touchscreen 75%I 2006 - 2010 325% Zuwachs bei Smartphones mit TouchscreenI Touch !== ClickI MultitouchI Gesten Mayflower GmbH I 5
  6. 6. Touch EventsI Event Manager zum registrieren von EventListenernI TapI Gesten I Pinch I Swipe I Drag Mayflower GmbH I 6
  7. 7. Event ManagerExt.fly(„div“).on({ tap: function() { alert(„Tap, tap“); }, swift: function() { alert(„Swing“); }}); Mayflower GmbH I 7
  8. 8. OrdnerstrukturI sencha-touch.js für ProduktivI sencha-touch-debug-w-comment.js für EntwicklungI css Ordner für ProduktivI css-debug für EntwicklungI Inklusive Doku (docs)I Inklusive SASS Files (für Style Anpassungen)I Beispiele (examples) Mayflower GmbH I 8
  9. 9. KomponentenI Alles ist eine KomponenteI Komponenten können andere Komponenten enthaltenI Nutzbar als I Objektinstanz eines zuvor erzeugten Objektes I xtype innerhalb einer Komponente Mayflower GmbH I 9
  10. 10. Objektinstanzvar myButton = new Ext.Button({ text: Senden});var myPanel = new Ext.Panel({ items: [myButton, ...]}); Mayflower GmbH I 10
  11. 11. xtypevar myPanel = new Ext.Panel({ items: [{ xtype: Button, id: myButton, text: Senden }, …]}); Mayflower GmbH I 11
  12. 12. LayoutI Legen die Anordnung der Komponenten festI Panel Komponente als ContainerI Anordnung verschiedener PanelsI Layouts · Fit · Card · Hbox · Vbox Mayflower GmbH I 12
  13. 13. Fit Mayflower GmbH I 13
  14. 14. Card Mayflower GmbH I 14
  15. 15. HBox Mayflower GmbH I 15
  16. 16. VBox Mayflower GmbH I 16
  17. 17. Komponenten – FormularelementeI ButtonsI PickerI SlidesI Inputs I Email I Nummern I Passwort I URL Mayflower GmbH I 17
  18. 18. Komponenten – ListenI Einfache ListenI Gruppierte ListenI Verschachtelte Listen (nested) Mayflower GmbH I 18
  19. 19. Komponenten – ToolbarsI TabsI ToolbarsI Bottom Tabs Mayflower GmbH I 19
  20. 20. Komponenten – CarouselI HorizontalI Vertikal Mayflower GmbH I 20
  21. 21. Komponenten – Dialogs/OverlaysI Action SheetI OverlayI AlertI PromptI Confirm Mayflower GmbH I 21
  22. 22. Komponenten – MapsI Google Maps Integration I Kartenansicht I Sattelitenansicht I Zoombar I Bewegbar Mayflower GmbH I 22
  23. 23. MVCI Vollständige MVC ImplementierungI Anpassbarer Router mit statischen RoutenI Controller sind in Actions unterteilI Model ist in Model und Store geteiltI Views als Komponente, konfigurierbar über XTemplate Mayflower GmbH I 23
  24. 24. MVC Router Controller ModelViews Store Mayflower GmbH I 24
  25. 25. MVC – ControllerI lädt Daten (Model) in den View (Anzeige)I Ermöglichen eine GliederungI Haben Actions die für eine konkrete Aktion verwendet werdenI Auch statische Routen möglich Mayflower GmbH I 25
  26. 26. ControllerExt.regController(„myController“, { index: function() { App.views.viewport.reveal(„viewName“); }}); Mayflower GmbH I 26
  27. 27. Statische RoutenExt.Router.draw(function(map) { map.connect(„/default“, { controller: ‚index‘, action: ‚index‘ }; map.connect(„/site/ :id“, { controller: ‚site‘, action: ‚show‘ }}); Mayflower GmbH I 27
  28. 28. MVC Router Controller ModelViews Store Mayflower GmbH I 28
  29. 29. MVC – Models & StoresI 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
  30. 30. http://www.sencha.com/blog/countdown-to-ext-js-4-data-package Mayflower GmbH I 30
  31. 31. ModelExt.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. 32. MVC – Models & StoresI 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. 33. StoresVar 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. 34. MVC Router Controller ModelViews Store Mayflower GmbH I 34
  35. 35. MVC – ViewsI Stellen Daten aus einem Model darI Erlauben Interaktion mit DatenI Vorhandene Komponenten I Carousel, List, Tabs, DataView etc. I Änderungen über Xtemplates möglichI Eigene UI Komponenten I z.B.: Formulare, eigene Komponenten Mayflower GmbH I 35
  36. 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. 37. What else?I Theming I SASS SupportI Plugins I ListPagging I PullRefreshI Charting als kommerzielle ZusatzkomponenteI Audio/Video KomponentenI Offline Apps Mayflower GmbH I 37
  38. 38. Phone GapI Native AppI Benötigt BuildI Zusätzliche API‘s I Direkter Netzwerkzugriff I Sensoren I Kamera I Adressbuch I Dateizugriff Mayflower GmbH I 38
  39. 39. Hilfe zur SelbsthilfeI Sencha.com I Examples I Kitchen Sink I Learning CenterI API wird mitgeliefertI Kaum öffentlicher Code Mayflower GmbH I 39
  40. 40. Fragen?A: Ja D: Nein Mayflower GmbH I 40
  41. 41. Vielen Dank für Ihre Aufmerksamkeit! Kontakt Alberto Assmann alberto.assmann@mayflower.de +49 931 35965 1164 Mayflower GmbH Pleichertorstr. 2 Würzburg9/15/2011 Mayflower GmbH 41

×