A quick tutorial on using iUI to create a native looking iPhone or iPod touch web page

| | |

I just picked up a new Apple iPod Touch and thought I'd create a version of my photoblog that is optimized for the iPhone and/or iPod Touch. This won't be an actual application available through the App Store, but instead a web page using Joe Hewitt's iUI CSS and JavaScript library.

In this first tutorial we'll:

  1. Download and setup iUI
  2. Create a simple 'Hello World' page
  3. Dream of the final photoblog application

You can download the code from the Download tab on the Google Code page. The compressed file has some text and html files in the root, then a iui directory with the code you need on your web server, and a samples directory with sample code.

To keep things simple I'm going to have an i directory on my web server, and I've placed the iui directory there.

We'll modify one of the examples, \samples\music.html as a start.

Our heading across the top will be "Hello world" and we'll have two items to choose from:

It won't really do much, yet, but it looks like an iPhone application, and you can rotate the screen either landscape or portrait and it will reflow properly.

So here's the code, which you can see running live at my photoblog:

Source of our example

The inital part of the HTML is straight from the sample, and the changes I've made start with the first <ul> element, where I changed the title attribute to Hello World. The menu flow is then pretty straight forward. Each page of choices points to lower level <ul> elements, with the href anchor pointing to the lower level id.

So in this example, the #FirstM anchor connects the 1st choice to a submenu, as does the #SecondM anchor.

I've also highlighted the fact that the string used for the <a href> entry doesn't have to be the same as the string that is used as the header for the sub-section.

So that's it! It doesn't do much yet, but it is a start. In part two of the tutorial we'll figure out some of the other GUI objects we'll need to make the application more useful, and hopefully interesting.