iPhone JavaScript Cookbook

By Arturo Fernandez Montoro
    What do you get with a Packt Subscription?

  • Instant access to this title and 7,500+ eBooks & Videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Frameworks Make Life Easier

About 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.

Publication date:
June 2011


Chapter 1. Frameworks Make Life Easier

In this chapter, we will cover:

  • Why frameworks are so good

  • Main frameworks for iPhone development

  • Installing the iUI framework

  • Installing the UiUIKit framework

  • Installing the XUI framework

  • Installing the iWebKit framework

  • Installing the WebApp.Net framework

  • Installing the PhoneGap framework

  • Installing the Sencha Touch framework

  • Installing the Apple Dashcode framework



Many web applications implement common features independent of the final purpose for which they have been designed. Functionalities and features such as authentication, forms validation, retrieving records from a database, caching, logging, and pagination are very common in modern web applications. As a developer, surely you have implemented one or more of these features in your applications more than once. Good developers and software engineers insist on concepts, such as modularity, reusability, and encapsulation; as a consequence you can find a lot of books, papers, and articles talking about how to design your software using these techniques. In fact, modern and popular methodologies, such as Extreme Programming, Scrum, and Test-driven Development are based on those principles. Although this approach sounds very appealing in theory, it might be complicated to carry it out in practice.

Developing any kind of software from scratch for running in any platform is undoubtedly a hard task. Complexity grows up when the target platform, operating system, or machine has its own specific rules and mechanisms. Some tools can make our job less complicated but only one kind of them is definitely a safe bet. It is here when we meet frameworks, a set of proven code that offers common functionality and standard structures for software development. This code makes our life much easier without reinventing the wheel and gives a skeleton to our applications, making sure that we're doing things correctly. In addition, frameworks avoid starting from scratch once more. From a technical point of view, most frameworks are a set of libraries implementing functions, classes, and methods.

Using frameworks, we can save time and money, writing less code due to its code skeleton, and features implemented on it. Usually, frameworks force us to follow standards and they offer well-proven code avoiding common mistakes for beginners. Tasks such as testing, maintenance, and deployment are easier to do using frameworks due to the tools and mechanisms included. On the other hand, the learning curve could be a big and difficult drawback for beginners.

Through this chapter, we'll learn how to install the main frameworks for JavaScript, HTML, and CSS development for iPhone. All of them offer a base to develop applications with a consistent and native look and feel using different methods. While some of them are focused on the user interface, others allow using AJAX in an efficient and easy way. Even some frameworks allow building native applications from the original code of the web application. We have the chance to choose which is better to fulfill our requirements; it is even possible to use more than one of these solutions for the same application. For our recipes, we'll use the following frameworks:

  • iUI: This is focused on the look and feel of iPhone and consists of CSS files, images, and a small JavaScript library. Its objective is to get a web application running on the device with a consistent interface such as a native application. This framework establishes a correspondence between HTML tags and conventions used for developing native applications.

  • UiUIKit: Using a set of CSS and image files, it provides a coherent system for building web applications with a graphic interface such as native iPhone applications. The features offered for this framework are very similar to iUI.

  • XUI: This is a pure JavaScript library specific for mobile development. It has been designed to be faster and lighter than other similar libraries, such as jQuery, MooTools, and prototype.

  • iWebKit: This is developed specifically for Apple's devices and is compatible with CSS3 standard; it helps to write web applications or websites with minimum HTML knowledge. Its modular design supports plugins for adding new features and we can build and use the themes for UI customization.

  • WebApp.Net: This framework comes loaded with JavaScript, CSS, and image files for developing web application for mobile devices that uses WebKit engine in its web browsers. Besides building interfaces, this framework includes functionality to use AJAX in an easy and efficient way.

  • PhoneGap: This is designed to minimize efforts for developing native mobile applications for different operating systems, platforms, and devices. It is based on the WORE (Write once, run anywhere) principle and it allows conversion from a web application into a native application. It supports many platforms and operating systems, such as iOS, Android, webOS, Symbian, and BlackBerry OS.

  • Sencha Touch: This is a complete mobile web framework based on HTML5, JavaScript, and CSS standards for developing Android and iOS-based applications. It has been developed by Sencha — the owner company of the popular JavaScript framework Ext JS.

  • Apple Dashcode: Formally, this is a software development tool for Mac OS X included in Leopard and Snow Leopard versions, and focused on widget development for these operating systems. However, the last versions allow you to write web applications for iPhone and other iOS devices offering a graphic interface builder.


