Bd conf sencha touch workshop

James Pearce
Director, Developer Relations

@ jamespearce
jamesp@sencha.com

Building
Mobile Web Apps
with
HTML CSS JS

Sedentary usage

Mobile usage

Declarative HTML

Programmatic JS

HTML5 is a new version of HTML4, XHTML1,
and DOM Level 2 HTML addressing many of the
issues of those speciﬁcations while at the
same time enhancing (X)HTML
to more adequately address Web applications.

A New Mobile App Stack
WebFonts Video Audio Graphics
Device Access Server & Services

Camera CSS Styling & Layout HTTP

Location AJAX
JavaScript
Contacts Events

SMS Semantic HTML Sockets

Orientation SSL
File Systems Worker
x-App
Gyro DBs Parallel More...
Messaging
App Cache Processing

Rich Media & Styling E
T IM
UN
Full ResourceRAccess
N R
Parallel MO DE
Processing
TE
Inter-App
P LE Communication
OM
C O ine Capability
Full
A

HTML5 Support
IE 10 PR Chrome 10 Safari 5 Firefox 4 iOS4.31 Playbook Honeycomb
@font-face
Canvas
HTML5 Audio & Video
rgba(), hsla()
border-image:
border-radius:
box-shadow:
text-shadow:
opacity:
Multiple backgrounds
Flexible Box Model
CSS Animations
CSS Columns
CSS Gradients
CSS Reflections
CSS 2D Transforms
CSS 3D Transforms
CSS Transitions
Geolocation API
local/sessionStorage
SVG/SVG Clipping
SMIL
Inline SVG
Drag and Drop
hashchange
X-window Messaging
History Management
applicationCache
Web Sockets
Web Workers
Web SQL Database
WebGL
IndexedDB

Stay on top of diversity
Can I Use?
http://caniuse.com

Modernizr
http://modernizr.com

DeviceAtlas
http://deviceatlas.com

Pearce’s Universal Law of
Mobile Web Browsers
Diversity

(for all T)

Capability

Pearce’s Universal Law of
Mobile Web Browsers
Support

(for all T)

Capability

JavaScript frameworks,
polyﬁlls & shims
Support

Capability

Evolving the web for mobile

Views
HTML, CSS...

Controllers
Models

Desktop
Switcher

HTML, CSS...
Mobile

Controllers
Models

Desktop
Switchers

Mobile
REST
JSO on
Controllers N
ce

Models

The classic web stack

req/res
User interface Rendering
Business logic
Storage

An alternative web stack

User interface
sync
Security Business logic
Storage Storage

The Mobile Web
is not a
320px Web

Views Views
Controllers
Models
Stores
Proxies
n
jso

Thick client, thin server

The shortfall in the cloud

Location Services
Adaptation Analytics

Web Fonts Data Sync

Video Serving Ad Serving

Image Serving
$
Commerce
Network APIs

http://mysite.com/myimage.png

http://src.sencha.io/http://mysite.com/myimage.png

Sencha Touch
A JavaScript framework for building
rich mobile apps with web standards

http://www.sencha.com/products/touch

Get Sencha Touch

/ sencha.c om/touch
http:/

Kitchen Sink

://sencha .com/x/5e
http

Your First App
<!DOCTYPE html>
<html>

<head>

<title>Hello World</title>

<script src="sencha-touch.js" type="text/javascript"></script>

<link href="sencha-touch.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
...
</script>

</head>

<body></body>

</html>

Your First App
new Ext.Application({

launch: function() {

new Ext.Panel({
fullscreen: true,
dockedItems: [{xtype:'toolbar', title:'My First App'}],
layout: 'fit',
styleHtmlContent: true,
html: '<h2>Hello World!</h2>I did it!'
});

}

});

List
var list = new Ext.List({
store: store,
itemTpl:
'{firstName} {lastName}',
grouped: true,
indexBar: true
});

