Setting up the browser-based development environment_Sencha Touch Cookbook-QQ阅读男生轻小说网

上QQ阅读APP看书，第一时间看更新

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:

Create a folder named touch in your web server's deployment/root folder, for example, public_html or htdocs.
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:
Remove phonegap-1.0.0.js from index.html.
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.