Writing your first sencha touch application

Writing your first Sencha Touch application – Part1
The whole series Part1, Part2 and Part3 can be viewed in my Blog.

In this tutorial we will build a simple Sencha Touch application that will help you get started with this new Touch
Framework. Sencha Touch is all about developing mobile web applications that look like native in iPhone, Android
and Blackberry touch devices. It is a JavaScript library that complies to all the latest web standards like HTML5,
CSS3. To start with we will be developing a simple contact list that will store contact information. When a particular
contact item is clicked/tapped then an overlay will show more information about that person. This is how it will look at
the end.

Our application

Where do I get Sencha Touch library?
You can download it by going to the Sencha Touch home page http://www.sencha.com/products/touch/ and selecting
download. It is free to download. Read the licensing options though http://www.sencha.com/products/touch/license/.
Getting Started
After downloading the zip file extract it to your project folder. You can use a local web server to test your application. I
used WAMP as my local server and deployed all my code there. Using a local server will also help if you have Ajax
calls in your application which we will not discus in this tutorial. Keep this for later discussions. First things first, all
that you will need to get started is the JavaScript library file from Sencha. Copy the sencha-touch-debug.js file
from the extracted Sencha folder and put it in your library path where you can access it easily. Make a js folder under
your root folder to keep all the java script files there and paste the sencha-touch-debug.js file you copied. You will
note that inside the extracted Sencha folder there are two files to use, sencha-touch.js and sencha-touch-
debug.js, as the name suggests the sencha-touch-debug.js file is for debugging purpose. Use this while you are
developing your application locally while the sencha-touch.js file is for production purpose. Use this in your
production server. You can further minify the js files by G-zipping them. You can further copy the sencha-
touch.css file from the sencha ->resources ->css folder to you own folder. Ok, things are in place now. This is all
you need to get started. The rest is to write your code.
Supported browsers

Sencha Touch mobile applications run only in Web-kit browsers namely Google Chrome and Safari. So test your
application only in these browsers. Sencha Touch is for mobile devices and these are the browsers that you will
mostly find in them.
Writing your code
Till now I have made a js folder and copied the sencha-touch-debug.js file under it. Also, I made a css folder and
copied the sencha-touch.css file there. Now make a index.html file under your root folder. This is where we will
write our code. This is how it looks at this moment.

Folder structure

Open the index.html file and include references to the Sencha library files you copied in js and css folders. Refer the
files inside your head section

<head>

<title>My first Sencha Touch application</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<link href="css/sencha-touch.css" rel="Stylesheet"/>

<script type="text/javascript" src="js/sencha-touch-debug.js"></script>

</head>

Now create another script block inside which we will write our code to develop the contact list.

<head>





<script type="text/javascript"></script> //your script block. Write code here

</head>

I am writing the java script code inline i.e inside the index.html file for now. You can create a separate .js file under js
folder and put your code there and reference the file in your index.html file.
Now, within the newly created script block we will start our Sencha code. To launch a Sencha application we use a
Ext.setup() method which takes a configuration object as parameter. This is the basic method to start with. It will set
up a page for the touch-enabled devices.

Ext.setup({

tabletStartupScreen: 'tablet_startup.png',

phoneStartupScreen: 'phone_startup.png',

icon: 'icon.png',

glossOnIcon: false,

onReady: function(){}

});

The properties that you see inside the curly braces {} are the configuration object’s parameter. Let’s see what each of
them means.
tabletStartupScreen: as seen it specifies the path of icon file to use as start up screen on tablet devices
phoneStartupScreen: it specifies the name of the icon file to use as start up screen on mobile devices
icon: it specifies the name of the default icon file. This appears in the title bar of the browser.
glossOnIcon: true to set a glossy effect on the default icon, false to not add the effect.
onReady: is a method and an all important one. This function is invoked when the browser’s DOM is ready and all
the files have been loaded. We will put all our Sencha components or the view within this method.

<head>





<script type="text/javascript">

Ext.setup({

tabletStartupScreen: 'tablet_startup.png',

phoneStartupScreen: 'phone_startup.png',

icon: 'images/homeblue.png',

glossOnIcon: false,

onReady: function(){

new Ext.Panel({

fullscreen:true,

layout:'fit',

dockedItems:[{xtype:'toolbar', title:'Contact List'}],

dock:'top',

scroll:'vertical'

});

}

});

</script>

</head>

Now, I am creating a panel component inside the onReady() method. This will be our viewport and all our
components such as the list will be added to this viewport. Every Sencha Touch application must have a viewport that
will hold together other view elements. I am using a Panel as the parent container that will hold the contact list. To
create a Panel we use the Ext.Panel class (defined in Sencha API) and create a new instance of it. The Ext.Panel()
constructor takes as parameter a configuration object where we specify important properties such as fullscreen-
setting this to true ensures that the viewport will cover the entire screen of the touch device, you need not worry about
the resolution, dockedItems – this is another property which is actually an array of other Sencha components. I have
put a toolbar with a title of ‘Contact List’ within it and docked it to top by setting dock:true. What happens is that a
toolbar is docked at top of our application. You might be wandering what the xtype is all about. Well, its kind of a
shortcut used for component classes. Instead of writing new Ext.ToolBar() to create a new instance we use
the xtype to specify the same inside an object. Here I have used a few of the properties. To find all the properties and
methods you can use the Sencha Touch API docs http://dev.sencha.com/deploy/touch/docs/ and search for Panel
class in the search bar.
If you run the application now this is how it should look. You can test it in your machine’s browser also

Panel with docked Toolbar

This is getting long. Let’s take the rest of the tutorial to the next part which is here

Writing your first sencha touch application

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

Writing your first sencha touch application