iPhone web applications, templates, frameworks? [c

Question

Does anyone have any good starting points for me when looking at making web pages/sites/applications specifically for viewing on the iPhone?

I've looked at templates like the one Joe Hewitt has made, and also seen some templates I can purchase, which I haven't done yet.

I figured someone else had already started on this track and decided that I could probably leech on their newfound knowledge :)

So, does anyone have any pointers? I'm well aware of the problem that the more such a template/framework makes a web app look like a native iPhone app, the more likely I'm going to get into trouble because it just isn't, but for now I want a framework I can start building on, and then in the process figure out how to make it distinctive enough to be perceived as a web app as well as looking like a native iPhone application.

Specifically I'm looking for features like:

• stylesheets set up, or pointers to how to do them for iPhone
• page flipping animation, ie. pick an item in a list, list scrolls out of view to the left and information for item scrolls in from the right
• the animation part would have to work with dynamic pages, ie. not just one big page that has divs set up for each sub-item, which at least one such framework had as a sort of quick fix, I would need to have list item picking load the page for that item, and then when loaded, scroll to it

---

Edit: To avoid people reading only the question and answering, before reading my other reply, I'll add my clarification for GPL licensing and similar issues here.

The framework I need to use can not be distributed under a license which would require me to license my own project out under a similar license. The GPL family of licenses allows for exceptions regarding library usage, but this won't apply to this since by necessity, the kind of framework I would need to use would be all source code.

The project can easily accomodate commercial libraries.

Also, I don't need a library or a framework as such, example files that look good and aren't overly obfuscated would be welcome as well.

Answer 1

The iUI library, originally from Joe Hewitt, would be a good place to start. The library is BSD licensed and has no commercial restrictions.

You're right in assuming iphone-universal is not an option for you -- its actually licensed under Affero GPL which triggers the distribution clause simply by accessing the software over a network which is quite different to standard GPL.

Answer 2

Try iwebkit

http://iwebkit.net

Here is a demo:

http://m.iwebkit.net

Answer 3

jQtouch looks outstanding.

Answer 4

Check out iWebkit 6. It works only on iOS 5, though :(.

UPDATE

You can also use saurik's. It doesn't have all of the features you said you wanted, but I'll try to see how to implement them. Also, you said you wanted to build on it. For a demo (saurik took down the actual good part of cydia.saurik.com) you can use mine on my other site. To avoid transferring all those images, just add this in the header:

<link rel="stylesheet" type="text/css" href="http://cache.saurik.com/menes/style.css" />

also, add this to your CSS:

body > panel > fieldset > div > a: hover {
background-image: url('menutouched.png')
}

menutouched.png is here:

This function in js slides the page. It is from Joe Hewitt’s iUI project:

function swipePage(fromPage, toPage, backwards)
{
toPage.style.left = “100%”;
toPage.setAttribute(“selected”, “true”);
scrollTo(0, 1);
var percent = 100;
var timer = setInterval(function()
{
percent += animateX;
if (percent <= 0)
{
percent = 0;
fromPage.removeAttribute("selected");
clearInterval(timer);
}
fromPage.style.left = (backwards ? (100-percent) : (percent-100)) + "%";
toPage.style.left = (backwards ? -percent : percent) + "%";
}, animateInterval);
}

For loading the next page, you could try something like executing a window.location with a delay. The timing is up to you though.

You also need to add this to your CSS:

body {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-webkit-text-size-adjust: none;
-webkit-touch-callout: none;
}

Answer 5

I'm currently looking into http://webapp.net.free.fr/. Check out the demo here. Compared to the other frameworks mentioned, it has the following advantages:

• Under active development
• Active user community
• Has an open license, free to distribute as long as you include the copyright/disclaimer

The last point was really the winner for me. I'm looking at building something that will be included in a commercial product, so the other frameworks like iphone-universal and iwebkit (both GPL) weren't options.

Answer 6

I've been mucking around with iUI, and find it quite good, but to be honest I haven't looked at the licencing model, so I've no idea what it is. It is very simple and straight forward though, and works well with ASP.NET MVC.