Your SlideShare is downloading. ×
  • Like
×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Sencha Touch Workshop

  • 13,788 views
Published

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

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
13,788
On SlideShare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
755
Comments
4
Likes
15

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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