Writing your first Sencha Touch 1 application – Part1

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.

Contact List
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
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>
    <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>
    <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>
    <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>
    <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
Panel with docked Toolbar

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s