The City Bars App. with. Sencha Touch 2

Size: px

Start display at page:

Download "The City Bars App. with. Sencha Touch 2"

Daisy Townsend
5 years ago
Views:

1 The City Bars App with Sencha Touch 2

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

4 Basically... Get a WebKit-based desktop browser Get some emulators & real devices Download the Sencha Touch 2 PR2 SDK Develop against a local web server Optional, but highly recommended!

8 stylesheet script framework

9 Introducing the City Bars App

13 Pre-requisites Yelp developer API key: Install Sass and Compass:

14 senchalearn/citybars2

15 Development sequence 1 App Architecture 2 UI Structure 3 Data Modeling 5 List Event Handler 6 Detail Page 7 Customize Theme 4 List Binding

17 Application Architecture 1_app_architecture

18 application entry point JS + CSS in SDK

19 index.html <!doctype html> <html> <head> yay! HTML5 <title>city Guide</title> JS + CSS* <script src="lib/touch2/sencha- touch- all- debug.js"></script> <link href="lib/touch2/resources/css/sencha- touch.css" rel="stylesheet" /> <script src="app/app.js"></script> </head> <body></body> </html> don t panic our app *or from CDN

20 app.js global namespace launch event var CB; Ext.application({ }); instantiates application launch: function() { CB = this; CB.cards = Ext.create('Ext.Panel', { fullscreen: true, html: 'Hello world' }); } config object create main UI panel

23 UI Structure 2_ui_structure

24 toolbar toolbar datalist click back listcard CB.cards detailcard

25 variable ref var CB; Ext.application({ UI children }); launch: function() { CB = this; CB.cards = Ext.create('Ext.Panel', { fullscreen: true, layout: 'card', items: [{ id: 'listcard', html: 'List' }, { id: 'detailcard', html: 'Detail' }] }); } how children lay out id-based ref

27 <aside> about layouts and components

28 Layouts card vbox fit hbox

29 Child component patterns I var list = new Ext.List({ store: store,... }); var panel = new Ext.Panel({ items: [list,...],... }); instantiate component reference component by var

30 Child component patterns II preferable in ST2 var list = Ext.create('Ext.List', { store: store,... }); var panel = Ext.create('Ext.Panel', { items: [list,...]... });

31 Child component patterns III var panel = Ext.create('Ext.Panel', { items: [ { xtype: 'list', store: store, }); ], },... deferred creation* * a lightweight object until then

32 </aside>

33 The list card { list* } // the list card id: 'listcard', layout: 'fit', items: [{ // main top toolbar xtype: 'toolbar', docked: 'top', title: 'Please wait' // will get added once city known }, { // the list itself // gets bound to the store once city known id: 'datalist', xtype: 'list' }] list should fill whole card docked top toolbar * list will be bound to a store later

34 The detail card { } // the details card id: 'detailcard', items: [{ // detail page also has a toolbar docked : 'top', xtype: 'toolbar', title: '' }, { // textual detail }] another docked toolbar* detail page to come later... * title will be dynamically set

35 note: list already scrollable

36 Data modeling 3_data_modeling

37 The YELP API... &term=business_type free, rate limited &location=city business type, and city name

38 ...returns a nested JSON array mmm, json

39 Apigee API console businesses array

40 "businesses": [ { "rating_img_url" : " "country_code" : "US", "id" : "BHpAlynD9dIGIaQDRqHCTA", "is_closed" : false, "city" : "Nashville", "mobile_url" : " "review_count" : 50, "zip" : "11231", "state" : "TN", "latitude" : , "address1" : "253 Conover St", "address2" : "", "address3" : "", "phone" : " ", ] "state_code" : "TN", "categories": [...],... },... some fields are useful for our app

