New iUI (aka navigation) features and demo

[Joe Hewitt]

So I spent this evening adding a bunch of new features and cleaning up
iUI (thanks to Kristopher Tate for the new name, it's better than
"iphonenav" or "navigation"). Thanks to the people of iPhoneDevCamp
and everyone who emailed me with feedback and new ideas. I apologize
that you've all had to use the crappy code I threw together last
Thursday night, not suspecting that dozens of projects would adopt it.

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

[Joe Hewitt]

Oh, I also created a zip of iUI for your downloading convenience:

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

- Joe

[AwayBBL]

Joe, Now if you could just re-create how apple did the scroll through
alphabet thing like in their contacts list (it's a separate control on
the right hand margin that quickly scrolls to the letter grouping).

[Joe Hewitt]

Unfortunately it's not possible (yet) to do the alphabet scroll thing,
since you can't do CSS fixed positioning, nor can you approximate it
due to the lack of scroll events.

- Joe

[AwayBBL]

yeah, I could easily do it if independent scrolling of iframes was
allowed

[AwayBBL]

My problem is that I'm sliding, in some cases, over 300 items, and
that is quite slow during slidePages. My finger is getting way too
much excersize while scrolling down too :).

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

[Matthew Krivanek]

Joe, if I didn't know better I'd say that Apple iPhone engineers
supplied you with the CSS for laying out their pages! :) You're making
an incredible use of Safari's CSS3 support.

Cheers,

- Matthew

[Curt Kaffer]

You'll notice some UI elements on the iPhone slide UP. A minor tweak
to your javascript makes this easy.

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) + "%";
}
}
}

[Sam]

Hi Joe,

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

[Joe Hewitt]

That's great, Curt. I'll roll that into the code. You're right,
there are those dialogs that slide up from the bottom sometimes - I'll
use your code to add support for those.

[Joe Hewitt]

Hi Sam,

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

[Sam]

OK - that's cool.

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

[Curt Kaffer]

FYI Slightly more efficient if block for the last condition

if (axis == "y")
{

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

[Mike Brophy]

Joe,

Sitting here at the Adobe AIR Bus Tour event in Seattle and checked out your improvements -- just fabulous.

Mike

[Jeffrey903]

Hey Joe,

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

[Joe Hewitt]

Hi 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?

[Jeffrey903]

Thanks for that. I had put in the text-overflow: ellipsis; part, but
not the overflow: hidden or white-space: nowrap.

[Curt Kaffer]

***** I sent this as an email directly to Joe but realized others
might find it useful. The check image is from the iPhone set
(UIPickerTableCellChecked.png) padded with 15 empty pixels on the
right *****

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>

[Joe Hewitt]

Curt, are you familiar with using Subversion? iUI has a Google Code
project (http://code.google.com/p/iui/) which I'd be happy to give you
access to for checking in your changes. That would make it easier for
us to stay in sync with each other.

[Hardy Macia]

I think just making it a control on top of everything that you can
press the letter to jump to the letter would be close enough. That's
how I use the Apple control anyway. I tap the letter I want to jump to.

[Jeffrey903]

Hey Joe,

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

On Jul 10, 7:12 am, Joe Hewitt <joehew...@gmail.com> wrote:

[Jeffrey903]

I figured out the problem. It was that I wanted to use a GET request,
and the way that the javascript is set up, it will automatically use a
POST request if there are variables (regardless of what the form
method is in the HTML). I just changed my script to use a POST
request and fixed that, but I have another problem.

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?

On Jul 10, 7:12 am, Joe Hewitt <joehew...@gmail.com> wrote:

[Michael Latta]

Just do not make them links. Make them P or DIV elements and style
those like the a elements in the CSS.

Michael

[Joe Hewitt]

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

[Jack Small]

On Jul 11, 2007, at 2:33 PM, Joe Hewitt wrote:

Sorry about that POST problem, I fixed the script so that it can work

with GET as well.

Hey I have a POST for to trigger my CGI but I want it to ignore the result.  I also have the problem where I have hundreds of "leaf" items that would all have a very long link, but the link content can be derived from the item/page ids.

I've posted my mods below.  The first is a snippet I added to the click event listener.  The second is a "fire" function I added to the end.  Using this method, all my leaf items simply ref "#fire".

Maybe you see a more graceful way to do it?

More later,

Jack

if(link.hash && link.hash == "#fire")

{

var page = iui.getSelectedPage();

   if (page) {

   link.setAttribute("selected", "progress");

   fireZephirCommand(page.id, link.innerHTML, unselect);

   }

   }       

   else if (link.href && link.hash && link.hash != "#")

....

function fireZephirCommand(cmp, cmd, cb)

{

var href = '/cgi-bin/jaxs/zir.cgi';

var args = [];

if (cmp) args.push("zee_component=" + cmp);

if (cmd) args.push("zee_command=" + cmd);

var req = new XMLHttpRequest();

req.onerror = function()

{

if (cb)

cb(false);

};

req.onreadystatechange = function()

{

if (req.readyState == 4)

{

//var frag = document.createElement("div");

//frag.innerHTML = req.responseText;

//iui.insertPages(frag.childNodes);

if (cb)

setTimeout(cb, 1000, true);

}

};

req.open("POST", href, true);

req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

req.setRequestHeader("Content-Length", args.length);

req.send(args.join("&"));

}

[Joe Hewitt]

Try the latest versions of iui.js and iui.css, they've fixed the two
problems that Jeff mentioned.

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

[Randy Walker]

Jeffrey:

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

-=Randy

[John Hamm]

This is nothing short of fantastic. This is the start of a true SDK
for the iphone. I'm curious if you will be including the toolbar
animations when moving back and forward between pages. Your pages
slide, but the top bluegray toolbar doesn't have animations - the
elements simply blink in. This seems like the final step in getting
iUI to look exactly like Apple's existing feel. This has already been
implemented by Cooloquy at:

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 Hewitt]

I purposely did not implement the toolbar animation because I am
already displeased with the sluggish animation of just sliding in the
page, and didn't want to put any more strain on Safari which might
worsen it. The Colloquy guys did a great job with this animation, but
on my iPhone it barely manages to render two frames during the
transition. It's not their fault, Safari on the iPhone is just slow.

- Joe

[shashwat]

Hey Joe,

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

thanks

Shashwat

[John Hamm]

Joe,
I modified Colloquy's source to render the animations from its current
30fps setting to 10fps. Since the length of the animation is 250ms,
10fps means that 5 steps will be involved in any animations that are
rendered between panel switches - the same as yours. Although the
animation isn't as smooth as I'd like, it is comparable to the current
iUI stuff. Take a look:

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? :)

