crossmos workshop sencha touch 2 - msec.be€¦ · workshop timeline • 14h00 – 14h20...
TRANSCRIPT
Crossmos Workshop Sencha Touch 2 Ruben Smeets 29/09/2015 – 30/09/2015
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
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
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
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
Introduction Sencha Touch
Web Apps
Hybrid Apps
Introduction Examples – Android
myUConn - the official app of the University of Connecticut
Introduction Examples - iOS
Chase Mobile – Banking app optimized for iPad. You can manage your accounts, make deposits, find ATMs and more.
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.
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
• 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
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
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 …
Quick Start MVC – Component Hierarchy
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
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
Quick Start MVC – Container Layout Types
Fit Card
hbox vbox
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
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
Quick Start Multi-controller Application
• Create separate Controller for each view or Container o Scalable o Maintainable o Faster BUG solving
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
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
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
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
• 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
• 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
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
Familiarization with tools Other
https://market.sencha.com/
Familiarization with tools Other – continued
https://www.sencha.com/forum/
Familiarization with tools Other – continued
https://fiddle.sencha.com/#home
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
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
The PropertyCrossBasic App
Searching UK property listings
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
• .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
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
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
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
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
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
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
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
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
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/
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/
Thank you for participating! Don’t forget the evaluation form…