Installing the iUI framework

This recipe shows how to download and install the iUI framework on different operating systems. Particularly, we'll cover Microsoft Windows, Mac OS X, and GNU/Linux.

Getting ready

The first step is to install and get ready; some tools need to be downloaded and decompressed. As computer users, we know how to decompress files using software such as WinZip, Ark, or the built-in utility on Mac OS X. You will surely have installed a web browser on your computer. If you are a Linux or Mac developer, you already know how to use curl or wget. These tools are very useful for quick download and you only need to use the command line through applications such as GNOME Terminal, Konsole, iTerm, or Terminal. iUI is an open source project, so you can download the code for free.

The open source project releases some stable versions packed and ready to download, but it is also possible to download a development version. This one could be suitable if you prefer working with the latest changes made by the official developers contributing to the project. Due to this, developers are using Mercurial version control and thus we'll need to install a client for it to get access to this code.

How to do it...

iUI is an open source project so you can download the code for free. Open your favorite web browser and enter this URL:


In that web page, you'll see a list with files that refer to different release versions of this framework. Clicking on the link corresponding to the latest release's drives takes you to a new web page that shows you a new link for the file. Click on it for instant downloading.

If you are a GNU/Linux user or a Mac developer you will be used to command line. Open your terminal application and launch this command from your desired directory:

$ wget http://iui.googlecode.com/files/iui-0.31.tar.gz

Once you have downloaded the tarball file, it's time to extract its content to a specific folder on our computer. WinZip and WinRAR are the most popular tools to do this task on Windows. Linux distributions, by default, install similar tools such as File Roller and Ark. Double-clicking from the download window of the Safari browser will extract the files directly to your default folder on your Mac, which is usually called Downloads. For command-line enthusiasts, execute the following command:

$ tar zxvf iui-0.31.tar.gz

How it works...

After decompressing the downloaded file, you'll find a folder with different subfolders and files. The most important is a subfolder called iui that contains CSS, images, and JavaScript files for building our web applications for iPhone. We need to copy this subfolder to our working folder where other application files reside.

Sharing this framework across different web applications is possible; you only need to put the iUI at a place where these applications have permissions to access. Usually, this place is a folder under the DocumentRoot of your web server. If you're planning to write a high load application, it would be a good idea to use a cloud or CDN (Content Delivery Network) service such as Amazon Simple Storage Services (Amazon S3) for hosting and serving static HTML, CSS, JavaScript, and image files.

Installing the iUI framework is a straightforward process. You simply download and decompress one file, and then copy one folder into an other, which has permission to be accessed by the web server.

Apache is one of the most used and extended web servers in the world. Other popular options are Internet Information Server (IIS), lighttpd, and nginx. Apache web server is installed by default on Mac OS X; most of the operating systems based on Linux and UNIX offer binary packages for easy installation and you can find binary files for installing on Windows as well. IIS was designed for Windows operating systems, meanwhile, lighttpd and nginx are winning popularity and are used on UNIX systems as Linux's distros, FreeBSD, and OpenBSD. Ubuntu Linux uses /var/www/ directory as the main DocumentRoot for Apache. So, in order to share iUI framework across applications, you can copy the folder to the other folder by executing this command:

$ cp -r iui-0.31/ui /var/www/iui

If you are a Mac user, your target directory will be /Library/WebServer/Documents/iui.

There's more...

Inside the samples subfolder, you'll find some files showing capabilities of this framework, including HTML and PHP files. Some examples need a web server with PHP support but you can test others using Safari web browser or an other WebKit's browser such as Safari or Google Chrome. Open index.html with a web browser and use it as your starting point.

