Download - Sencha Touch 2
![Page 1: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/1.jpg)
4Developers (Poznan, Poland) / April 18th 2012Martin de Keijzer
Building mobile web applicationswith Sencha Touch 2
woensdag 18 april 12
![Page 2: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/2.jpg)
About me
Martin de Keijzer
Dutch web developer
2
@Martin1982
PHPBenelux Board Member
Working for Ibuildings
http://www.martindekeijzer.nl
woensdag 18 april 12
![Page 3: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/3.jpg)
Why mobile?
3woensdag 18 april 12
![Page 4: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/4.jpg)
Apps
LanguagesApple: Objective-C
Android: Java
Windows Phone: C# / Visual Basic
4
Distribution MethodsApple: AppStore
Android: Market
Windows Phone: Microsoft Market Place
woensdag 18 april 12
![Page 5: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/5.jpg)
Web Apps
Available through the web
Platform independent
Can be transformed to an App-like experience
Can be wrapped as native apps
5woensdag 18 april 12
![Page 6: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/6.jpg)
woensdag 18 april 12
![Page 7: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/7.jpg)
The Sencha Touch way
Building applications, not websites
Pure JavaScript
Touch framework
MV(S)C Paradigm
Based on ExtJS 4
Downloadable from http://www.sencha.com
7woensdag 18 april 12
![Page 8: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/8.jpg)
Getting started
8woensdag 18 april 12
![Page 9: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/9.jpg)
Quick start: Sencha Command
9
sencha generate app <name> <path>
woensdag 18 april 12
![Page 10: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/10.jpg)
Quick start: Sencha Command
10
•App
•Resources
•SDK (DO NOT TOUCH!)
•app.js
•.json files
•index.html
woensdag 18 april 12
![Page 11: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/11.jpg)
Quick Start: Sencha Command
11
Webkitwoensdag 18 april 12
![Page 12: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/12.jpg)
User interface
Abstraction of various app-interface ui elements:containers
panels
tabpanels
carousels
lists
forms
toolbars
12woensdag 18 april 12
![Page 13: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/13.jpg)
Creating views
13
app/view/Pictures.js
woensdag 18 april 12
![Page 14: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/14.jpg)
Creating views
14woensdag 18 april 12
![Page 15: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/15.jpg)
Creating views
15
/app.js
woensdag 18 april 12
![Page 16: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/16.jpg)
Creating views
16
app/view/Main.js
woensdag 18 april 12
![Page 17: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/17.jpg)
Creating views
17woensdag 18 april 12
![Page 18: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/18.jpg)
Creating views
17woensdag 18 april 12
![Page 19: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/19.jpg)
Taking control
18woensdag 18 april 12
![Page 20: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/20.jpg)
Bootstrapping and Controllers
19
/app.jsFinal point of bootstrapping, controllers & profiles go first
woensdag 18 april 12
![Page 21: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/21.jpg)
Bootstrapping and Controllers
20woensdag 18 april 12
![Page 22: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/22.jpg)
Events
21
Make the component selectable
Create a new controller
woensdag 18 april 12
![Page 23: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/23.jpg)
Events
22
app/controller/PictureBox.js
woensdag 18 april 12
![Page 24: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/24.jpg)
Events
23
app/controller/PictureBox.js
woensdag 18 april 12
![Page 25: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/25.jpg)
Events
24
Querying
Predefined events
woensdag 18 april 12
![Page 26: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/26.jpg)
Events
25woensdag 18 april 12
![Page 27: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/27.jpg)
Data Communication
26woensdag 18 april 12
![Page 28: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/28.jpg)
Data communication
27woensdag 18 april 12
![Page 29: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/29.jpg)
Model
28
Model
Field
Association Validation
woensdag 18 april 12
![Page 30: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/30.jpg)
Model
29
app/model/Talk.js
woensdag 18 april 12
![Page 31: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/31.jpg)
Store
30
Store
Model
Filter Grouper Sorter
woensdag 18 april 12
![Page 32: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/32.jpg)
Store
31
app/store/Schedule.js
app.js
woensdag 18 april 12
![Page 33: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/33.jpg)
Proxy
32
Proxy
Reader Writer
Store Model
woensdag 18 april 12
![Page 34: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/34.jpg)
Proxy
33
app/model/Talk.js
woensdag 18 april 12
![Page 35: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/35.jpg)
Create a list
34
app/view/Schedule.js
woensdag 18 april 12
![Page 36: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/36.jpg)
Create a list
35
app.js
woensdag 18 april 12
![Page 37: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/37.jpg)
Create a list
36
app/view/Main.js
woensdag 18 april 12
![Page 38: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/38.jpg)
Data in action!
37woensdag 18 april 12
![Page 39: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/39.jpg)
Device profiles
38woensdag 18 april 12
![Page 40: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/40.jpg)
Device profiles
Different devices require different options.
Tablet has more screen real estate and can provide more user interaction than a phone.
Sencha Touch 2 provides profiles to build concrete implementations of the device functionalities.
39woensdag 18 april 12
![Page 41: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/41.jpg)
Profile setup
40woensdag 18 april 12
![Page 42: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/42.jpg)
Profile overriding
41
app/controller/phone/PictureBox.js
app/controller/tablet/PictureBox.js
woensdag 18 april 12
![Page 43: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/43.jpg)
Profile overriding
42
app/profile/Phone.js
woensdag 18 april 12
![Page 44: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/44.jpg)
Profile overriding
43
Desktop
woensdag 18 april 12
![Page 45: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/45.jpg)
Profile overriding
44
Phone
woensdag 18 april 12
![Page 46: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/46.jpg)
Profile overriding
45
Tablet
woensdag 18 april 12
![Page 47: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/47.jpg)
Theme editing
46woensdag 18 april 12
![Page 48: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/48.jpg)
woensdag 18 april 12
![Page 49: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/49.jpg)
Installing Compass
48
gem install compass
woensdag 18 april 12
![Page 50: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/50.jpg)
The scss file
49
compass compile
compass watch
Extension: .scss
woensdag 18 april 12
![Page 51: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/51.jpg)
The scss file
50woensdag 18 april 12
![Page 52: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/52.jpg)
Compass Variables
51
sdk/resources/themes/stylesheets/sencha-touch/
default/_variables.scss
woensdag 18 april 12
![Page 53: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/53.jpg)
Compass Mixins
52woensdag 18 april 12
![Page 54: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/54.jpg)
Tips and conclusions
53woensdag 18 april 12
![Page 55: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/55.jpg)
Quick Tips
•Well documented on http://docs.sencha.com
•Sencha Command
•Sencha Designer 2 Beta
•Keep your views clean, use controllers!
•Mobile devices have limited hardware
54woensdag 18 april 12
![Page 56: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/56.jpg)
Need another look?
55
http://www.github.com/Martin1982/4Developers
woensdag 18 april 12
![Page 57: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/57.jpg)
Hungry for more?????
56
June 7 - 8 - 9, 2012Amsterdam RAI (The Netherlands)
http://mobileconference.nlDutch PHP Conference visitors can attend the mobile conference and vice versa!
woensdag 18 april 12
![Page 58: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/58.jpg)
Questions ?
57woensdag 18 april 12
![Page 60: Sencha Touch 2](https://reader033.vdocuments.us/reader033/viewer/2022052522/554d24eeb4c905c5208b4d7c/html5/thumbnails/60.jpg)
Debugging explained
59
Bonus!
woensdag 18 april 12