Issuu on Google+

Sunday, October 24, 2010


@davidkaneda @senchainc @jqtouch @webkitbits

Sunday, October 24, 2010


What’s Sencha Touch?

Sunday, October 24, 2010


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

Sunday, October 24, 2010


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

Sunday, October 24, 2010


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

Sunday, October 24, 2010


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

Sunday, October 24, 2010


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

Sunday, October 24, 2010


Let’s take a look…

Sunday, October 24, 2010


Outline Sunday, October 24, 2010


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

Outline Sunday, October 24, 2010


Some Basics

Sunday, October 24, 2010


index.html

Sunday, October 24, 2010


index.js

Sunday, October 24, 2010


Creating a Component

Sunday, October 24, 2010


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.

Sunday, October 24, 2010


object

Sunday, October 24, 2010


xtype

Sunday, October 24, 2010


Layouts

Sunday, October 24, 2010


Key concepts

Sunday, October 24, 2010


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.

Sunday, October 24, 2010


Layout Types

Sunday, October 24, 2010


Layout Types fit card vbox hbox

Sunday, October 24, 2010


fit

Sunday, October 24, 2010


card

Sunday, October 24, 2010


vbox

Sunday, October 24, 2010


hbox

Sunday, October 24, 2010


Container Config

Sunday, October 24, 2010


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

Sunday, October 24, 2010


Container Items Config

Sunday, October 24, 2010


Container Items Config width/height: n flex: n

Sunday, October 24, 2010


Sunday, October 24, 2010


Demo & Exercise

Sunday, October 24, 2010


User Interface

Sunday, October 24, 2010


Toolbars, Buttons, and Icons

Sunday, October 24, 2010


The UI attribute

Sunday, October 24, 2010


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

Sunday, October 24, 2010


Forms

Sunday, October 24, 2010


Tabs

Sunday, October 24, 2010


Carousel

Sunday, October 24, 2010


Map

Sunday, October 24, 2010


Sheets & Overlays

Sunday, October 24, 2010


Demo

Sunday, October 24, 2010


Data

Sunday, October 24, 2010


Models

Sunday, October 24, 2010


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

Sunday, October 24, 2010


Sunday, October 24, 2010


Stores

Sunday, October 24, 2010


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

Sunday, October 24, 2010


DataView

Sunday, October 24, 2010


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

Sunday, October 24, 2010


Sunday, October 24, 2010


Demo

Sunday, October 24, 2010


Style

Sunday, October 24, 2010


SASS & Compass

Sunday, October 24, 2010


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

Sunday, October 24, 2010


config.rb

Sunday, October 24, 2010


myapp.scss

Sunday, October 24, 2010


Variables

Sunday, October 24, 2010


Variables $base_color $base_gradient $alert_color $bright_color

Sunday, October 24, 2010


Custom UIs

Sunday, October 24, 2010


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

Sunday, October 24, 2010


Demo

Sunday, October 24, 2010


Best Practices

Sunday, October 24, 2010


Custom Components

Sunday, October 24, 2010


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

Sunday, October 24, 2010


Custom Theme

Sunday, October 24, 2010


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

Sunday, October 24, 2010


Advanced Demo

Sunday, October 24, 2010


Take a breath‌

Sunday, October 24, 2010


Sunday, October 24, 2010


UR NEW BFF

Sunday, October 24, 2010


Sunday, October 24, 2010


Sunday, October 24, 2010


Coming Up

Sunday, October 24, 2010


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

Sunday, October 24, 2010


Sunday, October 24, 2010


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

Sunday, October 24, 2010


Teste de Publicação