Nested List
var list = new Ext.NestedList({
store: store,
displayField: 'name',
title: 'My List',
updateTitleText: true,
getDetailCard:
function(record, parent) {..}
});

Carousel
var car = new Ext.Carousel({
direction: 'horizontal',
indicator: true,
items: [
..
]
});

Sheets
var sheet = new Ext.ActionSheet({
items: [
{
text: 'Delete draft',
ui: 'decline'
}, {
text: 'Save draft'
}, {
text: 'Cancel',
}
]
});
sheet.show();

Get Started!

://sencha .com/x/d5
http

Pre-requisites for today
Sencha Touch SDK:
http://sencha.com/products/touch/

Yelp developer API key:
http://www.yelp.com/developers/getting_started/
api_overview

Install Sass and Compass:
http://sass-lang.com/download.html
http://compass-style.org/install/

The Nashville App

://sencha .com/x/dg
http://sencha.com/x/bu
http

http://github.com/
jamesgpearce/nashville

Development sequence
1 Structure the app 5 Detail page

2 Layout the UI 6 Add a map

3 Model the data 7 More data

4 Load the list 8 Customize theme

index.html

<!doctype
html>
<html>

<head>

<title>Nashville
Guide</title>

</head>
<body></body>
</html>

index.html

<script
src="lib/touch/sencha-‐touch.js"></script>

<script
src="app/yelp.js"></script>
<script
src="app/app.js"></script>

<link
href="lib/touch/resources/css/sencha-‐touch.css"

rel="stylesheet"
type="text/css"
/>

app.js
nv
=
new
Ext.Application({

launch:
function()
{

this.viewport
=
new
Ext.Panel({

layout:
'card',

fullscreen:
true,

html:
"Hello
world!"

});

}

});

2 Layout the UI

toolbar toolbar

dataList

listCard detailCard
nv.viewport

The app...
nv
=
new
Ext.Application({

launch:
function()
{

this.listCard
=
new
Ext.Panel({

html:
'I
am
the
list'

});

this.detailCard
=
new
Ext.Panel({

html:
'I
am
the
detail'

});

this.viewport
=
new
Ext.Panel({

layout:
'card',

fullscreen:
true,

cardSwitchAnimation:
'slide',

items:
[this.listCard,
this.detailCard]

});

}
});

listCard
this.listCardToolbar
=
new
Ext.Toolbar({

dock:
'top',

title:
'Nashville
Guide'
});

this.listCardDataList
=
new
Ext.List({

store:
null,

itemTpl:
''
});

this.listCard
=
new
Ext.Panel({

dockedItems:
[this.listCardToolbar],

items:
[this.listCardDataList],

layout:
'fit'
});

detailCard
this.detailCardToolbar
=
new
Ext.Toolbar({

dock:
'top',

title:
'...'
});

this.detailCard
=
new
Ext.Panel({

dockedItems:
[this.detailCardToolbar]
});

3 Model the data

http://api.yelp.com/business_review_search
?ywsid=YELP_KEY
&term=Restaurants
&location=Nashville,TN

