Book Image

Instant Sencha Touch

By : Hiren Dave
Book Image

Instant Sencha Touch

By: Hiren Dave

Overview of this book

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 only framework that enables developers to build fast and impressive apps that work on iOS, Android, BlackBerry, Kindle Fire, and more. Instant Sencha Touch is a practical hands on guide that provides you with all you need to explore the Sencha Touch framework and start building high performance, cross platform mobile applications with rich user interfaces. It also covers native deployment of Sencha Touch applications on various platforms. Instant Sencha Touch is a step-by-step guide that will explain you everything from downloading Sencha Touch SDK to setting up the development environment, and building applications. You will start with a quick overview of the Sencha Touch and work your way through understanding the class structure, and basic components and layouts of the Sencha Touch. You will also cover interesting features like animations, adaptive layout, data packages, local storage support, and so on. You will also see how to build your own theme and styles and deploy Sencha Touch app as native apps. You will also learn about MVC architecture for building Sencha Touch applications. Finally you will take a look at the Phonegap (Cordova) build and Cordova SDK to deploy Sencha Touch application as native application.
Table of Contents (6 chapters)

Installation


In this section we will go through the steps for installing Sencha Touch and setting up the environment.

Downloading Sencha Touch

You can download the latest version of Sencha Touch from the Sencha website at http://www.sencha.com/products/touch/download. You can download either the commercial or open source version. Both are the same version and free of charge. For this book, we have used the Sencha Touch 2.1.1 GPL version. Download and extract the ZIP file.

Setting up the web server on Mac

Mac OS X has its own Apache web server, or you can install third-party tools such as MAMP. For easy access, we will set up Mac OS X's Apache web server. By default, the Apache web server on Mac OS X is not turned on if you have never used it. To enable it, go to System Preference | Sharing and enable Web Sharing.

Depending on your Mac OS X setup, it will show the preceding screen. You can click on the respective buttons to go to the website folders, or you can click on the links to check if the sites are working or not. If you see the following screen when you click on the link for the personal website, it means that the Apache web sever is working:

Now let's move our Sencha Touch folder into the web server so that we can see it using a browser.

From the Sharing window, click on the button Open Web Site Folder. Normally, on Mac OS X, this will go to the Sites folder. Now create a folder with the name sencha and copy all the content from the ZIP file that we downloaded from the Sencha website.

Now open this in a browser with your personal website URL and append sencha to it; you will go to examples of Sencha Touch.

Setting up the web server on Windows

No version of Windows comes with a default Apache server. You may have set up Internet Information Server (IIS), but here we are using XAMPP for Windows. You can download and install XAMPP from the following URL: http://www.apachefriends.org/en/xampp.html.

After downloading, run the installer.

After it's installed, open XAMPP Control Panel and start the Apache web server. There might be issues in starting the Apache server if port 80 is used by other applications. In that case, you might have to stop other applications.

After starting Apache in XAMPP, test it in the browser with either http: //localhost or http://127.0.0.1. If you see the following screen, it indicates that Apache is working:

XAMPP is installed in your Windows installation directory. So if you have Windows installed in C:/, XAMPP is installed in C:/xampp. All XAMPP websites are inside the C:/xampp/htdocs directory. So create a separate folder for sencha there and copy all the contents from the ZIP file, which we downloaded from the Sencha website, and test the site in a browser.

Introduction to Sencha Touch SDK

Once you download and extract Sencha Touch, it will have the following folder structure:

Here, the files for our purpose are sencha-touch-all-debug.js and sencha-touch-all.js. sencha-touch-all-debug.js is the file for debugging purposes, and sencha-touch-all.js is a minified version of files for production. You can find CSS files inside the resources/css folder. By default, there are five files as follows:

  • android.css

  • apple.css

  • bb6.css

  • bb10.css

  • sencha-touch.css

Each file can be used for a specific platform. Normally, for development we use sencha-touch.css. The examples folder contains examples of various classes and components of Sencha Touch. It also contains the Kitchen Sink application and many other applications that will give you an overview of Sencha Touch. src contains the source code files of Sencha Touch. Here you can see how they organize the framework. We will get back to this in a later section. Sencha Touch also has an online documentation that you can access from the following URL: http://docs.sencha.com/touch/2.2.1/.

Here you can check the Sencha Touch API with all the classes. This API document is organized according to the class structure, which we will see in a later section. Here you can check a live preview, example code, configs, properties, methods, and events for all the components of Sencha Touch with a small description and examples so that you can use it easily. If you are not sure where to look for, there is an advanced search function here. You can use it to look out for the class or component you are searching. Here you will find some guides and videos about Sencha Touch application development. All the examples are also available here, so you can check it as a reference for your development.

