Sencha Touch 2 application development introduction from the SmartDevCon conference in Katowice, Poland

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

2. Introduction
2

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

4. The mobile web
4

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

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

8. 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

9. Sencha SDK Tools
Rapidly starting
9

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

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

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

13. Quick Start: Sencha Command
Webkit
13

14. Interface design
Setting up views
14

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

16. Creating views
app/view/Pictures.js 16

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

18. Creating views
/app.js
18

19. Creating views
app/view/Main.js 19

20. Creating views
20

21. Taking control
Bootstrapping & Controllers
21

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

23. Bootstrapping and Controllers
23

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

25. Events
app/controller/PictureTab.js 25

26. Events
app/controller/PictureBox.js
26

27. Events
Querying
Predefined events 27

28. Events
app/controller/PictureTab.js 28

29. Events
29

30. Data binding
and communication
30

31. Data communication
31

32. Model
Model
Field
Association Validation
32

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

34. Model
app/model/Talk.js 34

35. Store
Store
Model
Filter Grouper Sorter
35

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

37. Proxy
Store Proxy Model
Reader Writer
37

38. Proxy
app/model/Talk.js
38

39. Create a list
app/view/Talks.js 39

40. Create a list
app.js
40

41. Create a list
app/view/Main.js
41

42. Data in action!
42

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

44. 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

45. Profile setup
sencha generate profile <name>
45

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

47. Profile overriding
app/profile/Phone.js
47

48. Profile overriding
Desktop
48

49. Profile overriding
Phone
49

50. Profile overriding
Tablet
50

51. Your app’s got style!
Styling an app
51

53. Installing Compass
gem install compass
53

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

55. The scss file
resources/sass/app.scss 55

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

57. Compass Mixins
57

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

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

60. QUESTIONS
60

61. Thank you for listening
mdkeijzer@ibuildings.nl
@Martin1982