Sencha Touch 2 @ 4Developers (Poznan, Poland)

1. Building mobile web applications
with Sencha Touch 2
Martin de Keijzer
4Developers (Poznan, Poland) / April 18th 2012
woensdag 18 april 12

2. About me
Martin de Keijzer
Dutch web developer
Working for Ibuildings
PHPBenelux Board Member
@Martin1982
http://www.martindekeijzer.nl
2
woensdag 18 april 12

3. Why mobile?
3
woensdag 18 april 12

4. Apps
Languages
Apple: Objective-C
Android: Java
Windows Phone: C# / Visual Basic
Distribution Methods
Apple: AppStore
Android: Market
Windows Phone: Microsoft Market Place
4
woensdag 18 april 12

5. Web Apps
Available through the web
Platform independent
Can be transformed to an App-like experience
Can be wrapped as native apps
5
woensdag 18 april 12

6. woensdag 18 april 12

7. 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
7
woensdag 18 april 12

8. Getting started
8
woensdag 18 april 12

9. Quick start: Sencha Command
sencha generate app <name> <path>
9
woensdag 18 april 12

10. Quick start: Sencha Command
•App
•Resources
•SDK (DO NOT TOUCH!)
•app.js
•.json files
•index.html
10
woensdag 18 april 12

11. Quick Start: Sencha Command
Webkit
11
woensdag 18 april 12

12. User interface
Abstraction of various app-interface ui elements:
containers
panels
tabpanels
carousels
lists
forms
toolbars
12
woensdag 18 april 12

13. Creating views
app/view/Pictures.js
13
woensdag 18 april 12

14. Creating views
14
woensdag 18 april 12

15. Creating views
/app.js
15
woensdag 18 april 12

16. Creating views
app/view/Main.js
16
woensdag 18 april 12

17. Creating views
17
woensdag 18 april 12

18. Creating views
17
woensdag 18 april 12

19. Taking control
18
woensdag 18 april 12

20. Bootstrapping and Controllers
/app.js
Final point of bootstrapping,
controllers & profiles go first
19
woensdag 18 april 12

21. Bootstrapping and Controllers
20
woensdag 18 april 12

22. Events
Make the component selectable
Create a new controller
21
woensdag 18 april 12

23. Events
app/controller/PictureBox.js
22
woensdag 18 april 12

24. Events
app/controller/PictureBox.js
23
woensdag 18 april 12

25. Events
Querying
Predefined events
24
woensdag 18 april 12

26. Events
25
woensdag 18 april 12

27. Data Communication
26
woensdag 18 april 12

28. Data communication
27
woensdag 18 april 12

29. Model
Model
Field
Association Validation
28
woensdag 18 april 12

30. Model
app/model/Talk.js
29
woensdag 18 april 12

31. Store
Store
Model
Filter Grouper Sorter
30
woensdag 18 april 12

32. Store
app/store/Schedule.js
app.js
31
woensdag 18 april 12

33. Proxy
Store Proxy Model
Reader Writer
32
woensdag 18 april 12

34. Proxy
app/model/Talk.js
33
woensdag 18 april 12

35. Create a list
app/view/Schedule.js
34
woensdag 18 april 12

36. Create a list
app.js
35
woensdag 18 april 12

37. Create a list
app/view/Main.js
36
woensdag 18 april 12

38. Data in action!
37
woensdag 18 april 12

39. Device profiles
38
woensdag 18 april 12

40. 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.
39
woensdag 18 april 12

41. Profile setup
40
woensdag 18 april 12

42. Profile overriding
app/controller/phone/PictureBox.js
app/controller/tablet/PictureBox.js
41
woensdag 18 april 12

43. Profile overriding
app/profile/Phone.js
42
woensdag 18 april 12

44. Profile overriding
Desktop
43
woensdag 18 april 12

45. Profile overriding
Phone
44
woensdag 18 april 12

46. Profile overriding
Tablet
45
woensdag 18 april 12

47. Theme editing
46
woensdag 18 april 12

48. woensdag 18 april 12

49. Installing Compass
gem install compass
48
woensdag 18 april 12

50. The scss file
Extension: .scss
compass compile
compass watch
49
woensdag 18 april 12

51. The scss file
50
woensdag 18 april 12

52. Compass Variables
sdk/resources/themes/
stylesheets/sencha-touch/
default/_variables.scss
51
woensdag 18 april 12

53. Compass Mixins
52
woensdag 18 april 12

54. Tips and conclusions
53
woensdag 18 april 12

55. 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
54
woensdag 18 april 12

56. Need another look?
http://www.github.com/
Martin1982/4Developers
55
woensdag 18 april 12

57. Hungry for more?????
June 7 - 8 - 9, 2012
Amsterdam RAI (The Netherlands)
http://mobileconference.nl
Dutch PHP Conference visitors can attend the mobile conference and vice versa!
56
woensdag 18 april 12

58. Questions ?
57
woensdag 18 april 12

59. Thank you!
Contact details:
Twitter: @Martin1982
mdkeijzer@ibuildings.nl
woensdag 18 april 12

60. Bonus!
Debugging explained
59
woensdag 18 april 12