- Sencha Touch Cookbook
- Ajit Kumar
- 437字
- 2021-08-20 15:56:06
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).
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
touchin your web server'sdeployment/rootfolder, for example,public_htmlorhtdocs. - Copy the content of the
assets\wwwfolder, prepared in the Setting up the Android-based development environment recipe, to thetouchfolder. After copying, thetouchfolder should have the following files:
- Remove
phonegap-1.0.0.jsfromindex.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.
See also
The recipe named Setting up the Android-based development environment in this chapter.