Successfully reported this slideshow.
Your SlideShare is downloading. ×

Mobile Anwendungen mit SenchaTouch

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
MVVM Pattern
MVVM Pattern
Loading in …3
×

Check these out next

1 of 41 Ad

Mobile Anwendungen mit SenchaTouch

Download to read offline

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.

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.

Advertisement
Advertisement

More Related Content

Similar to Mobile Anwendungen mit SenchaTouch (20)

Advertisement

More from Mayflower GmbH (20)

Recently uploaded (20)

Advertisement

Mobile Anwendungen mit SenchaTouch

  1. 1. Mobile Anwendungen mit Sencha Touch Alberto 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 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
  4. 4. Mayflower GmbH I 4
  5. 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. 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. 7. Event Manager Ext.fly(„div“).on({ tap: function() { alert(„Tap, tap“); }, swift: function() { alert(„Swing“); } }); Mayflower GmbH I 7
  8. 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. 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. 10. Objektinstanz var myButton = new Ext.Button({ text: 'Senden' }); var myPanel = new Ext.Panel({ items: [myButton, ...] }); Mayflower GmbH I 10
  11. 11. xtype var myPanel = new Ext.Panel({ items: [{ xtype: 'Button', id: 'myButton', text: 'Senden' }, …] }); Mayflower GmbH I 11
  12. 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. 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 – Formularelemente I Buttons I Picker I Slides I Inputs I Email I Nummern I Passwort I URL Mayflower GmbH I 17
  18. 18. Komponenten – Listen I Einfache Listen I Gruppierte Listen I Verschachtelte Listen (nested) Mayflower GmbH I 18
  19. 19. Komponenten – Toolbars I Tabs I Toolbars I Bottom Tabs Mayflower GmbH I 19
  20. 20. Komponenten – Carousel I Horizontal I Vertikal Mayflower GmbH I 20
  21. 21. Komponenten – Dialogs/Overlays I Action Sheet I Overlay I Alert I Prompt I Confirm Mayflower GmbH I 21
  22. 22. Komponenten – Maps I Google Maps Integration I Kartenansicht I Sattelitenansicht I Zoombar I Bewegbar Mayflower GmbH I 22
  23. 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. 24. MVC Router Controller Model Views Store Mayflower GmbH I 24
  25. 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. 26. Controller Ext.regController(„myController“, { index: function() { App.views.viewport.reveal(„viewName“); } }); Mayflower GmbH I 26
  27. 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. 28. MVC Router Controller Model Views Store Mayflower GmbH I 28
  29. 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
  30. 30. http://www.sencha.com/blog/countdown-to-ext-js-4-data-package Mayflower GmbH I 30
  31. 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. 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. 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. 34. MVC Router Controller Model Views Store Mayflower GmbH I 34
  35. 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. 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 Support I Plugins I ListPagging I PullRefresh I Charting als kommerzielle Zusatzkomponente I Audio/Video Komponenten I Offline Apps Mayflower GmbH I 37
  38. 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. 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. 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ürzburg 9/15/2011 Mayflower GmbH 41

×