Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

Create a mobile web app with Sencha Touch

13.240 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie, Design
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ♣♣♣ https://tinyurl.com/rockhardxxx
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • thank u so much....
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Thank you sooo much for creating this! It helps a ton!!
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • I would second that, James made an outstanding presentation!

    The http://sencha.com/x/5e gives a good idea of Sencha Touch (Need: Chrome).
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Thanks :)
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

×