The document discusses building mobile web applications with Sencha Touch 2. It introduces Sencha Touch and its command line interface for rapidly generating app structures. It covers creating views, controllers, models, stores and proxies to manage user interfaces and data. It also discusses styling apps with Sass/Compass and using device profiles to customize experiences for different devices.

1. with Sencha Touch 2
Martin de Keijzer
iOSOnRailsConf 2013 13-14 April, Alushta Ukraine
Building mobile web applications
Sunday, 14 April 13

2. Introduction
2
Sunday, 14 April 13

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

4. The mobile web
4
Sunday, 14 April 13

5. Apps
Languages
‣ Apple: Objective-C
‣ Android: Java
‣ Windows Phone: C# / Visual Basic
5
Distribution Methods
Apple: AppStore
Android: Market
Windows Phone: Microsoft Market Place
Sunday, 14 April 13

6. Web Apps
6
Available through the web
Sunday, 14 April 13

7. Web Apps
Platform independent
7
Sunday, 14 April 13

8. Web Apps
Can be transformed to an App-like experience
8
Sunday, 14 April 13

9. Web Apps
9
Can be wrapped as native apps
Sunday, 14 April 13

10. Sunday, 14 April 13

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

12. Rapidly starting
Sencha Cmd
12
Sunday, 14 April 13

13. Quick start: Sencha Cmd
13
sencha generate app <name> <path>
Sunday, 14 April 13

14. Quick start: Sencha Cmd
14
•App
•Resources
•app.js
•.json files
•index.html
•touch (DO NOT TOUCH!)
Sunday, 14 April 13

15. Changing the SDK is bad! Extending is ok.
15
Sunday, 14 April 13

16. Testing
16
Webkit
Sunday, 14 April 13

17. Setting up views
Interface design
17
Sunday, 14 April 13

18. User interface
Abstraction of various app ui elements:
‣ containers
‣ panels
‣ tab panels
‣ carousels
‣ lists
‣ forms
‣ toolbars
18
Sunday, 14 April 13

19. Creating views
19app/view/Technologies.js
Sunday, 14 April 13

20. Creating views
20
http://docs.sencha.com
Sunday, 14 April 13

21. Creating views
21
/app.js
Sunday, 14 April 13

22. Creating views
22app/view/Main.js
Sunday, 14 April 13

23. Creating views
23
Sunday, 14 April 13

24. Bootstrapping & Controllers
Taking control
24
Sunday, 14 April 13

25. Bootstrapping and Controllers
25
/app.js
Final point of bootstrapping,
controllers & profiles go first
Sunday, 14 April 13

26. Bootstrapping and Controllers
26
Sunday, 14 April 13

27. Events
27
Create a new controller
sencha generate controller <name>
Sunday, 14 April 13

28. Events
28
Make the component selectable
Sunday, 14 April 13

29. Events
29app/controller/TechnologiesTab.js
Sunday, 14 April 13

30. Events
30
app/controller/TechnologiesTab.js
Sunday, 14 April 13

31. Events
31
Querying
Predefined events
Sunday, 14 April 13

32. Events
32app/controller/TechnologiesTab.js
Sunday, 14 April 13

33. Events
33
Sunday, 14 April 13

34. and communication
Data binding
34
Sunday, 14 April 13

35. Data communication
35
Sunday, 14 April 13

36. Model
36
Model
Field
Association Validation
Sunday, 14 April 13

37. Model
37
sencha generate model <name>
<property:type,[property:type]...>
Sunday, 14 April 13

38. Model
38app/model/Technologies.js
Sunday, 14 April 13

39. Store
39
Store
Model
Filter Grouper Sorter
Sunday, 14 April 13

40. Store
40
app/store/Technologies.js
app.js
Sunday, 14 April 13

41. Proxy
41
Proxy
Reader Writer
Store Model
Sunday, 14 April 13

42. Proxy
42
app/model/Technologies.js
Sunday, 14 April 13

43. Create a list
43app/view/Technologies.js
Sunday, 14 April 13

44. Data in action!
44
Sunday, 14 April 13

45. When an OS doesn’t play well with your app
Device profiles
45
Sunday, 14 April 13

46. Device profiles
Different devices can require different
options.
46
Sunday, 14 April 13

47. Device Profiles
Tablet has more screen real estate and
can provide more user interaction than
a phone.
47
Sunday, 14 April 13

48. Device Profiles
Device profiles provide a solution!
48
Sunday, 14 April 13

49. Profile setup
49
sencha generate profile <name>
Sunday, 14 April 13

50. Profile overriding
50
app/view/Desktop/Main.js
Sunday, 14 April 13

51. Profile overriding
51
app/view/Tablet/Main.js
Sunday, 14 April 13

52. Profile overriding
52
app/view/Phone/Main.js
Sunday, 14 April 13

53. Profile overriding
53
app/profile/Tablet.js
Sunday, 14 April 13

54. Profile overriding
54
Desktop
Sunday, 14 April 13

55. Profile overriding
55
Phone
Sunday, 14 April 13

56. Profile overriding
56
Tablet
Sunday, 14 April 13

57. Styling an app
Your app’s got style!
57
Sunday, 14 April 13

58. Sunday, 14 April 13

59. Installing Compass
59
gem install compass
Sunday, 14 April 13

60. The scss file
60
compass compile
compass watch
Extension: .scss
Sunday, 14 April 13

61. The scss file
61resources/sass/app.scss
Sunday, 14 April 13

62. Compass Variables
62
touch/resources/
themes/
stylesheets/
sencha-touch/
default/
_variables.scss
Sunday, 14 April 13

63. Compass Mixins
63
Sunday, 14 April 13

64. Quick Tips
•Well documented on http://docs.sencha.com
•Sencha Command
•Sencha Architect 2
•Keep your views clean, use controllers!
•Mobile devices have limited hardware
64
Sunday, 14 April 13

65. Need another look?
65
http://www.github.com/
Martin1982/
iOSOnRailsConf
Sunday, 14 April 13

66. 66
Sencha Touch by Sencha
Sunday, 14 April 13

67. 66
Sencha Touch by Sencha
Sunday, 14 April 13

68. Tomorrow’s mini Workshop
67
Prepare to tag along:
Sencha Cmd
Sencha Touch 2.1.1 GPL
Sunday, 14 April 13

69. QUESTIONS
68
Sunday, 14 April 13

70. mdkeijzer@ibuildings.nl
@Martin1982
Thank you for listening
Sunday, 14 April 13