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.
2. 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
4. 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
5. 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
6. 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
7. Areas of Focus: Enterprise
Automating workflows
Cloud based solutions
Application integration
Platform development
Healthcare
Mobile Enterprise
Digital Media
Supply Chain
8. 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
9. 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
11. 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!
12. 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
14. 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
15. 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
17. 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
19. 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’
20. 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'
21. 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
22. 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"
24. What is a Component?
Visual Classes
Every Component in Sencha Touch is a subclass of
Ext.Component
25. What is a Container?
Sub-class of Component
Can contain child components
Can specify Layouts
26. 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);
40. 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.
44. 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