[Hillel]

Let me start by saying THANK YOU!!! Your framework truly rocks.

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

[Jeff]

> With the new Ajax linking feature,

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.

[Joe Hewitt]

Write <a href="some/url" target="_self"> and it will open the link in
its own page.

[Canton]

Hi joe, thanks for the great IUI framework. It was really fun to work with:

http://iphone.sampleswap.org

SampleSwap is a site I've been running for about 7 years where musicians/DJ's exchange original music and high-quality audio samples (drum loops, etc.)

Someday, when we can get ringtones onto the iPhone, it will be a great resource. :)

In the meantime, members have uploaded around 700 original electronic music compositions to the site. These have been reviewed and well-organized in a database; so it was a cinch to put together an iPhone portal using IUI. The page loads the 180 best songs of the lot.

For those of you doing php implementations of iPhone apps, here's some snippets of code you might find useful:

I put the following bit of code at the top of the page to send regular visitors to a "this is an iphone page, dummy" web page. The 'dummy page' links back to the original page with an added URL variable like this:

        http://....index.php?override=1

which tells the page to go ahead and load anyway:

if (!stristr($_SERVER['HTTP_USER_AGENT'],'iPhone') && !isset($HTTP_GET_VARS['override'])) {     header('Location: not-iphone.html'); } // end if not an iPhone test

And if you're loading a page that's quite large, you can put this at the very very top of your code:

ob_start("ob_gzhandler");

To gzip your HTML between the server and safari. Big speed boost.

Happy coding!

- canton

-- 

-- v a r i o u s   d e s t i n a t i o n s --

http://www.ontology.com/canton/music - original music

http://www.ontology.com/dj - dj sets

http://www.ontology.com/production - film/tv music

http://www.ontology.com/canton - + the kitchen sink

[Jeff]

So, I cant open the request to the new URL without changing anything
on my current page? I didnt want to open the new link. I just wanted
to send a URL request and a payload of a=3.

[Kalle Alm]

Jeff,

Jeff wrote:
> So, I cant open the request to the new URL without changing anything
> on my current page? I didnt want to open the new link. I just wanted
> to send a URL request and a payload of a=3.

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

-Kalle.

[Kalle Alm]

Canton wrote:
> And if you're loading a page that's quite large, you can put this at the
> very very top of your code:
>
> ob_start("ob_gzhandler");
>
> To gzip your HTML between the server and safari. Big speed boost.

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.

[Dan Wood]

There are some articles and techniques about compression in my slides
from my iPhoneDevCamp presentation here:

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

[Ⓙⓐⓚⓔ]

Canton,
I like the nav of the site... except when you go off to a new page to show the sample, and I have to click , then go back... with a little ajax you could do the sample page inline.

On 7/12/07, Canton <can...@gmail.com> wrote:

Hi joe, thanks for the great IUI framework. It was really fun to work with:

http://iphone.sampleswap.org

SampleSwap is a site I've been running for about 7 years where musicians/DJ's exchange original music and high-quality audio samples (drum loops, etc.)

