New iUI (aka navigation) features and demo

Here is a new demo that shows off all of the new features:

http://joehewitt.com/iui/music.html

Let's consider this an "alpha release". The list of new features is
as follows:

1. New UI controls

List groups, on/off switches, and fieldsets that look like the iPhone
"Settings" app

2. Linking to external pages via Ajax

Links to external URLs are now loaded via Ajax and inserted (with
animation of course) into the page. The pages you link to should not
be a complete HTML document, but just the elements that should be
inserted into the body of the original page. If you don't want a link
to load via Ajax, specify target="_self".

When a link is loading, it will show a nice activity indicator while
the user waits.

To see this in the demo, click on the "Stats" link.

Here is an example of Ajax-linkable source: http://joehewitt.com/iui/stats.php.txt

3. Submitting forms via Ajax

Just like with external links, if you submit a form it will post it
via Ajax and insert the resulting content into the body.

To see this in the demo, click on the "Search" button and perform a
search.

Here is an example of PHP used to handle an Ajax form post:
http://joehewitt.com/iui/search.php.txt

4. Correct history support

The back button now shows the name of the previous page instead of
just the "home" page. Also, thanks to Kristopher Tate, it keeps in
sync with the browser's history when you use the built-in back button
instead of the browser's back button.

5. Much more visual polish

The visuals now replicate more of the fine details from Apple's
designs. I've been combing over pixels all night.
Also, text that can't fit on screen will be properly abridged with an
ellipsis.

6. JavaScript compression

There is a variation of "iui.js" called "iuix.js" which is compressed
using Dojo ShrinkSafe. It is about 4KB, where the original "iui.js"
is 8KB. If you use the compressed version and use gzipping on your
server, it will only be 1.8KB on the wire. Size matters when it comes
to Edge ;)

That's it - keep the feedback coming!

- Joe

http://www.joehewitt.com/iui/releases/iui-latest.zip

- Joe

- Joe

> > - Joe- Hide quoted text -
>
> - Show quoted text -

Cheers,

- Matthew

I've written it so that it doesn't slide the "fromPage" out of the way
and it slides above the header. Set the top margin on the sliding
element to stop it where you want. This emulates Apple's experience
and makes low confirmation dialogs a snap.

Simply include axis="y" attribute on elements you want to slide on the
y axis.

Let me know what you think.

-Curt

The only function changed is slidePages:

function slidePages(fromPage, toPage, backwards)
{
var axis = (backwards) ? fromPage.getAttribute("axis") :
toPage.getAttribute("axis");
(axis == "y") ? ((backwards) ? fromPage.style.top = "100%" :
toPage.style.top = "100%") : toPage.style.left = "100%";

toPage.setAttribute("selected", "true");
scrollTo(0, 1);

var percent = 100;
slide();
var timer = setInterval(slide, slideInterval);

clearInterval(checkTimer);

function slide()
{
percent -= slideSpeed;
if (percent <= 0)
{
percent = 0;
fromPage.removeAttribute("selected");
clearInterval(timer);
checkTimer = setInterval(checkOrientAndLocation, 300);
setTimeout(updatePage, 0, toPage, fromPage);
}
if (axis == "y")
{
fromPage.style.top = (backwards ? (100-percent) :
fromPage.style.top) + "%";
toPage.style.top = (backwards ? toPage.style.top : percent) +
"%";
}
else
{
fromPage.style.left = (backwards ? (100-percent) :
(percent-100)) + "%";
toPage.style.left = (backwards ? -percent : percent) + "%";
}
}
}

Thanks for all your hard work on this - it's beautiful :o)

Now - this may sound like a dumb question - so forgive me! I just need
to understand how I can use your framework in practice.

I'm putting together a web site which contains lots of instructions,
(cooking recipies, etc.), in text form and I need a 'high level'
understanding of the following:

1) Taking your music.html as an example - in practice, how would the
various categories/entries be updated? Suppose there were 500 recipies
(not far off), these wouldn't all be listed in the HTML file as in
your example would they? Would you read this information in from
another file? If so, how?

2) Again, taking music.html as an example, how would I display the
information at the end of each 'tree' (For example - Recipies-->Meat--
>Chicken Cassserole-->instructions). The instructions for Chicken
Casserole might be quite long and so I wouldn't want to store them in
music.html. How would I let the viewer see the contents of the text
file containing the recipie details?

