Sencha Touch Workshop

14,664 views

Published on

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/

Published in: Technology
4 Comments
16 Likes
Statistics
Notes
No Downloads
Views
Total views
14,664
On SlideShare
0
From Embeds
0
Number of Embeds
425
Actions
Shares
0
Downloads
775
Comments
4
Likes
16
Embeds 0
No embeds

No notes for slide

Sencha Touch Workshop

  1. 1. Sunday, October 24, 2010
  2. 2. @davidkaneda @senchainc @jqtouch @webkitbits Sunday, October 24, 2010
  3. 3. What’s Sencha Touch? Sunday, October 24, 2010
  4. 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. 5. Scrolling Momentum/bounce physics Hardware accelerated Throughout components Lists Carousel Pickers Sunday, October 24, 2010
  6. 6. Scrolling Momentum/bounce physics Hardware accelerated Throughout components Lists Carousel Pickers Sunday, October 24, 2010
  7. 7. Scrolling Momentum/bounce physics Hardware accelerated Throughout components Lists Carousel Pickers Sunday, October 24, 2010
  8. 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. 9. Let’s take a look… Sunday, October 24, 2010
  10. 10. Outline Sunday, October 24, 2010
  11. 11. Outline 1. Basics 2. Layouts 3. User Interface 4. Data 5. Style Sunday, October 24, 2010
  12. 12. Some Basics Sunday, October 24, 2010
  13. 13. index.html Sunday, October 24, 2010
  14. 14. index.js Sunday, October 24, 2010
  15. 15. Creating a Component Sunday, October 24, 2010
  16. 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. 17. object Sunday, October 24, 2010
  18. 18. xtype Sunday, October 24, 2010
  19. 19. Layouts Sunday, October 24, 2010
  20. 20. Key concepts Sunday, October 24, 2010
  21. 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. 22. Layout Types Sunday, October 24, 2010
  23. 23. Layout Types fit card vbox hbox Sunday, October 24, 2010
  24. 24. fit Sunday, October 24, 2010
  25. 25. card Sunday, October 24, 2010
  26. 26. vbox Sunday, October 24, 2010
  27. 27. hbox Sunday, October 24, 2010
  28. 28. Container Config Sunday, October 24, 2010
  29. 29. Container Config pack: start/center/end/justify align: start/center/end/stretch direction: normal/reverse Sunday, October 24, 2010
  30. 30. Container Items Config Sunday, October 24, 2010
  31. 31. Container Items Config width/height: n flex: n Sunday, October 24, 2010
  32. 32. Sunday, October 24, 2010
  33. 33. Demo & Exercise Sunday, October 24, 2010
  34. 34. User Interface Sunday, October 24, 2010
  35. 35. Toolbars, Buttons, and Icons Sunday, October 24, 2010
  36. 36. The UI attribute Sunday, October 24, 2010
  37. 37. The UI attribute A string which changes the appearance of a component. Sunday, October 24, 2010
  38. 38. Forms Sunday, October 24, 2010
  39. 39. Tabs Sunday, October 24, 2010
  40. 40. Carousel Sunday, October 24, 2010
  41. 41. Map Sunday, October 24, 2010
  42. 42. Sheets & Overlays Sunday, October 24, 2010
  43. 43. Demo Sunday, October 24, 2010
  44. 44. Data Sunday, October 24, 2010
  45. 45. Models Sunday, October 24, 2010
  46. 46. Models Represents a data object Can validate form data Can be given associations Sunday, October 24, 2010
  47. 47. Sunday, October 24, 2010
  48. 48. Stores Sunday, October 24, 2010
  49. 49. Stores Collection of records CRUD Use proxies to read/write data Sunday, October 24, 2010
  50. 50. DataView Sunday, October 24, 2010
  51. 51. DataView Fills data from a store into a template eg: List Sunday, October 24, 2010
  52. 52. Sunday, October 24, 2010
  53. 53. Demo Sunday, October 24, 2010
  54. 54. Style Sunday, October 24, 2010
  55. 55. SASS & Compass Sunday, October 24, 2010
  56. 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. 57. config.rb Sunday, October 24, 2010
  58. 58. myapp.scss Sunday, October 24, 2010
  59. 59. Variables Sunday, October 24, 2010
  60. 60. Variables $base_color $base_gradient $alert_color $bright_color Sunday, October 24, 2010
  61. 61. Custom UIs Sunday, October 24, 2010
  62. 62. Custom UIs @sencha-toolbar-ui @sencha-tabbar-ui @sencha-button-ui Sunday, October 24, 2010
  63. 63. Demo Sunday, October 24, 2010
  64. 64. Best Practices Sunday, October 24, 2010
  65. 65. Custom Components Sunday, October 24, 2010
  66. 66. Custom Components Ext.extend allows you to extend default components and make them your own. Sunday, October 24, 2010
  67. 67. Custom Theme Sunday, October 24, 2010
  68. 68. Custom Theme Remove unnecessary CSS by omitting images, components, and UIs with SASS & Compass. Sunday, October 24, 2010
  69. 69. Advanced Demo Sunday, October 24, 2010
  70. 70. Take a breath… Sunday, October 24, 2010
  71. 71. Sunday, October 24, 2010
  72. 72. UR NEW BFF Sunday, October 24, 2010
  73. 73. Sunday, October 24, 2010
  74. 74. Sunday, October 24, 2010
  75. 75. Coming Up Sunday, October 24, 2010
  76. 76. App Architecture JSBuilder Release Compass framework Docs and guides Better error reporting Developer Contest Coming Up Sunday, October 24, 2010
  77. 77. Sunday, October 24, 2010
  78. 78. Thanks! @davidkaneda http://9-bits.com/bb2010 Sunday, October 24, 2010

×