Sencha Touchim Einsatz

Oliver RummeyerRummeyer Consulting

1

jQuery Mobile vs. Sencha Touch

• jQuery Mobile = HTML + Attribute

• Sencha Touch = ?

2

Model-View-Controller

3

Beispiel

4

Components

• Oberflächen-Elemente

• haben die typische Eigenschaften

• ...und Fähigkeiten

5

Container

• ist „Parent“

• ...und hat Components als „Childs“

• organisiert Components mittels Layout

• ist selbst Component

6

Login-View

7

Classes

• extend: „Subclassing“ von Klassen

• requires: „Import“ von Klassen

• config: „Konfiguration“

• xtype: „Shortcut“ auf Components

• items: Elemente des Containers

• listeners: Event-Handling

8

Components

• Ext.form.Panel (formpanel)

• Ext.form.Fieldset (fieldset)

• Ext.field.Text (textfield)

• Ext.field.Number (numberfield)

• Ext.Button (button)

• Ext.dataview.List (list)

9

Main-View

10

Ext.data

• Ext.data.Store

• Ext.data.Model

• Ext.data.proxy.Proxy

• AJAX/REST

• JSONP

11

Data

12

Setup

• Sencha Cmd

• Sencha Touch

• Apache HTTP Server

13

Demo- sencha.com- Installation- Generierung- Beispiel- Build & Deployment

14

Sencha Cmd

• sencha generate app MeineApp ./MeineApp

• sencha app build

• sencha generate model User id:int, firstname:string, lastname:string

• sencha generate controller LoginController

15

Login-Controller

16

Demo- Beispiel Überblick- Controller im Detail- DataStore im Detail- Server-Kommunikation

17

Was noch?

• „Phonegap/Cordova“ Native Packaging

• Sencha Native Packaging

• Device Profiles

• CSS

18

Gut?

• Einstieg schwierig

• Debugging mühsam

• Konzept gut

• Komponenten mächtig und umfangreich

• Es bleibt jedoch „non-native“

19

Fertig! Fragen?

rummeyer consulting

http://rummeyer.com

@rummeyer

20