Someday, when we can get ringtones onto the iPhone, it will be a great resource. :)

In the meantime, members have uploaded around 700 original electronic music compositions to the site. These have been reviewed and well-organized in a database; so it was a cinch to put together an iPhone portal using IUI. The page loads the 180 best songs of the lot.

For those of you doing php implementations of iPhone apps, here's some snippets of code you might find useful:

I put the following bit of code at the top of the page to send regular visitors to a "this is an iphone page, dummy" web page. The 'dummy page' links back to the original page with an added URL variable like this:

        http://....index.php?override=1

which tells the page to go ahead and load anyway:

if (!stristr($_SERVER['HTTP_USER_AGENT'],'iPhone') && !isset($HTTP_GET_VARS['override'])) {     header('Location: not-iphone.html'); } // end if not an iPhone test

And if you're loading a page that's quite large, you can put this at the very very top of your code:

ob_start("ob_gzhandler");

To gzip your HTML between the server and safari. Big speed boost.

Happy coding!

- canton

-- 

-- v a r i o u s   d e s t i n a t i o n s --

http://www.ontology.com/canton/music - original music

http://www.ontology.com/dj - dj sets

http://www.ontology.com/production - film/tv music

http://www.ontology.com/canton - + the kitchen sink

--
Ⓙⓐⓚⓔ - יעקב   ʝǡǩȩ   ᎫᎪᏦᎬ

[Canton]

>Canton,
>I like the nav of the site... except when you go off to a new page
>to show the sample, and I have to click , then go back... with a
>little ajax you could do the sample page inline.

...

>
>>Hi joe, thanks for the great IUI framework. It was really fun to work with:
>>

>><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?

[Jeff]

On Jul 13, 9:44 am, Kalle Alm <kalle....@gmail.com> wrote:
> Using XMLHttpRequest you can. It's a common enough technique with plenty
> of examples online.
> -Kalle.

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>

[Randy Walker]

On the bottom right of the iphone developer page is a link:

Watch Video

Watch iPhone engineers as they share techniques on optimizing web content for iPhone.
(Free ADC Membership required to access video)

I am logged into my ADC account and the link takes me to a general listing page of dif types of developer content.  I click the "more videos..." link at the bottom of that page and it just refreshes the page.  The link's href say's "adc on itunes" (adconitunes) so is it supposed to open my itunes to play the video as a podcast??

-=Randy

[Jeffrey903]

I was able to get access to the video and start downloading it. It
downloads it through iTunes (just so you know my iTunes Store account
and ADC account have DIFFERENT e-mail addresses).

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).

[Randy Walker]

Did your iTunes start automatically, or did you go to the apple store and
find a link via that interface? It just refreshes my page and I have Safari
3.02 on OSX10.4.10, iTunes 7.3(54).
-=Randy

[ajf]

Yeah, it opens ADC area in iTunes Store where you can download the
podcast of the "Designing Web Content for iPhone" session at WWDC.
Nothing new really, but a good walk through of the stuff at the iPhone
dev site.

[Randy Walker]

Hmm. Thanks for the info.

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

[Hardy Macia]

You can't send XMLHttpRequest()s to other servers. It has be the
server your app is hosted on.

Hardy

[Randy Walker]

I just updated my iTunes to 7.3.1(3) and Safari just refreshes the page. I
am able to log in ok. Could it be an issue with Safari 3.0.2?
I was able to view ADC videos in the past in iTunes, not anymore.

-=Randy

[ajf]

I have same versions of iTunes and Safari. Try this link in Safari:
itmss://deimos.apple.com/WebObjects/Core.woa/BrowsePrivately/adc.apple.com

[Randy Walker]

Thanks for the link. Very strange indeed!
I click your link and it launches iTunes, which say's it's connecting to the
iTunes store. Then Safari launches and takes me to the same page I get
stuck on and iTunes shows me a white page with "iTunes Store" embossed in
the middle.

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 Veelo]

U sure that link below is spelled right? Looks like deimos should be
demos... Just a thought.

-Edwin

[Jeff]

On Jul 13, 8:32 pm, Hardy Macia <hardyma...@gmail.com> wrote:

> You can't send XMLHttpRequest()s to other servers. It has be the
> server your app is hosted on.

> Hardy

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

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

var xmlHttp = new XMLHttpRequest();

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

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

[AndyOfLinux]

Hi Joe,

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

[Chandler Kent]

Hi,

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!

[Nozbe]

Joe,

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 <joehew...@gmail.com> 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

[Josh]

I second that..

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

[J Coates]

Joe,

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

[Josh]

So last night I hacked a way and I've got the Music example
(navigation and animation, not button images) working in IE.. But not
Vista. Vista is doing evil things with the back button.. (both the
browser back button and the backbutton that renders into the top right
corner of the app).

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

Josh

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