Your SlideShare is downloading. ×
0
Create A Mobile Web App          with     Sencha Touch       @ jamespearce
Single device            Multi deviceSedentary user            Mobile user                                 *Declarative   ...
A badge for all these ways   the web is changing
HTML5 is a new version of HTML4, XHTML1, and DOM Level 2 HTML addressing many of the issues of those specifications while a...
What is an app?
Consumption vs Creation      Linkability    User Experience     Architecture
WebFont        Video      Audio     GraphicsDevice Access  Camera                   CSS Styling & Layout                Ne...
IntroducingSencha 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 Sinkhttp://sencha.com/x/5e
Hello World
http://sencha.com/x/d5
<!DOCTYPE	  html><html>	  	  <head>	  	  	  	  	  	  <title>Hello	  World</title>	  	  	  	  <script	  src="lib/touch/senc...
new	  Ext.Application({	  	  	  	  launch:	  function()	  {	  	  	  	  	  	  	  	  new	  Ext.Panel({	  	  	  	  	  	  	  	...
Listsvar	  list	  =	  new	  Ext.List({	  	  	  	  store:	  store,	  	  	  	  itemTpl:	  {firstName}	  {lastName},	  	  	  ...
Nested Listsvar	  list	  =	  new	  Ext.NestedList({	  	  	  	  store:	  store,	  	  	  	  displayField:	  name,	  	  	  	 ...
Carouselsvar	  carousel	  =	  new	  Ext.Carousel({	  	  	  	  direction:	  horizontal,	  	  	  	  indicator:	  true,	  	  ...
Sheetsvar	  sheet	  =	  new	  Ext.ActionSheet({	  	  	  	  items:	  [	  	  	  	  	  	  	  	  {	  	  	  	  	  	  	  	  	  	...
Common patterns      1var	  list	  =	  new	  Ext.List({	  	  	  	  store:	  store,	  	  	  	  itemTpl:	  {firstName}	  {la...
Common patterns      2var	  panel	  =	  new	  Ext.Panel({	  	  	  	  fullscreen:	  true,	  	  	  	  layout:	  fit,	  	  	 ...
A more complex app
Pre-requisites                Sencha Touch SDK:        http://sencha.com/products/touch/              Yelp developer API k...
The Valley Apphttp://senchalearn.github.com/valley       http://sencha.com/x/dr
https://github.com/ senchalearn/valley
Development sequence1 Structure the app   5 Detail page2 Layout the UI       6 Add a map3 Model the data      7 More data4...
1 Structure the app
index.html<!doctype	  html><html>	  	  	  	  <head>	  	  	  	  	  	  	  	  <title>Valley	  Guide</title>	  	  	  	  </head...
index.html<script	  src="lib/touch/sencha-­‐touch.js"></script><script	  src="app/yelp.js"></script><script	  src="app/app...
app.jsva	  =	  new	  Ext.Application({	  	  	  	  launch:	  function()	  {	  	  	  	  	  	  	  	  this.viewport	  =	  new	...
2 Layout the UI   toolbar                   toolbar   dataList   listCard                 detailCard              na.viewp...
The app...var	  va	  =	  new	  Ext.Application({	  	  	  	  launch:	  function()	  {	  	  	  	  	  	  	  	  this.listCard	...
listCardthis.listCardToolbar	  =	  new	  Ext.Toolbar({	  	  	  	  dock:	  top,	  	  	  	  title:	  Valley	  Guide});this.l...
detailCardthis.detailCardToolbar	  =	  new	  Ext.Toolbar({	  	  	  	  dock:	  top,	  	  	  	  title:	  ...});this.detailCa...
3 Model the datahttp://api.yelp.com/business_review_search?ywsid=YELP_KEY&term=Restaurants&location=Silicon%20Valley
Apigee console
"businesses":	  [	  	  	  	  {	  	  	  	  	  "rating_img_url"	  :	  "http://media4.px.yelpcdn.com/...",	  	  	  	  	  "cou...
A data namespacethis.data	  =	  {};
The ‘Business’ modelthis.data.Business	  =	  Ext.regModel(,	  {	  	  	  	  fields:	  [	  	  	  	  	  	  	  	  {name:	  "id...
A store of those modelsthis.data.restaurants	  =	  new	  Ext.data.Store({	  	  	  	  model:	  this.data.Business,	  	  	  ...
4 Load the listthis.listCardDataList	  =	  new	  Ext.List({	  	  	  	  store:	  this.data.restaurants,	  	  	  	  itemTpl:...
A more interesting templateitemTpl:	  	  	  	  <img	  class="photo"	  src="{photo_url}"	  width="40"	  height="40"/>	  +	 ...
Hack the style<style>	  	  	  	  .photo	  {	  	  	  	  	  	  	  	  float:left;	  	  	  	  	  	  	  	  margin:0	  8px	  16p...
Get images resized...       ...width="40"	  height="40"	  />
...in the cloudsrc="http://src.sencha.io/40/{photo_url}"	  width="40"	  height="40"/>
5 Detail pagethis.listCardDataList	  =	  new	  Ext.List({	  	  	  	  store:	  this.data.restaurants,	  	  	  	  itemTpl:	 ...
A back buttonthis.detailCardToolbar	  =	  new	  Ext.Toolbar({	  	  	  	  dock:	  top,	  	  	  	  title:	  ...,	  	  	  	  ...
Detail templatethis.detailCard	  =	  new	  Ext.Panel({	  	  	  	  dockedItems:	  [this.detailCardToolbar],	  	  	  	  styl...
A little styling.x-­‐html	  h2	  {	  	  	  	  margin-­‐bottom:0;}.phone,	  .link	  {	  	  	  	  clear:both;	  	  	  	  fon...
6 Add a map      toolbar     toolbar      dataList   dataList                 detailCard      listCard   detailTabsva.view...
6 Add a mapva.viewport.setActiveItem(va.detailTabs);...this.detailMap	  =	  new	  Ext.Map({});this.detailTabs	  =	  new	  ...
Tab titlesthis.detailCard	  =	  new	  Ext.Panel({	  	  	  	  ...	  	  	  	  title:	  Info});this.detailMap	  =	  new	  Ext...
Google Maps script<script	  type="text/javascript"	  	  src="http://maps.google.com/maps/api/js?sensor=true"></script>
Update the map locationselectionchange:	  function	  (selectionModel,	  records)	  {	  	  	  	  ...	  	  	  	  var	  map	 ...
Improve the tab barthis.detailTabs	  =	  new	  Ext.TabPanel({	  	  	  	  dockedItems:	  [this.detailCardToolbar],	  	  	  ...
7 More?
More data...[hotels,	  bars,	  restaurants].forEach(	  function	  (type)	  {	  	  	  	  va.data[type]	  =	  new	  Ext.data...
Make list into a ‘class’this.ListCardDataList	  =	  Ext.extend(Ext.List,	  {	  	  	  	  store:	  null,	  	  	  	  itemTpl:...
Instantiate that 3 timesthis.stayCardDataList	  =	  new	  this.ListCardDataList({	  	  	  	  store:	  this.data.hotels});t...
Turn container into tabs toothis.listCard	  =	  new	  Ext.TabPanel({	  	  	  	  items:	  [	  	  	  	  	  	  	  	  this.sta...
And add titles & iconsthis.stayCardDataList	  =	  new	  this.ListCardDataList({	  	  	  	  store:	  this.data.hotels,	  	 ...
Pull-to-refreshthis.ListCardDataList	  =	  Ext.extend(Ext.List,	  {	  	  	  	  ...	  	  	  	  plugins:	  [{	  	  	  	  	  ...
8 Customize theme
http://sass-lang.com/
Variables/* SCSS */                     /* CSS */$blue: #3bbfce;                .content-navigation {$margin: 16px;       ...
$> sudo gem install compass       http://rubyinstaller.org/
$> compass -vCompass 0.11.1 (Antares)Copyright (c) 2008-2011 Chris EppsteinReleased under the MIT License.$> sass -vSass 3...
Start by copying sencha-touch.scss
config.rbdir	  =	  File.dirname(__FILE__)load	  File.join(dir,	  ..,	  lib,	  touch,	  resources,	  themes)#	  Compass	  co...
Compile...$>	  cd	  theming$>	  compass	  compile	  valley.scss	  	  	  	  	  	  create	  valley.css$>	  compass	  compile...
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-­‐...
valley.scss$base-­‐color:	  #9D9E00;@import	  sencha-­‐touch/default/all;@include	  sencha-­‐panel;@include	  sencha-­‐but...
Choose own icons$base-­‐color:	  #9D9E00;$include-­‐default-­‐icons:	  false;@import	  sencha-­‐touch/default/all;@include...
Specify iconClsthis.stayCardDataList	  =	  new	  this.ListCardDataList({	  	  	  	  store:	  this.data.hotels,	  	  	  	  ...
_variables.scss$include-html-style: true;        $base-color: #354F6E;$include-default-icons: true;     $base-gradient: ma...
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...
WebFonts@import	  url(http://fonts.googleapis.com/css?family=Voltaire);.x-­‐toolbar-­‐title	  {	  	  font-­‐family:	  Volt...
Done?
Development sequence1 Structure the app   5 Detail page2 Layout the UI       6 Add a map3 Model the data      7 More data4...
A ‘responsive’ app...http://sencha.com/x/cv
And if we’d had time... Add to home screen - Icon - Splash screen Hybrid app; PhoneGap / NimbleKit - Contacts API - Geoloc...
O ine app$>	  phantomjs	  confess.js	  http://github/valley/CACHE	  MANIFEST#	  This	  manifest	  was	  created	  by	  con...
O ine dataTaking Yelp data o ineTaking images o ine- src.sencha.io to generate cross-origin B64Detecting network connectio...
Weinrehttp://phonegap.github.com/weinre
built withApps vs Web technology
James Pearce@ jamespearce
Create a mobile web app with Sencha Touch
Create a mobile web app with Sencha Touch
Create a mobile web app with Sencha Touch
Create a mobile web app with Sencha Touch
Create a mobile web app with Sencha Touch
Create a mobile web app with Sencha Touch
Upcoming SlideShare
Loading in...5
×

Create a mobile web app with Sencha Touch

11,516

Published on

Published in: Technology, Design
5 Comments
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
11,516
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
325
Comments
5
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "Create a mobile web app with Sencha Touch"

  1. 1. Create A Mobile Web App with Sencha Touch @ jamespearce
  2. 2. Single device Multi deviceSedentary user Mobile user *Declarative ImperativeThin client Thick clientDocuments Applications * or supine, or sedentary, or passive, or...
  3. 3. A badge for all these ways the web is changing
  4. 4. HTML5 is a new version of HTML4, XHTML1, and DOM Level 2 HTML addressing many of the issues of those specifications while at the same time enhancing (X)HTMLto more adequately address Web applications. - WHATWG Wiki
  5. 5. What is an app?
  6. 6. Consumption vs Creation Linkability User Experience Architecture
  7. 7. WebFont Video Audio GraphicsDevice 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)
  8. 8. IntroducingSencha Touch
  9. 9. A JavaScript framework for building rich mobile apps with web standards
  10. 10. http://sencha.com/touch
  11. 11. Components Lists
  12. 12. Theming
  13. 13. Forms
  14. 14. Scrolling
  15. 15. Touch Events
  16. 16. Data access & MVC
  17. 17. Charts
  18. 18. Kitchen Sinkhttp://sencha.com/x/5e
  19. 19. Hello World
  20. 20. http://sencha.com/x/d5
  21. 21. <!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>
  22. 22. 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. 23. Listsvar  list  =  new  Ext.List({        store:  store,        itemTpl:  {firstName}  {lastName},        grouped:  true,        indexBar:  true});
  24. 24. Nested Listsvar  list  =  new  Ext.NestedList({        store:  store,        displayField:  name,        title:  My  List,        updateTitleText:  true,        getDetailCard:                function(record,  parent)  {..}});
  25. 25. Carouselsvar  carousel  =  new  Ext.Carousel({        direction:  horizontal,        indicator:  true,        items:  [                ..        ]});
  26. 26. Sheetsvar  sheet  =  new  Ext.ActionSheet({        items:  [                {                        text:  Delete  draft,                        ui:  decline                },  {                        text:  Save  draft                },  {                        text:  Cancel,                }        ]});sheet.show();
  27. 27. Common patterns 1var  list  =  new  Ext.List({        store:  store,        itemTpl:  {firstName}  {lastName},        grouped:  true,        indexBar:  true});var  panel  =  new  Ext.Panel({        fullscreen:  true,        layout:  fit,        items:  [list]});
  28. 28. Common patterns 2var  panel  =  new  Ext.Panel({        fullscreen:  true,        layout:  fit,        items:  [{                xtype:  list,                store:  store,                itemTpl:  {firstName}  {lastName},                grouped:  true,                indexBar:  true        }]});
  29. 29. A more complex app
  30. 30. 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/
  31. 31. The Valley Apphttp://senchalearn.github.com/valley http://sencha.com/x/dr
  32. 32. https://github.com/ senchalearn/valley
  33. 33. Development sequence1 Structure the app 5 Detail page2 Layout the UI 6 Add a map3 Model the data 7 More data4 Load the list 8 Customize theme
  34. 34. 1 Structure the app
  35. 35. index.html<!doctype  html><html>        <head>                <title>Valley  Guide</title>        </head> <body></body></html>
  36. 36. 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"  />
  37. 37. app.jsva  =  new  Ext.Application({        launch:  function()  {                this.viewport  =  new  Ext.Panel({                        layout:  card,                        fullscreen:  true,                        html:  "Hello  world!"                        });        }});
  38. 38. 2 Layout the UI toolbar toolbar dataList listCard detailCard na.viewport
  39. 39. 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]                });        }});
  40. 40. listCardthis.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});
  41. 41. detailCardthis.detailCardToolbar  =  new  Ext.Toolbar({        dock:  top,        title:  ...});this.detailCard  =  new  Ext.Panel({        dockedItems:  [this.detailCardToolbar]});
  42. 42. 3 Model the datahttp://api.yelp.com/business_review_search?ywsid=YELP_KEY&term=Restaurants&location=Silicon%20Valley
  43. 43. Apigee console
  44. 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":  [            ...",          ],          ...
  45. 45. A data namespacethis.data  =  {};
  46. 46. The ‘Business’ modelthis.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. 47. A store of those modelsthis.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. 48. 4 Load the listthis.listCardDataList  =  new  Ext.List({        store:  this.data.restaurants,        itemTpl:  {name}});
  49. 49. A more interesting templateitemTpl:        <img  class="photo"  src="{photo_url}"  width="40"  height="40"/>  +        {name}<br/>  +        <img  src="{rating_img_url_small}"/>&nbsp;  +        <small>{address1}</small>
  50. 50. Hack the style<style>        .photo  {                float:left;                margin:0  8px  16px  0;                border:1px  solid  #ccc;                -­‐webkit-­‐box-­‐shadow:                        0  2px  4px  #777;        }</style>
  51. 51. Get images resized... ...width="40"  height="40"  />
  52. 52. ...in the cloudsrc="http://src.sencha.io/40/{photo_url}"  width="40"  height="40"/>
  53. 53. 5 Detail pagethis.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. 54. A back buttonthis.detailCardToolbar  =  new  Ext.Toolbar({        dock:  top,        title:  ...,        items:  [{                text:  Back,                ui:  back,                handler:  function  ()  {                        va.viewport.setActiveItem(                                va.listCard,                                {type:  slide,  direction:  right}                        );                }        }]});
  55. 55. Detail templatethis.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. 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. 57. 6 Add a map toolbar toolbar dataList dataList detailCard listCard detailTabsva.viewport
  58. 58. 6 Add a mapva.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. 59. Tab titlesthis.detailCard  =  new  Ext.Panel({        ...        title:  Info});this.detailMap  =  new  Ext.Map({        title:  Map});
  60. 60. Google Maps script<script  type="text/javascript"    src="http://maps.google.com/maps/api/js?sensor=true"></script>
  61. 61. Update the map locationselectionchange:  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. 62. Improve the tab barthis.detailTabs  =  new  Ext.TabPanel({        dockedItems:  [this.detailCardToolbar],        items:  [this.detailCard,  this.detailMap],        tabBar:  {                ui:  light,                layout:  {  pack:  center  }        }});
  63. 63. 7 More?
  64. 64. More data...[hotels,  bars,  restaurants].forEach(  function  (type)  {        va.data[type]  =  new  Ext.data.Store({                model:  va.data.Business,                autoLoad:  true,                proxy:  {                        type:  scripttag,                        url:  http://api.yelp.com/business_review_search  +                                ?ywsid=  +  YELP_KEY  +                                &term=  +  type  +                                &location=Silicon%20Valley,                        reader:  {                                type:  json,                                root:  businesses                        }                }        });});
  65. 65. Make list into a ‘class’this.ListCardDataList  =  Ext.extend(Ext.List,  {        store:  null,        itemTpl:                <img  class="photo"  ...
  66. 66. Instantiate that 3 timesthis.stayCardDataList  =  new  this.ListCardDataList({        store:  this.data.hotels});this.eatCardDataList  =  new  this.ListCardDataList({        store:  this.data.restaurants});this.drinkCardDataList  =  new  this.ListCardDataList({        store:  this.data.bars}); Consider lazy-loading...
  67. 67. Turn container into tabs toothis.listCard  =  new  Ext.TabPanel({        items:  [                this.stayCardDataList,                  this.eatCardDataList,                  this.drinkCardDataList        ],        tabBar:  {                ui:  light,                layout:  {  pack:  center  },                dock:  bottom        },        cardSwitchAnimation:  flip,...
  68. 68. And add titles & iconsthis.stayCardDataList  =  new  this.ListCardDataList({        store:  this.data.hotels,        title:  Stay,        iconCls:  home});this.eatCardDataList  =  new  this.ListCardDataList({        store:  this.data.restaurants,        title:  Eat,        iconCls:  locate});this.drinkCardDataList  =  new  this.ListCardDataList({        store:  this.data.bars,        title:  Drink,        iconCls:  star});
  69. 69. Pull-to-refreshthis.ListCardDataList  =  Ext.extend(Ext.List,  {        ...        plugins:  [{                ptype:  pullrefresh        }]});
  70. 70. 8 Customize theme
  71. 71. http://sass-lang.com/
  72. 72. 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;}
  73. 73. $> sudo gem install compass http://rubyinstaller.org/
  74. 74. $> compass -vCompass 0.11.1 (Antares)Copyright (c) 2008-2011 Chris EppsteinReleased under the MIT License.$> sass -vSass 3.1.1 (Brainy Betty)
  75. 75. Start by copying sencha-touch.scss
  76. 76. config.rbdir  =  File.dirname(__FILE__)load  File.join(dir,  ..,  lib,  touch,  resources,  themes)#  Compass  configurationssass_path        =  dircss_path          =  direnvironment    =  :productionoutput_style  =  :compressed#  or  :nested,  :expanded,  :compact
  77. 77. 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
  78. 78. Link...<link  href="theming/valley.css"  rel="stylesheet"            type="text/css"  />
  79. 79. 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;...
  80. 80. valley.scss$base-­‐color:  #9D9E00;@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;
  81. 81. 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);
  82. 82. Specify iconClsthis.stayCardDataList  =  new  this.ListCardDataList({        store:  this.data.hotels,        title:  Stay,        iconCls:  briefcase1});this.eatCardDataList  =  new  this.ListCardDataList({        store:  this.data.restaurants,        title:  Eat,        iconCls:  heart});this.drinkCardDataList  =  new  this.ListCardDataList({        store:  this.data.bars,        title:  Drink,        iconCls:  music1});
  83. 83. _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%);
  84. 84. http://dev.sencha.com/deploy/touch/docs/theme/
  85. 85. Sass is a superset of CSS$base-­‐color:  #9D9E00;$include-­‐default-­‐icons:  false;@import  sencha-­‐touch/default/all;...@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;}...
  86. 86. WebFonts@import  url(http://fonts.googleapis.com/css?family=Voltaire);.x-­‐toolbar-­‐title  {    font-­‐family:  Voltaire;    font-­‐weight:  normal;    font-­‐size:  1.7em;    line-­‐height:  1.7em;    letter-­‐spacing:  0.05em;}
  87. 87. Done?
  88. 88. Development sequence1 Structure the app 5 Detail page2 Layout the UI 6 Add a map3 Model the data 7 More data4 Load the list 8 Customize theme
  89. 89. A ‘responsive’ app...http://sencha.com/x/cv
  90. 90. And if we’d had time... Add to home screen - Icon - Splash screen Hybrid app; PhoneGap / NimbleKit - Contacts API - Geolocation http://sencha.com/x/cy http://sencha.com/x/de
  91. 91. 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.jsapp/yelp.jshttp://cdn.sencha.io/touch/1.1.0/sencha-­‐touch.jshttp://maps.google.com/maps/api/js?sensor=truehttp://maps.gstatic.com/intl/en_us/mapfiles/api-­‐3/6/4/main.jstheming/valley.cssNETWORK:*http://github.com/jamesgpearce/confess
  92. 92. O ine dataTaking Yelp data o ineTaking images o ine- src.sencha.io to generate cross-origin B64Detecting network connection changeshttp://sencha.com/x/df
  93. 93. Weinrehttp://phonegap.github.com/weinre
  94. 94. built withApps vs Web technology
  95. 95. James Pearce@ jamespearce
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×