Mobile Anwendungen mit SenchaTouch

Mobile Anwendungenmit Sencha TouchAlberto 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 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

Mayflower GmbH I 4

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

Touch EventsI Event Manager zum registrieren von EventListenernI TapI Gesten I Pinch I Swipe I Drag Mayflower GmbH I 6

Event ManagerExt.fly(„div“).on({ tap: function() { alert(„Tap, tap“); }, swift: function() { alert(„Swing“); }}); Mayflower GmbH I 7

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

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

Objektinstanzvar myButton = new Ext.Button({ text: Senden});var myPanel = new Ext.Panel({ items: [myButton, ...]}); Mayflower GmbH I 10

xtypevar myPanel = new Ext.Panel({ items: [{ xtype: Button, id: myButton, text: Senden }, …]}); Mayflower GmbH I 11

LayoutI Legen die Anordnung der Komponenten festI Panel Komponente als ContainerI Anordnung verschiedener PanelsI 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 – FormularelementeI ButtonsI PickerI SlidesI Inputs I Email I Nummern I Passwort I URL Mayflower GmbH I 17

Komponenten – ListenI Einfache ListenI Gruppierte ListenI Verschachtelte Listen (nested) Mayflower GmbH I 18

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 Mayflower GmbH I 21

Komponenten – MapsI Google Maps Integration I Kartenansicht I Sattelitenansicht I Zoombar I Bewegbar Mayflower GmbH I 22

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

MVC Router Controller ModelViews Store Mayflower GmbH I 24

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

ControllerExt.regController(„myController“, { index: function() { App.views.viewport.reveal(„viewName“); }}); Mayflower GmbH I 26

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

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

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‘ }, { 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 & 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

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

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

App.views.ErrorField = Ext.extend(Ext.component, { initComponent: function() { config = { xtype: ‚component‘, cls: ‚errorfield‘, id: this.fieldname + ‚ErrorField‘, tpl: [ ‚<tpl if=„values.length > 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 SupportI Plugins I ListPagging I PullRefreshI Charting als kommerzielle ZusatzkomponenteI Audio/Video KomponentenI Offline Apps Mayflower GmbH I 37

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

Hilfe zur SelbsthilfeI Sencha.com I Examples I Kitchen Sink I Learning CenterI API wird mitgeliefertI 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ürzburg9/15/2011 Mayflower GmbH 41

http://blog.mayflower.de	818
http://feeds.feedburner.com	3
http://news.php-homepage.de	2

Mobile Anwendungen mit SenchaTouch

by Mayflower GmbH on Sep 22, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 823

Statistics

Mobile Anwendungen mit SenchaTouch — Presentation Transcript