• Like
  • Save
SenchaCon: Sencha Touch Custom Components
Upcoming SlideShare
Loading in...5
×
 

SenchaCon: Sencha Touch Custom Components

on

  • 3,389 views

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

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

Statistics

Views

Total Views
3,389
Views on SlideShare
3,387
Embed Views
2

Actions

Likes
3
Downloads
41
Comments
0

1 Embed 2

https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Allow me to re-introduce myself my name is...
  • We’ll be talking about Custom Components

SenchaCon: Sencha Touch Custom Components SenchaCon: Sencha Touch Custom Components Presentation Transcript

  • Jay Garcia, CTO & Co-Founder, Modus Create @ModusJesus jay@moduscreate.com Sencha Touch Custom Components Monday, July 22, 13
  • 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
  • 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
  • Composite vs Custom Monday, July 22, 13
  • Why create custom Touch components? Monday, July 22, 13
  • 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
  • Swipe a list item to reveal actions underneath Monday, July 22, 13
  • Custom carousel with dynamic image loader Monday, July 22, 13
  • Custom audio FFT data renderer Monday, July 22, 13
  • What do I need to know to create custom components? Monday, July 22, 13
  • 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
  • Choosing which component to extend Monday, July 22, 13
  • Extend Ext.Component Monday, July 22, 13
  • Custom carousel with dynamic image loader Monday, July 22, 13
  • Two extensions required for this one! Monday, July 22, 13
  • The anatomy of a custom component Monday, July 22, 13
  • Let’s destruct this one component Monday, July 22, 13
  • Anatomy of a custom component Monday, July 22, 13
  • Anatomy of a custom component Class Name Monday, July 22, 13
  • Anatomy of a custom component Monday, July 22, 13
  • Anatomy of a custom component Superclass Monday, July 22, 13
  • Anatomy of a custom component Monday, July 22, 13
  • Anatomy of a custom component XType Monday, July 22, 13
  • Anatomy of a custom component Monday, July 22, 13
  • Anatomy of a custom component Classes to require Monday, July 22, 13
  • Anatomy of a custom component Monday, July 22, 13
  • Anatomy of a custom component Config block Monday, July 22, 13
  • Anatomy of a custom component Monday, July 22, 13
  • Anatomy of a custom component Applier function Monday, July 22, 13
  • Anatomy of a custom component Monday, July 22, 13
  • Anatomy of a custom component Initialize function Monday, July 22, 13
  • Anatomy of a custom component Monday, July 22, 13
  • Anatomy of a custom component Event handlers Monday, July 22, 13
  • Anatomy of a custom component Monday, July 22, 13
  • Anatomy of a custom component Utility methods Monday, July 22, 13
  • Anatomy of a custom component Monday, July 22, 13
  • Constructing a custom Component Monday, July 22, 13
  • Custom DOM Monday, July 22, 13
  • Custom DOM JiT instance of XTemplate Monday, July 22, 13
  • Custom DOM Monday, July 22, 13
  • Custom DOM Light DOM Monday, July 22, 13
  • Custom DOM Monday, July 22, 13
  • Register event listeners Monday, July 22, 13
  • Register event listeners Register drag events Monday, July 22, 13
  • Register event listeners Monday, July 22, 13
  • Custom animations Monday, July 22, 13
  • Custom animations Animate elements Monday, July 22, 13
  • Custom animations Monday, July 22, 13
  • Cleanup Monday, July 22, 13
  • Cleanup Create post- transition event handler Monday, July 22, 13
  • Cleanup Monday, July 22, 13
  • Cleanup Register event handler Monday, July 22, 13
  • Cleanup Monday, July 22, 13
  • Cleanup Invoke reset animation Monday, July 22, 13
  • Cleanup Monday, July 22, 13
  • Cleanup Initiate cleanup Monday, July 22, 13
  • Cleanup Monday, July 22, 13
  • Cleanup part 2 Monday, July 22, 13
  • Cleanup part 2 Destroy element Monday, July 22, 13
  • Cleanup part 2 Monday, July 22, 13
  • Custom component tasks Monday, July 22, 13
  • Custom carousel with dynamic image loader Monday, July 22, 13
  • 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
  • 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
  • Solution • Custom extension to Container • Listens to scroller scroll event - Loads images when they need to be Monday, July 22, 13
  • Configure custom DOM Monday, July 22, 13
  • Register event listeners Monday, July 22, 13
  • Register event listeners Scroll event listener Monday, July 22, 13
  • Register event listeners Monday, July 22, 13
  • Load images on demand Monday, July 22, 13
  • Load images on demand Load image Monday, July 22, 13
  • Load images on demand Monday, July 22, 13
  • DEMO Monday, July 22, 13
  • Custom audio FFT data renderer Monday, July 22, 13
  • 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
  • DEMO Monday, July 22, 13
  • How this app works LibBass C++ LibBass C++ Cordova Plugin ObjectiveC Cordova Sencha Touch Monday, July 22, 13
  • 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
  • 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
  • Poll Cordova for data Monday, July 22, 13
  • Poll Cordova for data Update data on View Monday, July 22, 13
  • Poll Cordova for data Monday, July 22, 13
  • Render data Monday, July 22, 13
  • Render data Monday, July 22, 13
  • Render data Clear canvas Monday, July 22, 13
  • Render data Monday, July 22, 13
  • Render data Update canvas Monday, July 22, 13
  • Render data Monday, July 22, 13
  • Resources Monday, July 22, 13
  • Resources Monday, July 22, 13
  • More about custom components Friday 11:30AM Room E2 Monday, July 22, 13
  • 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
  • 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