View
13.813
Download
2
Category
Tags:
Preview:
DESCRIPTION
A 3-hour workshop I gave at Brooklyn Beta, walking through the basics of building a Sencha Touch app. More info at http://9-bits.com/bb2010.Sencha Touch is a Javascript framework that enables developers to create apps for iOS and Android.http://sencha.com/products/touch/
Citation preview
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 StandardsTargets WebKit
Abstracted for performance/easeEasy to theme
Sunday, October 24, 2010
ScrollingMomentum/bounce physicsHardware accelerated Throughout componentsListsCarouselPickers
Sunday, October 24, 2010
ScrollingMomentum/bounce physicsHardware accelerated Throughout componentsListsCarouselPickers
Sunday, October 24, 2010
ScrollingMomentum/bounce physicsHardware accelerated Throughout componentsListsCarouselPickers
Sunday, October 24, 2010
Touch EventsBuilt on native events Abstracted for performanceAdditional eventsTapDouble tapTap and holdSwipeRotateDrag & drop
Sunday, October 24, 2010
Let’s take a look…
Sunday, October 24, 2010
Outline
Sunday, October 24, 2010
Outline
1. Basics2. Layouts3. User Interface4. Data5. Style
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 ComponentThere 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 conceptsA 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 Typesfit
cardvboxhbox
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 Configpack: start/center/end/justifyalign: start/center/end/stretch
direction: normal/reverse
Sunday, October 24, 2010
Container Items Config
Sunday, October 24, 2010
Container Items Configwidth/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 attributeA 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
ModelsRepresents a data object
Can validate form dataCan be given associations
Sunday, October 24, 2010
Sunday, October 24, 2010
Stores
Sunday, October 24, 2010
StoresCollection of records
CRUDUse proxies to read/write data
Sunday, October 24, 2010
DataView
Sunday, October 24, 2010
DataViewFills 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 & CompassOptional 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 ComponentsExt.extend allows you to extend default components
and make them your own.
Sunday, October 24, 2010
Custom Theme
Sunday, October 24, 2010
Custom ThemeRemove 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
App ArchitectureJSBuilder Release
Compass frameworkDocs and guides
Better error reportingDeveloper Contest
Coming Up
Sunday, October 24, 2010
Sunday, October 24, 2010
Thanks!@davidkaneda
http://9-bits.com/bb2010
Sunday, October 24, 2010
Recommended