crossmos workshop sencha touch 2 - msec.be€¦ · workshop timeline • 14h00 – 14h20...
TRANSCRIPT
![Page 1: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/1.jpg)
Crossmos Workshop Sencha Touch 2 Ruben Smeets 29/09/2015 – 30/09/2015
![Page 2: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/2.jpg)
Workshop Timeline
• 14h00 – 14h20 à Introduction & Quick Start • 14h20 – 14h40 à Familiarization with tools • 14h40 – 15h30 à Basic track part 1 • 15h30 – 15h40 à Short break • 15h40 – 17h00 à Basic track part 2 • 17h00 – 17h20 à Short break (with lunch) • 17h20 – 18h00 à Extended track
![Page 3: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/3.jpg)
Introduction The Problem
Native app development • SDK’s are platform-specific • Each OS comes with its
own tools and GUI toolkit
Apple iOS Android Windows Phone
Languages Objective-C, C, C++ Java (C, C++ NDK) C#, VB.NET and more
Tools Xcode Android SDK Android Studio
Visual Studio, Windows Phone dev. tools
Packaging format .ipa (.app) .apk .xap
App stores Apple App Store Google Play store Windows Phone Marketplace
Time consuming Expensive
![Page 4: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/4.jpg)
Introduction The Solution à Cross-platform App development??
Source-code translators
Runtime (VM approach)
Web-to-native wrapper
Javascript Frameworks / web-app toolkits
App Factories
Advantages
• Good UX and performance
• Full device access
• Good UX and performance
• Full device access
• Good Portability
• Same as web app • More device
access than web-app
• Easily updated(*)
• Multiplatform support
• Low development cost
• Easily updated
• No programming skills required
• Development in the cloud
Disadvantages • High complexity • Consistancy
problems
• Interpretation latency
• Poorer UX compared to native
• Limited device access
• Shallow UX
• Limited UI • Low platform
support
Often used in combination Often used in combination
![Page 5: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/5.jpg)
A cross-platform mobile web application framework based on HTML5 and JavaScript for creating universal mobile apps
Sencha Touch ?
Introduction Sencha Touch
Latest release of Sencha Touch à Merged in ExtJS 6
![Page 6: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/6.jpg)
Introduction Sencha Touch
Web Apps
Hybrid Apps
![Page 7: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/7.jpg)
Introduction Examples – Android
myUConn - the official app of the University of Connecticut
![Page 8: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/8.jpg)
Introduction Examples - iOS
Chase Mobile – Banking app optimized for iPad. You can manage your accounts, make deposits, find ATMs and more.
![Page 9: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/9.jpg)
Introduction Examples – Both
MEC_QATAR – The application of the Ministry of Economy and Commerce in Qatar, contains many of the services provided by the ministry for the investor and the consumer.
![Page 10: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/10.jpg)
Sencha Basics • MVC
o Data Package o Components
• Containers • Layouts
o Controllers • Multi-controller application • PhoneGap/Cordova Packaging
Quick Start
http://adamzyglis.com/images/cartoon108.jpg
![Page 11: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/11.jpg)
• Models, Stores and Proxies o Associations o Validation o Sorting & filters o Local & server storage
• Easily consume web services o JSON/P o XML
Quick Start MVC – Data Package
![Page 12: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/12.jpg)
Ext.define('User', { ! extend: 'Ext.data.Model’,!
config: { !
fields: [ !
{name: 'name', type: 'string'}, !
{name: 'age', type: 'int'}, !
{name: 'phone', type: 'string'}, ! {name: 'alive', type: 'boolean', !
defaultValue: true} ! ] !
}, !
changeName: function() { ! var oldName = this.get('name'), ! newName = oldName + " The Barbarian”;!
this.set('name', newName); ! } !
}); !
Quick Start MVC – Model Example
var user = Ext.create('User', { ! name : 'Conan', !
age : 24, !
phone: '555-555-5555' !
}); !
!
user.changeName(); !user.get('name'); // returns "Conan The Barbarian" !
Definition of a Model Instance of a Model
![Page 13: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/13.jpg)
Quick Start MVC – Components
• Components o Lists
• Nested, Grouped, Sortable o Carousel o Picker o Overlay o Slider o Forms & Fields o Toolbars & Buttons o …
![Page 14: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/14.jpg)
Quick Start MVC – Component Hierarchy
![Page 15: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/15.jpg)
Quick Start MVC – Creating a Component
!Ext.create('Ext.List', { ! fullscreen: true, ! itemTpl: '<div class="contact”> !
{firstName} {lastName} </div>', !
store: store, ! grouped: true!}); !
Instantiate an object
!Ext.create('Ext.Container', { ! fullscreen: true, ! items: { ! xtype: 'button', ! text: 'My Button' ! } !}); !
Child to a container as JSON with an xtype
![Page 16: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/16.jpg)
Quick Start MVC – Container Components
• A Container Component can render multiple child-Components
• Containers can specify a layout that determines how its children are rendered o Fit o Card o vbox o hbox
• Example of a container: Ext.Panel
![Page 17: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/17.jpg)
Quick Start MVC – Container Layout Types
Fit Card
hbox vbox
![Page 18: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/18.jpg)
Quick Start MVC – Container Layout Example
Ext.create('Ext.Container', { ! fullscreen: true, ! layout: 'hbox', ! items: [ ! { ! xtype: 'panel', ! html: 'message list', ! flex: 1 ! }, ! { ! xtype: 'panel', ! html: 'message preview', ! flex: 2 ! } ! ] !}); !
Result:
Container configuration
Child component configuration
![Page 19: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/19.jpg)
Quick Start MVC – Controller
• Controller is the glue of the application
• Controller subscribes to events from the view
• Controller updates the Model
• Model drives the view
![Page 20: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/20.jpg)
Quick Start Multi-controller Application
• Create separate Controller for each view or Container o Scalable o Maintainable o Faster BUG solving
![Page 21: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/21.jpg)
Quick Start PhoneGap/Cordova Packaging • Package Sencha WebApp for native deployment • App runs inside WebView
o (Single Page Hybrid App) • Creates JavaScript access to native API’s
o Camera, Sensors, file, etc…
http://www.risingj.com/wp-content/uploads/conveyor.png
![Page 22: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/22.jpg)
Workshop Timeline
• 14h00 – 14h20 à Introduction & Quick Start • 14h20 – 14h40 à Familiarization with tools • 14h40 – 15h30 à Basic track part 1 • 15h30 – 15h40 à Short break • 15h40 – 17h00 à Basic track part 2 • 17h00 – 17h20 à Short break (with lunch) • 17h20 – 18h00 à Extended track
![Page 23: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/23.jpg)
Familiarization with tools Secure – Deploy – Analyze
Manage
Develop
Design
SDKs
Sencha Space
Prototype – Design
Combined in Ext JS 6
Ext JS Touch GXT
Tools
Inspector (Beta)
Sencha CMD Architect
Architect Stencils
![Page 24: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/24.jpg)
Develop
SDKs
Touch
Tools
Sencha CMD
Sencha products we will be using:
Additional tools we will be using:
Tools
Web Browser IDE Native Packager
Android SDK Tools
Familiarization with tools Workshop Tools
![Page 25: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/25.jpg)
• Project scaffolding and code generation • JS-to-JS compiler • Integrated Web server • Workspaces • Package Management (create and maintain components) • Build options
o Production build (minimal code size) o Test build (debugging)
• Native packaging o Phonegap local o Cordova local o Phonegap Build (Cloud build)
• Full list available at: http://docs.sencha.com/cmd/5.x/intro_to_cmd.html
Familiarization with tools Sencha CMD
![Page 26: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/26.jpg)
• Project scaffolding and code generation • JS-to-JS compiler • Integrated Web server • Workspaces • Package Management (create and maintain components) • Build options
o Production build (minimal code size) o Test build (debugging)
• Native packaging o Phonegap local o Cordova local o Phonegap Build (Cloud build)
• Full list available at: http://docs.sencha.com/cmd/5.x/intro_to_cmd.html
Familiarization with tools Sencha CMD
![Page 27: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/27.jpg)
Familiarization with tools API Documentation
http://docs.sencha.com/touch/2.4/2.4.2-apidocs/# http://docs.sencha.com/touch/2.4/2.4.2-apidocs/#!/example/kitchen-sink
![Page 28: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/28.jpg)
Familiarization with tools Other
https://market.sencha.com/
![Page 29: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/29.jpg)
Familiarization with tools Other – continued
https://www.sencha.com/forum/
![Page 30: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/30.jpg)
Familiarization with tools Other – continued
https://fiddle.sencha.com/#home
![Page 31: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/31.jpg)
Workshop Timeline
• 14h00 – 14h20 à Introduction & Quick Start • 14h20 – 14h40 à Familiarization with tools • 14h40 – 15h30 à Basic track part 1 • 15h30 – 15h40 à Short break • 15h40 – 17h00 à Basic track part 2 • 17h00 – 17h20 à Short break (with lunch) • 17h20 – 18h00 à Extended track
![Page 32: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/32.jpg)
What will we do? Basic Track • Extend a Sencha Touch 2 app
o Generate & build an app with Sencha command o Create & navigate to an “About” page o Search the current location with the geolocation sensor
Extended Track • Extend a Sencha Touch 2 app
o Store recent searches in local storage
![Page 33: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/33.jpg)
![Page 34: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/34.jpg)
The PropertyCrossBasic App
Searching UK property listings
![Page 35: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/35.jpg)
Basic Track Part 1 Exercise 1 Recap: Running the application 1. Generate a default application
sencha –sdk path/to/sdk generate app PropertyCrossWorkshopApp . \PropertyCrossWorkshopApp
2. Copy and replace the “app/”, “resources/” and other files inside the basic app folder o Contains the MVC source files of the workshop app
3. Build and run the PropertyCrossWorkshopApp application sencha app watch
4. Navigate to “localhost:1841/” in your browser
5. Debug your application using Chrome developer tools
![Page 36: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/36.jpg)
• .sencha/ • touch/ • app
o controller/ o model/ o profile/ o store/ o view/
• app.js • bootstrap.js • bootstrap.json • index.html • app.json • build.xml • packager.json • resources/
MVC folder structure
config/meta files & Ant scripts Sencha SDK folder -- DO NOT TOUCH!
Starting point of your application
Used during development
Settings & instructions for building or distributing
Entry point that loads the application
Contains CSS, SASS, icons, etc..
Basic Track Part 1 Exercise 1 Recap: Running the application
![Page 37: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/37.jpg)
Basic Track Part 1 Exercise 2: Adding the ‘About’ page
• GOAL: Adding UI to the application
• What you’ll learn: o How to add a new view to the application o How to navigate to your new view using a button o How to listen to events from your button inside a controller o How to position components inside the view using layouts
![Page 38: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/38.jpg)
Basic Track Part 1 Exercise 2 Recap: Adding the ‘About’ page
1. Adding the about button (info icon)
2. Add a the button event listener inside the application controller
3. Navigate to the About page (that doesn’t exist yet!)
4. Create the About page
5. Add components to the About page
6. Style your components inside the About page
7. Use the Sencha layout system to position the components
![Page 39: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/39.jpg)
Workshop Timeline
• 14h00 – 14h20 à Introduction & Quick Start • 14h20 – 14h40 à Familiarization with tools • 14h40 – 15h30 à Basic track part 1 • 15h30 – 15h40 à Short break • 15h40 – 17h00 à Basic track part 2 • 17h00 – 17h20 à Short break (with lunch) • 17h20 – 18h00 à Extended track
![Page 40: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/40.jpg)
Basic Track Part 2 Exercise 3: Add geolocation functionality to the app
• GOAL: Using a device sensor, calling Internet service
• What you’ll learn: o How to use the geolocation sensor (GPS) o How to load information based on the attained location o How to show the response to the user
![Page 41: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/41.jpg)
Basic Track Part 2 Exercise 3 Recap: Add geolocation functionality to the app
1. Adding the ‘My Location’ button
2. Using the geolocation API from Sencha 3. Formatting the geolocation results
4. Requesting property listings through the Nestoria API using our location
5. Handling the ERROR state
![Page 42: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/42.jpg)
Workshop Timeline
• 14h00 – 14h20 à Introduction & Quick Start • 14h20 – 14h40 à Familiarization with tools • 14h40 – 15h30 à Basic track part 1 • 15h30 – 15h40 à Short break • 15h40 – 17h00 à Basic track part 2 • 17h00 – 17h20 à Short break (with lunch) • 17h20 – 18h00 à Extended track
![Page 43: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/43.jpg)
Extended Track Exercise 4: Remember previous searches
• GOAL: Using HTML5 local storage to save previous searches, dynamically change UI based on content inside local storage
• What you’ll learn: o How to configure the HTML5 local storage Proxy from Sencha o How to save and load content from the local storage Proxy o How to dynamically update a UI component with local storage
content
![Page 44: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/44.jpg)
Extended Track Exercise 4 Recap: Remember previous searches
1. Defining the data model for local storage
2. Defining a Sencha Store to hold a list of records (model instances)
3. Add a local storage Proxy to the Searches Store
4. Adding records into the Searches store and syncing it with local storage
5. Add the previous searches list component to the home.js view
6. Hiding/showing the previous searches
7. Performing a property search when selecting a previous search item
![Page 45: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/45.jpg)
References • Sencha book
o Hands-On Sencha Touch 2: A Real World Approach – Lee Boonstra (Book)
• Sencha developer blogs o http://www.joshmorony.com/how-to-listen-to-events-with-controllers-
in-sencha-touch/ o http://www.ladysign-apps.com/developer/ o https://mitchellsimoens.com/ o http://miamicoder.com/sencha-touch-tutorials/ o http://www.stuartashworth.com/blog/sencha-touch/
• PropertyCross Website o http://propertycross.com/
![Page 46: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/46.jpg)
References • Sencha Best Practices
o https://vimeo.com/16289757 (XTemplate part 1) o https://vimeo.com/16289990 (XTemplate part 2) o https://github.com/couchcommerce/best-practices/blob/master/
README.md (common best practices) o www.stuartashworth.com (Best Practices for Improving your
Sencha Apps) o http://www.swarmonline.com/technology/articles-and-videos/20-
things-to-avoiddo-when-getting-started-with-ext-js-and-sencha-touch/
o http://www.innofied.com/sencha-touch-coding-guidelines-you-should-follow-part-1/
o http://www.joshmorony.com/7-important-tips-for-sencha-touch-beginners/
![Page 47: Crossmos Workshop Sencha Touch 2 - msec.be€¦ · Workshop Timeline • 14h00 – 14h20 !Introduction & Quick Start • 14h20 – 14h40 !Familiarization with tools • 14h40 –](https://reader033.vdocuments.us/reader033/viewer/2022051917/60095a90a873626f3c1f34c6/html5/thumbnails/47.jpg)
Thank you for participating! Don’t forget the evaluation form…