"businesses":
[

{

"rating_img_url"
:
"http://media4.px.yelpcdn.com/...",

"country_code"
:
"US",

"id"
:
"BHpAlynD9dIGIaQDRqHCTA",

"is_closed"
:
false,

"city"
:
"Nashville",

"mobile_url"
:
"http://mobile.yelp.com/biz/...",

"review_count"
:
50,

"zip"
:
"11231",

"state"
:
"TN",

"latitude"
:
40.675758,

"address1"
:
"253
Conover
St",

"address2"
:
"",

"address3"
:
"",

"phone"
:
"7186258211",

"state_code"
:
"TN",

"categories":
[

...",

],

...

A data namespace
this.data
=
{};

The ‘Business’ model
this.data.Business
=
Ext.regModel('',
{

fields:
[

{name:
"id",
type:
"int"},

{name:
"name",
type:
"string"},

{name:
"latitude",
type:
"string"},

{name:
"longitude",
type:
"string"},

{name:
"address1",
type:
"string"},

{name:
"address2",
type:
"string"},

{name:
"address3",
type:
"string"},

{name:
"phone",
type:
"string"},

{name:
"state_code",
type:
"string"},

{name:
"mobile_url",
type:
"string"},

{name:
"rating_img_url_small",
type:
"string"},

{name:
"photo_url",
type:
"string"},

]
});

A store of those models
this.data.restaurants
=
new
Ext.data.Store({

model:
this.data.Business,

autoLoad:
true,

proxy:
{

type:
'scripttag',

url:
'http://api.yelp.com/business_review_search'
+

'?ywsid='
+
YELP_KEY
+

'&term=Restaurant'
+

'&location=Nashville,TN',

reader:
{

type:
'json',

root:
'businesses'

}

}
});

4 Load the list
=
new
Ext.List({

store:
this.data.restaurants,

itemTpl:
'{name}'
});

A more interesting template
itemTpl:

'<img
class="photo"
src="{photo_url}"
width="40"
height="40"/>'
+

'{name}<br/>'
+

'<img
src="{rating_img_url_small}"/> '
+

'<small>{address1}</small>'

Hack the style
<style>

.photo
{

float:left;

margin:0
8px
16px
0;

border:1px
solid
#ccc;

-‐webkit-‐box-‐shadow:

0
2px
4px
#777;

}
</style>

Get images resized...

...width="40"
height="40"
/>

...in the cloud

src="http://src.sencha.io/40/{photo_url}"
width="40"
height="40"/>

5 Detail page
=
new
Ext.List({

store:

itemTpl:
...

listeners:
{

selectionchange:
function
(selectionModel,
records)
{

if
(records[0])
{

nv.viewport.setActiveItem(nv.detailCard);

nv.detailCardToolbar.setTitle(

records[0].get('name')

);

}

}

}
});

A back button
this.detailCardToolbar
=
new
Ext.Toolbar({

dock:
'top',

title:
'...',

items:
[{

text:
'Back',

ui:
'back',

handler:
function
()
{

nv.viewport.setActiveItem(

nv.listCard,

{type:
'slide',
direction:
'right'}

);

}

}]
});

Detail template
this.detailCard
=
new
Ext.Panel({

dockedItems:
[this.detailCardToolbar],

styleHtmlContent:
true,

cls:
'detail',

tpl:
[

'<img
class="photo"
src="{photo_url}"

width="100"
height="100"/>',

'<h2>{name}</h2>',

'<div
class="info">',

'{address1}<br/>',

'<img
src="{rating_img_url_small}"/>',

'</div>',

'<div
class="phone
x-‐button">',

'<a
href="tel:{phone}">{phone}</a>',

'</div>',

'<div
class="link
x-‐button">',

'<a
href="{mobile_url}">Read
more</a>',

'</div>'

]
});

A little styling
.x-‐html
h2
{

margin-‐bottom:0;
}
.phone,
.link
{

clear:both;

font-‐weight:bold;

display:block;

text-‐align:center;

margin-‐top:8px;
}

6 Add a map

toolbar toolbar

dataList dataList
detailCard

listCard detailTabs
nv.viewport

6 Add a map
nv.viewport.setActiveItem(nv.detailTabs);

...

this.detailMap
=
new
Ext.Map({});

this.detailTabs
=
new
Ext.TabPanel({

dockedItems:

items:
[this.detailCard,
this.detailMap]
});

nv.viewport
=
new
Ext.Panel({

layout:
'card',

fullscreen:
true,

'slide',

items:
[this.listCard,
this.detailTabs]
});

Tab titles
this.detailCard
=
new
Ext.Panel({

...

title:
'Info'
});

this.detailMap
=
new
Ext.Map({

title:
'Map'
});

Google Maps script
<script
type="text/javascript"

src="http://maps.google.com/maps/api/js?sensor=true">
</script>

Update the map location
selectionchange:
function
(selectionModel,
records)
{

...

var
map
=
nv.detailMap.map;

if
(!map.marker)
{

map.marker
=
new
google.maps.Marker();

map.marker.setMap(map);

}

map.setCenter(

new
google.maps.LatLng(

records[0].get('latitude'),

records[0].get('longitude')

)

);

map.marker.setPosition(

map.getCenter()

);

Improve the tab bar
this.detailTabs
=
new
Ext.TabPanel({

dockedItems:

items:
[this.detailCard,
this.detailMap],

tabBar:
{

ui:
'light',

layout:
{
pack:
'center'
}

}

});

More data...
['hotels',
'bars',
'restaurants'].forEach(
function
(type)
{

nv.data[type]
=
new
Ext.data.Store({

model:
nv.data.Business,

autoLoad:
true,

proxy:
{

type:
'scripttag',

url:
'http://api.yelp.com/business_review_search'
+

'?ywsid='
+
YELP_KEY
+

'&term='
+
type
+

'&location=Nashville,TN',

reader:
{

type:
'json',

root:
'businesses'

}

}

});
});

Make list into a ‘class’
this.ListCardDataList
=
Ext.extend(Ext.List,
{

store:
null,

itemTpl:

'<img
class="photo"
...

Instantiate that 3 times
this.stayCardDataList
=
new
this.ListCardDataList({

store:
this.data.hotels
});

this.eatCardDataList
=
new

store:
this.data.restaurants
});

this.drinkCardDataList
=
new

store:
this.data.bars
});

Consider lazy-loading...

Turn container into tabs too
this.listCard
=
new
Ext.TabPanel({

items:
[

this.stayCardDataList,

this.eatCardDataList,


],

tabBar:
{

ui:
'light',

layout:
{
pack:
'center'
},

dock:
'bottom'

},

'flip',
...

And add titles & icons
=
new

store:
this.data.hotels,

title:
'Stay',

iconCls:
'home'
});

=
new

store:

title:
'Eat',

iconCls:
'locate'
});

