SlideShare ist ein Scribd-Unternehmen logo
1 von 86
Downloaden Sie, um offline zu lesen
A Mobile Web App
   for Android
  in 75 Minutes
    @ jamespearce
Single device            Multi device
Sedentary user            Mobile user
                                 *


Declarative               Imperative
Thin client               Thick client
Documents                Applications

         * or supine, or sedentary, or passive, or...
A badge for all these ways
   the web is changing
WebFont        Video      Audio     Graphics
Device Access
  Camera                   CSS Styling & Layout                Network
  Location                                                      HTTP
                                  JavaScript
  Contacts                                                      AJAX

    SMS                        Semantic HTML                   Events

 Orientation                                                   Sockets
                File Systems      Workers &
                                                  Cross-App
    Gyro         Databases         Parallel                     SSL
                                                  Messaging
                App Caches        Processing



        (all the elements of a modern application platform)
Introducing
Sencha Touch
A JavaScript framework
       for building
    rich mobile apps
  with web standards
http://sencha.com/touch
Components

    Lists
Theming
Forms
Scrolling
Touch Events
Data access & MVC
Charts
Kitchen Sink




http://sencha.com/x/5e
Sencha Touch 2
Hello World
http://sencha.com/x/d5
A mobile web app for Android in 75 minutes
<!DOCTYPE	
  html>
<html>
	
  	
  <head>
	
  	
  
	
  	
  	
  	
  <title>Hello	
  World</title>

	
  	
  	
  	
  <script	
  src="lib/touch/sencha-­‐touch.js"></script>
	
  	
  	
  	
  <script	
  src="app/app.js"></script>
	
  	
  	
  	
  
	
  	
  	
  	
  <link	
  href="lib/touch/resources/css/sencha-­‐touch.css"
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  rel="stylesheet"	
  type="text/css"	
  />
	
  	
  
	
  	
  </head>
	
  	
  <body></body>
</html>
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!'
	
  	
  	
  	
  	
  	
  	
  	
  });

	
  	
  	
  	
  }

});
A mobile web app for Android in 75 minutes
Lists
var	
  list	
  =	
  new	
  Ext.List({
	
  	
  	
  	
  store:	
  store,
	
  	
  	
  	
  itemTpl:	
  '{firstName}	
  {lastName}',
	
  	
  	
  	
  grouped:	
  true,
	
  	
  	
  	
  indexBar:	
  true
});
Nested Lists
var	
  list	
  =	
  new	
  Ext.NestedList({
	
  	
  	
  	
  store:	
  store,
	
  	
  	
  	
  displayField:	
  'name',
	
  	
  	
  	
  title:	
  'My	
  List',
	
  	
  	
  	
  updateTitleText:	
  true,
	
  	
  	
  	
  getDetailCard:
	
  	
  	
  	
  	
  	
  	
  	
  function(record,	
  parent)	
  {..}
});
Carousels
var	
  carousel	
  =	
  new	
  Ext.Carousel({
	
  	
  	
  	
  direction:	
  'horizontal',
	
  	
  	
  	
  indicator:	
  true,
	
  	
  	
  	
  items:	
  [
	
  	
  	
  	
  	
  	
  	
  	
  ..
	
  	
  	
  	
  ]
});
Common patterns
      1
var	
  list	
  =	
  new	
  Ext.List({
	
  	
  	
  	
  store:	
  store,
	
  	
  	
  	
  itemTpl:	
  '{firstName}	
  {lastName}',
	
  	
  	
  	
  grouped:	
  true,
	
  	
  	
  	
  indexBar:	
  true
});


var	
  panel	
  =	
  new	
  Ext.Panel({
	
  	
  	
  	
  fullscreen:	
  true,
	
  	
  	
  	
  layout:	
  'fit',
	
  	
  	
  	
  items:	
  [list]
});
Common patterns
      2
var	
  panel	
  =	
  new	
  Ext.Panel({
	
  	
  	
  	
  fullscreen:	
  true,
	
  	
  	
  	
  layout:	
  'fit',
	
  	
  	
  	
  items:	
  [{
	
  	
  	
  	
  	
  	
  	
  	
  xtype:	
  'list',
	
  	
  	
  	
  	
  	
  	
  	
  store:	
  store,
	
  	
  	
  	
  	
  	
  	
  	
  itemTpl:	
  '{firstName}	
  {lastName}',
	
  	
  	
  	
  	
  	
  	
  	
  grouped:	
  true,
	
  	
  	
  	
  	
  	
  	
  	
  indexBar:	
  true
	
  	
  	
  	
  }]
});
A more complex app
Pre-requisites
                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 Valley App




http://jamesgpearce.github.com/ValleyGuide
           http://sencha.com/x/e8
https://github.com/
jamesgpearce/ValleyGuide
Development sequence
1 Structure the app   5 Detail page