If you prefer to use the latest version in development from the version control, you'll need to install a Mercurial client. Most of the GNU/Linux distribution such as Fedora, Debian, and Ubuntu includes binary packages ready to install them. Usually, the name of the binary package is mercurial. The following command will install the client on Ubuntu Linux:

$ sudo apt-get install mercurial

Mercurial is an open source project and offers a binary file ready to install for Mac OS X and Windows systems. If you're using one of these, go to the following page and download the specific file for your operating system and version:


After downloading, you can install the client using the regular process for your operating system. Mac users will find a ZIP file containing a binary package. For Windows, the distributed file is a MSI (Microsoft Installer), ready for self-installation after clicking on it.

Despite that the client of this version control was developed for the command line, we can find some GUI tools online such as TortoiseHG for Windows. These tools are intuitive and user-friendly, allowing an interactive use between the user and the source files hosted in the version control system. TortoiseHG can be downloaded from the same web page as the Mercurial client.

Finally, we'll download the version development of the iUI framework executing the following command:

$ hg clone https://iui.googlecode.com/hg/ iui

The new iui folder includes all files of the iUI framework. We should copy this folder to our DocumentRoot.


If you want to know more about this framework, point your browser at the official wiki project:


Also, taking a look at the complete code of the project may be interesting for advanced developers or just for people wanting to learn more about internal details:



Installing the UiUIKit framework

UiUIKit is the short name of the Universal iPhone UI Kit framework. The development of this framework is carried out through an open source project hosted in Google Code and is distributed under the GNU Public License v3. Let's see how to install it on different operating systems.

Getting ready

As the main project file is distributed as a ZIP file, we'll need to use one tool for decompressing these kind of files. Most of the modern operating systems include tools for this process. As seen in the previous recipe, we can use wget or curl programs for downloading the files.

If you are planning to read the source code or you'd like to use the current development version of the framework, you'll need a Subversion client as the UiUIKit project is working with this open source version control.

How to do it...

Open your web browser and type the following URL:


After downloading, click on the link for the latest version from the main list, for instance, the link called UiUIKit-2.1.zip. The next page will show you a different link for this file that represents the version 2.1 of the UiUIKit framework. Click on the link and the file will start downloading immediately.

Mac users will see how the Safari browser shows a window with the content of the compressed file, which is a folder called UiUIKit, which is stored in the default folder for downloads.

Command line's fans can use these simple commands from their favorite terminal tool:

$ cd ~
$ curl -O http://iphone-universal.googlecode.com/files/UiUIKit-2.1.zip

After downloading, don't forget to decompress the file on your web-specific directory. The commands given next execute this action on Linux and Mac OS X systems:

$ cd /var/www/
$ unzip ~/UiUIKit-2.1.zip

How it works...

The main folder of the UiUIKit framework contains two subfolders called images and stylesheets. The first one includes many images used to get a native look for web applications on the iPhone. The other one offers a CSS file called iphone.css. We only need the images subfolder with its graphic files and the CSS file.

In order to use this framework in our projects, we need to allow our HTML files access to the images and the CSS file of the framework. These files should be in a folder with permissions for the web server. For example, we'll have a directory structure for our new web application for iPhone as follows:


Remember that this framework doesn't include HTML files; we only need a bunch of the graphic files and one stylesheet file. The HTML files showed in the previous example will be our own files created for the web application.

We'll also find a lot of examples on different HTML files located in the root directory, outside the mentioned subfolders. These files are not required for development but they can be very useful to show how to use some features and functionalities.

There's more...

For an initial contact with the capabilities of the framework it would be interesting to take a look at the examples included in the main directory of the framework. We can load the index.html in our browser. This file is an index to the different examples and offers a native interface for the iPhone. Safari could be used but is better to access from a real iPhone device.

