senchacon: sencha touch custom components

Jay Garcia, CTO & Co-Founder, Modus Create

@[email protected]

Sencha Touch Custom Components

Monday, July 22, 13

mailto:[email protected]

mailto:[email protected]

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

Compositevs

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


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


Class Name

Monday, July 22, 13


Monday, July 22, 13


Superclass

Monday, July 22, 13


Monday, July 22, 13


XType

Monday, July 22, 13


Monday, July 22, 13


Classes to require

Monday, July 22, 13


Monday, July 22, 13


Config block

Monday, July 22, 13


Monday, July 22, 13


Applier function

Monday, July 22, 13


Monday, July 22, 13


Initialize function

Monday, July 22, 13


Monday, July 22, 13


Event handlers

Monday, July 22, 13


Monday, July 22, 13


Utility methods

Monday, July 22, 13


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 DOMLight DOM

Monday, July 22, 13

Custom DOM

Monday, July 22, 13

Register event listeners

Monday, July 22, 13


Register drag events

Monday, July 22, 13


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

CleanupCreate 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


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


Monday, July 22, 13


Scroll event listener

Monday, July 22, 13


Monday, July 22, 13

Load images on demand

Monday, July 22, 13


Load image

Monday, July 22, 13


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

LibBassC++

LibBassC++

Cordova Plugin

ObjectiveC

Cordova

Sencha Touch

Monday, July 22, 13

How this app works

LibBassC++

LibBassC++

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

LibBassC++

LibBassC++

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


Update data on View

Monday, July 22, 13


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

More about custom components

Friday 11:30AMRoom 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

http://app.senchacon.com




senchacon: sencha touch custom components

Technology

custom carousel

custom animations

custom component superclass

custom component xtype

custom component classes

custom component tasks

custom ui

custom proxy