iPhone web applications, templates, frameworks? [closed]

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.

Alejoa

Isn't DashCode an iPhone web app framework with templates? – Halliburton

Answer 1

I found iphone-universal on Google Code the other day. Haven't had a chance to try it out but it looks promising.

Edric

Sadly the AGPL3 licence makes iphone-universal (at least for my work) completely pointless. I do wonder about how much use web libraries with licences like that actually get used, versus more openly licensed libraries like jQuery. I think the fact that it hasn't been updated in three years says something.. – Urinary

Answer 2

jQtouch looks outstanding.

Ronnie

Answer 3

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.

Logan

Answer 4

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.

Fernald

This is cool - it's actually got smooth animations between pages. It's definitely an alternative to iUI. – Discoverer

Answer 5

QuickConnectiPhone is LGPL so you can use it the way you want. It has a custom Dashcode project that includes the needed files. It is highly modular. It will even let you compile your JavaScript, HTML, and CSS into an installable application if you want.

http://sourceforge.net/projects/quickconnect/

For more information you could look at http://tetontech.wordpress.com

Zavras

Answer 6

Try iwebkit

http://iwebkit.net

Here is a demo:

http://m.iwebkit.net

Alveolus

Answer 7

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;
}

Rectangle

Answer 8

This looks good, but unfortunately it's being licensed under GPLv3, so I'm actually a bit afraid to start looking at that code. The framework I either need to find, or develop if needs be, must be able to be used as part of a commercial program, without having to license the entire program different. Commercial libraries are fine, I just haven't found any I can demo yet, presumably because I could just then steal all the code if I wanted to.

Guess I'll look further, thanks for the link though.

Edit: Clarification. I'd be fine with the requirement to share the source to the web framework part for the iPhone, if someone wanted it, but since this framework is all source, I'm afraid that incorporating bits of it into an existing web application (to make a skin for iPhone), I'd be making the whole web application liable for GPL license, which is totally out of the question. Even sharing all the files related to the iPhone pages is out of the question, since they will contain proprietary code.

Alejoa

iphone-universal is in fact licensed under Affero GPL (quite different to standard GPL) which is absolutely not going to work for what you propose. – Logan

Answer 9

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.

Caste