Book Image

iPhone JavaScript Cookbook

By : Arturo Fernandez Montoro
Book Image

iPhone JavaScript Cookbook

By: Arturo Fernandez Montoro

Overview of this book

Undoubtedly, the iPhone is one of the most exciting mobile devices in the world. Its iOS is used in other Apple devices such as the iPad and iPod Touch. With this book you'll learn how to build and develop applications for these devices without applying Apple's burdensome and at times restrictive technologies. Just use your experience and knowledge combined with web front-end technologies like JavaScript to build quality web apps. Nobody will know you haven't used Objective-C and Cocoa. The iPhone JavaScript Cookbook offers a set of practical and clear recipes with a step-by-step approach for building your own iPhone applications applying only web technologies such as JavaScript and AJAX. Web developers won't need to learn a new programming language for building iOS applications with a native look and feel. The first part of the book introduces you to the world of iPhone applications. Understanding how it works is required for designing good user interfaces for this device. You will continue learning about how to apply multimedia features to your applications. Common features of web applications, such as AJAX and SQL, can also be applied to our iPhone applications. The third part of the book explains how to deal with specific features of iPhone such as the accelerometer. At the end, you learn how to offer additional features through external websites. With the iPhone JavaScript Cookbook, you will be able to develop outstanding web applications with a for Apple's mobile devices, offering your users all of the advantages of the native look and feel.
Table of Contents (17 chapters)
iPhone JavaScript Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Installing the Sencha Touch framework


This framework allows to build web applications for iOS and Android based on devices with a native look and feel. It uses the new HTML5 standard, CSS3, and techniques such as AJAX, DHTML, and DOM scripting. By reading through this recipe, you'll learn how to install it.

Getting ready

Sencha Touch is distributed based on a dual licensing model. If you're planning to develop an open source application with a license compatible with the GNU GPL License v3, you can download it for free. Otherwise, you must pay for using a commercial license. Prices and information about commercial licenses of this framework can be found at http://www.sencha.com/store/touch/.

How to do it...

Open your browser and type the following URL:

http://www.sencha.com/products/touch/

After loading, you'll see a Download button at the top of the web page. This button allows to download a ZIP file corresponding to the latest released version of the framework. You can find two different versions for Sencha Touch, one for the Open Source version and the other for the Commercial Upgrade. For the recipes of this book, we'll be using the Open Source version. If you need to use the command line to decompress the ZIP file, you can execute a command as follows:

$ unzip sencha-touch-1.0.1a.zip

Now it's time to copy only the required files to our web server. For instance, to do that on Ubuntu Linux, you should execute the following commands:

$ mkdir /var/www/sencha-touch
$ cp sencha-touch-1.0.1a/*.js /var/www/sencha-touch/
$ cp -r sencha-touch-1.0.1a/resources/ /var/www/sencha-touch/
$ cp -r sencha-touch-1.0.1a/src/ /var/www/sencha-touch/

How it works...

In order to use the Sencha Touch in your web projects for iPhone, you'll need to use two files at least. The two files are ext-touch.css and ext-touch.js. The first one is located inside the css subfolder, which is inside the resources folder. The other one can be found in the root directory. Your HTML files should contain these lines inside the head section for loading the required files:

<link rel="stylesheet" href="/sencha-touch/resources/css/ext-touch.css" type="text/css" />
<script type="text/javascript" src="/sencha-touch/ext-touch.js"></script>

Sencha Touch requires an additional JavaScript file for your application. This file will contain the needed code for creating the user interface. For example, if this file is called main.js, the reference on the HTML files will be a line as follows:

<script type="text/javascript" src="main.js" type="text/javascript"></script>

The developers of this framework recommend using the ext-touch.js JavaScript file only for the production environment. Instead of this file, we can use the ext-touch-debub.js file, which is located in the same root folder.

The examples folder contains some good examples to learn how to use this framework. You can load the index.html file inside the examples folder on your WebKit-compatible browser or, of course, directly on the iPhone.

Note

A complete API can be found at http://dev.sencha.com/deploy/touch/docs/.