Sencha Touch Workshop

@davidkaneda
@senchainc
@jqtouch
@webkitbits
Sunday, October 24, 2010

What’s Sencha Touch?

What’s Sencha Touch?
JavaScript API for mobile apps
Built on Web Standards
Targets WebKit
Abstracted for performance/ease
Easy to theme

Scrolling
Momentum/bounce physics
Hardware accelerated
Throughout components
Lists
Carousel
Pickers

Touch Events
Built on native events
Abstracted for performance
Additional events
Tap
Double tap
Tap and hold
Swipe
Rotate
Drag & drop

Let’s take a look…

Outline

Outline
1. Basics
2. Layouts
3. User Interface
4. Data
5. Style

Some Basics

index.html

index.js

Creating a Component

Creating a Component
There a two ways to generate a component:
Instantiating an object or passing a child to a container
as JSON with an xtype.

object

xtype

Layouts

Key concepts

Key concepts
A container layout specifies how its children
components are rendered.
A panel is the default component type
and can act as a container.

Layout Types

Layout Types
fit
card
vbox
hbox

Container Config

Container Config
pack: start/center/end/justify
align: start/center/end/stretch
direction: normal/reverse

Container Items Config

Container Items Config
width/height: n
flex: n

Demo & Exercise

User Interface

Toolbars, Buttons, and Icons

The UI attribute

The UI attribute
A string which changes the
appearance of a component.

Forms

Carousel

Sheets & Overlays

Models

Models
Represents a data object
Can validate form data
Can be given associations

Stores

Stores
Collection of records
CRUD
Use proxies to read/write data

DataView

DataView
Fills data from a store into a template
eg: List

Style

SASS & Compass

SASS & Compass
Optional layers that allow greater flexibility
and control when creating custom stylesheets.
To install:
sudo gem install haml
sudo gem install compass

config.rb

myapp.scss

Variables

Variables
$base_color
$base_gradient
$alert_color
$bright_color

Custom UIs

Custom UIs
@sencha-toolbar-ui
@sencha-tabbar-ui
@sencha-button-ui

Best Practices

Custom Components

Custom Components
Ext.extend allows you to extend default components
and make them your own.

Custom Theme

Custom Theme
Remove unnecessary CSS by omitting images,
components, and UIs with SASS & Compass.

Advanced Demo

Take a breath…

UR NEW BFF

Coming Up

App Architecture
JSBuilder Release
Compass framework
Docs and guides
Better error reporting
Developer Contest
Coming Up

Thanks!
@davidkaneda
http://9-bits.com/bb2010

Sencha Touch Workshop

More Related Content

Similar to Sencha Touch Workshop (20)

Recently uploaded (20)

Sencha Touch Workshop