CiUI - CNET iPhone UI
Given how the iPhone’s growth has made some ripples in the world of mobile browsing, we here at CNET decided to spend a little time and make an iPhone friendly version of our sites. At first I (Vladimir Olexa) considered the excellent iUI from Joe Hewitt but eventually decided to write our own.
The result is CiUI (CNET iPhone UI) that mimics iPhone UI behavior. It’s already being used on CNET’s iPhone page (http://iphone.cnet.com). It’s been greatly inspired by iUI with a few key differences:
1. AJAX calls are performed after a page slides
2. DOM doesn’t get overloaded with “pages” as they load. Instead, two DIVs are constantly being reused
3. Page titles are set on the source page, not on the destination page
4. Only specified “a” tags are assumed a part of the UI
1. Slide ‘n load
Placement of AJAX calls is probably just a matter of preference. However, I believe placing it after a page slides reduces a lot of overhead associated with highlighting clicked items, rendering the loader and then undoing all of that. This also allows for a custom loading page to maybe place an ad, a cancel button, or whatever you may want while the page is loading.
Example: regular link vs. “iPhone-ized” link
<!-- goes to cnet.com, just like any other regular link --> <a href="http://www.cnet.com">CNET</a> <!-- slides forward and loads the content of cnet.com within the iPhone webapp --> <a title="CNET" class="go_forward" href="http://www.cnet.com">CNET</a>
2. One page at a time
iUI creates new elements as they’re loaded and keeps them in the DOM. While this gives you faster load times (since you’re not performing remote calls every time), with a large app you can easily bring your iPhone Safari to its knees and eventually crash it (which is really not that hard to do).
In contrast, there are only two DIVs used in CiUI’s body element. Those DIVs get filled up with each page load. That means an AJAX request is fired up with each navigation event.
(Note: I’m currently working on a feature that will let you mark pages for caching. It will store the content of cached pages in the DOM so they can be loaded faster on subsequent requests. That should give us the best of both worlds - speed vs. memory footprint).
3. Give it a name before it’s born
This, again, is a matter of preference. However, I wanted to break the dependency of destination page on source page. In other words, I wanted the destination page be any page without requiring it to include certain elements in it for the app to properly function.
iUI extracts the page title from an element on the destination page. In CiUI, you specify the page title on the element that is calling your destination page. So, the page you’re calling can be pretty much anything and the app will still render properly.
4. Pick what to Click
In iUI, any clicked element (granted it has an “a” tag in its parent DOM tree) will trigger an iPhone specific event. There is also no way of specifying on the fly whether you want to animate forward or backward. With CiUI, unless your element has the class attribute set to either go_forward or go_back it will be treated as a regular element (will not trigger any iPhone UI specific events). Intuitively, go_forward will slide page forward and go_back will slide backwards.
While these are all subtle differences from iUI, they were significant enough for me to just start from scratch and write my own iPhone UI library.
Check out the source and an enclosed working example or go to iphone.cnet.com to see it in live action. You can download the library from Google Code or from our download page. Enjoy!
March 19th, 2008 at 6:50 am
[...] Den Web-Entwicklern unter euch haben wir mit iUI bereits im Juli 2007 ein Framework für den Bau eigener Web-Apps ans Herz gelegt. Die so an das iPhone angepassten Webseiten, lassen sich auf dem iPhone gut lesen und emulieren das vom iPhone bekannte Interface auf eurer Homepage. Wer sich bislang noch nicht mit iUI anfreunden konnte, hat mit CiUI nun eine frisch veröffentlichte Alternative. Das Von C|Net entwickelte Javascript-Framework, wird auf den hauseigenen Seiten bereits eingesetzt und steht hier zum Download bereit. Die Hauptunterschiede zu iUI: [...]
March 19th, 2008 at 7:52 am
[...] Vladimir Olexa of CNET has released CiUI a iUI inspired iPhone JavaScript libary that mimics the iPhone UI behavior. [...]
March 19th, 2008 at 8:54 am
Be careful on trying to cancel a page load. Way to test out your stuff cnet.
March 19th, 2008 at 9:02 am
Well, Jeremy, considering that there’s no STOP button (or ESC key) on the iPhone, I don’t think it’s a big deal.
March 19th, 2008 at 12:19 pm
Well, there certainly is a stop button (little ‘X’ in upper-right corner while page is loading), but that’s not what I meant. On the iphone.cnet.com home page: tap ‘News’, tap ‘Cancel’ button, watch the chaos.
March 19th, 2008 at 1:20 pm
Hey Jeremy,
Thanks for pointing this out. A last minute change must have introduced this problem as we did test this out thoroughly before releasing it. We’ll have a fix up soon.
March 19th, 2008 at 1:23 pm
OK, did that. No problem here. It just reloaded the CNet home page.
March 24th, 2008 at 11:37 am
The site looks excellent. Did a brief blog post on it, at:
http://tinyurl.com/3bpjot
March 26th, 2008 at 5:21 am
Please can you let me know where to send corrections for the MooTools documentation?
thanks.
Correction to the example for Array.js example:
The last line of the example code looks like this:
}, bindObj); //optional second arg for binding, not used here
but should be:
}, null); //optional second arg for binding, not used here
to make it run. (Or is it just my browser that does not like uninitialised / new variables?)
Here is the full code of the example before this change:
['apple','banana','lemon'].each(function(item, index){
alert(index + ” = ” + item); //alerts “0 = apple” etc.
}, bindObj); //optional second arg for binding, not used here
March 26th, 2008 at 8:29 am
Very nice. I started a project with iUI, but have switched to using your framework. Where would I define the responseType when I want to receive an XML response?
Thanks
March 26th, 2008 at 9:27 am
Chris H, thanks for your comment!
While the ajax function within the library does enable you to return the response as XML, it’s supposed to be “private.” Since the functionality is supposed to just display the page you’re linking to, I didn’t feel the need for users to have control over the responseType.
Can you elaborate on what your use case would be to have the response returned as XML? If there is a valid argument to give users a handle on it, I’ll gladly put it in. Thanks!
March 26th, 2008 at 9:56 am
Vladimir,
I’d like to deliver information to my users that are xml files stored on the National Weather Service servers. Walking the nodes would be much easier for the programmer (me, anyway) than attempting a string.replace… not to mention styling.
Thank you for your lightning fast response.
Chris
March 26th, 2008 at 11:07 am
Vladimir,
Very nice! I’ve taken a look at CiUI and like the customizations made on top of iUI’s original implementation.
One question I had (sort of related to Chris H’s comment): is it possible to return JSON and to have CiUI process the response and build the page that would replace the currently displayed page?
I’ve gone through the code and am pretty sure it can’t be done with the current version of CiUI, but am wondering whether there would be any implications with customizing CiUI to support JSON responses.
Any thoughts?
March 26th, 2008 at 2:59 pm
Chris H, feel free to email me so we can discuss this more. Thanks.
Frank M, what CiUI returns now is responseText. Your page can return JSON and that is what will be processed. The only thing is, it won’t be evaluated. That feature could definitely be added as a configuration option though. We would just need to make sure the JSON response is properly/securely handled.
Feel free to submit a patch with a proposed solution, he he ;) I’ll be glad to add it to the repository.
In any case, it seems like what both of you guys are suggesting is to add functionality that would enable you to process and evaluate either XML/JSON response instead of simply returning it into the iphone_body container as HTML, right?
April 9th, 2008 at 6:48 pm
I tried downloading CiUI from google code home. Two wierd things. The css and js code is a single line of text with no line breaks or formatting normally associated with source code. And png files were not binary, but contained html or maybe it was php code.
April 10th, 2008 at 10:21 am
Tony, that’s weird. I just tried downloading it myself and all the files in the package check out OK.
The line breaks may be caused by a different OS. I wrote the library on a UNIX system so if you’re using Windows, that would explain why everything is on one line.
April 10th, 2008 at 12:56 pm
Tony, if you are just clicking on it in your browser you’ll see the result on your screen. Try viewing source - the line breaks are there.
April 11th, 2008 at 4:56 pm
I downloaded the CiUI code again and it’s working okay now, thanks….. This is pretty cool. I intend to try porting my Wordpress iphone weblog over to this CiUI framework. Some initial changes have been deployed. Here’s the link for those changes… ” http://www.core3.com/icore/i/ ” lots more work needed, but initial results are promising and the CiUI framework helps a bunch cause I can deploy pages without investing a bunch of time to become an expert on iPhone Safari css and javacript. Thanks.
April 11th, 2008 at 5:34 pm
[...] I can do PHP and MySQL and all that, however with no prior iPhone web browser development experience, I’d like to use a community developed iPhone framework which hides css and javascript iPhone details. iUI and CiUI are two frameworks developed and posted since the iPhone’s release. CiUI appears to be more robust. So, taking baby steps, let’s see what can be done with CiUI. [...]
April 13th, 2008 at 11:32 am
Vladimar, I’ve been experimenting with CiUI as a front-end for an iPhone blog hosted on WordPress. From a licensing perspective, is it okay to use CiUI in this way? I looked through CNET’s license and this seems to be okay. Also, do you all mind if I post about my experiences using CiUI? For instance, today I posted, http://core3.com/wpblog/2008/04/13/cnet-ciui-iv/ , which describes cloning of index.htm to display a CiUI menu driven by data from MySQL. I’d like to continue using your framework to move more of the weblog from the current interface to CiUI.
April 14th, 2008 at 10:35 am
Hey Tony, I’m no licensing expert but I don’t see a reason why you couldn’t use the library anywhere for anything.
Blog away! I’m very happy people are finding the library useful. Your app looks very good!
If you’re interested in contributing or just keeping up to date with the code, head over to Google Code (http://code.google.com/p/ciui-dev) and/or join out Google Group (http://groups.google.com/group/ciui).
April 15th, 2008 at 11:21 am
[...] To see a complete framework for creating iPhone web applications, check out the post by Vladimir Olexa which provides client-side Javascript and CSS which simplies many of the tasks associated with iPhone web application development. [...]
April 15th, 2008 at 3:02 pm
Thanks, I probably won’t be able to contribute to code-wise, but I can test and provide feedback. I’ve signed up for the Google Group (http://groups.google.com/group/ciui).
April 15th, 2008 at 3:34 pm
In your description at the top of this post, you seem to say that content is loaded into two DIVs. I’m wondering if it’s possible to do a view source (or something similar) to see html code that has been loaded? I’m trying to debug something and I need to see the html. I tried a view source on the offending page using FireFox, but this shows html of the top level menu page, not the page currently displayed.
April 15th, 2008 at 3:40 pm
Firebug:
https://addons.mozilla.org/en-US/firefox/addon/1843
April 30th, 2008 at 4:14 pm
I’ve added an option to my little CiUI demo site.
http://core3.com/wpblog/2008/04/30/popular-posts/
The site is a Safari front end to a wordpress weblog. This new option, labelel “Popular Posts” displays a list of Wordpress posts based on the number of downloads.
May 10th, 2008 at 11:32 am
[...] Starting to get crowded in the iPhone Web space, folks; today we have Yet Another IPhone UI Libary for your attention, CNET iPhone UI aka “CiUI” which is being used on CNET’s iPhone page. The release notes tell us that It’s been greatly inspired by iUI with a few key differences: [...]
May 20th, 2008 at 12:02 pm
I really love these iPhone apps. Keep them coming people..
July 29th, 2008 at 3:16 am
[...] Then we have CiUI, the “CNET iPhone UI.” When CNET decided to build an iPhone version of their site, they first considered Joe Hewitt’s solution, but later decided to build their own solution. The resulting CiUI is a slick solution that makes use of AJAX to load new screens, and is probably the most powerful solution out there. I haven’t had a chance to try it out myself, but it’s definitely on my list. [...]
September 26th, 2008 at 1:55 am
[...] download a CSS/JavaScript iPhone interface. There are a few out there, such as iUI, CiUI, and iPhone Interface in JavaScript. (My favorite is [...]
September 30th, 2008 at 2:19 am
[...] favorite JavaScript iPhone interface. CiUI was developed by CNET for their own mobile site. Their developers made it publicly available, with [...]