Thanks for any feedback - just got to get my head around these basic
concept ideas :o)

SamD

With the new Ajax linking feature, you can store each level of your
recipe tree in a different file. Your main HTML file would contain
only the first level of the tree, and you would simply link to the
files for the other levels. When the user clicks the link, rather
than loading it directly, it is loaded using Ajax inserted into the
main page. The only thing you have to do differently is make those
dynamiclly loaded files contain only the contents you want inserted
into the body, not a full HTML document. Look at the example in
music.html where it links to settings.php, and look at the source of
settings.php (linked above).

- Joe

Makes much more sense now!

One of the things I'll be doing eventually is moving my content to a
Content Management System like Mambo since managing a lot of
individual files is going to get very tedious very quickly :o)

I guess Mambo (or a similar CMS) can be accessed via Ajax?

SamD

(backwards) ? fromPage.style.top = (100-percent) + "%" :
toPage.style.top = percent + "%";
}

First I wanted to say that I love the improvements that you have made
to iUI, but I am having a small issue with it. I am trying now to re-
format Movies.app to use the new framework, am I am using the
frameset, with div id=row and label to display the movie information,
but I found that the text overflow with the labels can causes an
issue. Here is a screenshot:
http://aycu34.webshots.com/image/19873/2003992405094910834_rs.jpg
(it's a desktop picture but it has the same effect as on my actual
iPhone)

I would like it to function like the page title (with the ellipsis),
and I have tried adding the CSS for that everywhere, but I can't get
it to work. Do you have any suggestions?

Thanks,
Jeff

"text-overflow: ellipsis" is somewhat elusive :) You have to also
specify overflow: hidden and white-space: nowrap in order to get the
ellipsis. Have you tried that?

Joe,

I think your stuff is great. I'm making quite a few updates and will
forward anything I think might be useful along to you. Hope you like
it!

This one is for the panel rows. There are two types that the current
iui seems to be missing. One is a link to another panel (designated by
the arrow) and the other is a checked selection.

I set a{color: inherit;} explicitly for all links. Seems to be a
decent idea and helps with formatting selected links. .last is to hide
the bottom border on the last element. The a.top and a.bottom are for
the rounded edges to look nice when the link is selected.

In order to display the arrow or check on the row, I created an
attribute called "decorator" with values "arrow" and "check" I like
the level of display control this gives me. Adding decorator="arrow"
to a fieldset will cascade down to the divs. Didn't make much sense to
do the same for "check"

I also had to set the background for the selected anchor when the
display is check to not show the selected arrow.

The CSS:

a {color: inherit;}
.last {border-bottom: none;}
.row > a {
display: block;
padding: 0 0 0 14px;
line-height: 42px;
font-weight: bold;
text-decoration: none;
text-align: left;
}
.row > a.top {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
}
.row > a.bottom {
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}
fieldset[decorator="arrow"] > div {
background-image: url(listArrow.png);
background-repeat: no-repeat;
background-position: right center;
}
div[decorator="arrow"] {
background-image: url(listArrow.png);
background-repeat: no-repeat;
background-position: right center;
}
div[decorator="check"] {
background-image: url(listCheck.png);
background-repeat: no-repeat;
background-position: right center;
}
div[decorator="check"] > a[selected], div[decorator="check"] >
a:active {
background-image: url(selection.png);
background-repeat: repeat-x;
background-position: left top;
}

Sample Code:
<fieldset>
<div class="row" decorator="arrow">
<a href="#link1" class="top">One</a>
</div>
<div class="row" decorator="arrow">
<a href="#link2">Two</a>
</div>
<div class="row last" decorator="arrow">
<a href="#link3" class="bottom">Three</a>
</div>
</fieldset>

same as

<fieldset decorator="arrow">
<div class="row">
<a href="#link1" class="top">One</a>
</div>
<div class="row">
<a href="#link2">Two</a>
</div>
<div class="row last" >
<a href="#link3" class="bottom">Three</a>
</div>
</fieldset>

check example:

<fieldset>
<div class="row last" decorator="check">
<a href="#link3" class="top bottom">Single Checked</a>
</div>
</fieldset>

I have been trying to implement the latest version of iUI into
Movies.app, and am having some trouble with the AJAX part of it. The
reason is that my scripts take some length of time (although short for
a person, it is probably long for a computer) to generate the list
code that would be passed back to iUI.

