sencha touch in action
Post on 22-Oct-2014
1.488 views
DESCRIPTION
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.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