• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Cross Platform Mobile App Development - An Introduction to Sencha Touch
 

Cross Platform Mobile App Development - An Introduction to Sencha Touch

on

  • 289 views

Sencha Touch is a high-performance HTML5 based mobile application framework that enables mobile app developers to build cross platform mobile apps that work on a variety of platforms such as iOS, ...

Sencha Touch is a high-performance HTML5 based mobile application framework that enables mobile app developers to build cross platform mobile apps that work on a variety of platforms such as iOS, Android, BlackBerry, Kindle Fire and more. In this presentation we'll introduce you to the concepts and techniques behind Secha and help you get started with mobile app development using Secha Touch.

Statistics

Views

Total Views
289
Views on SlideShare
289
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Cross Platform Mobile App Development - An Introduction to Sencha Touch Cross Platform Mobile App Development - An Introduction to Sencha Touch Presentation Transcript

    • An Introduction to Sencha Touch 2.0 www.folio3.com@folio_3
    • www.folio3.com www.folio3.com Agenda  Folio3 – Company Overview  What is Sencha Touch?  How it differs from other HTML5 Mobile Application Frameworks  What it looks like (Quick Demo)  Anatomy of an Application  Getting started with Sencha Touch  Sencha Touch SDK & Sencha Touch SDK-Tools  Concepts  Case Study – SixthSense  Next Steps
    • Folio3 – An Overview www.folio3.com@folio_3
    • Folio3 At a Glance  Founded in 2005  Over 200 full time employees  Offices in the US, Canada, Bulgaria & Pakistan  Palo Alto, CA.  Sofia, Bulgaria  Karachi, Pakistan Toronto, Canada
    • What We Do  We are a Development Partner for our customers  Design software solutions, not just implement them  Focus on the solution – Platform and technology agnostic  Expertise in building applications that are: Mobile Social Cloud-based Gamified
    • What We Do  Areas of Focus  Enterprise  Custom enterprise applications  Product development targeting the enterprise  Mobile  Custom mobile apps for iOS, Android, Windows Phone, BB OS  Mobile platform (server-to-server) development  Social Media  CMS based websites for consumers and enterprise (corporate, consumer, community & social networking)  Social media platform development (enterprise & consumer)  Gaming  Social & casual cross platform games (mobile, web, console)  Virtual Worlds
    • Areas of Focus: Enterprise  Automating workflows  Cloud based solutions  Application integration  Platform development  Healthcare  Mobile Enterprise  Digital Media  Supply Chain
    • Areas of Focus: Mobile  Serious enterprise applications for Banks, Businesses  Fun consumer apps for app discovery, interaction, exercise gamification and play  Educational apps  Augmented Reality apps  Mobile Platforms
    • Areas of Focus: Web & Social Media  Community Sites based on Content Management Systems  Enterprise Social Networking  Social Games for Facebook & Mobile  Companion Apps for games
    • What is Sencha Touch www.folio3.com@folio_3
    • What is Sencha Touch?  Sencha Touch, a high-performance HTML5 mobile application framework, is the cornerstone of the Sencha HTML5 platform.  Built for enabling world-class user experiences.  Sencha Touch is the framework that enables developers to build fast and impressive apps that work on iOS, Android, BlackBerry, Kindle Fire and more.  Business Ready Apps for every platform!
    • How It Differs from other HTML5 Mobile App Frameworks  jQuery Mobile vs Sencha Touch Sencha Touch jQuery Mobile Javascript centric Markup centric UI Widgets, DOM Manipulation, Server-side abstraction, MVC UI-Only Library Takes time to learn Easier to learn Supports less browsers Supports more devices then ST Imposes a coding structure and discipline It does not impose a coding discipline or structure, which gives you flexibility Flexible but at times need to hack things Flexible
    • What It Looks Like www.folio3.com@folio_3
    • Anatomy of an Application  Models: represent a type of object in your app - for example an e-commerce app might have models for Users, Products and Orders  Views: are responsible for displaying data to your users and leverage the built in Components in Sencha Touch  Controllers: handle interaction with your application, listening for user taps and swipes and taking action accordingly  Stores: are responsible for loading data into your app and power Components like Lists and DataViews  Profiles: enable you to easily customize your app's UI for tablets and phones while sharing as much code as possible
    • Getting Started With Sencha Touch Sencha Touch SDK http://www.sencha.com/products/touch/download/ & Sencha Touch SDK-Tools http://www.sencha.com/products/sdk-tools/download
    • Generate Code – Directory Structure Inside the app
    • Generated Code – app.js Ext.application({ name: 'F3AGSession', views: ['Main'], launch: function() { // Initialize the main view Ext.Viewport.add(Ext.create('F3AGSession.view.Main')); } }); Note: Refer files on file system for more details
    • Concepts  The Class System  Components  Containers  Layouts
    • Sencha Class System Definition Ext.define('Animal', { config: { name: null }, constructor: function(config) { this.initConfig(config); }, speak: function() { alert('grunt'); } }); Instantiate var bob = Ext.create('Animal', { name: 'Bob' }); bob.speak(); // alerts ‘grunt’
    • Sencha Class System – Inheritance Definition Ext.define('Human', { extend: 'Animal', speak: function() { alert(this.getName()); } }); Instantiate var bob = Ext.create('Human', { name: 'Bob' }); bob.speak(); //alerts 'Bob'
    • Sencha Class System – Configuration  Notice getName, where did that come from ?  Automatically generates getters & setters  For example: When name is defined in class config  setName : Setter  getName : Getter  applyName : Setter calls this before actually setting the value.  updateName : Called when Setter updates the value
    • Sencha Class System – Static Members Ext.define('Computer', { statics: { instanceCount: 0, factory: function(brand) { // 'this' in static methods refer to the class itself return new this({brand: brand}); } }, config: { brand: null }, constructor: function(config) { this.initConfig(config); // the 'self' property of an instance refers to its class this.self.instanceCount ++; } }); var dellComputer = Computer.factory('Dell'); var appleComputer = Computer.factory('Mac'); alert(appleComputer.getBrand()); // using the auto-generated getter to get the value of a config property. Alerts "Mac" alert(Computer.instanceCount); // Alerts "2"
    • Concepts  The Class System  Components  Containers  Layouts
    • What is a Component?  Visual Classes  Every Component in Sencha Touch is a subclass of Ext.Component
    • What is a Container?  Sub-class of Component  Can contain child components  Can specify Layouts
    • Adding Components to Containers //this is the Panel we'll be adding below var aboutPanel = Ext.create('Ext.Panel', { html: 'About this app' }); //this is the Panel we'll be adding to var mainPanel = Ext.create('Ext.Panel', { fullscreen: true, layout: 'hbox', defaults: { flex: 1 }, items: { html: 'First Panel', style: 'background-color: #5E99CC;' } }); //now we add the first panel inside the second mainPanel.add(aboutPanel);
    • Components - Navigation components  Ext.Toolbar  Ext.Button  Ext.TitleBar  Ext.SegmentedButton  Ext.Title  Ext.Spacer
    • Components - Store-bound components  Ext.dataview.DataView  Ext.Carousel  Ext.List  Ext.NestedList
    • Components - Form components  Ext.form.Panel  Ext.form.FieldSet  Ext.field.Checkbox  Ext.field.Hidden  Ext.field.Slider  Ext.field.Text  Ext.picker.Picker  Ext.picker.Date
    • Components - General components  Ext.Panel  Ext.tab.Panel  Ext.Viewport  Ext.Img  Ext.Map  Ext.Audio  Ext.Video  Ext.Sheet  Ext.ActionSheet  Ext.MessageBox
    • Concepts  The Class System  Components  Containers  Layouts
    • Layouts - HBox Ext.create('Ext.Container', { fullscreen: true, layout: 'hbox', items: [ { xtype: 'panel', html: 'message list', flex: 1 }, { xtype: 'panel', html: 'message preview', flex: 2 } ] });
    • Layouts - VBox Ext.create('Ext.Container', { fullscreen: true, layout: 'vbox', items: [ { xtype: 'panel', html: 'message list', flex: 1 }, { xtype: 'panel', html: 'message preview', flex: 2 } ] });
    • Layouts – Card Layout var panel = Ext.create('Ext.Panel', { layout: 'card', items: [ { html: "First Item" }, { html: "Second Item" }, { html: "Third Item" }, { html: "Fourth Item" } ] }); panel.setActiveItem(1);
    • Layouts – Fit Layout var panel = Ext.create('Ext.Panel', { width: 200, height: 200, layout: 'fit', items: { xtype: 'panel', html: 'Also 200px by 200px' } }); Ext.Viewport.add(panel);
    • MVC  Model extends Ext.data.Model  View extends Ext.Component  Controller extends Ext.app.Controller
    • MVC - Models Ext.define('User', { extend: 'Ext.data.Model', config: { fields: [ { name: 'id', type: 'int' }, { name: 'name', type: 'string' } ] } });
    • MVC - Controller Ext.define('MyApp.controller.Main', { extend: 'Ext.app.Controller', config: { control: { loginButton: { tap: 'doLogin' }, 'button[action=logout]': { tap: 'doLogout' } }, refs: { loginButton: 'button[action=login]' } }, doLogin: function() { // called whenever the Login button is tapped }, doLogout: function() { // called whenever any Button with action=logout is tapped } });
    • Case Study - SixthSense www.folio3.com@folio_3
    • SixthSense  Sencha based iPad app built for Merck Pharmaceutical's national sales force in Japan  Enables Merck’s sales personnel to manage their daily schedules for visiting doctors & conducting sales meetings. Key features include:  Offline support – Enables sales personnel to schedule meetings even in areas with low or no network connectivity  Active Sync – Ensures all offline content is synced with the server, when network connectivity is established  Developed using Sencha, HTML5 and SQLite.
    • Next Steps www.folio3.com@folio_3
    • Next Steps  http://docs.sencha.com/touch/2-0/  http://miamicoder.com/2012/how-to-create-a-sencha- touch-2-app-part-1/ (5 Part Series)
    • References  http://www.sencha.com  http://docs.sencha.com/touch/2-0/  http://miamicoder.com/2012/how-to-create-a-sencha- touch-2-app-part-1 (5 Part Series)
    • Contact  For more details about our cross platform, mobile app development services, please get in touch with us. contact@folio3.com US Office: (408) 365-4638 www.folio3.com