Hybrid Mobile Web Apps with Sencha Touch 2
-
Upload
martin-de-keijzer -
Category
Technology
-
view
2.251 -
download
0
description
Transcript of Hybrid Mobile Web Apps with Sencha Touch 2
![Page 1: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/1.jpg)
with Sencha Touch 2
Martin de KeijzeriOSOnRailsConf 2013 13-14 April, Alushta Ukraine
Building mobile web applications
Sunday, 14 April 13
![Page 2: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/2.jpg)
Introduction
2
Sunday, 14 April 13
![Page 3: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/3.jpg)
About me
Martin de KeijzerDutch web developer
3
@Martin1982
PHPBenelux Board Member
Working for Ibuildings
http://www.martindekeijzer.nl
Sunday, 14 April 13
![Page 4: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/4.jpg)
The mobile web
4
Sunday, 14 April 13
![Page 5: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/5.jpg)
Apps
Languages
‣ Apple: Objective-C
‣ Android: Java
‣Windows Phone: C# / Visual Basic
5
Distribution MethodsApple: AppStore
Android: Market
Windows Phone: Microsoft Market Place
Sunday, 14 April 13
![Page 6: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/6.jpg)
Web Apps
6
Available through the web
Sunday, 14 April 13
![Page 7: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/7.jpg)
Web Apps
Platform independent
7
Sunday, 14 April 13
![Page 8: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/8.jpg)
Web Apps
Can be transformed to an App-like experience
8
Sunday, 14 April 13
![Page 9: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/9.jpg)
Web Apps
9Can be wrapped as native apps
Sunday, 14 April 13
![Page 10: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/10.jpg)
Sunday, 14 April 13
![Page 11: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/11.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
11
Sunday, 14 April 13
![Page 12: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/12.jpg)
Rapidly startingSencha Cmd
12
Sunday, 14 April 13
![Page 13: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/13.jpg)
Quick start: Sencha Cmd
13
sencha generate app <name> <path>
Sunday, 14 April 13
![Page 14: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/14.jpg)
Quick start: Sencha Cmd
14
•App
•Resources
•app.js
•.json files
•index.html
•touch (DO NOT TOUCH!)
Sunday, 14 April 13
![Page 15: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/15.jpg)
Changing the SDK is bad! Extending is ok.
15
Sunday, 14 April 13
![Page 16: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/16.jpg)
Testing
16
WebkitSunday, 14 April 13
![Page 17: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/17.jpg)
Setting up viewsInterface design
17
Sunday, 14 April 13
![Page 18: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/18.jpg)
User interface
Abstraction of various app ui elements:
‣containers‣panels‣ tab panels‣carousels‣ lists‣ forms‣ toolbars
18
Sunday, 14 April 13
![Page 19: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/19.jpg)
Creating views
19app/view/Technologies.js
Sunday, 14 April 13
![Page 20: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/20.jpg)
Creating views
20
http://docs.sencha.com
Sunday, 14 April 13
![Page 21: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/21.jpg)
Creating views
21
/app.js
Sunday, 14 April 13
![Page 22: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/22.jpg)
Creating views
22app/view/Main.jsSunday, 14 April 13
![Page 23: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/23.jpg)
Creating views
23
Sunday, 14 April 13
![Page 24: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/24.jpg)
Bootstrapping & ControllersTaking control
24
Sunday, 14 April 13
![Page 25: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/25.jpg)
Bootstrapping and Controllers
25
/app.jsFinal point of bootstrapping, controllers & profiles go first
Sunday, 14 April 13
![Page 26: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/26.jpg)
Bootstrapping and Controllers
26
Sunday, 14 April 13
![Page 27: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/27.jpg)
Events
27Create a new controller
sencha generate controller <name>
Sunday, 14 April 13
![Page 28: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/28.jpg)
Events
28
Make the component selectable
Sunday, 14 April 13
![Page 29: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/29.jpg)
Events
29app/controller/TechnologiesTab.jsSunday, 14 April 13
![Page 30: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/30.jpg)
Events
30app/controller/TechnologiesTab.js
Sunday, 14 April 13
![Page 31: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/31.jpg)
Events
31
Querying
Predefined events
Sunday, 14 April 13
![Page 32: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/32.jpg)
Events
32app/controller/TechnologiesTab.jsSunday, 14 April 13
![Page 33: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/33.jpg)
Events
33
Sunday, 14 April 13
![Page 34: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/34.jpg)
and communicationData binding
34
Sunday, 14 April 13
![Page 35: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/35.jpg)
Data communication
35
Sunday, 14 April 13
![Page 36: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/36.jpg)
Model
36
Model
Field
Association Validation
Sunday, 14 April 13
![Page 37: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/37.jpg)
Model
37
sencha generate model <name> <property:type,[property:type]...>
Sunday, 14 April 13
![Page 38: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/38.jpg)
Model
38app/model/Technologies.js
Sunday, 14 April 13
![Page 39: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/39.jpg)
Store
39
Store
Model
Filter Grouper Sorter
Sunday, 14 April 13
![Page 40: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/40.jpg)
Store
40
app/store/Technologies.js
app.jsSunday, 14 April 13
![Page 41: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/41.jpg)
Proxy
41
Proxy
Reader Writer
Store Model
Sunday, 14 April 13
![Page 42: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/42.jpg)
Proxy
42
app/model/Technologies.js
Sunday, 14 April 13
![Page 43: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/43.jpg)
Create a list
43app/view/Technologies.jsSunday, 14 April 13
![Page 44: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/44.jpg)
Data in action!
44
Sunday, 14 April 13
![Page 45: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/45.jpg)
When an OS doesn’t play well with your appDevice profiles
45
Sunday, 14 April 13
![Page 46: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/46.jpg)
Device profiles
Different devices can require different options.
46
Sunday, 14 April 13
![Page 47: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/47.jpg)
Device Profiles
Tablet has more screen real estate and can provide more user interaction than a phone.
47
Sunday, 14 April 13
![Page 48: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/48.jpg)
Device Profiles
Device profiles provide a solution!
48
Sunday, 14 April 13
![Page 49: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/49.jpg)
Profile setup
49
sencha generate profile <name>
Sunday, 14 April 13
![Page 50: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/50.jpg)
Profile overriding
50
app/view/Desktop/Main.js
Sunday, 14 April 13
![Page 51: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/51.jpg)
Profile overriding
51
app/view/Tablet/Main.js
Sunday, 14 April 13
![Page 52: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/52.jpg)
Profile overriding
52
app/view/Phone/Main.js
Sunday, 14 April 13
![Page 53: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/53.jpg)
Profile overriding
53
app/profile/Tablet.js
Sunday, 14 April 13
![Page 54: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/54.jpg)
Profile overriding
54
Desktop
Sunday, 14 April 13
![Page 55: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/55.jpg)
Profile overriding
55
Phone
Sunday, 14 April 13
![Page 56: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/56.jpg)
Profile overriding
56
Tablet
Sunday, 14 April 13
![Page 57: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/57.jpg)
Styling an appYour app’s got style!
57
Sunday, 14 April 13
![Page 58: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/58.jpg)
Sunday, 14 April 13
![Page 59: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/59.jpg)
Installing Compass
59
gem install compass
Sunday, 14 April 13
![Page 60: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/60.jpg)
The scss file
60
compass compile
compass watch
Extension: .scss
Sunday, 14 April 13
![Page 61: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/61.jpg)
The scss file
61resources/sass/app.scssSunday, 14 April 13
![Page 62: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/62.jpg)
Compass Variables
62
touch/resources/themes/
stylesheets/sencha-touch/
default/_variables.scss
Sunday, 14 April 13
![Page 63: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/63.jpg)
Compass Mixins
63
Sunday, 14 April 13
![Page 64: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/64.jpg)
Quick Tips
•Well documented on http://docs.sencha.com
•Sencha Command
•Sencha Architect 2
•Keep your views clean, use controllers!
•Mobile devices have limited hardware64
Sunday, 14 April 13
![Page 65: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/65.jpg)
Need another look?
65
http://www.github.com/Martin1982/
iOSOnRailsConf
Sunday, 14 April 13
![Page 66: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/66.jpg)
66
Sencha Touch by Sencha
Sunday, 14 April 13
![Page 67: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/67.jpg)
66
Sencha Touch by Sencha
Sunday, 14 April 13
![Page 68: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/68.jpg)
Tomorrow’s mini Workshop
67
Prepare to tag along:Sencha Cmd
Sencha Touch 2.1.1 GPL
Sunday, 14 April 13
![Page 69: Hybrid Mobile Web Apps with Sencha Touch 2](https://reader033.fdocuments.in/reader033/viewer/2022052618/554d25b9b4c905ab268b4c10/html5/thumbnails/69.jpg)
QUESTIONS
68
Sunday, 14 April 13