Other folders in Sencha Touch SDK are not too necessary, so we can skip them for now.

Introduction to the Sencha Touch class system

As we know that Sencha Touch is an OOP-based JavaScript framework, it has its own class system. It is well structured to allow OOP-based programming. The whole framework has a global namespace called Ext. So each class, components, and methods are covered under this single namespace. Ext itself is a singleton class with some helpful methods. We can directly use it without creating an object of Ext. Ext.Base is the base class from which all other classes are inherited. Also, you can inherit any Sencha Touch class and create your own user-defined class. All the other classes follow the same namespace and are grouped inside some other subnamespace in the Ext namespace. Names of the classes map directly to the filepaths in which they are stored. If you check the src folder in your Sencha Touch SDK, you will see that they're grouped under folders that follow the namespace. For example, you will find the definition of Ext.data.Store inside the src/data/Store.js file. This way, all the other classes are defined with suitable namespaces. This way, it's a lot easier to work with Sencha Touch classes.

Defining a class

In Sencha Touch 2, all the classes are defined with the Ext.define method while being used in the application. We normally don't use Sencha Touch classes directly (we will see this in later sections). Refer to the following example:

Ext.define('MyPanel',{
  extend: 'Ext.Panel'
});

The preceding code will define the MyPanel class, which extends the Ext.Panel class. This is an extended class, so we can add our own methods if needed. All the other members of classes can be defined as key-value pairs.

Defining the configuration of a class

In Sencha Touch 2, the config property is introduced to define all the configurations of a class. We can define config properties as key-value pairs. Config properties are totally encapsulated from other class members. In addition to that, an Ext.class preprocessor also generates getter and setter functions for each property inside config, if there are no getter and setter functions in the base class. Also, it generates the application method for all the config properties, which is used internally by setter functions.

Ext.define('MyPanel',{
  extend: 'Ext.Panel',
  config: {
    height: 100,
    width: 100
  }
});

In the preceding example, we have defined the height and width inside the config property. Any other methods are defined outside the config property:

Ext.define('MyPanel',{
  extend: 'Ext.Panel',
  config: {
    height: 100,
    width: 100
},
myFunction: function(){
    //function logic
}
});

Creating an instance of a class

To create a new instance of a class, we use Ext.create.

var panel = Ext.create('MyPanel');

Now we can invoke any member function of the class with the panel variable.

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Also, we can call functions of the base class, as the user-defined class inherits all the properties and methods of the base class. Additionally, you can override any base class function by adding the function with the same name here in the user-defined class.

var panel = Ext.create('MyPanel');
panel.setHtml('My Html');

There is also a shorthand way to identify and create components in Sencha Touch with xtype. Each Sencha Touch component has a unique xtype attribute using which we can identify or create an instance of a component. Also, we can define a user-defined xtype attribute. Refer to the following code snippet:

Ext.define('MyPanel',{
  extend: 'Ext.Panel',
  xtype: 'mypanel',
  config: {
    height: 100,
    width: 100
  },
  items: [{
    xtype: 'panel',
    html: 'This is Child Panel'
  }]
});

In the preceding code, we are adding a child panel item with xtype defined inside the items configuration. Also, we have defined a custom xtype attribute with mypanel. Please note that all the xtype attributes defined in the application should be unique.

Installing Xcode

Xcode is an integrated development environment for developing software and applications for OS X and iOS. This will be needed when we compile our Sencha Touch application to a native application. One advantage of installing Xcode is that it also has simulators for iPhone and iPad, so we can use it to test our Sencha Touch applications in real devices. Xcode is too large to be downloaded, but it can be installed from the App Store in Mac OS X. Open the App Store and search for Xcode.

After installing Xcode, you can use the iPhone or iPad simulator to test the Sencha Touch application from your local Apache server.

Installing Android SDK

You can also download and install Android SDK along with Eclipse. This will be needed to compile and test a Sencha Touch application to the native Android application. You can download Android SDK from the following URL: http://developer.android.com/sdk/index.html.

You can also download it from the Eclipse website at http://www.eclipse.org/.

After you install Eclipse, you can also install Android Development Tools for Eclipse. Once it's installed, you can have Android device emulators to test Sencha Touch applications on Android devices.

Also, you may want to download Cordova (libraries) for later native application development.