@ModusCreate Sencha Touch in Action Thursday, May 16, 13
Sencha Touch in Action
Oct 22, 2014
What is Sencha Touch? Jay Garcia and Mitch Simoens, authors of Sencha Touch in Action, give a presentation on everything Sencha Touch. This presentation is for developers of all skill levels.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
@ModusCreate
Sencha Touch in Action
Thursday, May 16, 13
@ModusCreate
About us
Thursday, May 16, 13
@ModusCreate
What is Sencha Touch
• 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
@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
@ModusCreate
About The 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
@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
@ModusCreate
Who’s this book for?
• Anyone looking to develop mobile HTML5 apps with Touch• Must have skills:• HTML5• CSS• JavaScript
Thursday, May 16, 13
@ModusCreate
What does this book cover?
• Part 1:• Intro to Touch 2•Downloading the
framework• Looking at the package
contents• Building a basic application
Thursday, May 16, 13
@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
@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
@ModusCreate
CH10 Building a custom extension
Thursday, May 16, 13
@ModusCreate
Inheritance challenge
Ext.dataview.DataView
Ext.dataview.ListItem
Ext.Container
Ext.dataview.List
Thursday, May 16, 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
@ModusCreate
Implementation Challenges
•Detect swipe gesture• Show / Hide actions•DOM injections• Register tap event• Prevent item selection•Manage scroll
Thursday, May 16, 13
@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
@ModusCreate
Detect swipe gesture
•Detect swipe gesture• Show / Hide actions•DOM injections• Register tap event• Prevent item selection•Manage scroll
Thursday, May 16, 13
@ModusCreate
Detect swipe gesture
1) Register drag and dragend handlers
Thursday, May 16, 13
@ModusCreate
Detect swipe gesture
2) Manage drag event
Thursday, May 16, 13
@ModusCreate
Detect swipe gesture
3) Inject DOM & animate
Thursday, May 16, 13
@ModusCreate
Detect swipe gesture
4) Perform cleanup
Thursday, May 16, 13
@ModusCreate
Coming soon: Sencha Touch video training
moduscreate.com/training/video
Thursday, May 16, 13
@ModusCreate
Questions?• Book URL: manning.com/garcia2
• Contact info:
• twitters:
•@moduscreate
•@ModusJesus
Thank you!
Thursday, May 16, 13
Related Documents