2 Layout the UI       6 Add a map

3 Model the data      7 Customize theme

4 Load the list
1 Structure the app
index.html

<!doctype	
  html>
<html>
	
  	
  	
  	
  <head>
	
  	
  	
  	
  	
  	
  	
  	
  <title>Valley	
  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
var	
  va	
  =	
  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
va.viewport
The app...
var	
  va	
  =	
  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:	
  'Valley	
  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=Silicon%20Valley
A mobile web app for Android in 75 minutes
Apigee console
"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=Silicon%20Valley',
	
  	
  	
  	
  	
  	
  	
  	
  reader:	
  {
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  type:	
  'json',
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  root:	
  'businesses'
	
  	
  	
  	
  	
  	
  	
  	
  }
	
  	
  	
  	
  }
});
4 Load the list
this.listCardDataList	
  =	
  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}"/>&nbsp;'	
  +
	
  	
  	
  	
  '<small>{address1}</small>'
Hack the style
<style>
	
  	
  	
  	
  .photo	
  {
	
  	
  	
  	
  	
  	
  	
  	
  float:left;
	
  	
  	
  	
  	
  	
  	
  	
  margin:0	
  8px	
  16px	
  0;
	
  	
  	
  	
  	
  	
  	
  	
  border:1px	
  solid	
  #ccc;
	
  	
  	
  	
  }
