Sencha Touch - Mobile Forum StuttgartSencha Touch im Einsatz Oliver Rummeyer Rummeyer Consulting 1...
Transcript of Sencha Touch - Mobile Forum StuttgartSencha Touch im Einsatz Oliver Rummeyer Rummeyer Consulting 1...
![Page 1: Sencha Touch - Mobile Forum StuttgartSencha Touch im Einsatz Oliver Rummeyer Rummeyer Consulting 1 jQuery Mobile vs. Sencha Touch •jQuery Mobile = HTML + Attribute • Sencha Touch](https://reader035.fdocuments.in/reader035/viewer/2022063005/5faa9e87fe588e7c57531ebc/html5/thumbnails/1.jpg)
Sencha Touchim Einsatz
Oliver RummeyerRummeyer Consulting
1
![Page 2: Sencha Touch - Mobile Forum StuttgartSencha Touch im Einsatz Oliver Rummeyer Rummeyer Consulting 1 jQuery Mobile vs. Sencha Touch •jQuery Mobile = HTML + Attribute • Sencha Touch](https://reader035.fdocuments.in/reader035/viewer/2022063005/5faa9e87fe588e7c57531ebc/html5/thumbnails/2.jpg)
jQuery Mobile vs. Sencha Touch
• jQuery Mobile = HTML + Attribute
• Sencha Touch = ?
2
![Page 3: Sencha Touch - Mobile Forum StuttgartSencha Touch im Einsatz Oliver Rummeyer Rummeyer Consulting 1 jQuery Mobile vs. Sencha Touch •jQuery Mobile = HTML + Attribute • Sencha Touch](https://reader035.fdocuments.in/reader035/viewer/2022063005/5faa9e87fe588e7c57531ebc/html5/thumbnails/3.jpg)
Model-View-Controller
3
![Page 4: Sencha Touch - Mobile Forum StuttgartSencha Touch im Einsatz Oliver Rummeyer Rummeyer Consulting 1 jQuery Mobile vs. Sencha Touch •jQuery Mobile = HTML + Attribute • Sencha Touch](https://reader035.fdocuments.in/reader035/viewer/2022063005/5faa9e87fe588e7c57531ebc/html5/thumbnails/4.jpg)
Beispiel
4
![Page 5: Sencha Touch - Mobile Forum StuttgartSencha Touch im Einsatz Oliver Rummeyer Rummeyer Consulting 1 jQuery Mobile vs. Sencha Touch •jQuery Mobile = HTML + Attribute • Sencha Touch](https://reader035.fdocuments.in/reader035/viewer/2022063005/5faa9e87fe588e7c57531ebc/html5/thumbnails/5.jpg)
Components
• Oberflächen-Elemente
• haben die typische Eigenschaften
• ...und Fähigkeiten
5
![Page 6: Sencha Touch - Mobile Forum StuttgartSencha Touch im Einsatz Oliver Rummeyer Rummeyer Consulting 1 jQuery Mobile vs. Sencha Touch •jQuery Mobile = HTML + Attribute • Sencha Touch](https://reader035.fdocuments.in/reader035/viewer/2022063005/5faa9e87fe588e7c57531ebc/html5/thumbnails/6.jpg)
Container
• ist „Parent“
• ...und hat Components als „Childs“
• organisiert Components mittels Layout
• ist selbst Component
6
![Page 7: Sencha Touch - Mobile Forum StuttgartSencha Touch im Einsatz Oliver Rummeyer Rummeyer Consulting 1 jQuery Mobile vs. Sencha Touch •jQuery Mobile = HTML + Attribute • Sencha Touch](https://reader035.fdocuments.in/reader035/viewer/2022063005/5faa9e87fe588e7c57531ebc/html5/thumbnails/7.jpg)
Login-View
7
![Page 8: Sencha Touch - Mobile Forum StuttgartSencha Touch im Einsatz Oliver Rummeyer Rummeyer Consulting 1 jQuery Mobile vs. Sencha Touch •jQuery Mobile = HTML + Attribute • Sencha Touch](https://reader035.fdocuments.in/reader035/viewer/2022063005/5faa9e87fe588e7c57531ebc/html5/thumbnails/8.jpg)
Classes
• extend: „Subclassing“ von Klassen
• requires: „Import“ von Klassen
• config: „Konfiguration“
• xtype: „Shortcut“ auf Components
• items: Elemente des Containers
• listeners: Event-Handling
8
![Page 9: Sencha Touch - Mobile Forum StuttgartSencha Touch im Einsatz Oliver Rummeyer Rummeyer Consulting 1 jQuery Mobile vs. Sencha Touch •jQuery Mobile = HTML + Attribute • Sencha Touch](https://reader035.fdocuments.in/reader035/viewer/2022063005/5faa9e87fe588e7c57531ebc/html5/thumbnails/9.jpg)
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
![Page 10: Sencha Touch - Mobile Forum StuttgartSencha Touch im Einsatz Oliver Rummeyer Rummeyer Consulting 1 jQuery Mobile vs. Sencha Touch •jQuery Mobile = HTML + Attribute • Sencha Touch](https://reader035.fdocuments.in/reader035/viewer/2022063005/5faa9e87fe588e7c57531ebc/html5/thumbnails/10.jpg)
Main-View
10
![Page 11: Sencha Touch - Mobile Forum StuttgartSencha Touch im Einsatz Oliver Rummeyer Rummeyer Consulting 1 jQuery Mobile vs. Sencha Touch •jQuery Mobile = HTML + Attribute • Sencha Touch](https://reader035.fdocuments.in/reader035/viewer/2022063005/5faa9e87fe588e7c57531ebc/html5/thumbnails/11.jpg)
Ext.data
• Ext.data.Store
• Ext.data.Model
• Ext.data.proxy.Proxy
• AJAX/REST
• JSONP
11
![Page 12: Sencha Touch - Mobile Forum StuttgartSencha Touch im Einsatz Oliver Rummeyer Rummeyer Consulting 1 jQuery Mobile vs. Sencha Touch •jQuery Mobile = HTML + Attribute • Sencha Touch](https://reader035.fdocuments.in/reader035/viewer/2022063005/5faa9e87fe588e7c57531ebc/html5/thumbnails/12.jpg)
Data
12
![Page 13: Sencha Touch - Mobile Forum StuttgartSencha Touch im Einsatz Oliver Rummeyer Rummeyer Consulting 1 jQuery Mobile vs. Sencha Touch •jQuery Mobile = HTML + Attribute • Sencha Touch](https://reader035.fdocuments.in/reader035/viewer/2022063005/5faa9e87fe588e7c57531ebc/html5/thumbnails/13.jpg)
Setup
• Sencha Cmd
• Sencha Touch
• Apache HTTP Server
13
![Page 14: Sencha Touch - Mobile Forum StuttgartSencha Touch im Einsatz Oliver Rummeyer Rummeyer Consulting 1 jQuery Mobile vs. Sencha Touch •jQuery Mobile = HTML + Attribute • Sencha Touch](https://reader035.fdocuments.in/reader035/viewer/2022063005/5faa9e87fe588e7c57531ebc/html5/thumbnails/14.jpg)
Demo- sencha.com- Installation- Generierung- Beispiel- Build & Deployment
14
![Page 15: Sencha Touch - Mobile Forum StuttgartSencha Touch im Einsatz Oliver Rummeyer Rummeyer Consulting 1 jQuery Mobile vs. Sencha Touch •jQuery Mobile = HTML + Attribute • Sencha Touch](https://reader035.fdocuments.in/reader035/viewer/2022063005/5faa9e87fe588e7c57531ebc/html5/thumbnails/15.jpg)
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
![Page 16: Sencha Touch - Mobile Forum StuttgartSencha Touch im Einsatz Oliver Rummeyer Rummeyer Consulting 1 jQuery Mobile vs. Sencha Touch •jQuery Mobile = HTML + Attribute • Sencha Touch](https://reader035.fdocuments.in/reader035/viewer/2022063005/5faa9e87fe588e7c57531ebc/html5/thumbnails/16.jpg)
Login-Controller
16
![Page 17: Sencha Touch - Mobile Forum StuttgartSencha Touch im Einsatz Oliver Rummeyer Rummeyer Consulting 1 jQuery Mobile vs. Sencha Touch •jQuery Mobile = HTML + Attribute • Sencha Touch](https://reader035.fdocuments.in/reader035/viewer/2022063005/5faa9e87fe588e7c57531ebc/html5/thumbnails/17.jpg)
Demo- Beispiel Überblick- Controller im Detail- DataStore im Detail- Server-Kommunikation
17
![Page 18: Sencha Touch - Mobile Forum StuttgartSencha Touch im Einsatz Oliver Rummeyer Rummeyer Consulting 1 jQuery Mobile vs. Sencha Touch •jQuery Mobile = HTML + Attribute • Sencha Touch](https://reader035.fdocuments.in/reader035/viewer/2022063005/5faa9e87fe588e7c57531ebc/html5/thumbnails/18.jpg)
Was noch?
• „Phonegap/Cordova“ Native Packaging
• Sencha Native Packaging
• Device Profiles
• CSS
18
![Page 19: Sencha Touch - Mobile Forum StuttgartSencha Touch im Einsatz Oliver Rummeyer Rummeyer Consulting 1 jQuery Mobile vs. Sencha Touch •jQuery Mobile = HTML + Attribute • Sencha Touch](https://reader035.fdocuments.in/reader035/viewer/2022063005/5faa9e87fe588e7c57531ebc/html5/thumbnails/19.jpg)
Gut?
• Einstieg schwierig
• Debugging mühsam
• Konzept gut
• Komponenten mächtig und umfangreich
• Es bleibt jedoch „non-native“
19
![Page 20: Sencha Touch - Mobile Forum StuttgartSencha Touch im Einsatz Oliver Rummeyer Rummeyer Consulting 1 jQuery Mobile vs. Sencha Touch •jQuery Mobile = HTML + Attribute • Sencha Touch](https://reader035.fdocuments.in/reader035/viewer/2022063005/5faa9e87fe588e7c57531ebc/html5/thumbnails/20.jpg)
Fertig! Fragen?
rummeyer consulting
http://rummeyer.com
@rummeyer
20