Uw browser is sterk verouderd. Upgrade je browser voor een betere gebruikers ervaring en veiligheid.

Artikels

iPhone webdevelopment: jQTouch vs iWebkit

Geschreven door
iPhone webdevelopment

Om op een gemakkelijke manier een webapplicatie te schrijven voor de iPhone maak je het best gebruik van een miniframework of -toolkit. In deze blogpost licht ik kort de twee vooraanstaande toe: jQTouch en iWebkit.

Wat deze toolkits doen is vrij eenvoudig: ze gebruiken HTML, CSS en JavaScript om de 'volledige' look and feel van een echte iPhone applicatie na te bootsen. Denk hierbij aan het verbergen van de Safari balken bovenaan en onderaan. Zo zal je webapplicatie dus op een volledig scherm (de balk waar onder andere je provider vermeldt staat, blijft wel staan) draaien en daardoor de indruk geven dat het een echte applicatie betreft. Hiervoor moet de webapplicatie wel opgeslagen zijn naar je iPhone, zodat hij via het hoofdscherm toegankelijk is. Ik wil wel vermelden dat een webapplicatie zijn gebreken heeft:

  • Je kan niet alle API's van de iPhone oproepen (tot op heden enkel de GeoLocation);
  • Je webapplicatie zal nooit in de AppStore terecht komen.

Waarom zou je dan per sé je eigen webapplicatie schrijven? Misschien vind je bepaalde applicaties uit de AppStore wel goed, maar mis je die persoonlijke toets. Of misschien wil je de grenzen van het mogelijke proberen te verleggen? Bovendien is het maken van een webapplicatie volledig gratis, moet je geen weken wachten op goedkeuring van de AppStore en is de applicatie snel te porten naar andere platformen. Welke reden je ook hebt, met deze blogpost geef ik je alvast enkele tips om op weg te geraken.

Hoe begin je?

Maak eerst en vooral een keuze welke toolkit je gaat gebruiken. Hieronder vind je kort samengevat de twee grootste spelers op het vlak van toolkits. Je downloadt vervolgens deze toolkit en uploadt de bestanden naar een (eigen) webruimte. Maak vervolgens een nieuw HTML (PHP mag natuurlijk ook) bestand aan en zorg dat zowel de JavaScript bestanden als de CSS bestanden van de toolkit bij in het bestand zijn ingesloten. Vanaf dit moment ben je effectief klaar om de webapplicatie te bouwen.

De verschillende schermen van een webapplicatie kan je in veel gevallen onderbrengen in één enkel HTML/PHP bestand. Eén div-element herbergt één 'pagina' binnen de webapplicatie. Binnen deze layer kunnen we dan weer inhoud – en onze menubalk vanboven – gaan inbouwen. Hoe dit precies gebeurt, hangt natuurlijk voor een groot deel af van de gekozen toolkit.

jQTouch

De eerste toolkit van deze blogpost is jQTouch. Zoals de naam het misschien al verklapt, maakt deze toolkit gebruik van jQuery. Dit dan voornamelijk voor de animaties tussen verschillende schermen. Dankzij jQuery heeft jQTouch een indrukwekkend gamma aan animaties. Het ziet er natuurlijk mooi uit, maar in de meeste gevallen heeft dit geen echte meerwaarde. Ook de grafische schil van jQTouch oogt mooi. Natuurlijk kan je het grafische aspect zelf naar je eigen wensen aanpassen.

Een voorbeeld van een simpele pagina in jQTouch zou bijvoorbeeld het volgende kunnen zijn:


<div id="home" class="current">

	<div class="toolbar">
		<h1>Een titeltje</h1>
		<a class="back" href="#">Terug</a>
	</div>
	
	<h2>Subtitel</h2>
	<ul class="rounded">
		<li><a href="#paginaid">Interne link</a><li>
		<li><a href="#paginaid">Interne link</a><li> 
	</ul>
	
	<h2>Subtitel 2</h2>
	<ul class="rounded">
		<li class="arrow"><a href="#paginaid">Interne link</a></li>
		<li class="arrow"><a href="#paginaid">Interne link</a></li>
		<li class="arrow"><a href="#paginaid">Interne link</a></li>
	</ul>
	
</div>

We zien een div met het ID 'home'. Dit ID is nodig om tussen onderlinge pagina's te linken. Dan hebben we een toolbar div. Je raadt het al, dit is waar onze toolbar staat. Je kan hierin onder meer een header voorzien, alsook links naar andere pagina's (bijvoorbeeld een 'about' pagina).

Daarna is het gewoon HTML gebruiken om te pagina op te vullen. Naast het intern linken kunnen er ook links gelegd worden naar formulieren (waarbij het formulier een pagina voorstelt en dus ook zijn eigen ID heeft).

Een overzicht van de meeste functies van jQTouch kan je vinden op het introductie filmpje op hun website.

iWebkit

Na jQTouch is het nu de beurt aan iWebkit. iWebkit verschilt op een aantal punten radicaal met jQTouch. Zo maakt iWebkit geen gebruik van jQuery en bijgevolg moet je dus geen jQuery bronbestanden inladen.

Een groot verschil met jQTouch is dat de verschillende pagina's hier ook effectief verschillende HTML pagina’s zijn. Bekijk volgend stukje demo code maar eens:


<div id="topbar">
	<div id="title">iWebKit</div>
	<div id="leftbutton">
		<a href="http://iwebkit.net">PC website</a>
	</div>
</div>
<div id="content">
	<ul class="pageitem">
		<li class="textbox">
			<span class="header">Welcome</span>
			<p>Welcome to the iWebKit 4 Demo site!</p>
		</li>
		<li class="menu">
			<a href="changelog.html">
				<img alt="Start" src="thumbs/start.png" />
				<span class="name">What’s New?</span>
				<span class="arrow"></span>
			</a>
		</li>
	</ul>

</div>
<div id="footer">
	<a href="http://iwebkit.net">Powered by iWebKit</a>
</div>

Dit is een verkorte weergave van de iWebkit demopagina. In grote lijnen lijkt deze code op de code van jQTouch, maar er zijn toch enkele kleine verschillen. Zo kunnen we afbeeldingen gaan toevoegen aan onze menu items. Zo creëer je natuurlijk een mooi visueel overzicht.

Alle features van iWebkit bespreken in deze blogpost zou te veel van het goede zijn. Wil je jezelf overtuigen, bekijk dan zeker de demopagina op je iPhone.

Meer informatie

Conclusie

Of je nu kiest voor jQTouch of iWebkit maakt eigenlijk niet uit. Hoewel er zoals eerder vermeld enkele nadelen zijn aan webapplicaties, hoop ik toch dat ik jullie voldoende stof heb kunnen geven om eens te experimenteren met beide toolkits. Persoonlijk heb ik geen echte voorkeur. Ik stel mezelf de vraag of ik een grafisch sterke applicatie wil, of eerder een lichtgewicht applicatie. Aan de hand daarvan kies ik respectievelijk voor jQTouch of iWebkit.

Heb je zelf al iets gemaakt met bovenstaande toolkits (of andere)? Plaats dan gerust een reactie met de link naar de webapplicatie. Ook andere suggesties van toolkits zijn meer dan welkom!