sencha touch workshop

Sunday, October 24, 2010

@davidkaneda@senchainc@jqtouch@webkitbits


What’s Sencha Touch?


What’s Sencha Touch?JavaScript API for mobile apps

Built on Web StandardsTargets WebKit

Abstracted for performance/easeEasy to theme


ScrollingMomentum/bounce physicsHardware accelerated Throughout componentsListsCarouselPickers


Touch EventsBuilt on native events Abstracted for performanceAdditional eventsTapDouble tapTap and holdSwipeRotateDrag & drop


Let’s take a look…


Outline


Outline

1. Basics2. Layouts3. User Interface4. Data5. Style


Some Basics


index.html


index.js


Creating a Component


Creating a ComponentThere 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 conceptsA 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 Typesfit

cardvboxhbox


fit


card


vbox


hbox


Container Config


Container Configpack: start/center/end/justifyalign: start/center/end/stretch

direction: normal/reverse


Container Items Config


Container Items Configwidth/height: n

flex: n


Demo & Exercise


User Interface


Toolbars, Buttons, and Icons


The UI attribute


The UI attributeA string which changes the

appearance of a component.


Forms


Tabs


Carousel


Map


Sheets & Overlays


Demo


Data


Models


ModelsRepresents a data object

Can validate form dataCan be given associations


Stores


StoresCollection of records

CRUDUse proxies to read/write data


DataView


DataViewFills data from a store into a template

eg: List


Demo


Style


SASS & Compass


SASS & CompassOptional 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


Demo


Best Practices


Custom Components


Custom ComponentsExt.extend allows you to extend default components

and make them your own.


Custom Theme


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


Advanced Demo


Take a breath…


UR NEW BFF


Coming Up


App ArchitectureJSBuilder Release

Compass frameworkDocs and guides

Better error reportingDeveloper Contest

Coming Up


Thanks!@davidkaneda

http://9-bits.com/bb2010


http://9-bits.com/bb

http://9-bits.com/bb

sencha touch workshop

Technology

custom uis

container congpack

custom stylesheets

custom componentsext

ui attribute

data object

whats sencha touch

default components