How does one install this? I downloaded it and would like to use it for my site, but the instructions in the readme point to this page, which doesn't have instructions.

Thanks CJ

Really useful -- more Getting Started information would be good :-).

Thanks

Sam Dutton

huh, ok, I followed instruction in "Getting Started".So, now I have it downloaded... mmm, now what? It would be nice to have a step-by-step set of instructions.

Once you've downloaded the iui files you'll have a folder which contains the following items:

  index.html
  iui
  LICENSE.txt
  NOTICE.txt
  README.txt
  releaseNotes.txt
  samples

It looks to me like the folder called iui should be copied into any web project that you want to use iui with.

It contains the files (images, css, javascript) that are referenced by iui.

Take a look at the sample files in the folder "samples" to see how the iui files are used.

You may just copy and paste code from the examples to get your own files going.

You'll need to understand how to work with external css and javascript files to use iui.

I hope this helps. I'm just getting started myself, so I may have missed something.

Cheers!

Tony

I do not have much experience in Javascript on Safari, especially the non-standard "features". But I wanted to create a nice-looking website for my iPod, so I tried out your files. The examples are pretty good, but when I try to use the new Layout, I did have any idea how to do it. My big appeal to you is: please make some more "Introduction"-Wikis where you explain your methods. Or please add some Comments to your js- and css-source. That would be really helpfull in Order to really understand this great project.

Thanks! pafodie

This is a great project! I'm learning to develop iPhone web applications. I believe this will be much helpful.

Jay

I am PHP developer i want to learn, how to develop such type of web application in iui for iphone ? can anyone help me ? give me reference or manual for that ? i want to also know that which platforms and languages needs for that ?

thanks, Rahul

Hi guys,

I'm doing a rapid coding competition in the company I work for, and I chose to use the wonderful iUI library to build a voting application. It's quite simplistic at the moment, but it was a really good learning experience. So I thought I'd share with you all.

http://www.anthonytambrin.com/ivote/

Cheers, Anthony

The current design loads all data at once from a single HTML file. That's great unless you have a huge data set (which I do) and then the initial page load takes...for...ever.

The Digg example using "target="replace" works for simple formatted info but, it seems, not with standard browsable lists like the regular interface uses. replaced HTML appears as a simple HTML list.

Anyone know how to break really long lists into multiple HTML files instead of one? For example, if I'm listing stores by state, I could list a few dozen stores on each state's page instead of hundreds of entries on one HUGE and slow-loading HTML file. People looking for a store in California, for example, don't have to wait for Washington to load then...

what about akulavolk said is what I want to say... How can I use not only one html?

thank you very much

and I have another question: what's the difference between iui and iuix? thanks...

iuix looks to be minified to save precious memory size on your phone.

Any updates about using multiple htmls, actually my first page is login screen, from this page after login i want to redirect person to completly new page, with different toolbar etc. any help apprciated

To help myself and others, I have put together some documentation/screenshots of the music demo, plus some additional observations/alternations I have made:

http://www.k10design.net/articles/iui/

Thank you very much, but I have a question..

Is it possible to start at index.html with an .m4v video file that is auto loaded and auto played, and After the .m4v movie is fully played, you redirect to index2.html ????

At the moment I have it at this way: when the movie is played, it returns to your last visited page before you went to index.html..

Thanks in advance.

Cheers

ok, sorry to bother you all with questions but i can't seem to figure this out. the scenario is the following, site with multiple pages, impossible to load them all in one go so will need to load html page fragments for the selected section. first issue, how can i tell when the page is loaded from iui and when it;s linked to directly, from a search engine for instance, so i'll know to generate only the html fragment in the first case, and the whole page in case the user has come from a search engine. second issue, how can I make it generate #link anchors in the url for all the dynamic sections, and how can i make iui read the #link section on loading from a bookmark for instance and automatically issuing the proper ajax request to see the content that the user bookmarked.

i hope someone can help, cheers

Remember: this is not the place to ask support questions. The iPhoneWebDev Google Group is.

The quick answer to most of these multiple HTML questions is to use ajax...

Thanks for putting this together...

A couple of fixes to the code.

1. Enable the forms to submit textareas values as well. Around line 355 all this line:

encode(form.getElementsByTagName("textarea"));

below these lines:

encode(form.getElementsByTagName("input"));
encode(form.getElementsByTagName("select"));

2. Radio buttons were not submitted properly...you only want the value of the checked radio button. The change needs to be made to the encode(inputs) function inside the encodeForm(form) function:

function encode(inputs)
    {
        for (var i = 0; i < inputs.length; ++i)
        {
            if (inputs[i].name){
                if(inputs[i].type == "radio"){
                    // if radio button only do value of currently checked one
                    if(inputs[i].checked){
                        args.push(inputs[i].name + "=" + escape(inputs[i].value));
                    }
                }else{
                    args.push(inputs[i].name + "=" + escape(inputs[i].value));
                }
            }
        }
    }

iui is excellent, I now have control of my house from my iPhone in only 5 hrs of work.

Would love to see more colour & buttons.

Keep up the good work...

Nivin37

i got my google code, but i don't know where to paste it in my website page. Please help

@anwarulaz

You'll create the website with the iui folder... The link to the overview up at the top is really helpful. http://www.k10design.net/articles/iui/

Many thanks to Joe for all your work and most of all for sharing. And thanks to C.W. for your documentation/instructions. This stuff works great.

Just a couple ???'s.

I am created a remote/home automation webpage for my Iphone. The remote screens are single images sized to fit the browser window that use a map applied to the single image to break it up into seperate links.

Can I detect when the orientation of the iphone is changed and display a widescreen version of the remote image instead (and vice versa).

Can I hide the navigation bar at the bottom of the screen?

Can I scroll left to right with finger swipes like a prototypical Iphone app? (my remote is comprised of 4 or 5 screens each with it's own image. It would be nice to switch remote screens with a swipe rather then clicking a button/link)

I love this library. It makes developing iPhone apps so easy. I have a couple suggestions. I would add support for hiding the address bar after a scroll. This can be accomplished with the following code:

// This will hide the address bar if the user scrolls to where the top is visible. document.addEventListener('scroll', function(){if(0===window.pageYOffset){window.scrollTo(0,1);}}, false);

I would also run the javascript through jslint (http://jslint.com). I did so and found some potential issues. Most of the warnings are complaining about lack of curly braces around if statements. There are some other issues too.

- I would consider changing the nativeUrlPatterns to the /regex\shere/ way of creating regular expression objects. - I would look at how the unselect function is created and consider changing it to:

var unselect = function() { link.removeAttribute("selected"); };

- slide and slideDone functions are used before they are created. This can have the side effect of placing the functions in the global namespace. consider moving them up in the code above where they are called. - use '!==' to compare with 'null' instead '!='.

I would consider creating setter methods for the public properties like animOn.

@r.m.deak please open an issue for a suggestion: http://code.google.com/p/iui/issues/list

The hiding of the scrollbar is covered.