When I try and run it with the form with AJAX, it just won't go to the
next page (it stays on the page with the form), but if I take the code
that my script generates and create a static file and change the form
action to go to that page, it loads perfectly.

Do you have any suggestions to get this to work?

--Jeff

I want to use the list view for displaying information, but I don't
want all items in the list to link to something else. So, I tried
using a href="#", but when I click on the item it brings me back to
the beginning. Is there a way to have it so that it will still look
nice but the items will not actually link anywhere?

Michael

Sorry about that POST problem, I fixed the script so that it can work
with GET as well.

If you don't want the list item to link to anything, just don't put an
<a> tag inside the <li>. You're
right, though, that this currently doesn't look right - I'll fix the
css in just a second....

- Joe

http://www.joehewitt.com/iui/iui/iui.js
http://www.joehewitt.com/iui/iui/iui.css

For reference, I added a list item to the music example which links to
nothing:

http://www.joehewitt.com/iui/samples/music.html

- Joe

Try <a href="javascript:void();"> instead of the '#' It shouldn't move the
screen anywhere.

-=Randy

http://colloquy.info/iphone/demo/

He slowed the animation down because he wanted the demo to work over
the web, but you could speed it up and it would look smooth on the
iphone.

- Joe

Could you also please give me access to your svn repo? I would be
happy to contribute back to your project. :)

thanks

Shashwat

http://iphone.johnhamm.info/

I'd like to modify iUI to add lightweight animations on the toolbar
and make it a setting that users can turn on or off. Are you looking
for contributions from other developers? :)

I'm attempting to emulate the layout of the phone's visual voicemail
page, where in the voicemails have two links: one to listen to the
message and one to see it's details, along with the date right
aligned. My CSS skills are mediocre at best, does anyone have any idea
how to accomplish this.

Thanks,
Hillel

How do I href another url with a payload and not effect the page? I
want to tap the link and it stays right there on the same page without
anything being loaded. My href will be "http://somewhere.com/
index.html?a=3" Another server watches for a request for index.html
with a payload of a=3 and runs a script. This whole package will be
used to run hundreds of scripts on a server. The server is sending IR
to my home theater system. Everyone knows how great the wifi connects
up on these iPhones. It makes for a great remote control.

Using XMLHttpRequest you can. It's a common enough technique with plenty
of examples online.

-Kalle.

I've been meaning to look into how to do that. Thanks! :) Added example
of this here: http://www.iphonewebdev.com/examples/compression.php

-Kalle.

http://telemoose.com/iphonedevcamp/

the ob_gzhandler is a good technique but it might not quite apply to
your server. Really you should test the site (from a desktop) with
WebKit (webkit.org)'s inspector; I think FireBug has something
similar. There's also a good online tester to see if your ISP is
already compressing for you -- it turns out that my ISP was
compressing my php output automatically, but my CSS and JS files
weren't compressed! <http://whatsmyip.org/mod_gzip_test/>

More info and techniques in my slides at <http://telemoose.com/iphonedevcamp/_Media/bandwidth-2.pdf
>

Dan Wood

Sign up for a free 30-day trial and download 50 FREE songs from
eMusic's catalogue of over 2 million DRM-free tracks:
http://tinyurl.com/ypkzph

...

>><http://iphone.sampleswap.org>http://iphone.sampleswap.org

So your idea is that the page that shows the artist info and the play
button (the quicktime <embed> code) should be AJAX'd -- even though
the actual playback takes another click to get into the quicktime
player?

Sounds good!

BTW: anyone who's interested in how to stream MP3s on the iPhone,
here's one way:

<embed
src="http://www.sampleswap.org/mp3/artist/alienzzz/alienzzz_maniac-in-the-desert-160.mp3"
autostart="true" loop="false" width="200" height="100"
controller="true"></embed>

For what it's worth, the iPhone actually ignores the controller and
autostart parameters. it's kind of a bummer because from within a
'real' web browser, this page gives you an all-in one controller:

http://iphone.sampleswap.org/playsong.php?song=138&q=lofi&iphone=013d407166ec4fa56eb1e1f8cbe183b9

