This presentation will help you to setup your environment for Sencha Touch Applications along with explaining you the MVC implementation in Sencha Touch 2.0
2. Topics to be covered
Getting Started
Using Sencha Commands
Class System in Sencha 2
Anatomy of an Application
3. What is Sencha Touch?
•Ans: Sencha Touch enables you to quickly and easily create HTML5
based mobile apps that work on Android, iOS and Blackberry devices
and produce a native-app-like experience inside a browser.
•That is the sencha touch app runs on your device as if it’s a native
application of your device.
4. Things you'll need
The free Sencha Touch 2.0 SDK and sencha touch
commercial folder (which can be downloaded from
sencha.com)
A web server running locally on your computer
A modern web browser; Chrome and Safari are
recommended.
5. Pre-requisites.
You need to know javascript.
Html 5
Css-3
Object oriented concepts.
6. Environment Setup.
Step 1: Setup an HTTP server on your computer if you don't
have one running. This guide assumes that the host name
is localhost, and the document root is at /path/to/www
Step 2: Download and install the latest SDK Tools on your
development machine. The latest version as of this writing
is 2.0.0 beta.
Step 3: Download the latest Sencha Touch 2 SDK. Extract
the SDK to a local directory.
Please note that both the folders should be in the same
directory.
It is advisable to keep them in root directory so that their
path is C:/ or D:/ or E:/.
7. Building your first App.
Sencha touch 2 provides us sencha commands which
can be used to create sencha applications and build
the for various platforms.
The tool consists of many useful automated tasks
around the full life-cycle of your applications, from
generating a fresh new project to deploying for
production.
To use sencha commands first you need to be sure that
sencha 2 SDK has been properly installed in your
machine.
8. Steps to verify installation
1. Open your command prompt and cd into the sencha
–touch commercial folder.
cd/path/to/sencha-touch-2.0.0-commercial
2. Now verify that “sencha” Command is working
properly on your machine:
cd/path/to/sencha-touch-2.0.0-commercial
sencha
If a help message appears with the first line that says:
"Sencha Command v2.0.0 for Sencha Touch 2", you
are all set.
9. Points to remember
When you try “sencha” command for the first time it
may say:
“The system cannot find the path specified.”
Don’t worry just try it once more.
If still it fails to work please install your sdk properly.
10.
11. Commands
sencha generate app MyApp ../MyApp
This command generates a new MyApp folder at the
specified path.
Your application structure will look like.
12.
13. Other sencha commands.
sencha generate controller UserController
(creates a file “UserController” in the controller folder)
sencha generate model User –fields=id:int,name,email
(creates a file “User” in the model folder)
(Note:-
1. “If you type a wrong sencha command the command
prompt will display the Error message along with the
correct syntax for the command”
2. All these related command should run inside the
application folder. “MyApp” in this case.)
15. Deploying your Application
When it comes to deployment, Sencha Command
provides 4 different build environment options,
namely 'testing', 'package', 'production' and 'native':
'testing' is meant for QA prior to production. All
JavaScript and CSS source Files are bundled, but not
minified, which makes it easier for debugging if
needed
'package' creates a self-contained, re-distributable
production build that normally runs from local file
system without the need for a web server
16. 'production' creates a production build that is
normally hosted on a web server and serves multiple
clients (devices). The build is offline-capable using
HTML 5 application cache, and has built-in over-the-air
delta updating feature
'native' first generates a 'package' build, then packages
it as a native application, ready to be deployed to
native platforms
sencha app build production
sencha app build native.
17.
18. Class System
Ext.define(‘MyPanel',
extend:’Ext.Panel’,
Config:{
html: 'Welcome to my app',
fullscreen: true
});
Ext.create(‘MyPanel’);
Ext.define allows us to create a new class.
extend helps us to extend an existing class (Ext.Panel in this case).
Config is used to set the configuration of the class. As we extend a Panel we
can use all the configs of a panel.
Ext.create creates an instance of ‘MyPanel’
21. Models: represent a type of object in your app – which
define the fields of the data structure in which you will save
the data. The fields represent the columns of a table.
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
23. Launch Process
Note that only the active Profile has its launch
function called - for example if you define profiles for
Phone and Tablet and then launch the app on a tablet,
only the Tablet Profile's launch function is called.
This is the point from where the application starts
initialization.
24. •A controller is the place where we deal with data massaging and
application logic.
•It is called when an event occurs, such as “tap” on a button.
25. Launch
There are 4 main phases in your Application's launch
process, 2 of which are inside Controller.
1. Firstly, each Controller is able to define
an initfunction, which is called before the
Application launch function.
2. Secondly, after the Application and Profile launch
functions have been called, the Controller's launch
function is called as the last phase of the process:
26. Controller #init functions called
Profile #launch function called
Application #launch function called
Controller #launch functions called
27. Refs
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: { nav: '#mainNav' }
},
addLogoutButton: function() {
this.getNav().add({ text: 'Logout' });
}
});
Usually, a ref is just a key/value pair - the key ('nav' in this case)
is the name of the reference that will be generated, the value
('#mainNav' in this case) is the ComponentQuery selector that
will be used to find the Component.
28. Advanced Refs
config: {
refs: { nav: '#mainNav',
infoPanel: { selector: 'tabpanel panel[name=fish] infopanel', xtype:
'infopanel',
autoCreate: true
} } }
We've added a second ref to our Controller.
Again the name is the key, 'infoPanel' in this case, but this time
we've passed an object as the value instead.
This time we've used a slightly more complex selector query - in this
example imagine that your app contains a tab panel and that one of
the items in the tab panel has been given the name 'fish'.
Our selector matches any Component with the xtype 'infopanel'
inside that tab panel item.
29. Control
The sister config to refs is control. Control is the
means by which your listen to events fired by
Components and have your Controller react in some
way. Control accepts both ComponentQuery selectors
and refs as its keys, and listener objects as values - for
example:
30.
31. Routes
As of Sencha Touch 2, Controllers can now directly
specify which routes they are interested in. This
enables us to provide history support within our app,
as well as the ability to deeply link to any part of the
application that we provide a route for.
33. •From the user's point of view, your application is just a
collection of views.
•Although much of the value of the app is in the Models and
Controllers, the Views are what the user interacts with directly.
• In this guide we're going to look at how to create the views that
build your application.
34. ViewPort
Every application consists a main container called
viewport in which all the views of the application are
rendered.
The first view of the application is added in the launch
method of the application.
launch: function() {
// Initialize the main view
Ext.Viewport.add(Ext.create('GS.view.Main'));
}
35. Using Existing Components
The easiest way to create a view is to just
use Ext.create with an existing Component. For
example, if we wanted to create a simple Panel with
some HTML inside we can just do this:
Ext.create('Ext.Panel',
{
html: 'Welcome to my app',
fullscreen: true
});
37. This is the pattern we'll normally want to follow when
building our app - create a subclass of an existing
component then create an instance of it later. Let's
take a look through what we just changed:
We followed the MyApp.view.MyView convention for
our new view class. You can name it whatever you like
but we suggest sticking with convention
Any of the config options available on Ext.Panel can
now be specified in either our new class's config block
or when we come to create our instance.
39. We've used a couple of new options this time:
requires - because we're using a searchfield in our
items array, we tell our new view to require
the Ext.field.Search class. At the moment the dynamic
loading system does not recognize classes specified by
xtype so we need to define the dependency manually
xtype - gives our new class its own xtype, allowing us
to easily create it in a configuration object (just like we
did with searchfield above)
Eg) items: [ { xtype: 'searchbar', docked: 'top' }
40.
41. How we create a model
Note:- To create a model we have to extend ‘Ext.data.Model’
Fields is a config of model which replicate the columns in a table.
42.
43. Associations
Models can be linked together with the Associations
API. Most applications deal with many different
models, and the models are almost always related. A
blog authoring application might have models for
User, Post, and Comment. Each user creates posts and
each post receives comments. We can express those
relationships like so:
44.
45. Each of the hasMany associations we created above
adds a new function to the Model.
We declared that each User model hasMany Posts,
which added the user.posts() function we used in the
snippet above.
Calling user.posts() returns a Store configured with
the Post model.
In turn, the Post model gets a comments() function
because of the hasMany Comments association we set
up.
46. Validations
Models have rich support for validating their data. To demonstrate this we're going to
build upon the example we created that illustrated associations. First, let's add some
validations to the User model:
47. presence simply ensures that the field has a value. Zero
counts as a valid value but empty strings do not.
length ensures that a string is between a minimum and
maximum length. Both constraints are optional.
format ensures that a string matches a regular expression
format. In the example above we ensure that the age field is
four numbers followed by at least one letter.
inclusion ensures that a value is within a specific set of
values (for example, ensuring gender is either male or
female).
exclusion ensures that a value is not one of the specific set
of values (for example, blacklisting usernames like
'admin').
48. Models are typically used with a Store, which is basically a
collection of model instances.
Stores can also load data inline. Internally, Store converts each
of the objects we pass in as data intoModel instances:
49.
50. Sorting and Grouping
Stores are able to perform sorting, filtering, and grouping
locally, as well as to support remote sorting, filtering, and
grouping:
51. Using Proxies
Proxies are used by stores to handle the loading and
saving of model data. There are two types of proxy:
client and server.
Examples of client proxies include Memory for storing
data in the browser's memory and Local Storage which
uses the HTML 5 local storage feature when available.
Server proxies handle the marshaling of data to some
remote server and exampl
Proxies can be defined directly on a model, like so:es
include Ajax, JsonP, and Rest.
52. Summary
We have learnt basics of sencha touch 2.
Setting up environment.
Making builds.
For more reference visit
http://docs.sencha.com/touch/2-0/#!/guide
