Writing your first sencha touch application


Published on

A tutorial on how to get started with creating a cross platform mobile web application that looks like native application using Sencha Touch framework. This is the part 1 of the 3 series tutorial. All the posts are posted in my blog http://jbkflex.wordpress.com

Published in: Technology
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Writing your first sencha touch application

  1. 1. Writing your first Sencha Touch application – Part1The 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 TouchFramework. Sencha Touch is all about developing mobile web applications that look like native in iPhone, Androidand 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 particularcontact item is clicked/tapped then an overlay will show more information about that person. This is how it will look atthe end. Our applicationWhere 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 selectingdownload. It is free to download. Read the licensing options though http://www.sencha.com/products/touch/license/.Getting StartedAfter downloading the zip file extract it to your project folder. You can use a local web server to test your application. Iused WAMP as my local server and deployed all my code there. Using a local server will also help if you have Ajaxcalls in your application which we will not discus in this tutorial. Keep this for later discussions. First things first, allthat you will need to get started is the JavaScript library file from Sencha. Copy the sencha-touch-debug.js filefrom the extracted Sencha folder and put it in your library path where you can access it easily. Make a js folder underyour root folder to keep all the java script files there and paste the sencha-touch-debug.js file you copied. You willnote 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 aredeveloping your application locally while the sencha-touch.js file is for production purpose. Use this in yourproduction 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 allyou need to get started. The rest is to write your code.Supported browsers
  2. 2. Sencha Touch mobile applications run only in Web-kit browsers namely Google Chrome and Safari. So test yourapplication only in these browsers. Sencha Touch is for mobile devices and these are the browsers that you willmostly find in them.Writing your codeTill now I have made a js folder and copied the sencha-touch-debug.js file under it. Also, I made a css folder andcopied the sencha-touch.css file there. Now make a index.html file under your root folder. This is where we willwrite our code. This is how it looks at this moment. Folder structureOpen 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>
  3. 3. 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 jsfolder 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 aExt.setup() method which takes a configuration object as parameter. This is the basic method to start with. It will setup 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 ofthem means.tabletStartupScreen: as seen it specifies the path of icon file to use as start up screen on tablet devicesphoneStartupScreen: it specifies the name of the icon file to use as start up screen on mobile devicesicon: 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 allthe 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,
  4. 4. 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 ourcomponents such as the list will be added to this viewport. Every Sencha Touch application must have a viewport thatwill hold together other view elements. I am using a Panel as the parent container that will hold the contact list. Tocreate 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 aboutthe resolution, dockedItems – this is another property which is actually an array of other Sencha components. I haveput a toolbar with a title of ‘Contact List’ within it and docked it to top by setting dock:true. What happens is that atoolbar is docked at top of our application. You might be wandering what the xtype is all about. Well, its kind of ashortcut used for component classes. Instead of writing new Ext.ToolBar() to create a new instance we usethe xtype to specify the same inside an object. Here I have used a few of the properties. To find all the properties andmethods you can use the Sencha Touch API docs http://dev.sencha.com/deploy/touch/docs/ and search for Panelclass 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
  5. 5. Panel with docked ToolbarThis is getting long. Let’s take the rest of the tutorial to the next part which is here