sencha touch 2

4Developers (Poznan, Poland) / April 18th 2012Martin de Keijzer

Building mobile web applicationswith Sencha Touch 2

woensdag 18 april 12

About me

Martin de Keijzer

Dutch web developer

2

@Martin1982

PHPBenelux Board Member

Working for Ibuildings

http://www.martindekeijzer.nl




Why mobile?

3woensdag 18 april 12

Apps

LanguagesApple: Objective-C

Android: Java

Windows Phone: C# / Visual Basic

4

Distribution MethodsApple: AppStore

Android: Market

Windows Phone: Microsoft Market Place


Web Apps

Available through the web

Platform independent

Can be transformed to an App-like experience

Can be wrapped as native apps


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


http://www.sencha.com

http://www.sencha.com

Getting started


Quick start: Sencha Command

9

sencha generate app <name> <path>


Quick start: Sencha Command

10

•App

•Resources

•SDK (DO NOT TOUCH!)

•app.js

•.json files

•index.html


Quick Start: Sencha Command

11

Webkitwoensdag 18 april 12

User interface

Abstraction of various app-interface ui elements:containers

panels

tabpanels

carousels

lists

forms

toolbars


Creating views

13

app/view/Pictures.js


Creating views


Creating views

15

/app.js


Creating views

16

app/view/Main.js


Creating views


Taking control


Bootstrapping and Controllers

19

/app.jsFinal point of bootstrapping, controllers & profiles go first


Bootstrapping and Controllers


Events

21

Make the component selectable

Create a new controller


Events

22

app/controller/PictureBox.js


Events

23

app/controller/PictureBox.js


Events

24

Querying

Predefined events


Events


Data Communication


Data communication


Model

28

Model

Field

Association Validation


Model

29

app/model/Talk.js


Store

30

Store

Model

Filter Grouper Sorter


Store

31

app/store/Schedule.js

app.js


Proxy

32

Proxy

Reader Writer

Store Model


Proxy

33

app/model/Talk.js


Create a list

34

app/view/Schedule.js


Create a list

35

app.js


Create a list

36

app/view/Main.js


Data in action!


Device profiles


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.


Profile setup


Profile overriding

41

app/controller/phone/PictureBox.js

app/controller/tablet/PictureBox.js


Profile overriding

42

app/profile/Phone.js


Profile overriding

43

Desktop


Profile overriding

44

Phone


Profile overriding

45

Tablet


Theme editing


Installing Compass

48

gem install compass


The scss file

49

compass compile

compass watch

Extension: .scss


The scss file


Compass Variables

51

sdk/resources/themes/stylesheets/sencha-touch/

default/_variables.scss


Compass Mixins


Tips and conclusions


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


http://docs.sencha.com

http://docs.sencha.com

Need another look?

55

http://www.github.com/Martin1982/4Developers


http://www.github.com/Martin1982/




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!


http://mobileconference.nl

http://mobileconference.nl

Questions ?


Thank you!

Contact details:

Twitter: @[email protected]


mailto:[email protected]

mailto:[email protected]

Debugging explained

59

Bonus!


sencha touch 2

Technology