crossmos workshop sencha touch 2 - msec.be€¦ · workshop timeline • 14h00 – 14h20...

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…