Subversion is a well-proven version control used by many developers, companies, and, of course, open source projects. UiUIKit is an example of these projects using this popular version control. So, to access the latest version in development, we'll need a client to download it. Popular Linux distributions, including Ubuntu and Debian have binary packages ready to install. For instance, the following command is enough to install it on Ubuntu Linux:

$ sudo apt-get install subversion

The last versions of Mac OS X, including Leopard and Snow Leopard, includes a Subversion client ready to use. For Windows, you can download Slik SVN available for 32-bit and 64-bits platforms; installation programs can be downloaded from: http://www.sliksvn.com/en/download.

When you are sure that your client is running, you could execute it for getting the latest development version of the UiUIKit framework. Mac and Linux users will execute the following command:

$ svn checkout http://iphone-universal.googlecode.com/svn/trunk/ UiUIKit


All information related to the UiUIKit framework project could be found at: http://code.google.com/p/iphone-universal/


Installing the XUI framework

Frameworks and libraries such as jQuery, prototype, MooTools, YUI, and Dojo are becoming very popular among web developers. All of them present an easy way for using the DOM model of HTML in addition to the AJAX capabilities and other interesting features such as animations, including support for multiple browsers avoiding the complexity of cross-browser applications. It sounds pretty good but the problem is that they aren't focused on mobile devices. To solve this problem we're introducing XUI, a simple but powerful and lightweight JavaScript framework.

Getting ready

