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.
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.
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.
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.
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.
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.
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
After decompressing the downloaded file, you'll find a folder with different subfolders and files. The most important is a subfolder called
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
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
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:
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.
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.
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.
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
The main folder of the UiUIKit framework contains two subfolders called
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:
myapp/ index.html images/ actionButtons.png apple-touch-icon.png backButton.png toolButton.png whiteButton.png first.html second.html stylesheets/ iphone.css
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.
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.
$ 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/
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.
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
$ sudo mkdir /var/www/html/xui $ sudo cp xui-2.0.0.js /var/www/html/xui/
Inside the head section of our HTML files, we'll need to add this line:
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.
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.
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
DocumentRoot. For example, on Ubuntu Linux, we'll execute the following commands:
Our iWebKit copy is ready to use for iPhone web application development.
After decompressing the main ZIP file, you'll see different files and folders. Most important is the
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.
By observing the preceding lines, we guess
style.css is the main stylesheet and
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:
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
$ mkdir /Library/WebServer/Documents/WebAppNet $ cp -r base-package-v0/WebApp /Library/WebServer/Documents/WebAppNet
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:
WebApp folder, we can find different subfolders such as
Design, Action, and
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.
As a part of the commented WebApp main folder, this framework contains other folders inside the ZIP file. These subfolders are
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.
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.
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.
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
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
$ cd /Library/WebServer/Documents/ $ unzip ~/Downloads/phonegap-0.9.4.zip
$ cd /Library/WebServer/Documents/phonegap-0.9.4/phonegap-iphone $ make
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.
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.
www folder, a main 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/.
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.
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/.
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/
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.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:
main.js, the reference on the HTML files will be a line as follows:
The developers of this framework recommend using 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/.
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.
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.
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.
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
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:
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.