</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
this.listCardDataList	
  =	
  new	
  Ext.List({
	
  	
  	
  	
  store:	
  this.data.restaurants,
	
  	
  	
  	
  itemTpl:	
  ...
	
  	
  	
  	
  listeners:	
  {
	
  	
  	
  	
  	
  	
  	
  	
  selectionchange:	
  function	
  (selectionModel,	
  records)	
  {
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  if	
  (records[0])	
  {
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  va.viewport.setActiveItem(va.detailCard);
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  va.detailCardToolbar.setTitle(
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  records[0].get('name')
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  );
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  }
	
  	
  	
  	
  	
  	
  	
  	
  }
	
  	
  	
  	
  }
});
List button
this.detailCardToolbar	
  =	
  new	
  Ext.Toolbar({
	
  	
  	
  	
  dock:	
  'top',
	
  	
  	
  	
  title:	
  '...',
	
  	
  	
  	
  items:	
  [{
	
  	
  	
  	
  	
  	
  	
  	
  text:	
  'List',
	
  	
  	
  	
  	
  	
  	
  	
  handler:	
  function	
  ()	
  {
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  va.viewport.setActiveItem(
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  va.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
va.viewport
6 Add a map
va.viewport.setActiveItem(va.detailTabs);

...

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

this.detailTabs	
  =	
  new	
  Ext.TabPanel({
	
  	
  	
  	
  dockedItems:	
  [this.detailCardToolbar],
	
  	
  	
  	
  items:	
  [this.detailCard,	
  this.detailMap]
});

va.viewport	
  =	
  new	
  Ext.Panel({
	
  	
  	
  	
  layout:	
  'card',
	
  	
  	
  	
  fullscreen:	
  true,
	
  	
  	
  	
  cardSwitchAnimation:	
  '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	
  =	
  va.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:	
  [this.detailCardToolbar],
	
  	
  	
  	
  items:	
  [this.detailCard,	
  this.detailMap],

	
  	
  	
  	
  tabBar:	
  {
	
  	
  	
  	
  	
  	
  	
  	
  ui:	
  'light',
	
  	
  	
  	
  	
  	
  	
  	
  layout:	
  {	
  pack:	
  'center'	
  }
	
  	
  	
  	
  }

});
7 Customize theme
http://sass-lang.com/
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
config.rb
dir	
  =	
  File.dirname(__FILE__)

load	
  File.join(dir,	
  'themes')

#	
  Compass	
  configurations
sass_path	
  	
  	
  	
  =	
  dir
css_path	
  	
  	
  	
  	
  =	
  dir
environment	
  	
  =	
  :production
output_style	
  =	
  :compressed

#	
  or	
  :nested,	
  :expanded,	
  :compact
Compile...
$>	
  cd	
  theming

$>	
  compass	
  compile	
  valley.scss
	
  	
  	
  	
  	
  	
  create	
  valley.css


$>	
  compass	
  compile	
  valley.scss
	
  	
  	
  	
  	
  	
  identical	
  valley.css


[edit	
  file]
$>	
  compass	
  compile	
  valley.scss
	
  	
  	
  	
  	
  	
  overwrite	
  valley.css


$>	
  compass	
  watch	
  valley.scss
	
  	
  	
  	
  	
  	
  >>>	
  Change	
  detected	
  to:	
  valley.scss
	
  	
  	
  	
  	
  	
  overwrite	
  valley.css
Link...
<link	
  href="theming/valley.css"	
  rel="stylesheet"
	
  	
  	
  	
  	
  	
  type="text/css"	
  />
valley.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;
...
valley.scss
$base-­‐color:	
  #9D9E00;
$base-­‐gradient:	
  none;
$include-­‐default-­‐icons:	
  false;
$include-­‐border-­‐radius:	
  false;

@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;
A mobile web app for Android in 75 minutes
Choose own icons
$base-­‐color:	
  #9D9E00;
$include-­‐default-­‐icons:	
  false;

@import	
  'sencha-­‐touch/default/all';

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

@include	
  pictos-­‐iconmask('briefcase1');
@include	
  pictos-­‐iconmask('heart');
@include	
  pictos-­‐iconmask('music1');
http://dev.sencha.com/deploy/touch/docs/theme/
Sass is a superset of CSS
$base-­‐color:	
  #9D9E00;
$include-­‐default-­‐icons:	
  false;

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

.photo	
  {
	
  	
  	
  	
  float:left;
	
  	
  	
  	
  margin:0	
  8px	
  16px	
  0;
	
  	
  	
  	
  border:1px	
  solid	
  #ccc;
}
...
Done?
Development sequence
1 Structure the app   5 Detail page

2 Layout the UI       6 Add a map

3 Model the data      7 Customize theme

4 Load the list
A ‘responsive’ app...




http://sencha.com/x/cv
And if we’d had time...
 Add to home screen
 - Icon
 - Splash screen

 Hybrid app with device APIs




 http://sencha.com/x/cy
 http://sencha.com/x/de
O ine app
$>	
  phantomjs	
  confess.js	
  http://github/valley/

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/valley.css

NETWORK:
*


http://github.com/jamesgpearce/confess
O ine data
Taking Yelp data o ine

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

Detecting network connection changes




http://sencha.com/x/df
Weinre




http://phonegap.github.com/weinre
built with

Apps vs Web technology
James Pearce
@ jamespearce

Weitere ähnliche Inhalte

Was ist angesagt?

20150812 4시간만에 따라해보는 windows 10 앱 개발
20150812  4시간만에 따라해보는 windows 10 앱 개발20150812  4시간만에 따라해보는 windows 10 앱 개발
20150812 4시간만에 따라해보는 windows 10 앱 개발영욱 김
 
Front End Good Practices
Front End Good PracticesFront End Good Practices
Front End Good PracticesHernan Mammana
 
Html 5, a gentle introduction
Html 5, a gentle introductionHtml 5, a gentle introduction
Html 5, a gentle introductionDiego Scataglini
 
Once Source to Rule Them All
Once Source to Rule Them AllOnce Source to Rule Them All
Once Source to Rule Them AllDavid Yeiser
 
Html5, a gentle introduction
Html5, a gentle introduction Html5, a gentle introduction
Html5, a gentle introduction Diego Scataglini
 
JavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern ImplementationJavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern Implementationdavejohnson
 
Creating GUI Component APIs in Angular and Web Components
Creating GUI Component APIs in Angular and Web ComponentsCreating GUI Component APIs in Angular and Web Components
Creating GUI Component APIs in Angular and Web ComponentsRachael L Moore
 
Yahoo Mobile Widgets
Yahoo Mobile WidgetsYahoo Mobile Widgets
Yahoo Mobile WidgetsJose Palazon
 
Javascript coding-and-design-patterns
Javascript coding-and-design-patternsJavascript coding-and-design-patterns
Javascript coding-and-design-patternsHernan Mammana
 
Jquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript BasicsJquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript BasicsEPAM Systems
 
Mobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScriptMobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScriptfranksvalli
 
WPF (Windows Presentation Foundation Unit 01)
WPF (Windows Presentation Foundation Unit 01)WPF (Windows Presentation Foundation Unit 01)
WPF (Windows Presentation Foundation Unit 01)Prashanth Shivakumar
 
Advisor Jumpstart: JavaScript
Advisor Jumpstart: JavaScriptAdvisor Jumpstart: JavaScript
Advisor Jumpstart: JavaScriptdominion
 
HTML5 - Introduction
HTML5 - IntroductionHTML5 - Introduction
HTML5 - IntroductionDavy De Pauw
 

Was ist angesagt? (20)

Intro to html 5
Intro to html 5Intro to html 5
Intro to html 5
 
20150812 4시간만에 따라해보는 windows 10 앱 개발
20150812  4시간만에 따라해보는 windows 10 앱 개발20150812  4시간만에 따라해보는 windows 10 앱 개발
20150812 4시간만에 따라해보는 windows 10 앱 개발
 
Wpf Introduction
Wpf IntroductionWpf Introduction
Wpf Introduction
 
Front End Good Practices
Front End Good PracticesFront End Good Practices
Front End Good Practices
 
Html 5, a gentle introduction
Html 5, a gentle introductionHtml 5, a gentle introduction
Html 5, a gentle introduction
 
Once Source to Rule Them All
Once Source to Rule Them AllOnce Source to Rule Them All
Once Source to Rule Them All
 
Html5, a gentle introduction
Html5, a gentle introduction Html5, a gentle introduction
Html5, a gentle introduction
 
JavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern ImplementationJavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern Implementation
 
WPF Fundamentals
WPF FundamentalsWPF Fundamentals
WPF Fundamentals
 
Creating GUI Component APIs in Angular and Web Components
Creating GUI Component APIs in Angular and Web ComponentsCreating GUI Component APIs in Angular and Web Components
Creating GUI Component APIs in Angular and Web Components
 
BluePrint Mobile Framework
BluePrint Mobile FrameworkBluePrint Mobile Framework
BluePrint Mobile Framework
 
Yahoo Mobile Widgets
Yahoo Mobile WidgetsYahoo Mobile Widgets
Yahoo Mobile Widgets
 
Javascript coding-and-design-patterns
Javascript coding-and-design-patternsJavascript coding-and-design-patterns
Javascript coding-and-design-patterns
 
Layout
LayoutLayout
Layout
 
Bootstrap 4 ppt
Bootstrap 4 pptBootstrap 4 ppt
Bootstrap 4 ppt
 
Jquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript BasicsJquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript Basics
 
Mobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScriptMobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScript
 
WPF (Windows Presentation Foundation Unit 01)
WPF (Windows Presentation Foundation Unit 01)WPF (Windows Presentation Foundation Unit 01)
WPF (Windows Presentation Foundation Unit 01)
 
Advisor Jumpstart: JavaScript
Advisor Jumpstart: JavaScriptAdvisor Jumpstart: JavaScript
Advisor Jumpstart: JavaScript
 
HTML5 - Introduction
HTML5 - IntroductionHTML5 - Introduction
HTML5 - Introduction
 

Andere mochten auch

Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & An...
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & An...Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & An...
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & An...CITYTECH, Inc.
 
Android Web app
Android Web app Android Web app
Android Web app Sumit Kumar
 
Unity 5: First-Person Tutorial
Unity 5: First-Person TutorialUnity 5: First-Person Tutorial
Unity 5: First-Person TutorialShahed Chowdhuri
 
What is Android OS in ppt ?
What is Android OS in ppt ? What is Android OS in ppt ?
What is Android OS in ppt ? SoonTips.com
 
Android OS Presentation
Android OS PresentationAndroid OS Presentation
Android OS Presentationhession25819
 
My presentation on Android in my college
My presentation on Android in my collegeMy presentation on Android in my college
My presentation on Android in my collegeSneha Lata
 
Android seminar-presentation
Android seminar-presentationAndroid seminar-presentation
Android seminar-presentationconnectshilpa
 
Progressive Web Apps: o melhor da Web appficada
Progressive Web Apps: o melhor da Web appficadaProgressive Web Apps: o melhor da Web appficada
Progressive Web Apps: o melhor da Web appficadaCaelum
 
Presentation on Android operating system
Presentation on Android operating systemPresentation on Android operating system
Presentation on Android operating systemSalma Begum
 
Introduction to Data Center Network Architecture
Introduction to Data Center Network ArchitectureIntroduction to Data Center Network Architecture
Introduction to Data Center Network ArchitectureAnkita Mahajan
 

Andere mochten auch (14)

Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & An...
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & An...Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & An...
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & An...
 
Android Web app
Android Web app Android Web app
Android Web app
 
Unity 5: First-Person Tutorial
Unity 5: First-Person TutorialUnity 5: First-Person Tutorial
Unity 5: First-Person Tutorial
 
Android Workshop PPT
Android Workshop PPTAndroid Workshop PPT
Android Workshop PPT
 
What is Android OS in ppt ?
What is Android OS in ppt ? What is Android OS in ppt ?
What is Android OS in ppt ?
 
Android OS Presentation
Android OS PresentationAndroid OS Presentation
Android OS Presentation
 
My presentation on Android in my college
My presentation on Android in my collegeMy presentation on Android in my college
My presentation on Android in my college
 
Android seminar ppt
Android seminar pptAndroid seminar ppt
Android seminar ppt
 
Android seminar-presentation
Android seminar-presentationAndroid seminar-presentation
Android seminar-presentation
 
Progressive Web Apps: o melhor da Web appficada
Progressive Web Apps: o melhor da Web appficadaProgressive Web Apps: o melhor da Web appficada
Progressive Web Apps: o melhor da Web appficada
 
Android ppt
Android pptAndroid ppt
Android ppt
 
Presentation on Android operating system
Presentation on Android operating systemPresentation on Android operating system
Presentation on Android operating system
 
Introduction to Data Center Network Architecture
Introduction to Data Center Network ArchitectureIntroduction to Data Center Network Architecture
Introduction to Data Center Network Architecture
 
Android ppt
Android ppt Android ppt
Android ppt
 

Ähnlich wie A mobile web app for Android in 75 minutes

Bd conf sencha touch workshop
Bd conf sencha touch workshopBd conf sencha touch workshop
Bd conf sencha touch workshopJames Pearce
 
Building a Mobile App with Sencha Touch
Building a Mobile App with Sencha TouchBuilding a Mobile App with Sencha Touch
Building a Mobile App with Sencha TouchJames Pearce
 
Html5 and web technology update
Html5 and web technology updateHtml5 and web technology update
Html5 and web technology updateDoug Domeny
 
Building AOL's High Performance, Enterprise Wide Mail Application With Silver...
Building AOL's High Performance, Enterprise Wide Mail Application With Silver...Building AOL's High Performance, Enterprise Wide Mail Application With Silver...
Building AOL's High Performance, Enterprise Wide Mail Application With Silver...goodfriday
 
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJSMozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJSRobert Nyman
 
Sencha Touch basic concepts, pros and cons
Sencha Touch basic concepts, pros and consSencha Touch basic concepts, pros and cons
Sencha Touch basic concepts, pros and consOleg Gomozov
 
Itemscript, a specification for RESTful JSON integration
Itemscript, a specification for RESTful JSON integrationItemscript, a specification for RESTful JSON integration
Itemscript, a specification for RESTful JSON integration{item:foo}
 
Mobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhoneMobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhoneMohammad Shaker
 
How to use lekhoniya.pdf
How to use lekhoniya.pdfHow to use lekhoniya.pdf
How to use lekhoniya.pdfSubhamMandal40
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?Remy Sharp
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)Igor Bronovskyy
 
CTS Conference Web 2.0 Tutorial Part 2
CTS Conference Web 2.0 Tutorial Part 2CTS Conference Web 2.0 Tutorial Part 2
CTS Conference Web 2.0 Tutorial Part 2Geoffrey Fox
 
An Introduction to Sencha Touch
An Introduction to Sencha TouchAn Introduction to Sencha Touch
An Introduction to Sencha TouchJames Pearce
 
Developing your first application using FIWARE
Developing your first application using FIWAREDeveloping your first application using FIWARE
Developing your first application using FIWAREFIWARE
 
beyond tellerrand: Mobile Apps with JavaScript – There's More Than Web
beyond tellerrand: Mobile Apps with JavaScript – There's More Than Webbeyond tellerrand: Mobile Apps with JavaScript – There's More Than Web
beyond tellerrand: Mobile Apps with JavaScript – There's More Than WebHeiko Behrens
 

Ähnlich wie A mobile web app for Android in 75 minutes (20)

Bd conf sencha touch workshop
Bd conf sencha touch workshopBd conf sencha touch workshop
Bd conf sencha touch workshop
 
Building a Mobile App with Sencha Touch
Building a Mobile App with Sencha TouchBuilding a Mobile App with Sencha Touch
Building a Mobile App with Sencha Touch
 
Html5 and web technology update
Html5 and web technology updateHtml5 and web technology update
Html5 and web technology update
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
 
Building AOL's High Performance, Enterprise Wide Mail Application With Silver...
Building AOL's High Performance, Enterprise Wide Mail Application With Silver...Building AOL's High Performance, Enterprise Wide Mail Application With Silver...
Building AOL's High Performance, Enterprise Wide Mail Application With Silver...
 
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJSMozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
 
Sencha Touch basic concepts, pros and cons
Sencha Touch basic concepts, pros and consSencha Touch basic concepts, pros and cons
Sencha Touch basic concepts, pros and cons
 
Itemscript, a specification for RESTful JSON integration
Itemscript, a specification for RESTful JSON integrationItemscript, a specification for RESTful JSON integration
Itemscript, a specification for RESTful JSON integration
 
Mobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhoneMobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhone
 
How to use lekhoniya.pdf
How to use lekhoniya.pdfHow to use lekhoniya.pdf
How to use lekhoniya.pdf
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
 
CTS Conference Web 2.0 Tutorial Part 2
CTS Conference Web 2.0 Tutorial Part 2CTS Conference Web 2.0 Tutorial Part 2
CTS Conference Web 2.0 Tutorial Part 2
 
An Introduction to Sencha Touch
An Introduction to Sencha TouchAn Introduction to Sencha Touch
An Introduction to Sencha Touch
 
Developing your first application using FIWARE
Developing your first application using FIWAREDeveloping your first application using FIWARE
Developing your first application using FIWARE
 
Wt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technologyWt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technology
 
Wt unit 2 ppts client side technology
Wt unit 2 ppts client side technologyWt unit 2 ppts client side technology
Wt unit 2 ppts client side technology
 
beyond tellerrand: Mobile Apps with JavaScript – There's More Than Web
beyond tellerrand: Mobile Apps with JavaScript – There's More Than Webbeyond tellerrand: Mobile Apps with JavaScript – There's More Than Web
beyond tellerrand: Mobile Apps with JavaScript – There's More Than Web
 
Nodejs.meetup
Nodejs.meetupNodejs.meetup
Nodejs.meetup
 
Ext JS Introduction
Ext JS IntroductionExt JS Introduction
Ext JS Introduction
 

Mehr von James Pearce

Mobile Device APIs
Mobile Device APIsMobile Device APIs
Mobile Device APIsJames Pearce
 
The City Bars App with Sencha Touch 2
The City Bars App with Sencha Touch 2The City Bars App with Sencha Touch 2
The City Bars App with Sencha Touch 2James Pearce
 
An Intro to Mobile HTML5
An Intro to Mobile HTML5An Intro to Mobile HTML5
An Intro to Mobile HTML5James Pearce
 
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 RevolutionA Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 RevolutionJames Pearce
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1James Pearce
 
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2James Pearce
 
Cross platform mobile web apps
Cross platform mobile web appsCross platform mobile web apps
Cross platform mobile web appsJames Pearce
 
City bars workshop
City bars workshopCity bars workshop
City bars workshopJames Pearce
 
San Diego Hackathon
San Diego HackathonSan Diego Hackathon
San Diego HackathonJames Pearce
 
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web AppsBuilding Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web AppsJames Pearce
 
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGapCreating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGapJames Pearce
 
Source Dev Con Keynote
Source Dev Con KeynoteSource Dev Con Keynote
Source Dev Con KeynoteJames Pearce
 
Building Cloud-Based Cross-Platform Mobile Web Apps
Building Cloud-Based Cross-Platform Mobile Web AppsBuilding Cloud-Based Cross-Platform Mobile Web Apps
Building Cloud-Based Cross-Platform Mobile Web AppsJames Pearce
 
Building cross platform mobile web apps
Building cross platform mobile web appsBuilding cross platform mobile web apps
Building cross platform mobile web appsJames Pearce
 
Building tomorrow's web with today's tools
Building tomorrow's web with today's toolsBuilding tomorrow's web with today's tools
Building tomorrow's web with today's toolsJames Pearce
 
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applicationsHTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applicationsJames Pearce
 
Sencha Touch for Rubyists
Sencha Touch for RubyistsSencha Touch for Rubyists
Sencha Touch for RubyistsJames Pearce
 
Serving Mobile Apps from Content Management Systems
Serving Mobile Apps from Content Management SystemsServing Mobile Apps from Content Management Systems
Serving Mobile Apps from Content Management SystemsJames Pearce
 

Mehr von James Pearce (19)

Mobile Device APIs
Mobile Device APIsMobile Device APIs
Mobile Device APIs
 
The City Bars App with Sencha Touch 2
The City Bars App with Sencha Touch 2The City Bars App with Sencha Touch 2
The City Bars App with Sencha Touch 2
 
An Intro to Mobile HTML5
An Intro to Mobile HTML5An Intro to Mobile HTML5
An Intro to Mobile HTML5
 
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 RevolutionA Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 Revolution
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
 
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2
 
Cross platform mobile web apps
Cross platform mobile web appsCross platform mobile web apps
Cross platform mobile web apps
 
City bars workshop
City bars workshopCity bars workshop
City bars workshop
 
San Diego Hackathon
San Diego HackathonSan Diego Hackathon
San Diego Hackathon
 
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web AppsBuilding Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web Apps
 
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGapCreating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGap
 
Theming and Sass
Theming and SassTheming and Sass
Theming and Sass
 
Source Dev Con Keynote
Source Dev Con KeynoteSource Dev Con Keynote
Source Dev Con Keynote
 
Building Cloud-Based Cross-Platform Mobile Web Apps
Building Cloud-Based Cross-Platform Mobile Web AppsBuilding Cloud-Based Cross-Platform Mobile Web Apps
Building Cloud-Based Cross-Platform Mobile Web Apps
 
Building cross platform mobile web apps
Building cross platform mobile web appsBuilding cross platform mobile web apps
Building cross platform mobile web apps
 
Building tomorrow's web with today's tools
Building tomorrow's web with today's toolsBuilding tomorrow's web with today's tools
Building tomorrow's web with today's tools
 
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applicationsHTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
 
Sencha Touch for Rubyists
Sencha Touch for RubyistsSencha Touch for Rubyists
Sencha Touch for Rubyists
 
Serving Mobile Apps from Content Management Systems
Serving Mobile Apps from Content Management SystemsServing Mobile Apps from Content Management Systems
Serving Mobile Apps from Content Management Systems
 

Kürzlich hochgeladen

Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 

Kürzlich hochgeladen (20)

Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 

A mobile web app for Android in 75 minutes

  • 1. A Mobile Web App for Android in 75 Minutes @ jamespearce
  • 2. Single device Multi device Sedentary user Mobile user * Declarative Imperative Thin client Thick client Documents Applications * or supine, or sedentary, or passive, or...
  • 3. A badge for all these ways the web is changing
  • 4. WebFont Video Audio Graphics Device Access Camera CSS Styling & Layout Network Location HTTP JavaScript Contacts AJAX SMS Semantic HTML Events Orientation Sockets File Systems Workers & Cross-App Gyro Databases Parallel SSL Messaging App Caches Processing (all the elements of a modern application platform)
  • 6. A JavaScript framework for building rich mobile apps with web standards
  • 8. Components Lists
  • 10. Forms
  • 20. <!DOCTYPE  html> <html>    <head>            <title>Hello  World</title>        <script  src="lib/touch/sencha-­‐touch.js"></script>        <script  src="app/app.js"></script>                <link  href="lib/touch/resources/css/sencha-­‐touch.css"                      rel="stylesheet"  type="text/css"  />        </head>    <body></body> </html>
  • 21. 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!'                });        } });
  • 23. Lists var  list  =  new  Ext.List({        store:  store,        itemTpl:  '{firstName}  {lastName}',        grouped:  true,        indexBar:  true });
  • 24. Nested Lists var  list  =  new  Ext.NestedList({        store:  store,        displayField:  'name',        title:  'My  List',        updateTitleText:  true,        getDetailCard:                function(record,  parent)  {..} });
  • 25. Carousels var  carousel  =  new  Ext.Carousel({        direction:  'horizontal',        indicator:  true,        items:  [                ..        ] });
  • 26. Common patterns 1 var  list  =  new  Ext.List({        store:  store,        itemTpl:  '{firstName}  {lastName}',        grouped:  true,        indexBar:  true }); var  panel  =  new  Ext.Panel({        fullscreen:  true,        layout:  'fit',        items:  [list] });
  • 27. Common patterns 2 var  panel  =  new  Ext.Panel({        fullscreen:  true,        layout:  'fit',        items:  [{                xtype:  'list',                store:  store,                itemTpl:  '{firstName}  {lastName}',                grouped:  true,                indexBar:  true        }] });
  • 29. Pre-requisites 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/
  • 32. Development sequence 1 Structure the app 5 Detail page 2 Layout the UI 6 Add a map 3 Model the data 7 Customize theme 4 Load the list
  • 34. index.html <!doctype  html> <html>        <head>                <title>Valley  Guide</title>        </head> <body></body> </html>
  • 35. 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"  />
  • 36. app.js var  va  =  new  Ext.Application({        launch:  function()  {                this.viewport  =  new  Ext.Panel({                        layout:  'card',                        fullscreen:  true,                        html:  "Hello  world!"                        });        } });
  • 37. 2 Layout the UI toolbar toolbar dataList listCard detailCard va.viewport
  • 38. The app... var  va  =  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]                });        } });
  • 39. listCard this.listCardToolbar  =  new  Ext.Toolbar({        dock:  'top',        title:  'Valley  Guide' }); this.listCardDataList  =  new  Ext.List({        store:  null,        itemTpl:  '' }); this.listCard  =  new  Ext.Panel({        dockedItems:  [this.listCardToolbar],        items:  [this.listCardDataList],        layout:  'fit' });
  • 40. detailCard this.detailCardToolbar  =  new  Ext.Toolbar({        dock:  'top',        title:  '...' }); this.detailCard  =  new  Ext.Panel({        dockedItems:  [this.detailCardToolbar] });
  • 41. 3 Model the data http://api.yelp.com/business_review_search ?ywsid=YELP_KEY &term=Restaurants &location=Silicon%20Valley
  • 44. "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":  [            ...",          ],          ...
  • 46. 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"},        ] });
  • 47. 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=Silicon%20Valley',                reader:  {                        type:  'json',                        root:  'businesses'                }        } });
  • 48. 4 Load the list this.listCardDataList  =  new  Ext.List({        store:  this.data.restaurants,        itemTpl:  '{name}' });
  • 49. A more interesting template itemTpl:        '<img  class="photo"  src="{photo_url}"  width="40"  height="40"/>'  +        '{name}<br/>'  +        '<img  src="{rating_img_url_small}"/>&nbsp;'  +        '<small>{address1}</small>'
  • 50. Hack the style <style>        .photo  {                float:left;                margin:0  8px  16px  0;                border:1px  solid  #ccc;        } </style>
  • 51. Get images resized... ...width="40"  height="40"  />
  • 53. 5 Detail page this.listCardDataList  =  new  Ext.List({        store:  this.data.restaurants,        itemTpl:  ...        listeners:  {                selectionchange:  function  (selectionModel,  records)  {                        if  (records[0])  {                                va.viewport.setActiveItem(va.detailCard);                                va.detailCardToolbar.setTitle(                                        records[0].get('name')                                );                        }                }        } });
  • 54. List button this.detailCardToolbar  =  new  Ext.Toolbar({        dock:  'top',        title:  '...',        items:  [{                text:  'List',                handler:  function  ()  {                        va.viewport.setActiveItem(                                va.listCard,                                {type:  'slide',  direction:  'right'}                        );                }        }] });
  • 55. 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>'        ] });
  • 56. A little styling .x-­‐html  h2  {        margin-­‐bottom:0; } .phone,  .link  {        clear:both;        font-­‐weight:bold;        display:block;        text-­‐align:center;        margin-­‐top:8px; }
  • 57. 6 Add a map toolbar toolbar dataList dataList detailCard listCard detailTabs va.viewport
  • 58. 6 Add a map va.viewport.setActiveItem(va.detailTabs); ... this.detailMap  =  new  Ext.Map({}); this.detailTabs  =  new  Ext.TabPanel({        dockedItems:  [this.detailCardToolbar],        items:  [this.detailCard,  this.detailMap] }); va.viewport  =  new  Ext.Panel({        layout:  'card',        fullscreen:  true,        cardSwitchAnimation:  'slide',        items:  [this.listCard,  this.detailTabs] });
  • 59. Tab titles this.detailCard  =  new  Ext.Panel({        ...        title:  'Info' }); this.detailMap  =  new  Ext.Map({        title:  'Map' });
  • 60. Google Maps script <script  type="text/javascript"    src="http://maps.google.com/maps/api/js?sensor=true"> </script>
  • 61. Update the map location selectionchange:  function  (selectionModel,  records)  {        ...        var  map  =  va.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()        );
  • 62. Improve the tab bar this.detailTabs  =  new  Ext.TabPanel({        dockedItems:  [this.detailCardToolbar],        items:  [this.detailCard,  this.detailMap],        tabBar:  {                ui:  'light',                layout:  {  pack:  'center'  }        } });
  • 65. 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; }
  • 66. $> sudo gem install compass http://rubyinstaller.org/
  • 67. $> 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)
  • 68. Start by copying sencha-touch.scss
  • 69. config.rb dir  =  File.dirname(__FILE__) load  File.join(dir,  'themes') #  Compass  configurations sass_path        =  dir css_path          =  dir environment    =  :production output_style  =  :compressed #  or  :nested,  :expanded,  :compact
  • 70. Compile... $>  cd  theming $>  compass  compile  valley.scss            create  valley.css $>  compass  compile  valley.scss            identical  valley.css [edit  file] $>  compass  compile  valley.scss            overwrite  valley.css $>  compass  watch  valley.scss            >>>  Change  detected  to:  valley.scss            overwrite  valley.css
  • 71. Link... <link  href="theming/valley.css"  rel="stylesheet"            type="text/css"  />
  • 72. valley.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; ...
  • 73. valley.scss $base-­‐color:  #9D9E00; $base-­‐gradient:  none; $include-­‐default-­‐icons:  false; $include-­‐border-­‐radius:  false; @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;
  • 75. Choose own icons $base-­‐color:  #9D9E00; $include-­‐default-­‐icons:  false; @import  'sencha-­‐touch/default/all'; @include  sencha-­‐panel; @include  sencha-­‐buttons; ... @include  pictos-­‐iconmask('briefcase1'); @include  pictos-­‐iconmask('heart'); @include  pictos-­‐iconmask('music1');
  • 77. Sass is a superset of CSS $base-­‐color:  #9D9E00; $include-­‐default-­‐icons:  false; @import  'sencha-­‐touch/default/all'; ... .photo  {        float:left;        margin:0  8px  16px  0;        border:1px  solid  #ccc; } ...
  • 78. Done?
  • 79. Development sequence 1 Structure the app 5 Detail page 2 Layout the UI 6 Add a map 3 Model the data 7 Customize theme 4 Load the list
  • 81. And if we’d had time... Add to home screen - Icon - Splash screen Hybrid app with device APIs http://sencha.com/x/cy http://sencha.com/x/de
  • 82. O ine app $>  phantomjs  confess.js  http://github/valley/ 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/valley.css NETWORK: * http://github.com/jamesgpearce/confess
  • 83. O ine data Taking Yelp data o ine Taking images o ine - src.sencha.io to generate cross-origin B64 Detecting network connection changes http://sencha.com/x/df
  • 85. built with Apps vs Web technology