Installing the UiUIKit framework (iPhone JavaScript)

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:

http://code.google.com/p/iphone-universal/downloads/list

After downloading, click on the link for the latest version from the main list, for instance, the link called UiUIKit-2_1.zip.  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:


tmp1A8_thumb

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:

tmp1A9_thumb

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:

tmp1A10_thumb

 

 

tmp1A11_thumb

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.

tmp1A-12

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:

tmp1A13_thumb

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:

tmp1A14_thumb

All information related to the UiUIKit framework project could be found

at: http://code.google.com/p/iphone-universal/

All information related to the UiUIKit framework project could be found

at: http://code.google.com/p/iphone-universal/

Next post:

Previous post: