Book Image

Sencha Touch Cookbook

By : Ajit Kumar
Book Image

Sencha Touch Cookbook

By: Ajit Kumar

Overview of this book

Sencha touch is a versatile HTML5-based framework for developing mobile web apps that look and feel native on touch screen devices, and with it you can write your code once and deploy it to both iOS and Android saving you both time and money. The Sencha touch cookbook has a comprehensive selection of recipes covering everything from installation right through to HTML5 geo location. The Sencha Touch Cookbook really is your one stop resource for cross platform HTML5 application development. It covers the basics such as setting up an iOS and Android development environment right through to much more complex development issues such as touch gestures, animation, rich media and geo location. Every recipe is practically focused. Maximum action. Minimum theory.
Table of Contents (17 chapters)
Sencha Touch Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Setting up the browser-based development environment


In the previous recipes, we saw how we can make use of PhoneGap to build, package, and deploy the Sencha Touch applications directly on the device. Another very popular kind of application is the browser-based one. All the devices which Sencha Touch supports come along with Internet browsers. In this recipe, we will see how we can develop a Sencha Touch application, access it, and test it using Internet browsers.

Sencha Touch is moving towards using HTML5 features but, today, it heavily uses the WebKit engine and, hence, in order to test the applications, we will require a browser which runs on the WebKit engine—Opera, Safari, and Chrome. We can also test most of the things on a browser running on your desktop/workstation (except things such as orientation changes).

Note

Sencha Touch applications do not work on browsers using the Gecko engine, which includes Mozilla Firefox.

We will be using this environment for this book to demonstrate the capabilities of Sencha Touch.

Getting ready

Make sure that your device has a WebKit compatible browser—Opera, Safari, or Chrome.

Verify that you have your GPRS or Wi-Fi enabled and working on your device, so that you are able to access the Internet.

You should have a web server such as Apache or Nginx deployed on a server, which is accessible on the Internet. For example, I have my web server running on http://walkingtree.in.

How to do it...

Carry out the following steps:

  1. Create a folder named touch in your web server's deployment/root folder, for example, public_html or htdocs.

  2. Copy the content of the assets\www folder, prepared in the Setting up the Android-based development environment recipe, to the touch folder. After copying, the touch folder should have the following files:

  3. Remove phonegap-1.0.0.js from index.html.

  4. Go to the Internet browser on your device and enter the URL: http://<your domain or ip address>:<port>/touch (for example, http://walkingtree.in/touch) in the address bar and hit Go. You should have the application running inside the browser.

How it works...

In step 1, we created the touch folder as a placeholder to keep our application code inside it. This would help us avoid polluting the web server's root folder.

In step 2, we copied the contents from the assets\www folder, which we prepared in the Setting up the Android-based development environment recipe. In step 3, we removed the <script> tag including the PhoneGap JS file, as we are not going to use its APIs in this book. Finally, in step 4, we accessed the application from a browser.

See also

The recipe named Setting up the Android-based development environment in this chapter.