Sencha Touch in Action
0 likes1,436 views
The document discusses the Sencha Touch framework, highlighting its role as a mobile-centric HTML5 framework for developing cross-platform mobile web applications. It outlines the book's content structure, which covers downloading the framework, building applications, and advanced topics like the event system and class management. Additionally, it addresses some implementation challenges developers might face, such as gesture detection and event management.
Sencha Touch in Action
- 1. @ModusCreate Sencha Touch in Action Thursday, May 16, 13
- 2. @ModusCreate About us Thursday, May 16, 13
- 3. @ModusCreate What is SenchaTouch • The first and best mobile- centric HTML 5 framework • Provides the foundation to develop kick ass cross platform mobile Web apps • Built on the best Web Standards Thursday, May 16, 13
- 4. @ModusCreate A peek under the hood • Robust class inheritance model • Full Component lifecycle • Observable event model • Elaborate Container model • Configureable layout managers • Robust packaging system Initialization Render Destruction Thursday, May 16, 13
- 5. @ModusCreate AboutThe Book • Took over 2 years to develop • Originally started early 2010 • Touch 1.1 • Started from scratch Fall of 2010 • Touch 2.0 targeted • Touch 2.2 covered today Thursday, May 16, 13
- 6. @ModusCreate Who’s this book for? • Anyone looking to develop mobile HTML5 apps with Touch • Must have skills: • JavaScript • HTML5 • CSS Thursday, May 16, 13
- 7. @ModusCreate Who’s this book for? • Anyone looking to develop mobile HTML5 apps withTouch • Must have skills: • HTML5 • CSS • JavaScript Thursday, May 16, 13
- 8. @ModusCreate What does this book cover? • Part 1: • Intro toTouch 2 • Downloading the framework • Looking at the package contents • Building a basic application Thursday, May 16, 13
- 9. @ModusCreate What does this book cover? • Part 2: • Event system • DOM, Class • Layouts • All of them! • Components • Basic to complex • Data package • Models • Stores Thursday, May 16, 13
- 10. @ModusCreate What does this book cover? • Part 3: • OOJS • Class system • Extensions & Plugins • Building an app • Deploying an HTML5 app • Sencha Cmd Thursday, May 16, 13
- 11. @ModusCreate CH10 Building a custom extension Thursday, May 16, 13
- 13. @ModusCreate Inheritance challenge Two extensions needed to be created! Ext.dataview.DataView Ext.dataview.ListItem Ext.Container Ext.dataview.List Ext.ux.ActionList Ext.ux.ActionListItem Thursday, May 16, 13
- 14. @ModusCreate Implementation Challenges • Detect swipe gesture • Show / Hide actions • DOM injections • Register tap event • Prevent item selection • Manage scroll Thursday, May 16, 13
- 15. @ModusCreate ActionListItem does most work • Detect swipe gesture • Show / Hide actions • DOM injections • Register tap event • Prevent item selection • Manage scroll Thursday, May 16, 13
- 16. @ModusCreate Detect swipe gesture • Detect swipe gesture • Show / Hide actions • DOM injections • Register tap event • Prevent item selection • Manage scroll Thursday, May 16, 13
- 17. @ModusCreate Detect swipe gesture 1) Register drag and dragend handlers Thursday, May 16, 13
- 18. @ModusCreate Detect swipe gesture 2) Manage drag event Thursday, May 16, 13
- 19. @ModusCreate Detect swipe gesture 3) Inject DOM & animate Thursday, May 16, 13
- 20. @ModusCreate Detect swipe gesture 4) Perform cleanup Thursday, May 16, 13
- 21. @ModusCreate Coming soon: SenchaTouch video training moduscreate.com/training/video Thursday, May 16, 13
- 22. @ModusCreate Questions? • Book URL: manning.com/garcia2 • Contact info: • twitters: • @moduscreate • @ModusJesus • jay@moduscreate.com Thank you! Thursday, May 16, 13