A 3-hour workshop I gave at Brooklyn Beta, walking through the basics of building a Sencha Touch app. More info at http://9-bits.com/bb2010. Sencha Touch is a Javascript framework that enables developers to create apps for iOS and Android. http://sencha.com/products/touch/

1. Sunday, October 24, 2010

2. @davidkaneda
@senchainc
@jqtouch
@webkitbits
Sunday, October 24, 2010

3. What’s Sencha Touch?
Sunday, October 24, 2010

4. What’s Sencha Touch?
JavaScript API for mobile apps
Built on Web Standards
Targets WebKit
Abstracted for performance/ease
Easy to theme
Sunday, October 24, 2010

5. Scrolling
Momentum/bounce physics
Hardware accelerated
Throughout components
Lists
Carousel
Pickers
Sunday, October 24, 2010

6. Scrolling
Momentum/bounce physics
Hardware accelerated
Throughout components
Lists
Carousel
Pickers
Sunday, October 24, 2010

7. Scrolling
Momentum/bounce physics
Hardware accelerated
Throughout components
Lists
Carousel
Pickers
Sunday, October 24, 2010

8. Touch Events
Built on native events
Abstracted for performance
Additional events
Tap
Double tap
Tap and hold
Swipe
Rotate
Drag & drop
Sunday, October 24, 2010

9. Let’s take a look…
Sunday, October 24, 2010

10. Outline
Sunday, October 24, 2010

11. Outline
1. Basics
2. Layouts
3. User Interface
4. Data
5. Style
Sunday, October 24, 2010

12. Some Basics
Sunday, October 24, 2010

13. index.html
Sunday, October 24, 2010

14. index.js
Sunday, October 24, 2010

15. Creating a Component
Sunday, October 24, 2010

16. Creating a Component
There a two ways to generate a component:
Instantiating an object or passing a child to a container
as JSON with an xtype.
Sunday, October 24, 2010

17. object
Sunday, October 24, 2010

18. xtype
Sunday, October 24, 2010

19. Layouts
Sunday, October 24, 2010

20. Key concepts
Sunday, October 24, 2010

21. Key concepts
A container layout specifies how its children
components are rendered.
A panel is the default component type
and can act as a container.
Sunday, October 24, 2010

22. Layout Types
Sunday, October 24, 2010

23. Layout Types
fit
card
vbox
hbox
Sunday, October 24, 2010

24. fit
Sunday, October 24, 2010

25. card
Sunday, October 24, 2010

26. vbox
Sunday, October 24, 2010

27. hbox
Sunday, October 24, 2010

28. Container Config
Sunday, October 24, 2010

29. Container Config
pack: start/center/end/justify
align: start/center/end/stretch
direction: normal/reverse
Sunday, October 24, 2010

30. Container Items Config
Sunday, October 24, 2010

31. Container Items Config
width/height: n
flex: n
Sunday, October 24, 2010

32. Sunday, October 24, 2010

33. Demo & Exercise
Sunday, October 24, 2010

34. User Interface
Sunday, October 24, 2010

35. Toolbars, Buttons, and Icons
Sunday, October 24, 2010

36. The UI attribute
Sunday, October 24, 2010

37. The UI attribute
A string which changes the
appearance of a component.
Sunday, October 24, 2010

38. Forms
Sunday, October 24, 2010

39. Tabs
Sunday, October 24, 2010

40. Carousel
Sunday, October 24, 2010

41. Map
Sunday, October 24, 2010

42. Sheets & Overlays
Sunday, October 24, 2010

43. Demo
Sunday, October 24, 2010

44. Data
Sunday, October 24, 2010

45. Models
Sunday, October 24, 2010

46. Models
Represents a data object
Can validate form data
Can be given associations
Sunday, October 24, 2010

47. Sunday, October 24, 2010

48. Stores
Sunday, October 24, 2010

49. Stores
Collection of records
CRUD
Use proxies to read/write data
Sunday, October 24, 2010

50. DataView
Sunday, October 24, 2010

51. DataView
Fills data from a store into a template
eg: List
Sunday, October 24, 2010

52. Sunday, October 24, 2010

53. Demo
Sunday, October 24, 2010

54. Style
Sunday, October 24, 2010

55. SASS & Compass
Sunday, October 24, 2010

56. SASS & Compass
Optional layers that allow greater flexibility
and control when creating custom stylesheets.
To install:
sudo gem install haml
sudo gem install compass
Sunday, October 24, 2010

57. config.rb
Sunday, October 24, 2010

58. myapp.scss
Sunday, October 24, 2010

59. Variables
Sunday, October 24, 2010

60. Variables
$base_color
$base_gradient
$alert_color
$bright_color
Sunday, October 24, 2010

61. Custom UIs
Sunday, October 24, 2010

62. Custom UIs
@sencha-toolbar-ui
@sencha-tabbar-ui
@sencha-button-ui
Sunday, October 24, 2010

63. Demo
Sunday, October 24, 2010

64. Best Practices
Sunday, October 24, 2010

65. Custom Components
Sunday, October 24, 2010

66. Custom Components
Ext.extend allows you to extend default components
and make them your own.
Sunday, October 24, 2010

67. Custom Theme
Sunday, October 24, 2010

68. Custom Theme
Remove unnecessary CSS by omitting images,
components, and UIs with SASS & Compass.
Sunday, October 24, 2010

69. Advanced Demo
Sunday, October 24, 2010

70. Take a breath…
Sunday, October 24, 2010

71. Sunday, October 24, 2010

72. UR NEW BFF
Sunday, October 24, 2010

73. Sunday, October 24, 2010

74. Sunday, October 24, 2010

75. Coming Up
Sunday, October 24, 2010

76. App Architecture
JSBuilder Release
Compass framework
Docs and guides
Better error reporting
Developer Contest
Coming Up
Sunday, October 24, 2010

77. Sunday, October 24, 2010

78. Thanks!
@davidkaneda
http://9-bits.com/bb2010
Sunday, October 24, 2010