SenchaCon: Sencha Touch Custom Components

4,956 views

Published on

SenchaCon preso, Sencha Touch Custom Components with Jay Garcia, CTO & Co-Founder, Modus Create.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,956
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
119
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • Allow me to re-introduce myself my name is...
  • We’ll be talking about Custom Components
  • SenchaCon: Sencha Touch Custom Components

    1. 1. Jay Garcia, CTO & Co-Founder, Modus Create @ModusJesus jay@moduscreate.com Sencha Touch Custom Components Monday, July 22, 13
    2. 2. Agenda • Discuss the creation of custom Touch components • Explore some of the tricks of the trade • Look at some code that enables custom UI Monday, July 22, 13
    3. 3. About Me • CTO & Co-Founder Modus Create • Started with Touch in 2009 • Author of - Ext JS in Action (3.0 & 4.0) - Sencha Touch in Action • Sencha Community supporter since 2006 Monday, July 22, 13
    4. 4. Composite vs Custom Monday, July 22, 13
    5. 5. Why create custom Touch components? Monday, July 22, 13
    6. 6. Custom Functionality! • Requires us to put our thinking caps on - Write our own DOM renderers - Custom styles created - DOM listeners must be applied - Interactions must be hand-coded - House cleaning is up to you! Monday, July 22, 13
    7. 7. Swipe a list item to reveal actions underneath Monday, July 22, 13
    8. 8. Custom carousel with dynamic image loader Monday, July 22, 13
    9. 9. Custom audio FFT data renderer Monday, July 22, 13
    10. 10. What do I need to know to create custom components? Monday, July 22, 13
    11. 11. What you need to know • HTML5 semantics • CSS3 • SASS, Compass • Touch component lifecycle basics • Touch Class System - Config system - Extending - Overriding - Build process Monday, July 22, 13
    12. 12. Choosing which component to extend Monday, July 22, 13
    13. 13. Extend Ext.Component Monday, July 22, 13
    14. 14. Custom carousel with dynamic image loader Monday, July 22, 13
    15. 15. Two extensions required for this one! Monday, July 22, 13
    16. 16. The anatomy of a custom component Monday, July 22, 13
    17. 17. Let’s destruct this one component Monday, July 22, 13
    18. 18. Anatomy of a custom component Monday, July 22, 13
    19. 19. Anatomy of a custom component Class Name Monday, July 22, 13
    20. 20. Anatomy of a custom component Monday, July 22, 13
    21. 21. Anatomy of a custom component Superclass Monday, July 22, 13
    22. 22. Anatomy of a custom component Monday, July 22, 13
    23. 23. Anatomy of a custom component XType Monday, July 22, 13
    24. 24. Anatomy of a custom component Monday, July 22, 13
    25. 25. Anatomy of a custom component Classes to require Monday, July 22, 13
    26. 26. Anatomy of a custom component Monday, July 22, 13
    27. 27. Anatomy of a custom component Config block Monday, July 22, 13
    28. 28. Anatomy of a custom component Monday, July 22, 13
    29. 29. Anatomy of a custom component Applier function Monday, July 22, 13
    30. 30. Anatomy of a custom component Monday, July 22, 13
    31. 31. Anatomy of a custom component Initialize function Monday, July 22, 13
    32. 32. Anatomy of a custom component Monday, July 22, 13
    33. 33. Anatomy of a custom component Event handlers Monday, July 22, 13
    34. 34. Anatomy of a custom component Monday, July 22, 13
    35. 35. Anatomy of a custom component Utility methods Monday, July 22, 13
    36. 36. Anatomy of a custom component Monday, July 22, 13
    37. 37. Constructing a custom Component Monday, July 22, 13
    38. 38. Custom DOM Monday, July 22, 13
    39. 39. Custom DOM JiT instance of XTemplate Monday, July 22, 13
    40. 40. Custom DOM Monday, July 22, 13
    41. 41. Custom DOM Light DOM Monday, July 22, 13
    42. 42. Custom DOM Monday, July 22, 13
    43. 43. Register event listeners Monday, July 22, 13
    44. 44. Register event listeners Register drag events Monday, July 22, 13
    45. 45. Register event listeners Monday, July 22, 13
    46. 46. Custom animations Monday, July 22, 13
    47. 47. Custom animations Animate elements Monday, July 22, 13
    48. 48. Custom animations Monday, July 22, 13
    49. 49. Cleanup Monday, July 22, 13
    50. 50. Cleanup Create post- transition event handler Monday, July 22, 13
    51. 51. Cleanup Monday, July 22, 13
    52. 52. Cleanup Register event handler Monday, July 22, 13
    53. 53. Cleanup Monday, July 22, 13
    54. 54. Cleanup Invoke reset animation Monday, July 22, 13
    55. 55. Cleanup Monday, July 22, 13
    56. 56. Cleanup Initiate cleanup Monday, July 22, 13
    57. 57. Cleanup Monday, July 22, 13
    58. 58. Cleanup part 2 Monday, July 22, 13
    59. 59. Cleanup part 2 Destroy element Monday, July 22, 13
    60. 60. Cleanup part 2 Monday, July 22, 13
    61. 61. Custom component tasks Monday, July 22, 13
    62. 62. Custom carousel with dynamic image loader Monday, July 22, 13
    63. 63. App details • Mashup of Rotten Tomatoes & YouTube APIs - Uses a custom proxy for data retention - Silk JS & Redis • Recreates the feel of the Netflix mobile application Monday, July 22, 13
    64. 64. Problem • All trailer images download at the same time • SLOW on 3G! - Could incur data usage for users unnecessarily • How do we fix this? Monday, July 22, 13
    65. 65. Solution • Custom extension to Container • Listens to scroller scroll event - Loads images when they need to be Monday, July 22, 13
    66. 66. Configure custom DOM Monday, July 22, 13
    67. 67. Register event listeners Monday, July 22, 13
    68. 68. Register event listeners Scroll event listener Monday, July 22, 13
    69. 69. Register event listeners Monday, July 22, 13
    70. 70. Load images on demand Monday, July 22, 13
    71. 71. Load images on demand Load image Monday, July 22, 13
    72. 72. Load images on demand Monday, July 22, 13
    73. 73. DEMO Monday, July 22, 13
    74. 74. Custom audio FFT data renderer Monday, July 22, 13
    75. 75. App details • Amiga Mod music Player • Touch 2.2.1 UI • Driven by custom PhoneGap plugin - C++ Library wrapped with ObjC • Renders FFT audio data • Custom Canvas component - Three different modes • Really fast!! - 20ms return cycle Monday, July 22, 13
    76. 76. DEMO Monday, July 22, 13
    77. 77. How this app works LibBass C++ LibBass C++ Cordova Plugin ObjectiveC Cordova Sencha Touch Monday, July 22, 13
    78. 78. How this app works LibBass C++ LibBass C++ Cordova Plugin ObjectiveC Cordova Sencha Touch • Directory contents • Load a song • Play a song • Get song FFT data Monday, July 22, 13
    79. 79. How this app works LibBass C++ LibBass C++ Cordova Plugin ObjectiveC Cordova Sencha Touch • Directory contents • Load a song • Play a song • Get song FFT data 20ms Monday, July 22, 13
    80. 80. Poll Cordova for data Monday, July 22, 13
    81. 81. Poll Cordova for data Update data on View Monday, July 22, 13
    82. 82. Poll Cordova for data Monday, July 22, 13
    83. 83. Render data Monday, July 22, 13
    84. 84. Render data Monday, July 22, 13
    85. 85. Render data Clear canvas Monday, July 22, 13
    86. 86. Render data Monday, July 22, 13
    87. 87. Render data Update canvas Monday, July 22, 13
    88. 88. Render data Monday, July 22, 13
    89. 89. Resources Monday, July 22, 13
    90. 90. Resources Monday, July 22, 13
    91. 91. More about custom components Friday 11:30AM Room E2 Monday, July 22, 13
    92. 92. Wrapping up • Think speed • Light DOM • Optimized JavaScript • Write your own event handlers • Clean up after yourself! • Remove unnecessary event handlers • Remove DOM when not needed Monday, July 22, 13
    93. 93. Take the Survey! • Session Survey - Available on the SenchaCon mobile app - http://app.senchacon.com • Be Social! - @SenchaCon - #SenchaCon - @ModusJesus - @ModusCreate Monday, July 22, 13

    ×