Mobile Anwendungen mit SenchaTouch

© Mayflower GmbH 2011

Mobile Anwendungen mit Sencha Touch

Alberto Assmann I 08. September 2011

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

Vorführender

Präsentationsnotizen

- Seit 17. July 2010 (Beta 0.9)

Mayflower GmbH I 4

Vorführender


Android ab 2.1 iOS ab 3.0 Blackberry ab 6.0

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

Touch Events

I Event Manager zum registrieren von EventListenern

I Tap

I Gesten

I Pinch

I Swipe

I Drag

Vorführender


Tap = einmaliges Antippen mit Finger -> Build in Double Tap = doppeltes Antippen Pinch = zwei Finger zusammenziehen -> Build in Spread = zwei Finger auseinanderbringen (Zoom-Geste) Swipe = wischen mit einem Finger -> Build in Drag = festhalten eines Elements und ziehen -> Built in

Mayflower GmbH I 7

Ext.fly(„div“).on({tap: function() {

alert(„Tap, tap“);},swift: function() {

alert(„Swing“);}

});

Event Manager

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

Vorführender


Unterschiedliche Dateien für Produktiv und Entwicklung Inklusive Doku Inklusive Beispiele Enthält als Bonbon das komplette Layout als SASS-Files

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

Vorführender


Objektinstanz, wenn Komponente so mehrmals wiederverwendet wird xtype wenn Komponente nur innerhalb von Parent Komponente genutzt wird

Mayflower GmbH I 10

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

});

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

});

Objektinstanz

Mayflower GmbH I 11

var myPanel = new Ext.Panel({items: [{

xtype: 'Button',id: 'myButton',text: 'Senden'}, …]

});

xtype

Vorführender


Array von items (auch mehrere möglich) xtype, welche Komponente soll eingebunden werden id, um später auf die Komponente direkt zugreifen zu können Komponentenattribute

Mayflower GmbH I 12

Layout

I Legen die Anordnung der Komponenten fest

I Panel Komponente als Container

I Anordnung verschiedener Panels

I Layouts

· Fit

· Card

· Hbox

· Vbox

Vorführender


Alle Viewkomponenten leiten von Panel ab Panel = Layoutbar Layout legt fest wie Unterkomponenten angeordnet werden

Mayflower GmbH I 13

Fit

Vorführender


Für einzelne Komponenten die den ganzen Sichtbereich einnehmen

Mayflower GmbH I 14

Card

Vorführender


- Wie Fit, nur überdeckt jede weitere Komponente die vorherige

Mayflower GmbH I 15

HBox

Vorführender


Komponenten werden nebeneinander arrangiert

Mayflower GmbH I 16

VBox

Vorführender


Komponenten werden untereinander platziert

Mayflower GmbH I 17

Komponenten – Formularelemente

I Buttons

I Picker

I Slides

I Inputs

I Email

I Nummern

I Passwort

I URL

Mayflower GmbH I 18

Komponenten – Listen

I Einfache Listen

I Gruppierte Listen

I Verschachtelte Listen (nested)

Mayflower GmbH I 19

Komponenten – Toolbars

I Tabs

I Toolbars

I Bottom Tabs

Mayflower GmbH I 20

Komponenten – Carousel

I Horizontal

I Vertikal

Mayflower GmbH I 21

Komponenten – Dialogs/Overlays

I Action Sheet

I Overlay

I Alert

I Prompt

I Confirm

Mayflower GmbH I 22

Komponenten – Maps

I Google Maps Integration

I Kartenansicht

I Sattelitenansicht

I Zoombar

I Bewegbar

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

MVC

Router

Controller

Model

StoreViews

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

Controller

Ext.regController(„myController“, {index: function() {

App.views.viewport.reveal(„viewName“);}

});

Vorführender


Registrieren des Controllers am Controller Manager definieren einer Aktion

Mayflower GmbH I 27

Statische Routen

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

});

Vorführender


- 1. binden einer statischen route an controller/action -> symlink 2. binden einer dynamischen route (id als Parameter)

Mayflower GmbH I 28

MVC

Router

Controller

Model

StoreViews

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

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

http://www.sencha.com/blog/countdown-to-ext-js-4-data-package�

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

}});

Vorführender


registrieren am Model Manager Fields gibt die Struktur der Daten an Eindeutiger Name Type Einige Typen haben Formater Validatoren Zugriff auf Stores über Proxy

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

Vorführender


Eigentlicher Datenspeicher kann über eine eigene Sorter sortiert werden Filtern möglich Gruppierungen möglich die Datenquelle wird über Proxy genutzt

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

}]});

Vorführender


Modelangabe um Datenstruktur festzulegen (entfällt wenn Store direkt im Model definiert wird) Proxy zum schreiben und lesen von Daten - Standardsorter

Mayflower GmbH I 34

MVC

Router

Controller

Model

StoreViews

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

Vorführender


Controller reicht Daten aus Model rein Daten direkt aus Model laden ist ebenfalls möglich vorher vorgestellte Komponenten sind bereits vorhanden Formatierung über eigene Templateenginge Xtemplate Möglichkeit Komponenten selber zu schreiben/erweitern

Mayflower GmbH I 36

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);

Vorführender


initComponent wird immer aufgerufen definieren einer eigenen Komponente (config Objekt) über xtype tpl = Xtemplate jedes HTML Tag als eigenes Objektattribut <tpl> Tags für Sonderfunktionen (If/for) Ext.apply -> schaltet neue Komponente scharf abschließend initComponent Aufruf des Parent, mit Übergabe von sich selbst Views werden am allgemeinen Ressourcen Manager registriert, haben keinen eigenen Manager (wie Model/Controller

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

Vorführender


Komplettes Theme als SASS Files (damit sind Farbänderungen sehr einfach) Plugins für UI Komponenten (Liste mit Paginator, Aktuallisierung nach swipe runterwärts) Sencha bietet eine mobile Charting Komponente an Audio/Video build in Möglichkeit von Offline Apps über Phone Gap (native Apps)

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

Vorführender


Gleiches Aussehen wie echte Anwendungen für dieses Gerät Benötigt für jede Plattform einen extra Build (Mac/Xcode -> iOS, Android SDK -> Android, Blackberry SDK -> Blackberry) Erweiterte API-Calls

Mayflower GmbH I 39

Hilfe zur Selbsthilfe

I Sencha.com

I Examples

I Kitchen Sink

I Learning Center

I API wird mitgeliefert

I Kaum öffentlicher Code

Vorführender


Sencha.com als Einstieg Mitgelieferte Examples Kitchen Sink als Featureübersicht der UI Komponenten (keine MVC Anwendung) Tutorials im Learning Center Für Eigenschaften und Funktionen eines Elements -> API (mitgeliefert), enthält teils Beispiele aktuell kaum öffentlicher Code, da relativ neu (Juli 2010) nutzt viele Konzepte von ExtJS (da darauf aufbauend)

Mayflower GmbH I 40

Fragen?

A: Ja

D: Nein

9/15/2011 Mayflower GmbH 41

Vielen Dank für Ihre Aufmerksamkeit!

Kontakt Alberto Assmann

[email protected]

+49 931 35965 1164

Mayflower GmbH

Pleichertorstr. 2

Würzburg

Mobile Anwendungen mit SenchaTouch

Technology

Transcript of Mobile Anwendungen mit SenchaTouch