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.

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

4. Mayflower GmbH I 4

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

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

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