=
new

store:
this.data.bars,

title:
'Drink',

iconCls:
'star'
});

Pull-to-refresh
this.ListCardDataList
=
Ext.extend(Ext.List,
{

...

plugins:
[{

ptype:
'pullrefresh'

}]
});

Variables
/* SCSS */ /* CSS */

$blue: #3bbfce; .content-navigation {
$margin: 16px; border-color: #3bbfce;
color: #2b9eab;
.content-navigation { }
border-color: $blue;
color: .border {
darken($blue, 9%); padding: 8px;
} margin: 8px;
border-color: #3bbfce;
.border { }
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}

$> sudo gem install compass

http://rubyinstaller.org/

$> compass -v

Compass 0.11.1 (Antares)
Copyright (c) 2008-2011 Chris Eppstein
Released under the MIT License.

$> sass -v

Sass 3.1.1 (Brainy Betty)

Start by copying sencha-touch.scss

conﬁg.rb
dir
=
File.dirname(__FILE__)

load
File.join(dir,
'..',
'lib',
'touch',
'resources',

'themes')

#
Compass
configurations
sass_path

=
dir
css_path

=
dir
environment

=
:production
output_style
=
:compressed

#
or
:nested,
:expanded,
:compact

Compile...
$>
cd
theming

$>
compass
compile
nashville.scss

create
nashville.css

$>
compass
compile
nashville.scss

identical
nashville.css

[edit
file]
$>
compass
compile
nashville.scss

overwrite
nashville.css

$>
compass
watch
nashville.scss

>>>
Change
detected
to:
nashville.scss

overwrite
nashville.css

Link...
<link
href="theming/nashville.css"
rel="stylesheet"

type="text/css"
/>

nashville.scss
@import
'sencha-‐touch/default/all';

@include
sencha-‐panel;
@include
sencha-‐buttons;
@include
sencha-‐sheet;
@include
sencha-‐tabs;
@include
sencha-‐toolbar;
@include
sencha-‐list;
@include
sencha-‐list-‐pullrefresh;
@include
sencha-‐layout;
@include
sencha-‐loading-‐spinner;
...