(http://tinyurl.com/ytjhk4)

but on the iPhone, you have to click a play button and it takes you
to a whole separate quicktime player page. Bleah! Does anyone know of
a way to make it work more simply?

I think the iui and the iPhone doesnt run this function called
XMLHttpRequest(). It must be missing. Or it doesnt allow a request to
another server url. Is there another way to perform a request in the
iui? Or did I implement it wrong?

function HttpRequest(xmlurl) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", xmlurl, false);
xmlHttp.send();
return xmlHttp;
}

<a class="button" href="javascript:void();"
onclick="HttpRequest('http://some.net/iPhone/index.htm?a=4'); return
false;">On</a>

The file is an hour long and is ~250MB. I am currently away from home
and have a slow internet connection, so it will take an estimated 90
minutes to download.

Hopefully this video will provide some helpful information (unlike the
sample program that Apple posted yesterday).

I didn't realize there was a new iTunes 7.3.1 update. Downloading now in
hopes that that's the issue.
-=Randy

Hardy

-=Randy

I was able to log into the developer connection on my pc using Safari beta
and when I click the iphone video link on their page, it shows me a blank
white page with two buttons at the top "I have iTunes" and "I do not have
iTunes" pressing the first button launches iTunes and I can download the
video. The second takes me to the iTunes download page.

I have finished downloading the video on my pc and burned it onto a cd. It
is copying over to my Powerbook's iTunes as I type.

I'll try clearing my mac Safari cache and try it again.

Thanks again for the help.
-=Randy

-Edwin

> Hardy

I moved it to the same server and modified to this working code:

<body>
<script language="Javascript" type="text/javascript">
<!--
function HttpRequest(wordId) {

xmlHttp.open("GET", 'index.html?a=' + wordId);
xmlHttp.send(null);
}
-->
</script>

<a class="button" href="javascript:void();" onClick="HttpRequest(4);
return false;">On</a>

Looks like compressing "iui.js" to "iuix.js" has introduced a bug.
The "search" (used with "search.php") form does not work with
"iuix.js" :( works fine with uncompressed javascript.

- Andy

> 6. JavaScript compression
>
> There is a variation of "iui.js" called "iuix.js" which is compressed
> using Dojo ShrinkSafe. It is about 4KB, where the original "iui.js"
> is 8KB. If you use the compressed version and use gzipping on your
> server, it will only be 1.8KB on the wire. Size matters when it comes
> to Edge ;)
>
> That's it - keep the feedback coming!
>
> - Joe

I just got done redoing my site with the new iUI and I'm loving it.
The only problem I am having is getting the ellipsis text to work
correctly. It's weird because it like flicker's for a second and has
the ellipsis and everything, but then it extends the text so that it
is covered up by the back button. Try viewing:

www.chandlerkent.com/iphlickr/

on your iPhone and you'll see what I mean.

Any help is greatly appreciated!

Is there any way you think Internet Explorer or Opera compatibility
can be done?

iUI works great with Firefox but not with these two.

You know, I've already created an iPhone friendly version of Nozbe
called iNozbe using your iUI and wanted to use it as an iGoogle Widget
or Netvibes widget too... but since it doesn't work on Opera and IE,
many of my users won't be able to use it.

Any suggestions?

BTW, thanks for the great iUI!

- Michael

On Jul 11, 11:33 pm, Joe Hewitt <[email protected]> wrote:
> Hey Jeff,
>
> Sorry about that POST problem, I fixed the script so that it can work
> with GET as well.
>
> If you don't want the list item to link to anything, just don't put an
> <a> tag inside the <li>. You're
> right, though, that this currently doesn't look right - I'll fix the
> css in just a second....
>
> - Joe

I started messing with it but still working thru the challanges.. is
there a specific reason you used true on the useCapture param for the
addEventListener call? Understanding that would help with writing the
correct IE equivielent code...

Thanks Josh

I started implementation of some of the iUI stuff on your last
version.

However, I now have the need to try to fit the history workings into
place.

How might I best do that? I'll admit I'm pretty new at reading
JavaScript, though I seem to muddle my way through it.

Also, does the history work with things like ASP pages that had to do
functions of their own based on parameters at the time of their load?

Does it also allow the forward button to work?

I'd appreciate any pointers you can give me.

Thanks!!

Jim Coates

Any ideas or knowledge on why IE7 for vista acts diffrent than IE7 for
XP ?

Josh

> > > - Joe- Hide quoted text -
>
> - Show quoted text -