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