nashville.scss
$base-‐color:
#849;

@import

@include
sencha-‐panel;
@include
sencha-‐buttons;
@include
sencha-‐sheet;
@include
sencha-‐tabs;
@include
sencha-‐toolbar;
@include
sencha-‐list;
@include
sencha-‐list-‐pullrefresh;
@include
sencha-‐layout;
@include
sencha-‐loading-‐spinner;

Choose own icons
$base-‐color:
#849;
$include-‐default-‐icons:
false;

@import

@include
sencha-‐panel;
@include
sencha-‐buttons;
...

@include
pictos-‐iconmask('briefcase1');
@include
pictos-‐iconmask('heart');
@include
pictos-‐iconmask('music1');

Specify iconCls
=
new

store:
this.data.hotels,

title:
'Stay',

iconCls:
'briefcase1'
});

=
new

store:

title:
'Eat',

iconCls:
'heart'
});

=
new

store:
this.data.bars,

title:
'Drink',

iconCls:
'music1'
});

_variables.scss
$include-html-style: true; $base-color: #354F6E;

$include-default-icons: true; $base-gradient: 'matte';

$include-form-sliders: true; $alert-color: red;

$include-floating-panels: true; $confirm-color: #92cf00;

$include-default-uis: true; $page-bg-color: #eee;

$include-highlights: true; $global-row-height: 2.6em;

$include-border-radius: true; $active-color: darken(
saturate($base-color, 55%),
$basic-slider: false; 10%);

http://dev.sencha.com/deploy/touch/docs/theme/

Sass is a superset of CSS
$base-‐color:
#849;
$include-‐default-‐icons:
false;

@import
...

@include
pictos-‐iconmask('briefcase1');
@include
pictos-‐iconmask('heart');
@include
pictos-‐iconmask('music1');

.photo
{

float:left;

margin:0
8px
16px
0;

border:1px
solid
#ccc;

-‐webkit-‐box-‐shadow:

0
2px
4px
#777;
}
...

WebFonts
@import
url(http://fonts.googleapis.com/css?family=Smokum);

.x-‐toolbar-‐title
{

font-‐family:
Smokum;

font-‐weight:
normal;

font-‐size:
1.7em;

line-‐height:
1.7em;

letter-‐spacing:
0.05em;
}

A ‘responsive’ app...

/sencha.c om/x/cv
http:/

And if we’d had time...
Add to home screen
- Icon
- Splash screen

Hybrid app; PhoneGap / NimbleKit
- Contacts API
- Geolocation
- Packaging

//sencha .com/x/cy
http:
://sencha .com/x/de
http

O ine app
$>
phantomjs
confess.js
http://github/nashville/

CACHE
MANIFEST

#
This
manifest
was
created
by
confess.js
#

Time:
Wed
Sep
14
2011
10:14:45
GMT-‐0700
(PDT)
#

User-‐agent:
Mozilla/5.0
...

CACHE:
app/app.js
app/yelp.js
http://cdn.sencha.io/touch/1.1.0/sencha-‐touch.js
http://maps.google.com/maps/api/js?sensor=true
http://maps.gstatic.com/intl/en_us/mapfiles/api-‐3/6/4/main.js
theming/nashville.css

NETWORK:
ce/c onfess
*
hub .com/ jamesgpear
http://git

O ine data
Taking Yelp data o ine

Taking images o ine
- src.sencha.io to generate cross-origin B64

Detecting network connection changes

/sencha.c om/x/df
http:/

Weinre

.github.c om/weinre/
p
http ://phonega

built with

Apps vs Web technology

Bd conf sencha touch workshop

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (6)

Semelhante a Bd conf sencha touch workshop

Semelhante a Bd conf sencha touch workshop (20)

Mais de James Pearce

Mais de James Pearce (11)

Último

Último (20)

Bd conf sencha touch workshop