iUI iPhone Framework
Tonight I put some Mogwai on the stereo, opened a bottle of New Zealand Pinot
Noir and sat down to read the iUI code. Here's what I learned.
iUI is a very small iPhone web framework. You can generate apps that use the
navigation of the iPod app on the iPhone very easily.
iUI is basically 2 files: a CSS and a JS. There are also compressed versions
supplied with whitespace removed so they're even smaller. The whole thing
including graphics is around 100kB. Yes, kilo Bytes.
First I read the CSS. I've never seen the use of selectors I found there, so I
did some research and ended up reading the CSS Selectors spec at
http://www.w3.org/TR/CSS21/selector.html. This tells you what things like "body
> *[selected="true"]" mean. A great piece of documentation.
The structure of an iUI site has "pages" defined as <UL> elements. These
are displayed as the currently visible "page" when their attribute 'selected' is
set to "true". The toolbar is always displayed. This is achieved by setting
display:none for all child elements of <body>, except the toolbar. In the
JavaScript, the 'selected' attribute of the current "page" (i.e. current UL) is
manipulated to suit. This is beautifully simple and at it's core are these CSS
rules:
body > *:not(.toolbar) {
display: none;
}
body > *[selected="true"] {
display: block;
}
Next, the JavaScript. Straight off you notice the jQuery syntax... but without
jQuery. So, how is $(aName) done? With this lovely little function:
function $(id) { return document.getElementById(id); }
Next I wondered about the location.hash manipulation I found throughout. Again a
little research took me to an explanation, this time on a blog:
http://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstate
Essentially location.hash is a way to provide a re-create-able state in the URL,
so that if the user hits 'Back' or bookmarks the page, they'll get what they
expect. With AJAX, you can't otherwise do that because you're on one page the
whole time. So, fiddle with the 'hash part' of the URL to reflect the current
state and you can re-create the state. For example, it's used like this:
iui.showPage($(link.hash.substr(1)));
I was struck by the lack of browser-defensiveness in the JS. For example, the
XMLHttpRequest object is assumed. Of course this is an iPhone framework so you
don't have to worry about cross-browser, it's Safari on iOS. How nice and easy
=)
I see that orientation is handled by an event, window.onorientationchange.
Excellent, I believe that was originally hard to detect. In iUI it's smooth and
they adjust some styles to suit the window.orientation property, which seems to
be 0, 90 or -90.
Just in case onorientationchange isn't implemented, the function
checkOrientAndLocation is fired via setInterval. This simply checks the
window.innerWidth property : if 320 then portrait, else landscape.
The smooth slides are interesting. This hinges on several features. First, pages
using iUI declare a <meta name="viewport"> definition in the <head>. This
enables the site to be defined as a series of viewports with only one visible at
any time. iUI has 2 functions to handle sliding depending on the availability of
WebKitCSSMatrix. Either way, in essence JS timers are used to incrementally
slide the viewport.
The examples supplied are static and have all content in 1 big page. This isn't
much use for 'real' sites with dynamic content. The function showPageByHref is
called for hrefs with target="_replace". This replaces the href with the result
of an AJAX call to the specified URL.
There's more in this small but perfectly formed framework, and I know it's
extensible. Most simply, you could replace the images (almost all PNGs with one
GIF) with your own. More in-depth, once you inderstand how it works you can take
it as a start point for your own site's look. Modify the CSS, and once you're
confident extend the JavaScript.
Cheers, al.
--
Refs:
Joe Hewitt comprehensive blog post on iUI:
http://www.joehewitt.com/blog/introducing_iui.php
Joe Hewitt talking about iUI:
http://video.yahoo.com/watch/853528/3491272
iUI Google Code home page:
http://code.google.com/p/iui/
CSS Selectors
http://www.w3.org/TR/CSS21/selector.html
|
