Building mobile web applications
with Sencha Touch 2
Martin de Keijzer
SmartDevCon 4-6 September, Katowice Poland

Introduction
2

About me
Martin de Keijzer
Dutch web developer
Working for Ibuildings
PHPBenelux Board Member
@Martin1982
http://
www.martindekeijzer.nl
3

The mobile web
4

Apps
Languages
‣ Apple: Objective-C
‣ Android: Java
‣ Windows Phone: C# / Visual Basic
Distribution Methods
Apple: AppStore
Android: Market
Windows Phone: Microsoft Market
5

Web Apps
‣ Available through the web
‣ Platform independent
‣ Can be transformed to an App-like experience
‣ Can be wrapped as native apps
6

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
8

Sencha SDK Tools
Rapidly starting
9

Quick start: Sencha Command
sencha generate app <name> <path>
10

Quick start: Sencha Command
•App
•Resources
•app.js
•.json files
•index.html
•SDK (DO NOT TOUCH!)
11

Touchin’ the SDK is bad! Extending is ok.
12

Quick Start: Sencha Command
Webkit
13

Interface design
Setting up views
14

User interface
Abstraction of various app ui
elements:
‣ containers
‣ panels
‣ tabpanels
‣ carousels
‣ lists
‣ forms
‣ toolbars
15

Creating views
app/view/Pictures.js 16

Creating views
http://docs.sencha.com
17

Creating views
/app.js
18

Creating views
app/view/Main.js 19

Creating views
20

Taking control
Bootstrapping & Controllers
21

Bootstrapping and Controllers
/app.js
Final point of bootstrapping,
controllers & profiles go first
22

Bootstrapping and Controllers
23

Events
Make the component selectable
sencha generate controller <name>
Create a new controller 24

Events
app/controller/PictureTab.js 25

Events
app/controller/PictureBox.js
26

Events
Querying
Predefined events 27

Events
app/controller/PictureTab.js 28

Events
29

Data binding
and communication
30

Data communication
31

Model
Model
Field
Association Validation
32

Model
sencha generate model <name>
<property:type,[property:type]...>
33

Model
app/model/Talk.js 34

Store
Store
Model
Filter Grouper Sorter
35

Store
app/store/Talks.js
app.js 36

Proxy
Store Proxy Model
Reader Writer
37

Proxy
app/model/Talk.js
38

Create a list
app/view/Talks.js 39

Create a list
app.js
40

Create a list
app/view/Main.js
41

Data in action!
42

Devicedoesn’t play well with your
When an OS
profiles
app
43

Device profiles
Different devices can 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. 44

Profile setup
sencha generate profile <name>
45

Profile overriding
app/controller/phone/Talks.js
app/controller/tablet/Talk.js 46

Profile overriding
app/profile/Phone.js
47

Profile overriding
Desktop
48

Profile overriding
Phone
49

Profile overriding
Tablet
50

Your app’s got style!
Styling an app
51

Installing Compass
gem install compass
53

The scss file
Extension: .scss
compass compile
compass watch
54

The scss file
resources/sass/app.scss 55

Compass Variables
sdk/resources/
themes/
stylesheets/
sencha-touch/
default/
_variables.scss
56

Compass Mixins
57

Quick Tips
•Well documented on http://
docs.sencha.com
•Sencha Command
•Sencha Architect 2
•Keep your views clean, use controllers!
58

Need another look?
http://
www.github.com/
Martin1982/
SmartDevCon
59

QUESTIONS
60

Thank you for listening
mdkeijzer@ibuildings.nl
@Martin1982