41 Create a data model give the class a name Ext.define("Business", { extend: "Ext.data.Model", 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"}, ] }); extending base model and with these named, typed fields

42 <aside> Models can be associated with other models Fields can also have default values, conversion functions, and validation </aside>

43 Create a model store create the store var store = Ext.create('Ext.data.Store', { model: "Business",... }); containing this type of model Think of a store as a table of model instance rows

44 Configure data source source loads as soon as possible var store = Ext.create('Ext.data.Store', { model: 'Business', autoload: true, proxy: { JSONP // call Yelp to get business data type: 'scripttag', url: ' + '?ywsid=' + YELP_KEY + '&term=' + escape(business_type) + '&location=' + escape(default_city), reader: { type: 'json', root: 'businesses' } } }); construct API URL read array from inside JSON

45 Create constants <script> YELP_KEY = 'G3HueY_I5a8WZX- _baaaa'; DEFAULT_CITY = 'San Francisco'; BUSINESS_TYPE = 'Bars'; </script> please change this!

46 We can make the proxy URL dynamic, which would allow geolocation. But this requires an async callback sequence.

47 Two-phase async sequence call when UI ready getcity: function (callback) { callback(default_city); // this could now be a geo lookup to // get the nearest city }, use this in the URL getbusinesses: function (city, callback) { the data code we just wrote } Ext.define("Business", {... }); var store = Ext.create('Ext.data.Store', {... }); and this will need to fire the callback with store when it autoloads

48 when loaded var store = Ext.create('Ext.data.Store', {... listeners: { // when the records load, fire the callback load: function (store) { callback(store); } event listeners } }); fire the callback with store

49 cheeky callback store records

50 List Binding 4_list_binding

51 // get the city CB.getCity(function (city) { our 2 async functions // then use Yelp to get the businesses CB.getBusinesses(city, function (store) { // then bind data to list and show it CB.cards.query('#dataList')[0].setStore(store); }); }); get datalist by its id bind the store to it

52 :-( but we haz records!

53 CB.getCity(function (city) { cards.query('#listcard toolbar')[0].settitle(city + ' ' + BUSINESS_TYPE);... another component query now title will always match city

54 List items are templated { } id: 'datalist', xtype: 'list', store: null, itemtpl: '{name}' model fields in curly braces

55 Spinner bound to store instantiate mask over body Ext.create('Ext.LoadMask', Ext.getBody(), { store: store, msg: '' }); will show when store is loading

$A more interesting template itemtpl: '<img class="photo" src="{photo_url}" width="40"$

57 A more interesting template itemtpl: '<img class="photo" src="{photo_url}" width="40" height="40"/>' + '{name}<br/>' + '<img src="{rating_img_url_small}"/> ' + '<small>{address1}</small>' HTML allowed

58 Hack the style <style>.photo { float:left; margin:0 8px 16px 0; border:1px solid #ccc; - webkit- box- shadow: 0 2px 4px #777; } </style>

59 ...width="40" height="40" /> seems like a waste

60 src.sencha.io <img src=" width="40" height="40" /> 4 times smaller

61 List Event Handler 5_list_event_handler

62 { when list items are selected selection id: 'datalist',... listeners: { selectionchange: function (selectionmodel, records) { // if selection made, slide to detail card if (records[0]) { also fires on deselection } } } } CB.cards.setActiveItem(1); CB.cards.getActiveItem().setData( records[0].data ); apply record data... detail card...to detail page template

63 A back button arrow style when tapped items: [{ // detail page also has a toolbar docked : 'top', xtype: 'toolbar', title: '', items: [{ // containing a back button // that slides back to list card text: 'Back', ui: 'back', listeners: { tap: function () { CB.cards.setActiveItem(0); } } }],... children of toolbars are implicitly xtype: button back to list

65 Detail Page 6_detail_page

66 { template for a whole panel }] // textual detail stylehtmlcontent: true, cls: 'detail', tpl: [ '<img class="photo" src="{photo_url}" />', '<h2>{name}</h2>', ] style this card as regular HTML CSS class for styling '<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>'

67 :-(

68 Remember this? setdata does not cascade into child items! CB.cards.getActiveItem().setData( records[0].data );

69 Override setdata set title on toolbar setdata: function (data) { this.query('toolbar')[0].settitle(data.name); this.query('[cls="detail"]')[0].setdata(data); }, apply data to template on inner panel

70 good not so much

71 A little styling temporary fixes.x- html h2 { margin- bottom:0; }.phone,.link { clear:both; font- weight:bold; display:block; text- align:center; margin- top:8px; }.detail { - webkit- box- orient: vertical; }.detail.photo { float:none; } formatting the buttons

73 One final tweak move from inner panel... { // textual detail cls: 'detail', stylehtmlcontent: true,... { // the details card id: 'detailcard', stylehtmlcontent: true,...to outer card

74 complete with <h2> </h2>

77 Development sequence 1 App Architecture 2 UI Structure 3 Data Modeling 5 List Event Handler 6 Detail Page 7 Customize Theme 4 List Binding

78 Other ideas...

79 Responsive Apps

80 Packaging Add to home screen - Icon - Splash screen Hybrid app; PhoneGap / NimbleKit - Contacts API - Geolocation

81 Geolocation

82 Offline app

83 Offline data Taking Yelp data offline Taking images offline - src.sencha.io to generate cross-origin B64 Detecting network connection changes

84 Debugging

85 James jamespearce

Index LICENSED PRODUCT NOT FOR RESALE

Index LICENSED PRODUCT NOT FOR RESALE A Absolute positioning, 100 102 with multi-columns, 101 Accelerometer, 263 Access data, 225 227 Adding elements, 209 211 to display, 210 Animated boxes creation using