Teste de Publicação

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

Documents

Teste de Publicação