XUI is open source and can be downloaded from the main page of its website (http://xuijs.com/). As seen in the previous recipes, you will need a web browser or a command-line utility for downloading. Developers or people interested in development versions will need a client for it, the version control system used by the XUI open source project.

How to do it...

Open your web browser and type this URL: http://xuijs.com/downloads/.

In the list, we'll find different versions related to the general mobile devices and specific for BlackBerry and Windows Mobile operating systems. Each version has two different files, one minified and the other commented. The first one should be used for production environments. We'll download the commented version for general mobile devices, marked as webkit/firefox/opera. After clicking on the specified link, you'll have a new file called xui-2.0.0.js. If you prefer to use command line, you can execute the following command:

$ wget http://xuijs.com/downloads/xui-2.0.0.js

The last step will be to copy these files to a folder inside our DocumentRoot directory. For example, on Fedora Linux:

$ sudo mkdir /var/www/html/xui
$ sudo cp xui-2.0.0.js /var/www/html/xui/

How it works...

XUI is a pure JavaScript framework integrated only by files written in this programming language. In order to use this lightweight and fast framework, we only need to copy the two JavaScript files into a folder with permissions for our web server, and then include a reference on the HTML files of our web application for iPhone.

Inside the head section of our HTML files, we'll need to add this line:

<script type="text/javascript" src="xui/xui-2.0.0.js"></script>


A complete reference and documentation for the XUI framework can be found at: http://xuijs.com/docs.

All the source code for the XUI can be found at http://github.com/xui/xui.


Installing the iWebKit framework

The iWebKit is a framework focused on being fast, lightweight, and specifically for developing web applications and websites for Apple's devices. Installation is a straightforward process, as we'll see in this recipe.

Getting ready

This framework can be downloaded for free from its main website. As it is distributed as a ZIP file, we'll need a web browser or command-line utility, as seen in the previous recipes, and a tool for decompressing.

How to do it...

Point your browser at the following URL and download the file through the Download button:


When the download is finished, decompress the file:

$ unzip iWebKit5.04.zip

Finally, copy the JavaScript, CSS, and graphic files to a folder under DocumentRoot. For example, on Ubuntu Linux, we'll execute the following commands:

$ mkdir /var/www/iWebKit
$ cd iWebKit5.04/Framework
$ cp -r css /var/www/iWebKit/
$ cp -r images /var/www/iWebKit/
$ cp -r javascript /var/www/iWebKit/

Our iWebKit copy is ready to use for iPhone web application development.

How it works...

After decompressing the main ZIP file, you'll see different files and folders. Most important is the Framework folder that contains the required JavaScript, graphics, and stylesheet files for developing our own applications. iWebKit also includes some PDF files, one of them is a practical user's guide showing how to use the framework through many examples. The last folder included in the ZIP file is called iWebKit demo and it contains examples, including some PHP files for showing how to establish a communication between the client and the server side of web applications.

The HTML files of our applications developed using this framework should include the following lines in the head section:

<link href="/iWebKit/css/style.css" rel="stylesheet" media="screen" type="text/css" />
"<script src="/iWebKit/javascript/functions.js" type="text/javascript"></script>"

By observing the preceding lines, we guess style.css is the main stylesheet and functions.js is the file that has the main JavaScript code used for the framework. Probably, we'll use some images as well. In this case, don't forget to use a reference to the images folder.

There's more...

The Userguide.pdf is a small tutorial introducing the iWebKit framework and it is really useful for an initial contact. This document is focused on practical issues, avoiding internal details. Another good starting point is the included examples; load the index.html file on your browser or on your Apple device. This file allows access to different examples showing some features and functionalities.

Before starting the development using this framework, you can take a look at some of the websites and applications developed by others. iWebKit's website has a special page showing these examples:


Forums allow the developers and users to exchange questions, answers, and knowledge. iWebkit has its own forum open to everyone; you only need to register to send your own questions and answers. This interesting forum can be reached at:



Installing the WebApp.Net framework

This JavaScript framework is not specific for iPhone and other Apple devices. It was designed for different modern mobile devices focused on AJAX functionality, offering functions to avoid the complexity of developing this technology from scratch. In fact, it is very useful due to differences between web browsers of the mobile platforms and operating systems. This recipe explains how to install the WebApp.Net on Linux, Windows, and Mac OS X operating systems.

Getting ready

WebApp.Net is a set of HTML, JavaScript, and CSS files packed and distributed as a ZIP file and can be downloaded for free. We'll need a web browser to download this file and a tool to decompress it.

How to do it...

Type the following URL on your favorite web browser and click on the link located on the right (get it now: v0.5.2): http://webapp-net.com/.

When the file has been downloaded, it can be decompressed using a tool such as WinZip on Windows. Safari users will find a new folder called base-package-v0 on the default folder for downloads. Linux users can execute the following command from a terminal tool:

$ unzip base-package-v0.5.2-20100206.zip

After decompressing, you will need to copy the required files of the framework to our folder under control of the web server. For instance, you will execute these commands on Mac:

$ mkdir /Library/WebServer/Documents/WebAppNet
$ cp -r base-package-v0/WebApp /Library/WebServer/Documents/WebAppNet

How it works...

The main ZIP file of the framework contains many files but the most important is the WebApp folder that will be needed for developing our own web applications for the Apple devices. In order to use the WebApp.Net framework, at a minimum we will need two files that should be included on the head section of our HTML pages. Actually, the following lines are required:

<link rel="stylesheet" href="/WebAppNet/Design/Render.css" />
<script type="text/javascript" src="/WebAppNet/Action/Logic.js"></script>

Inside the WebApp folder, we can find different subfolders such as Design, Action, and Img. The first one of them stores two CSS files and some graphic images required by these stylesheets. Action subfolders contain the main JavaScript file called Logic.js and the last subfolder is Img, responsible for the main graphic files needed to get a native look and feel for the applications.

There's more...

As a part of the commented WebApp main folder, this framework contains other folders inside the ZIP file. These subfolders are Debug and Tools. The first one offers the JavaScript and CSS files without minimizing them, which is useful for development environments. They are more human readable than the others included on the WebApp main folder. The Tools subfolder has one PHP file for allowing us to use a proxy with the XML data. In addition, two stylesheets are also included. One of them is specific for the Mozilla Firefox web browser and can be used for testing and developing our web applications.


WebApp.Net has a complete documentation for users and developers that can be found at: http://webapp-net.com/Doc/.

Same case as iWebKit, you can find a complete and useful forum for WebApp.Net at: http://webapp-net.com/Forums/.


Installing the PhoneGap framework

PhoneGap is a web framework designed to build cross-platform for mobile devices. The framework includes a set of tools to deploy your applications on different mobile operating systems without changing the original code written using HTML, CSS, and JavaScript. We'll cover how to install this framework on Mac to be used for iPhone development.


Please keep in mind that the version of PhoneGap for iOS development only works on a machine with a recent version of Mac OS X installed, such as Leopard or Snow Leopard.

Getting ready

We'll need the Xcode tool for building applications for Apple devices using the PhoneGap framework. This tool is an IDE (Integrated Development Environment) designed for Mac OS X. It can be downloaded for free and it's included on the latest releases of the Apple's operating system including Leopard and Snow Leopard.

In addition to Xcode, you will need to install the SDK (Software Development Kit) for iPhone, also knows as iOS SDK. Apple distributes this software for free; you only need to register as a developer. This process is fast and you can use your own Apple's ID.

How to do it...

The first step will be to install Xcode and the iOS SDK. Apple distributes these tools in one DMG file ready for downloading and installing. For registering as an Apple Developer, you should open your browser and type the following URL:


Follow the instructions on the screen and then at the end of the process, you can access the specific link for downloading this SDK. This link appears as iOS SDK 4.1; it is located at http://developer.apple.com/devcenter/ios/. The next page will show you a list with different links. If you click on the Downloads link, it drives you to the other link specific for the latest version of the SDK and Xcode. After clicking, the file will be downloaded to your Downloads folder.

When you have the DMG file on your computer, click on it and the installation process will be launched. Note that this process will take a long time because the size of the file is over 3.5 GB. Follow all the instructions on the screen. When the process ends, you will be able to access the applications for launching Xcode. The SDK will be auto configured and ready to use with the installed IDE.

Now, we are going to download the PhoneGap framework. It's distributed as a compressed file in ZIP and tarball format. We can download it using our browser and loading the URL http://www.phonegap.com/download. You'll find a button to download it. After downloading, you should decompress the file into your DocumentRoot folder:

$ cd /Library/WebServer/Documents/
$ unzip ~/Downloads/phonegap-0.9.4.zip

It's time to link PhoneGap to Xcode. For this process, we'll need to use the command line through the Terminal application. Open this application and execute the following commands:

$ cd /Library/WebServer/Documents/phonegap-0.9.4/phonegap-iphone
$ make

The make command will generate a binary package (PhoneGapLibInstaller.pkg) for installing PhoneGap on your computer. To start the installation process, open the Finder and click on this new generated file. Follow the simple instructions onscreen. At the end of this process, you'll be ready to use Xcode to build applications using the PhoneGap framework.

How it works...

PhoneGap uses different tools to create native applications for different mobile platforms. This is the reason to include specific folders for each operating system supported by the framework. We are focused on Apple's devices, so the most important folder for us is the phonegap-iphone. This folder was used to build the required tools to use PhoneGap with Xcode and the iOS SDK.

Don't forget that PhoneGap was designed to build native applications. In fact, we'll need a Mac Intel-based computer with Snow Leopard and the commented tools installed.

PhoneGap installs a specific template for Xcode ready to create new projects using this template. When you create a new project (File | New project), a dialog box shows you a user template called PhoneGap. This template generates the skeleton for a PhoneGap application using a Xcode project file. After the new project is created, you can see a folder called www. This is the place to put your application files. Remember, we're using web technologies to create native applications.

Inside the www folder, a main file called index.html is created by default. This file contains the minimum code for a PhoneGap-based application. The head section includes a reference to a main JavaScript file called phonegap.js. This file was created during the installation process of the binary package.

For testing our PhoneGap applications, we can use the iPhone simulator — a tool included in the iOS SDK. The Build and Run button of the IDE will invoke directly to run our applications on this simulator. Before this step, we need to choose Simulator-4.1 as the platform target on the configuration of Xcode for our development project.

The iPhone simulator can be launched from the Application folder as an independent application. Actually, we can use this tool to test our application instead of a real device. Any kind of web application can be tested from the simulator, not only the PhoneGap-based application.

Keep in mind, we'll need to be registered iOS developers to install our native applications into our physical devices. The registration process is not free; you need to pay an annual fee to Apple. For more information about the conditions, requirements, and related information about the iOS Developer Program, take a look at https://developer.apple.com/programs/ios/.

A complete API documentation with useful examples can be found at http://docs.phonegap.com.

The wiki site of the PhoneGap project is another resource for documentation and can be found at http://phonegap.pbworks.com/.

The PhoneGap project maintains a repository with applications developed by many authors. It could be interesting to take a look at it: http://www.phonegap.com/apps/. Maybe you can consider the idea of uploading your own!

If you are interested in contributing to the PhoneGap open source project, you can start reading the contributor agreement located at http://www.phonegap.com/contributor-agreement/.


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:


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.


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


Installing the Apple Dashcode framework

From the technical point of view, Dashcode is not a framework. However, it provides a tool with a set of components and utilities designed for building iOS web applications. This is the reason for talking about it in this chapter.

In this recipe, we'll see how to install this development tool designed by Apple.

Getting ready

Apple Dashcode is a software tool for development designed for running on Mac OS X. We'll need a recent version of this operating system such as Leopard or Snow Leopard. It is not possible to install this software on Windows or Linux systems.

How to do it...

Dashcode is a part of the Xcode's development tools included on the Snow Leopard DVD as an optional install. The first step will be to insert the mentioned DVD on the drive of the computer.

When the DVD is loaded, a new Finder's window will be launched. This window will show two folders, one called Optional Installs and other called Instructions. Click on the Optional Installs folder. Inside this folder, you'll find a binary package called Xcode. If you click on it, the installation process will be started. Follow the instructions on the screen provided during this process. After some minutes, Xcode will be installed on your computer.

How it works...

Mac OS X uses a different folder for Applications to store specific tools for developers. This folder is called the Developer folder and it contains another folder called Applications, where you'll find Dashcode. For accessing the Developer folder, you can click on the folder, which represents your main device; usually it is called Macintosh HD. The absolute path of the executable file for Dashcode is /Developer/Applications/Dashcode.

Dashcode includes a template for creating web applications for iPhone. When you create a new project (File | New Project), you must deselect the Safari option in the Develop for checkbox. Only the Mobile Safari option will be checked, as shown in the following screenshot:

This development tool allows creating a graphic interface for our web applications in an easy and intuitive way. We can drag-and-drop defined widgets such as buttons, lists, and image containers inside the builder area. The properties and the behavior of each widget can be set through different windows and dialog boxes. On the other hand, Dashcode includes a text editor for writing the needed JavaScript code to add functionality to our applications. In fact, Dashcode is a tool similar to other development tools designed to build applications with a graphic user interface using a specific toolkit or library.

When you finish your development and the application is ready to run, you can test it using the iPhone simulator. This one will be invoked directly from the Run button in the main toolbar of the Dashcode. Once your application is ready for the users, you should deploy it in a configured production environment. Dashcode launches the simulator, which loads your application from an internal web server designed only for development and testing. This internal server uses the port 49853 on the localhost referred to the simulator.


As a part of the documentation reference of Apple, you can find a user guide to use Dashcode at: http://tinyurl.com/69vgmea.

About the Author

  • Arturo Fernandez Montoro

    Arturo Fernandez Montoro is a software architect specializing in design, development, testing, and deployment of high-traffic web applications. Since 2002, he often writes for different Linux and Open Source printed and online magazines, such as Todo Linux, Linux+, Linux Magazine, and Free Software Magazine. Also, he has written the iPhone JavaScript Cookbook for Packt Publishing. His professional experience includes technologies such as Django, Ruby on Rails, J2EE, PHP, web application servers, relational and NoSQL databases, JavaScript, HTML5, and CSS. He spent the last three years working as a software architect and a Python/Django lead developer. Currently, Arturo lives in Madrid working as a software architect for QDQ Media, the biggest online marketing agency in Spain. He can be reached at [email protected]

    Browse publications by this author
iPhone JavaScript Cookbook
Unlock this book and the full library FREE for 7 days
Start now