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:
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.
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 ;)
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).
On Jul 10, 7:17 am, Joe Hewitt <joehew...@gmail.com> wrote:
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.
> 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.
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 :).
On Jul 10, 8:32 am, AwayBBL <away...@gmail.com> wrote:
> yeah, I could easily do it if independent scrolling of iframes was > allowed
> On Jul 10, 8:27 am, Joe Hewitt <joehew...@gmail.com> wrote:
> > 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, 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
On Jul 10, 8:36 am, AwayBBL <away...@gmail.com> wrote:
> 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 :).
> On Jul 10, 8:32 am, AwayBBL <away...@gmail.com> wrote:
> > yeah, I could easily do it if independent scrolling of iframes was > > allowed
> > On Jul 10, 8:27 am, Joe Hewitt <joehew...@gmail.com> wrote:
> > > 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.
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.
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
On Jul 10, 12:12 pm, Joe Hewitt <joehew...@gmail.com> wrote:
> 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:
> 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.
> 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 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.
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).
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
On Jul 10, 4:57 pm, Joe Hewitt <joehew...@gmail.com> wrote:
> 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).
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
On Jul 10, 7:12 am, Joe Hewitt <joehew...@gmail.com> wrote:
> 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:
> 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.
> 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 ;)
"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?
> "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?
***** 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.
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.
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.
> 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.
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:
> 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:
> 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.
> 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 ;)
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:
> 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:
> 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.
> 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 ;)
> 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: >> 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:
>> 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 ;)
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....
> 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); };
