1 0 v o o r w o o r d

Transcriptie

1 Voorwoord HTML ontstond ooit als een opmaaktaal voor het uitwisselen van wetenschappelijke informatie. Later ontwikkelde het zich tot een digitaal presentatiekaartje voor bedrijven en organisaties of een middel om via internet geld te verdienen. Intussen is het web enorm veranderd. Vele miljoenen gebruikers brengen het grootste deel van hun computertijd door op het internet. Webmail, sociale netwerksites, zoekmachines, ze zijn vaak beter ingeburgerd dan klassieke desktopprogramma s. De leercurve is minder hoog en de interfaces zijn gebruiksvriendelijk. Computerprogramma s verhuizen stilaan naar webservers waarop gebruikers inloggen en hun informatie delen en uitwisselen. Het klassieke HTML en zijn opvolger XHTML voldeden niet meer aan de eisen die een moderne webapplicatie stelt. Ook javascript, dat lange tijd enkel werd gebruikt voor rollovereffecten bij afbeeldingen of eenvoudige formuliervalidaties, voldeed niet meer aan de wensen van webontwikkelaars. Naast het W3C (het world wide web consortium) dat al jaren de ontwikkeling van webgerichte talen als HTML en CSS leidt, ontstond het WHATWG (Web Hypertext Application Technology Working Group). Onder hun impuls verscheen HTML5, eigenlijk een verzamelnaam voor een uitbreiding op de (X)HTML-standaard, CSS en nieuwe API s voor en versies van javascript. HTML5 moet het ontwikkelen van webapplicaties vereenvoudigen en brengt de webapp veel dichter bij het klassieke computerprogramma. Het succes van mobiele apparaten zoals de iphone, ipod touch, ipad en Android-gebaseerde toestellen gaf een boost aan HTML5. De hegemonie van de Microsoft-browser Internet Explorer werd doorbroken door een nieuwe generatie snelle en vernieuwende browsers zoals Firefox, (Mobile)Safari en Chrome die de nieuwigheden met open armen omsluiten. De nieuwste versie van Internet Explorer kon op dit vlak niet achter blijven. Het resultaat is een explosief groeiend aantal verbazingwekkende webapplicaties die vaak niet meer te onderscheiden zijn van hun desktop-tegenhangers. HTML5, CSS3 en javascript en de webbrowsers bevinden zich voortaan in een chronisch betastadium, en dat is maar goed ook. Nieuwe ontwikkelingen en voorstellen zetten een constante druk op de browserontwikkelaars en de concurrentie leidt tot de snellere integratie van nieuwe technologieën. Webontwikkelaars kunnen meer dan ooit terugvallen op fantastische open source frameworks zoals jquery, Ample SDK, RaphaëlJS, Three.js enz. die verschillen tussen browsers en platformen nivelleren en de webapp-ontwikkeling versnellen. In dit boek geven we een overzicht van de belangrijkste en interessantste frameworks en libraries voor het ontwikkelen van webapplicaties. We focussen vooral op de nieuwe

2 10 voorwoord technologieën en hoe we die ook backwards-compatible kunnen maken. De codevoorbeelden zijn als basis te gebruiken voor je eigen webapplicaties en websites en naar wens uit te breiden en aan te vullen. De voorbeelden, links, extra informatie en frameworks vind je ook op de website bij dit boek:

3 1 De basisingrediënten van een online GUI Nog niet zo heel lang geleden installeerde een computergebruiker voor elke taak een apart programma. Dit kan uiteraard nog steeds. Door de opkomst van de snelle internetverbindingen en nieuwe technieken zoals AJAX en HTML5 is het doordeweekse computergebruik echter enorm veranderd. Heel wat taken kunnen we nu rechtstreeks in de browser afhandelen via een webapplicatie. Een webapplicatie is een programma dat op een webserver draait en via een webbrowser gebruikt kan worden. Webapplicaties zijn er in allerlei soorten en maten. Via online bankieren kunnen we onze financiële rompslomp van thuis uit regelen. We nemen contact op met vrienden en kennissen via Facebook, een film van een verjaardagsfeest uploaden we naar YouTube. Op de werkvloer staat geen klassieke radio meer, maar luisteren we uiterst persoonlijk naar ons favoriete muziekstation via internet radio of een Last FM-account. In Wikipedia maak je naar wens je eigen encyclopedie en je kunt hem drukklaar downloaden in PDF-formaat. Webmailapplicaties zoals Gmail zijn voorzien van een ingebouwde virusscanner, een file viewer enzovoort. Je kunt het niet bedenken of er bestaat wel een of andere (vaak gratis) webapplicatie voor. De opkomst van het mobiele internet en het succes van de iphone en mobiele apparaten met Google Android, vergroten het succes van webapplicaties. 1.1 Voordelen van een webapplicatie Een webapplicatie is zeker niet zonder gevaren, maar toch biedt het tal van voordelen in vergelijking met een klassiek computerprogramma. De online encyclopedie Wikipedia ziet als belangrijkste voordelen: 1 Webapplicaties vereisen geen ingewikkelde installatieprocedure bij het uitrollen in een grote organisatie. Alleen een webbrowser is vereist. 2 Webapplicaties hebben geen schijfruimte op de clientcomputer nodig. 3 Voor een update in de webapplicatie hoeven er geen wijzigingen op de werkplek gedaan te worden. 4 Webapplicaties zijn makkelijk te integreren met andere websites of webservices. 5 Webapplicaties zijn in de basis platformonafhankelijk (Windows, Mac, Linux, enz.) doordat ze in een webbrowser draaien. 1.2 Applicaties en webapplicaties Een webapplicatie doet in wezen niets anders dan een klassiek desktopprogramma. Het kan bestanden maken, openen, bewerken en weer opslaan. Om bestanden te maken of te

4 12 hoofdstuk 1 bewerken beschikt de gebruiker over een aantal bedieningselementen vaak in de vorm van knoppen of menu s. Een van de belangrijkste verschilpunten is dat de webapplicatie een lijst moet bijhouden van alle gebruikers en hun respectievelijke bestanden. 1.3 Programma s bouwen Niet alleen voor doordeweekse computergebruikers, maar ook voor webdesigners en webontwikkelaars hangt er een zweem van geheimzinnigheid rond programmeren. Klassieke desktopprogramma bestaan vaak uit duizenden, zo niet honderdduizenden regels code. Voordat die code door een computer kan uitgevoerd worden, moet ze gecompileerd worden. Dit wil zeggen dat de code door een stuk software (de compiler) in machinetaal wordt omgezet. De gecompileerde code kan rechtstreeks door de processor worden uitgevoerd. Het zal je ongetwijfeld al zijn opgevallen dat de meeste programma s die je gebruikt, dezelfde dialoogvensters en gelijkaardige knoppenbalken bevatten. Programmeurs maken namelijk gebruik van de API s die het besturingssysteem biedt. Een API of Application Programming Interface maakt het mogelijk om op eenvoudige wijze systeemtaken (bestanden openen, opslaan, afdrukken) uit te voeren. De programmeur schrijft bijvoorbeeld een stuk code dat het print-dialoogvenster van Windows opent. Omdat niet alleen de processor, maar ook het besturingssysteem en de corresponderende API s verschillen, is het hierdoor niet zonder meer mogelijk om een Windowsprogramma op pakweg een Mac OS X- of Linuxmachine te installeren en omgekeerd. Weinig programmeurs werken puur in code. Over het algemeen gebruiken ze een visuele IDE (Integrated Development Environment). Daarin kunnen ze grafisch aan de slag volgens het WYSIWYG-principe. In zo n omgeving kan de ontwikkelaar bedieningselementen zoals vensters, knoppen, menubalken enz. naar zijn ontwerpvenster slepen en de nodige functionaliteit programmeren. Naast de GUI (Graphical User Interface) moet de ontwikkelaar er ook voor zorgen dat de bedieningselementen samenwerken met achterliggende verwerkings- en opslagfuncties. Een programma leest gegevens uit een databank of bestand in en kan nieuwe gegevens opslaan. Voor Windows en Mac OS X bestaan IDE s die standaard voorzien zijn van toegang tot de API-functies van het besturingssysteem en de standaard GUI-elementen (knoppen, vensters, menu s). Een programmeur kan ook gebruikmaken van een platformonhankelijke IDE zoals bijvoorbeeld Qt (zie figuur 1), waarin hij code kan schrijven voor meerdere besturingssystemen. De IDE neemt in dat geval de vertaalslag voor de verschillende systemen voor zijn eigen rekening. Daarnaast kan een ontwikkelaar zich ook bedienen van een widget toolkit, een widget library of GUI toolkit. Zo n toolkit is een stuk software dat de programmeur eveneens voorziet van de mogelijkheid om vensters, menubalken, knoppen en andere GUI-elementen in zijn code op te nemen. Sommige van deze toolkits (bijvoorbeeld GTK) hebben huiseigen dialoogvensters voor de gecompileerde programma s.

5 de basisingrediënten van een online gui Werking van een webapplicatie Een webapplicatie werkt op een webserver. De door de gebruikers aangemaakte bestanden of ingevoerde informatie wordt in een databank op de server opgeslagen. In principe kan een webapplicatie in om het even welke programmeertaal worden geschreven. De programmeurs kunnen een eigen clientprogramma schrijven dat verbinding maakt met de webserver en daarmee gegevens uitwisselt. Steeds meer maakt men echter gebruik van een website/webpagina om verbinding te maken met de applicatie. Het grote voordeel is dat de gebruiker geen apart programma hoeft te installeren. Hij moet in zijn browser enkel nog de juiste URL invoeren. Voor het bouwen van een webapplicatie ben je dus niets met platformgebonden GUIelementen. De bediening gebeurt volledig via een webbrowser. Daarom moet de ontwikkelaar zich bijscholen in de werking van HTML, CSS en javascript. Een webapplicatie slaat zijn gegevens op in een centrale databank of als meerdere losse bestanden op de webserver. De meeste programmeertalen beschikken over functionaliteit om die informatie om te zetten in webpagina s voor een webbrowser. Omdat de stap van het ontwikkelen van een eenvoudige website naar het programmeren toch wel erg groot is, zijn er allerlei relatief eenvoudig te leren scriptingtalen ontwikkeld waarmee een webontwikkelaar/designer bestanden in een databank kan aanspreken. Zonder twijfel heb je al gehoord van ASP, PHP of JSP. Voor klassieke programmeurs is de drempel verlaagd door in de IDE s ook de ontwikkeling van webapplicaties mogelijk te maken. Server databank, bestanden <> middleware <> output naar HTML+ bedieningslementen (HTML, CSS, javascript) 1.5 HTML als GUI-taal De computergebruiker bedient een webapplicatie via een browservenster. Dit betekent dat de ontwikkelaar zich moet bedienen van de talen die een webbrowser begrijpt. Elk programma-onderdeel dient omgezet te worden in HTML, CSS en javascript. In vergelijking met klassieke programmeertalen en API s zijn de mogelijkheden van HTML voor het bouwen van een GUI erg beperkt. HTML, CSS en javascript vormen de heilige drievuldigheid van webdesign: 1 (X)HTML: een taal die de tekstinhoud van webpagina s kan structureren en documenten aan elkaar kan linken. 2 CSS: de taal die beschrijft hoe elk onderdeel van een webpagina er moet uitzien. 3 javascript (of een javascript-bibliotheek zoals Dojo of jquery): hiermee kun je interactiviteit, effecten, animaties enz. aan je webpagina s toevoegen. Daarnaast zal je al snel in aanraking komen met verwante talen zoals XML, JSON, SVG, XUL enz.

6 14 hoofdstuk 1 HTML beschrijft de onderdelen die in een webpagina worden opgenomen. Dit gebeurt op een compleet andere manier dan in een programmeertaal. Hoe HTML precies werkt, valt buiten het bestek van dit boek. Op internet en in de boekhandel vind je tal van handleidingen waarmee je de taal in een oogwenk onder de knie hebt. Hieronder vind je toch een snelle en korte gids. Ken je HTML reeds voldoende, dan kun je deze paragraaf gerust overslaan. HTML staat voor hypertext markup language. HTML is geen programmeertaal, maar beschrijft enkel de tekststructuur. Het duidt titels, alinea s, lijsten enz. aan in een tekst. HTML is gedefinieerd met SGML (Stardard Generalized Markup Language) waarvoor de omschrijving is bepaald door de ISO-norm SGML is veel uitgebreider dan HTML, maar dient net als HTML voor het structureren van tekstuele informatie. In een webpagina staat in de eerste plaats tekst. Die tekst heeft een bepaalde structuur en kan een of meerdere van de volgende onderdelen bevatten: titels of koppen alinea s citaten tabellen lijsten verwijzingen of referenties (links, hyperlinks) naar andere webpagina s of websites (verwijzingen naar) afbeeldingen Mensen onderscheiden meteen een titel of een alinea. Een computerprogramma daarentegen is dom. Je moet het op een of andere manier vertellen waar de verschillende onderdelen staan. Dit kun je enkel door aan het programma letterlijk te vertellen waar elk onderdeel begint en eindigt. HTML markeert een titel of alinea zoals je dat zelf misschien al eens in een cursus deed met een markeerstift. Met een HTML-markering duid je het begin en het einde van een tekstonderdeel of tekstelement aan. <h1>mijn titel</h1> <ul> <li>eerste opsommingspunt</li> <li>tweede opsommingspunt</li> <li>derde opsommingspunt</li> </ul> Verklaring van de afkortingen in HTML: h = head ul = unordered list (niet-genummerde lijst) li = list item

7 de basisingrediënten van een online gui 15 Webbrowsers lezen de HTML- markeringen uit en zetten de HTML-structuur om in een voor mensen leesbare weergave. Dit proces noemen we renderen of parsen. Door aan te duiden waar een bepaald tekstonderdeel begint en eindigt, herkent de webbrowser (Internet Explorer, Firefox, Safari) de verschillende tekstonderdelen. HTML kan hypertekst bevatten: een document kan verwijzingen bevatten naar andere documenten. Dit kunnen verwijzingen zijn naar documenten als foto s en teksten die zich op dezelfde computer of medium bevinden, maar ook naar documenten die ergens op de wereldwijde locatie van het internet opgeslagen zijn. De gebruiker zal hiervan niets merken. Wanneer we HTML als GUI-taal voor een webapplicatie gaan toepassen, stuiten we al snel op een aantal grondige beperkingen. HTML (tot en met versie 4) en XHTML hebben: weinig of geen interactieve mogelijkheden geen opslag- of verwerkingsfuncties een heel beperkte set aan invoermogelijkheden en interface-elementen. Figuur 1 De visuele IDE van Qt maakt het ontwikkelen van desktopapplicaties eenvoudiger. In een klassiek programma kan een ontwikkelaar gebruik maken van knoppen, menubalken, dialoogvensters, kalenders, selectiegereedschappen, grids enz. De meeste IDE s beschikken over een ruime voorraad aan bedieningselementen die naar believen naar het werkvenster kunnen worden gesleept. HTML is oorspronkelijk niet ontwikkeld om het te gaan gebruiken voor de ontwikkeling van programma s. Toch biedt het enige mogelijkheden voor het opbouwen van invulformulieren.

8 16 hoofdstuk Invoerformulieren in HTML Een invulformulier neem je als volgt op in het <body>-element van een webpagina: <form> </form> Als je de webpagina opvraagt in de browser, zul je nog steeds niets zien veranderen. We hebben immers nog geen knoppen, invulvelden of dergelijke voorzien. We moeten er een goede gewoonte van maken om elk onderdeel van een formulier te benoemen. Dat doen we door de attributen name en id op te nemen in de HTML-tags voor de formulier elementen. Wanneer het formulier wordt verzonden, kan een script op de server de ingevoerde gegevens opvragen op basis van het id van een element. Hoe dit precies in zijn werk gaat, hangt af van de gebruikte scripting- of programmeertaal op de server. We moeten het formulier ook vertellen waar het de ingevulde informatie naartoe moet sturen. <form name="form" id="form" action="bewaar.php"> </form> Vervolgens beslissen we ook welke verzendmethode we hiervoor zullen gebruiken. We kunnen kiezen tussen GET en POST. GET: als we informatie willen opvragen, bijvoorbeeld gegevens uit een bestaande databank POST: informatie verzenden om te bewaren, bijvoorbeeld , toevoegen aan een databank, gastenboek en dergelijke. <form name="form" id="form" action="bewaar.php" method="post"> </form> In moderne webapplicaties is het standaard submitten of verzenden van een formulier vaak vervangen door een javascript-functie die het controleren van de invoer en het verzenden voor zijn rekening neemt. In een volgende stap voegen we de diverse formulierelementen toe. We kunnen kiezen uit: tekstvelden tekstvakken bestandsvelden keuzelijsten keuzerondjes aankruisvakjes verborgen velden knoppen allerlei: tabindex, sneltoetsen etc.

9 de basisingrediënten van een online gui 17 In het formulier plaatsen we de verschillende elementen tussen de begin- en de eindmarkering "form": <form name="form" id="form" action="bewaar.php" method="post"> HIER KOMEN DE FORMULIERELEMENTEN </form> Tekstvelden In een tekstveld kan de gebruiker tekstinformatie invullen. Een tekstveld bestaat uit één regel. Er bestaan twee types tekstvelden: tekst wachtwoord: hierbij verschijnt de ingevoerde informatie als sterretjes of bolletjes. Met het attribuut "value" kun je ook een vooraf gedefinieerde inhoud in het tekstveld plaatsen. <input name="username" id="username" type="text" maxlength="50" value="voer hier je gebruikersnaam in" > In een tekstveld kunnen we uitgebreidere tekstinformatie opnemen. We maken een tekstveld door de tag "textarea" in het formulier in te sluiten. <textarea name="bericht" id="bericht"> </textarea> Tekstvakken In tegenstelling tot een gewoon tekstveld kan een tekstvak meerdere regels weergeven. Het aantal regels stellen we in met het attribuut "rows". Ook kunnen we instellen hoeveel tekens in een regel kunnen weergegeven worden met het attribuut "cols" (=kolommen). Beter is echter de grootte van het tekstvak in te stellen met CSS. Ook bij een tekstvak kunnen we een vooraf gedefinieerde inhoud in het tekstvak opnemen. Dit kunnen we door tekst te typen tussen de begin- en te eindmarkering (=tag) van het element "textarea". <textarea name="bericht" id="bericht" > Tik hier je tekst. </textarea> Bestandsvelden In webmailprogramma s zit vaak een mogelijkheid om via een browse/blader -knop ook een bestand toe te voegen aan je mail. Als je een bestand hebt gekozen, wordt het ge üpload

10 18 hoofdstuk 1 naar de server. HTML voorziet hiervoor een bestandsveld, maar kan zelf geen bestanden uploaden. Immers, HTML is een opmaaktaal, voor het uploaden heb je een programma nodig op de server. In dit voorbeeld wordt het formulier verzonden naar het programma bewaar.php. Dit script zal het uploaden van het bestand voor zijn rekening moeten nemen. Browsers laten uit veiligheidsoverwegingen niet toe dat je hier een voorgedefinieerde waarde ingeeft via het attribuut "value". Als je hier het attribuut "maxlength" opneemt, inter preteert de browser dit als de maximale hoeveelheid bytes die doorgestuurd mogen worden. Via het attribuut "accept" kun je instellen welke mimetypes (bestandstypes) mogen worden geüpload. Ook het jokerteken "*" is toegelaten om subtypes toe te laten. Neem je het attribuut "accept" niet op, dan is het uploaden van alle bestandstypes toegelaten. <input name="file" id="file" type="file" maxlength="100000" accept="text/*"> Als je gebruik wilt maken van een bestandsveld, moet je de "form"-tag uitbreiden met het volgende attribuut: <form name="form" id="form" action="bewaar.php" method="post" enctype="multipart/formdata" > <input name="file" type="file" maxlength="100000" accept="text/*"> </form> Met behulp van het attribuut "readonly" kun je instellen of de gebruiker de inhoud van het tekstveld mag wijzigen of niet. Dit attribuut kun je ook voor de tekstvelden en tekstvakken gebruiken. <input name="file" type="file" maxlength="100000" accept="text/*" readonly="readonly"> In hoofdstuk 2 lees je hoe je het eenvoudige file-veld kunt upgraden naar een uploadveld met drag- en dropmogelijkheden. Keuzelijsten Je kunt een keuzelijst aanbieden waaruit de bezoeker een of meerdere items kan selecteren. Hiervoor maken we gebruik van het formulierelement "select". De diverse items in onze lijst komen tussen de tags "option" te staan. <select name="selectproduct"> <option>hp-scanner</option> <option>kodak-scanner</option> <option>canon-scanner</option> </select>

11 de basisingrediënten van een online gui 19 In het bovenstaande geval is er in de keuzelijst slechts één item te zien. Om de rest te zien moet je het menu openklappen. Je kunt het aantal zichtbare items instellen met behulp van het attribuut "size". Standaard kan er slechts één item geselecteerd worden. Willen we de gebruikers de mogelijkheid bieden om een meervoudige selectie te maken, dan voegen we het volgende attribuut "multiple" toe. <select name="selectproduct" size="3" multiple="multiple">... </select> We kunnen vooraf ook één item selecteren. Dat doen we op de volgende manier: <option selected="selected">agfa-scanner</option> Toch ontbreekt er nog iets essentieels in onze keuzelijst: met het bovenstaande voorbeeld is het onmogelijk om de verzonden gegevens in een andere webpagina (= de bestemming van het formulier) weer op te vragen. We moeten elk item nog een waarde toekennen. De inhoud van de items is op dit moment enkel bedoeld voor de bezoekers. We voegen bij elk item het attribuut "value" toe. <select name="selectproduct" size="3"> <option value="hp">hp-scanner</option> <option value="kodak">kodak-scanner</option> <option value="canon">canon-scanner</option> </select> Je kunt items ook per thema groeperen door de markering "optgroup" op te nemen tussen de "select"-markering. <select name="selectproduct" size="9"> <optgroup label="scanners"> <option value="hp">hp</option> <option value="agfa">agfa</option> <option value="kodak">kodak</option> <option value="canon">canon</option> <option value="trust">trust</option> </optgroup> <optgroup label="printers"> <option value="canonprinter">canon</option> <option value="brother">brother</option> </optgroup> </select>

12 20 hoofdstuk 1 Keuzerondjes Keuzerondjes zijn een reeks ronde aanstipbare knopjes met bijschrift waarvan de bezoeker er één kan selecteren.we nemen steeds de volgende attributen op: type = radio name = vrije keuze (maar alle keuzerondjes moeten dezelfde naam hebben als ze bij dezelfde groep horen) value = per keuzerondje een andere waarde toekennen <label for="vrouw">vrouw</label> <input type="radio" id="vrouw" name="sex" value="vrouw"/> <label for="man">man</label> <input type="radio" id="man" name="sex" value="man"/> <label for="onzijdig">onzijdig</label> <input type="radio" id="onzijdig" name="sex" value="onzijdig"/> De gebruiker kan slechts één van die keuzerondjes selecteren. Bij het laden van de formulierpagina is echter geen enkel rondje geselecteerd. We kunnen vooraf selecteren met behulp van het attribuut "checked". <label for="sex">onzijdig</label> <input type="radio" name="sex" id="sex" value="onzijdig" checked="checked"> Aankruisvakjes Aankruisvakjes zijn een groep vierkantjes met bijschrift waarvan de bezoeker er geen, één of meerdere kan aanvinken. We nemen steeds de volgende attributen op: type: checkbox name: vrije keuze (maar alle keuzerondjes moeten dezelfde naam hebben als ze bij dezelfde groep horen) value: per keuzerondje een andere waarde toekennen <label for="curryworst">curryworst</label> <input type="checkbox" id="curryworst name="friet" value="curryworst"/> <label for="gehaktbal">gehaktbal</label> <input type="checkbox" id="gehaktbal" name="friet" value="gehaktbal"/> <label for="mayonaise">mayonaise</label> <input type="checkbox" id="mayonaise" name="friet" value="mayonaise"/> <label for="ketchup">ketchup</label> <input type="checkbox" id="ketchup" name="friet" value="ketchup"/> <label for="tartaar">tartaart</label> <input type="checkbox" id="tartaar" name="friet" value="tartaar"/>

13 de basisingrediënten van een online gui 21 Verborgen velden Met behulp van een verborgen formulierveld kun je onzichtbaar informatie in velden opslaan. Onzichtbaar is niet helemaal juist, want de informatie is nog steeds te lezen als we de bron van de pagina bekijken. De browser verbergt het veld enkel bij de definitieve weergave van de pagina in het browservenster. In tegenstelling tot wat je misschien denkt, zijn verborgen velden zeer interessant om informatie weg te schrijven zonder dat de bezoeker de inhoud van de velden kan wijzigen. <input type="hidden" name="taal" value="nl"/> Knoppen Om de informatie van het formulier te verzenden, hebben we een knop nodig. Wanneer we op die knop klikken, wordt de informatie gepost. <input type="submit" name="save" value="bewaar"/> of <button type="submit" name="save">ok</button> bewaar Naast een submit-knop kunnen we ook een reset-knop opnemen om het formulier leeg te maken. <input type="reset" name="reset" value="opnieuw"> of <button type="reset" name="reset">opnieuw</button> Uiteraard kunnen we met HTML ook gewone knoppen schrijven. <button type="button" id="text">test</button> Om aan een HTML-knop een zekere functie te koppelen moeten we onze toevlucht nemen tot javascript. Fieldset Met de markering "fieldset" kun je bepaalde onderdelen van het formulier groeperen. De markering "legend" geeft de "fieldset" een opschrift.

14 22 hoofdstuk 1 <fieldset> <legend>gebruiker:</legend><br/> <label for="naam">naam</label>input type="text" name="naam" id="naam"><br/> <label for="tel">telefoon</label><input type="text" name="tel" id="tel"> </fieldset> Labels Net zoals in visuele IDE s van klassieke programmeertalen, kun je bij invoervelden een label ingeven. Met het attribuut "for" kun je een label koppelen aan een bepaald element. De waarde bij "for" verwijst naar het "id" van het corresponderende element. Het gebruik van labels voor invoervelden maakt je webpagina s veel toegankelijker voor schermlezers (voor blinden en slechtzienden). Vermits HTML-code niet gecompileerd wordt, is die code immers uit te lezen. Velden uitschakelen, sneltoetsen en tabs U kunt een veld of formulierelement deactiveren door er het attribuut "disabled" aan toe te kennen. De tekst in het invoerveld wordt lichtgrijs weergegeven en je kunt de inhoud niet wijzigen. De inhoud van dit veld wordt niet mee verstuurd als het formulier gepost wordt. Het heeft dus een andere functie dan het attribuut "readonly". <input type="text" name="website" value="mijn website" disabled="disabled"> Als je de tabtoets gebruikt, verspring je van formulierelement tot formulierelement. Met het attribuut "tabindex" kun je instellen in welke volgorde de diverse elementen bereikbaar moeten zijn. Met sneltoetsen (toetsenbord) kun je de gebruiker naar welbepaalde formulierelementen laten gaan. We kunnen sneltoetsen instellen met het attribuut "accesskey". <input type="text" name="website" id="website" value="mijn website" tabindex="1" accesskey="w"> <input type="text" name=" " id=" " value="mijn adres" tabindex="2" accesskey="e"> In hoofdstuk 6 lees je hoe je sneltoetsen aan bepaalde functies kunt verbinden. We kunnen formulieren opmaken met stijlbladen (CSS). Een volledige uitleg van wat stijlbladen nu eigenlijk zijn, valt buiten het bestek van dit boek. In een stijlblad definieer je hoe elk element van een webpagina er moet uitzien (bijvoorbeeld lettertype, lettergrootte, kleur). Ook formulierelementen zoals knoppen of tekstvelden kunnen op die manier opgemaakt worden zodat hun stijl conform de vormgeving van de hele website loopt. We kunnen een algemene stijl definiëren voor bvijvoorbeeld een tekstveld. Alle tekstvelden zullen er dan gelijkaardig uitzien. Een voorbeeld:

15 de basisingrediënten van een online gui 23 input { float:left; font-size:10pt; font-family:arial, helvetica; background: ivory; border:1px #cccccc dotted; } 1.7 Nieuwe elementen in HTML5 HTML5 is meer dan alleen maar de nieuwste versie van HTML. Het is een verzamelnaam voor de nieuwste versies van HTML, javascript en CSS. In HTML5 is er een aantal nieuwe moge lijkheden bijgekomen voor het opbouwen van formulieren. Over het algemeen gaat het over nieuwe attributen en variaties op het reeds vermelde tekstveld. Let op: niet alle browsers herkennen deze nieuwe invoervelden. Een browser die bijvoorbeeld het type datetime niet herkent, zal het renderen als een normaal tekstveld. Als ontwikkelaar moet je er steeds rekening mee houden dat de gebruiker moet kunnen terugvallen op een alternatief. color datetime month, week number range search tel url de browser toont een kleur picker je kunt enkel een datum of tijd invoeren de invoer moet een adres zijn de invoer moet een maand zijn; de browser kan een datumveld voorzien de invoer moet een getal zijn een bereik, bijvoorbeeld tussen twee getallen een zoekveld de invoer moet een geldig telefoonnummer zijn; een mobiele telefoon kan de mogelijkheid voorzien een telefoonnummer te laten selecteren uit een lijst de invoer moet een een geldig webadres zijn. HTML5 voorziet in deze nieuwe invoervelden, maar vermeldt niet wat browsers met die invoervelden moeten doen. Browserproducenten zijn dus relatief vrij in hun keuze. Samen met de nieuwe invoervelden is ook een aantal nieuwe attributen geïntroduceerd. autocomplete autofocus form formaction formenctype bij de invoer van de gebruiker suggereert de browser zelf tekst geeft aan welk veld de focus moet hebben bij het laden van de pagina geeft weer bij welk formulier(en) het huidige veld hoort vervanging voor "action" application/x-www-form-urlencoded multipart/form-data text/plain

16 24 hoofdstuk 1 formmethod formnovalidate formtarget height list max min multiple pattern placeholder required step width vervanging voor "method" invoerveld moet niet gevalideerd worden bij het verzenden ter vervanging van "target" hoogte van het element datalist-id, voorgedefinieerde lijst van data hoogst in te voeren cijfer of datum laagst in te voeren cijfer of datum meer dan één waarde toegelaten (bijvoorbeeld bij file) reguliere expressie die weergeeft welke waardes mogen ingevoerd worden, bijvoorbeeld: pattern="[0-9]" helptekst die bijvoorbeeld weergeeft wat moet ingevoerd worden het veld moet ingevuld worden interval tussen in te voeren waardes (bijvoorbeeld: 2, 4, 6 maar niet 3, 5 ) breedte van het element Het doel van deze nieuwe attributen is ontwikkelaars een hoop scriptingwerk te besparen. Tot nog toe werd voor validatiefuncties javascript ingezet. Wanneer de browser dit werk zelf voor zijn rekening neemt dankzij eenvoudig aan te brengen attributen, bespaart het enorm veel ontwikkeltijd bij het bouwen van een webapplicaties. 1.8 DOM Als ontwikkelaar van webapplicaties moet je een goed begrip hebben van het DOM. Het DOM of Document Object Model is een platform- en (scripting- of programmeer)taalonafhankelijke manier om de inhoud, structuur en stijl van documenten (bijvoorbeeld HTML en XML) dynamisch aan te passen. Via de DOM kan een document tijdens de weergave worden aangepast. Ruwweg beschrijft het DOM HTML- en XML-documenten in een stamboomstructuur. Elk element (bijvoorbeeld <html>, <body>, <h5>, <p> ) of attribuut in de stamboom kan vanuit een scripting- en of programmeertaal geselecteerd en aangepast worden. Er bestaan drie versies van de DOM: 1 Core DOM: model voor elk gestructureerd document. 2 XML DOM: model voor XML-documenten en XHTML 3 HTML DOM: model voor HTML-documenten Het HTML-dom is aldus een onafhankelijke en open standaard voor het selecteren, aanpassen, toevoegen of verwijderen van HTML-elementen in een HTML-document. Elke element in een webpagina wordt beschouwd als een knoop/knooppunt (node). De DOM-API bepaalt op welke wijze je bepaalde elementen kunt selecteren (opvragen) om ze aan te passen. Dit kan op verschillende manieren: 1 Via de boomstructuur kan van elk element in het document opgevraagd worden wat het bovenliggende (parentnode) of de onderliggende (childnodes) objecten (elementen) zijn.

17 de basisingrediënten van een online gui 25 Document Root element: <html> Element: <head> Element: <body> Element: <title> Attribute: "href" Element: <a> Element: <h1> Text: "Titel van deze webpagina" Text: "link" Text: "Titel" Figuur 2 Stamboomstructuur 2 Via de tagnaam, bijvoorbeeld selecteer alle alinea s (<p>), links (<a>), etc. 3 Via de waarde van de attributen. De meest gebruikte manier is het opvragen van de id (identiteit) van een element. Een id is immers uniek in het document, bijvoorbeeld <div id="page">blabla</div> In het onderstaande voorbeeld is <html> de root-node van het document. Het is de document-node. De document-node heeft 2 childnodes nl. <head> en <body>. <body> is op zijn beurt de parentnode van <h1> en <p> enz. De tekst "Wat is de Dom?" in het element <h1> is niet de waarde van <h1>, maar wordt eveneens als een childnode van <h1> beschouwd. Dit "text"-node is toegankelijk via de innerhtml-eigenschap van het element <h1>. <html> <head> <title>dom</title> </head> <body> <h1>wat is de Dom?</h1> <p>document Object Model...</p> </body> </html>

18 26 hoofdstuk 1 1 Het hele document is de document-node. 2 Ieder HTML-element is een element-node. 3 De tekst in een HTML-element zijn text-nodes. 4 Een HTML-attribuut is een attribute-node. 5 Commentaarregels zijn comment-nodes. 6 Ieder element kan maximaal één parent node hebben. 7 Ieder element kan meerdere child nodes hebben. 8 Een leaf is een element zonder child nodes. 9 Siblings zijn elementen met dezelfde parent node. GeselecteerdElement.innerHTML GeselecteerdElement.nodeName GeselecteerdElement.nodeValue GeselecteerdElement.parentNode GeselecteerdElement.childNodes GeselecteerdElement.attributes GeselecteerdElement.getElementById(id) De tekstinhoud (waarde van de textnode) van het element. De innerhtml-eigenschap hoort niet bij de specificaties van de DOM, maar wordt door alle browsers wel ondersteund. Je kunt er de HTMLinhoud van een element mee opvragen of wijzigen. De naam van het element opvragen. De waarde van het element opvragen. De parent node van het element opvragen. Alle child nodes van het element opvragen. Alle aanwezige attributen van een element opvragen. Een element selecteren met behulp van het idattribuut. GeselecteerdElement.getElementsByTagName(name) Alle elementen van een bepaalde tag (bijvoorbeeld <p>) opvragen. GeselecteerdElement.appendChild(node) GeselecteerdElement.removeChild(node) Een element toevoegen als child node voor het geselecteerde element. Een child node verwijderen van een geselecteerd element. Voor elk document kun je een aantal eigenschappen bewerken: tekst, stijl (CSS), events (hoe reageert het element op gebeurtenissen zoals een muisklik), functies (bijvoorbeeld toevoegen of verwijderen van child nodes). In het onderstaande voorbeeld selecteren we het <p>-element met id "intro". Vervolgens geven we de inhoud van dit element weer in twee alert-vensters. <html> <head> </head> <body> <p id="intro">hello World!</p> <script type="text/javascript"> var x=document.getelementbyid("intro"); alert(x.firstchild.nodevalue); alert(x.innerhtml);

19 de basisingrediënten van een online gui 27 </html> </script> </body> Een model met een verleden Legacy DOM Voor er sprake was van een gestandaardiseerd model, bevatten de browsers slechts de mogelijkeid om formulierelementen, afbeeldingen en links op te vragen. Aanvankelijk konden alleen formulierelementen, afbeeldingen en links via DOM aangesproken worden. Hiermee kon men een eenvoudige formuliervalidatie doen of aan afbeeldingen een rollover -effect toevoegen: via naam: document.formname.inputname via index: document.forms[0].elements[0] Intermediate Dom Vanaf 1997 begonnen browserfabrikanten aan de implementatie van eigen technieken om onderdelen van een ingelezen document te wijzigen. Die technieken kregen de verzamelnaam Dynamic HTML (DHTML) maar waren vaak incompatibel tussen de verschillende browsers. Dom Level 1, 2, 3 Het W3C bracht browserfabrikanten samen om een standaard voor scriptingtalen te ontwikkelen: ECMAscript. javascript (Netscape) en JScript (Microsoft) implementeerden ECMAscript voor grotere compatibiliteit. Het W3C begon eveneens te werken aan de DOM. DOM Level 1 bevatte al technieken waarbij elk onderdeel van een HTML- of XML-document bewerkt kon worden. Bij DOM Level 2 (2000) werd het bekende getelementbyid geïntroduceerd. Dom Level 3 (2004) biedt ondersteuning voor XPath, keyboard event handling en serializing van XML-documenten. Vanaf 2005 worden grote delen van DOM ondersteund door ECMAscriptcompatibele browsers zoals IE6, Opera, Safari en Gecko-browsers (Mozilla, Firefox, SeaMonkey en Camino). 1.9 Browsers en hun kuren Voor heel wat ontwikkelaars is het slikken als ze bedenken dat hun beoogde webapplicatie moet functioneren in alle denkbare browsers. Toch is dit niet zo n groot probleem als het op het eerste zicht lijkt. Ook al bestaan er veel onderlinge verschillen tussen de browsers, toch kunnen we de browsers indelen in vier grote groepen. Heel wat browsers maken intern immers gebruik van dezelfde rendering engine, de motor voor het omzetten van HTML en CSS in een leesbare weergave. Van veel groter belang in deze tijd is de ondersteuning voor webstandaarden en de snelheid van de ingebouwde javascript-interpreter.

20 28 hoofdstuk 1 Hieronder vind je een beknopt overzicht van de belangrijkste rendering engines: Rendering engine WebKit Gecko of NGLayout Presto Trident Browsers Webkit is door Apple afgeleid van KHTML, de rendering van engine van de open source browser Konqueror uit de KDE-desktop op Linux Open source layout-engine van Netscape/Mozilla Layout-engine van Opera Software ter vervanging van de oude Elektra-engine Rendering engine voor Microsoft Internet Explorer vanaf versie 4 Beschrijving engine achter Google Chrome, Safari, Mobile Safari en de browser van Google Android engine achter Mozilla Suite Mozilla Firefox, AOL, Beonex Communicator, Camino, CompuServe 7.0, DocZilla, Epiphany, Flock, Galeon, IBM Web Browser, K-Meleon, Kazehakase, Netscape 6.0 en latere versies, Salamander Web Browser, SeaMonkey, Skipstone Opera 7 en later, Opera Mobile, Opera Mini, Nintendo DS Browser, Nintendo DSi Browser, Nokia 770 browser, Sony Mylo COM-1 browser, Wii Internetkanaal, Macromedia/Adobe Dreamweaver MX tot en met CS3, Adobe Creative Suite 2 en 3 Internet Explorer Op vind je een uitgebreide lijst van browser en hun specifieke rendering engines Modernizr Niet alle browsers (en zeker niet de oudere) ondersteunen de nieuwe input-types en attributen. Op vind je een geavanceerde javascriptbibliotheek die voor de gebruikte browser controleert welke nieuwe HTML5-elementen, HTML5-attributen en CSS3- opties ondersteund worden. Download het script en link het aan de <head>-tag van je webpagina s. <script src="modernizr-1.7.min.js"></script> Let op: afhankelijk van de gedownloade versie moet je natuurlijk de naam van het script aanpassen. Je kunt het script ook in een andere map bewaren. Dan moet je niet alleen de naam, maar ook de map invoeren bij het attrbuut src. Voeg nu het attribuut class "no-js" toe aan de <html>-tag. <html class="no-js"> Modernizr controleert niet alleen welke HTML5 en CSS3-opties door de gebruikte browser ondersteund worden. Het vervangt de naam van de class door js en voegt een extra class toe

21 de basisingrediënten van een online gui 29 voor elke optie die ondersteund wordt. Wat niet ondersteund wordt, krijgt het voorvoegsel no-. Bijvoorbeeld: <html class="js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface"> Het voordeel is dat je in je CSS aparte klassen kunt definiëren. Wanneer je in de body van je webpagina een <div> aanmaakt met id="music", dan kun je die in je CSS als volgt vormgeven: <style type="text/css">.no-audio #music{ /* De HTML krijgt van Modernizr de klasse no-audio*/ display: none; /* Toon geen audio*/ }.audio #music { /* De HTML krijgt van Modernizr de klasse audio*/ width:40px; height:20px; } </style> De nieuwe types invoervelden krijgen geen aparte class van Modernizr. Immers, een browser die ze niet herkent, geeft ze gewoon weer als een standaard tekstveld. Modernizr maakt het mogelijk om te controleren of een invoertype door je browser wordt ondersteund. Zo niet, dan kan je met behulp van een andere javascript-bibliotheek een eigen element voorzien. Bijvoorbeeld: <input type="date" name="verjaardag" id="verjaardag"> In de head voeg je toe: <script type="text/javascript"> if(!modernizr.inputtypes.date){ //geen ondersteuning? Maak dan een 'datepicker' aan voor het element met ID 'verjaardag' maakkalender(document.getelementbyid('verjaardag')); } function maakkalender(idvanelement){ //uw code } </script>

22 30 hoofdstuk 1 In plaats van Modernizr.inputtypes.date kun je date vervangen door elk nieuw type invoerveld: search, tel, url, , datetime, month, week, time, datetime-local, number, range, color. Je kunt Modernizr ook laten controleren of de nieuwe attributen ondersteund worden. Bijvoorbeeld: <input type="text" required="true" name="gebruikersnaam" id="gebruikersnaam"> In de head voeg je toe: <script type="text/javascript"> if (!Modernizr.input.required){ // use a input hint script controleerinvoer(document.getelementbyid('gebruikersnaam')); } function controleerinvoer(idvanelement){ //uw code die controleert of het veld ingevuld is of niet... } </script> In plaats van Modernizr.input.required kun je required vervangen door elk nieuw type invoerveld: autocomplete, autofocus, list, placeholder, max, min, multiple, pattern, step Frameworks brengen browsers dichter bij elkaar De tijd dat een ontwikkelaar elke javascript-functie zelf moest schrijven en de werking ervan in elke browser moest uittesten, is definitief voorbij dankzij de komst van geavanceerde javascript-bibliotheken en frameworks. Zulke frameworks maken niet alleen het selecteren en on-the-fly aanpassen van de diverse pagina-elementen onwaarschijnlijk eenvoudig. Ze beschikken ook over al dan niet uitgebreide User Interface-uitbreidingen. Voor de meest populaire frameworks bestaan er bovendien honderden plugins en user-generated uitbreidingen. Een javascript-bibliotheek bevat een aantal functies voor het ontwikkelen van webapplicaties. Ze bieden tal van voordelen: Cross-browser: javascript mag dan wel browseronafhankelijk zijn, toch wordt het niet altijd op dezelfde manier geïmplementeerd door de verschillende browserfabrikanten. Een framework neemt werk alvast uit handen van de ontwikkelaar. Voor programmeurs bieden de frameworks class-based inheritance terwijl javascript zelf gebruikmaakt van protype-based inheritance. Het framework neemt de vertaalslag voor zijn rekening. Code reuse: frameworks maken het hergebruik van code uiterst eenvoudig. Dit zorgt voor enorme tijdwinst bij het ontwikkelen van een webapplicatie en bespaart ook massa s frustratie of heb je tijdens het computerwerk nog nooit woedeaanvallen gekregen?

23 de basisingrediënten van een online gui 31 Tot de meest populaire frameworks behoren onder andere Dojo Toolkit: ExtJS: jquery: MochiKit: Mootools: Prototype: script.aculo.us: Yahoo! UI Library (YUI): Elementen selecteren met jquery Een van de meeste populaire javascript-frameworks is zonder twijfel jquery van John Resig. jquery is open source en kan dus vrij gebruikt worden in al je projecten. Het grootste voordeel is de lage leercurve en het feit dat het crossbrowser werkt. De ontwikkelaar hoeft zich dus geen zorgen meer te maken over de diverse browser-implementaties van de DOM of javascript. jquery heeft de volgende eigenschappen: AJAX (XHR-requests) animaties crossbrowser selecteren van DOM-elementen CSS-manipulatie DOM wijzigen effecten event-handling plugin-architectuur Net zoals dat met alle andere javascript-bibliotheken het geval is, moet je het jquery-script linken in de <head> van je webpagina s. Je hoeft het bestand zelfs niet op je eigen server plaatsen, maar je kunt een verwijzing opnemen naar het script op de jquery-site. Op de site googleapis.com host Google een hele reeks frameworks. Je kunt die op de volgende manier in je pagina s integreren: <script type="text/javascript" src=" Vervolgens moet je een eigen script toevoegen. De document-ready-functie van jquery is een sublieme vervanger voor de window.onload-functie van javascript. <script type="text/javascript"> $(document).ready(function(){ //hier komt uw code }); </script>

24 32 hoofdstuk 1 Selecteren van DOM-elementen in jquery id var MijnSelectie= $("#idvanelement"); selecteer het element met een bepaald id class var MijnSelectie= $(".EenKlasse"); selecteer alle elementen met een bepaalde klasse tag var MijnSelectie= $("a"); selecteer alle tags van een bepaalde soort (vb. <a>) 1.13 Javascript User Interfaces De meeste javascript frameworks bieden naast een core-script voor het manipuleren van de DOM ook een User Interface-bibliotheek aan. Die bibliotheek bestaat meestal uit een reeks componenten of widgets die met een eenvoudig functie-aanroep in een webpagina geïntegreerd kunnen worden. Ruwweg kunnen deze componenten in twee categorieën worden ingedeeld: layout-widgets: voor het vormgeven en vergemakkelijken van de bediening van een webapplicatie; form-widgets: voor het vergemakkelijken van de invoer in formulierelementen (bijvoorbeeld een kleur kiezen, een datumkiezer etc.) De meest voorkomende componenten zijn accordeon, tabs, knoppen, extended invoer velden (o.a. autocomplete), knoppenbalken, uitrolmenu s, dialoogvensters, boomstructuren, kalenders, tooltips, teksteditors Als je bij jquery naast de code ook gebruik wilt maken van de UI-componenten, moet je een tweede script aan de <head> van je webpagina s linken. De UI-bibliotheek bestaat vaak uit meer dan één bestand. Dit betekent dat een reeks bestanden op de server zal moeten worden geplaatst ( In het onderstaande voorbeeld maken we gebruik van de tabs-component van jquery UI. De component transformeert bestaande HTML-code in tabbladen. Daarvoor moet de ontwikkelaar in zijn code een <ul> opnemen. Elk <li>-element bevat een link (<a>) naar een extern bestand of verwijst naar een bepaald onderdeel in hetzelfde document. Wanneer javascript in de browser niet is geactiveerd, krijgt de gebruiker een standaard HTML-pagina te zien met links naar de externe bestanden. In het andere geval leest jquery de externe bestanden automatisch in als op de tab wordt geklikt (zie deel 2 voor AJAXtechnieken met jquery). <html> <head> <script type="text/javascript" src=" <script type="text/javascript" src="

25 de basisingrediënten van een online gui 33 <script type="text/javascript"> $(document).ready(function(){ /*Maak tabs van de <div> met id="tabs"*/ $("#tabs").tabs(); }); </script> </head> <body> <div id="tabs"> <ul> <li><a href="#reedsgeladen">tab 1</a></li> <li><a href="ajax/pagina1.html">tab 2</a></li> <li><a href="ajax/pagina2.html">tab 3</a></li> </ul> <div id="reedsgeladen"> <p>hier staat de tekst die in de eerste tab verschijnt.</p> </div> </div> </body> </html> Minder bekend dan jquery en DOJO maar daarom lang niet slecht is DHTML suite. De naam klinkt wat oubollig, maar de widgets zijn meer dan het bekijken waard ( Zeer oud en wellicht een van de eerste cross-browser (widget)bibliotheken is de X-library op In het bovenstaande voorbeeld linken we de jquery UI-bibliotheek vanaf de googleapis.comsite. Wanneer je de bibliotheek op je eigen site host, kun je het aanwezige sjabloon (CSS + afbeeldingen) handmatig gaan wijzigen zodat de componenten de look-and-feel van jouw webapplicatie krijgen. Voordat je aan wijzigingen van de layout van de componenten begint, is het zeer zinvol om eerst eens een kijkje te nemen op de jquery UI-site. Op jqueryui.com/themeroller/ kun je in een mum van tijd je eigen sjabloon aanmaken en een op maat gemaakte jquery UI-bibliotheek downloaden. jquery UI is zeker niet de enige beschikbare UI voor webapplicaties. Een aantal andere zijn ook meer dan de moeite waard.

26 34 hoofdstuk 1 ALLOY UI Dijit jquery Tools Uitbreiding van YUI3, de Yahoo User Interfacelibrary. Zeer uitgebreid met massa s mogelijkheden. Dijit is een widget -systeem gebouwd op het populaire Dojo-framework. Van de makers van de flash-videospeler FlowPlayer. jquery Tools is een alternatief voor jquery UI. demos.php index.html JxLib JxLib is een javascriptbibliotheek voor het bouwen van GUI s met behulp van het MooTools-framework. LivePipe UI Controles en widgets voor Prototype. Mocha UI Geschikt voor webapplicaties, web desktops, websites, widgets etc. Prototype UI javascript UI-bibliotheek gebaseerd op Prototype en Script.aculo.us QUTENSIL javascript Toolkit UKI Simple UI Kit for complex web apps VisualJS Yahoo! YUI Library Cappuccino Eigenwijze toolkit met al even eigenwijze componenten. Gebaseerd op Prototype en Script.aculo.us Een UI-toolkit voor webapplicaties. Heel wat beschikbare componenten. VisualJS is op zichzelf al een webapplicatie die gebruikt kan worden voor het online bouwen van crossbrowser webapplicaties. De User Interface Library van Yahoo. Zeer uitgebreid en goed onderbouwd. Zie ook ALLOY UI. Cappuccino is een open source framework waarmee je desktop-achtige webbapplicaties bouwt. Het is een browser-implementatie van de Cocoa frameworks voor Apple. Het bevat een taal die bovenop javascript is gebouwd nl. Objective-J. Ronduit schitterend! products/sigma_visual/visualjs/ index.html Interactiviteit en UI Management javascript User Interface-frameworks maken het bouwen van interactieve functies zoals resize, drag en drop, het maken van selecties en het sorteren van elementen een stuk eenvoudiger. Het jquery-framework maakt het toevoegen van eigen plugins en uitbreidingen bovendien uiterst eenvoudig. Hieronder vind je een paar voorbeelden. De onderstaande plugin voor jquery voorkomt dat tekst binnen een bepaald element wordt geselecteerd: $.extend($.fn.disabletextselect = function() { return this.each(function(){ if($.browser.mozilla){//firefox $(this).css('mozuserselect','none');

27 de basisingrediënten van een online gui 35 }); }); }else if($.browser.msie){//ie $(this).bind('selectstart',function(){return false;}); }else{//opera, etc. $(this).mousedown(function(){return false;}); } Je activeert de functie via de van jquery bekende chaining-techniek: $('#EenElement').disableTextSelect(); jquery-methodes Een element resizable maken Een element versleepbaar maken Een element / elementen sorteerbaar maken code $('#EenElement').resizable(); $('#EenElement').draggable(); $('.EenElement').sortable(); Op de website bij dit boek vind je een voorbeeld van drag en drop en sorteerbare elementen. Bestudeer de code voordat je zelf van start gaat Mobiele interfaces in de lift Door het opkomende succes van mobiel internet en nieuwe hardware zoals de iphone en andere smartphones is webdesign in de klassieke zin van het woord aan veel veranderingen toe. Een webapplicatie moet ook toegankelijk zijn op deze platformen. Speciaal voor deze apparaten en mobiele browsers is een aantal javascript/css-frameworks ontwikkeld die de native look-and-feel van mobiele platformen zo goed mogelijk nabootsen in de browser. Ze bouwen ook ondersteuning in voor de nieuwe events van touchscreen-gerichte apparaten. Hieronder vind je een overzicht van de belangrijkste mobiele frameworks van het moment. XUI javascript Micro-Framework iui: iphone User Interface Framework Dojo Mobile jqtouch XUI is het meest compacte framework dat zich richt op alle mobiele toestellen en niet simpelweg op ios. Het dwingt je als ontwikkelaar niet in het keurslijf van de native look, maar baseert zich op de DOM. Voor de ontwikkeling van ios-achtige webapplicaties. Gebaseerd op HTML en javascript. Genereert een native look-and-feel voor mobiele-webkit-browsers mobile.php op iphone, ipod Touch, ipad, Android en RIM smartphones en tablets. jquery-plugin voor mobiele applicaties op ios en Android. Ondersteuning voor touch-events.

28 36 hoofdstuk 1 jquery mobile Phonegap Sencha touch Uit de jquery-stal. Gebouwd op de fundamenten van jquery en jquery UI richt het framework zich op de belangrijkste mobiele platformen: ios, Android, Windows Phone, palm webos, BlackBerry, bada, Symbian, MeeGo e.a. Combineert webapplicaties in HTML5, CSS3 en javascript met native code voor de belangrijkste mobiele platformen. Hierdoor kun je een webapplicatie omzetten in een native app. Phonegap zit ingebouwd in de nieuwste versie van Dreamweaver. Mobiel framework voor ios, Android en BlackBerry uit de stal van Ext JS. Ondersteuning voor touch events. products/touch/ 1.16 XUL in elke browser met Ample SDK XUL (XML User Interface Language) is de XML-gebaseerde opmaaktaal achter de gebruikersinterface van Mozilla-programma s zoals de client Mozilla Thunderbird en de bekende Firefox-browser. Ontwikkelaars kunnen met behulp van XUL eigen cross-platform applicaties bouwen. Het voordeel is dat XUL perfect samenwerkt met open standaarden als CSS, javascript, DTD en RDF. De bekende Addons van Firefox zijn evenzeer XUL-toepassingen. Met XUL beschikt een ontwikkelaar onder andere over de volgende user interfaceelementen: window, dialog, wizard, button, toolbar, menu, colorpicker, spacer, list box en WYSIWYG HTML editor. Op vind je een volledig overzicht van alle mogelijkheden. In de onderstaande voorbeelden kun je zien dat het relatief eenvoudig is om gebruikersinterfaces te bouwen in XUL. Het volgende voorbeeld tekent een venster van 300 op 300 pixels: <?xml version="1.0" encoding="iso "?> <window xmlns=" id="hello" width="300" height="300"> <description value="hallo wereld!" /> </window> Een menubalk: <?xml version='1.0'?> <window id="menu" title="menu" width="400" height="300" xmlns=" >

29 de basisingrediënten van een online gui 37 <toolbox flex="1"> <menubar> <menu label="bestand"> <menupopup> <menuitem label="open" /> <menuitem label="sluit" /> <menuseparator /> <menuitem label="programma afsluiten" /> </menupopup> </menu> <menu label="help" > <menupopup> <menuitem label="handleiding" /> </menupopup> </menu> </menubar> </toolbox> </window> Een datepicker maak je met amper één regel code: <datepicker type="grid" value=" "/> XUL werkt steeds samen met de Gecko-redering-engine van Mozilla. Dit betekent dat je de taal niet kunt gebruiken voor toepassingen in andere browsers of in een website. Toch bestaat hier een handige oplossing voor. De AMPLE SDK van Sergey Ilinsky ( amplesdk.com/download/) maakt het onder andere mogelijk om XUL te gebruiken als UI-taal in webpagina s in elke browser (zelfs Internet Explorer vanaf versie 6!). Download de AMPLE SDK en link hem aan je webpagina zoals in het onderstaande voorbeeld: <!DOCTYPE html> <html xmlns:xul=" <head> <title>xul-venster met menubalk</title> <script type="text/javascript" src="ample/runtime.js"></script> <script type="text/javascript" src="ample/languages/xul/xul.js"></script> <link type="text/ample+css" href="ample/languages/xul/themes/default/xul.css" rel="ample-stylesheet"/> </head> <body> </body> </html>

30 38 hoofdstuk 1 De lay-out van de XUL-elementen wordt bepaald door het bestand xul.css. Je kunt zelf een (CSS-)sjabloon toevoegen. Houd er rekening mee dat je het moet linken als rel="amplestylesheet". De onderstaande code tekent een versleepbaar venster met menubalk in je webpagina. Plak de onderstaande code in de body van je website. Het zal je opvallen dat je elke XUL-tag nu moet laten voorafgaan door het XUL-namespace prefix. <body> <script>ample.open()</script> <xul:window id="menu" title="menu" width="400" height="300"> <xul:toolbox flex="1"> <xul:menubar> <xul:menu label="bestand"> <xul:menupopup> <xul:menuitem label="open" /> <xul:menuitem label="sluit" /> <xul:menuseparator /> <xul:menuitem label="programma afsluiten" /> </xul:menupopup> </xul:menu> <xul:menu label="help" > <xul:menupopup> <xul:menuitem label="handleiding" /> </xul:menupopup> </xul:menu> </xul:menubar> </xul:toolbox> </xul:window> <script>ample.close()</script> </body> Je kunt de User Interface ook extern opslaan in een XML-bestand en een link opnemen naar het brondocument: <body> <script type="application/ample+xml" src="ui.xml"></script> </body> Op vind je een uitgebreide beschrijving van hoe je application logic (interactie) kunt toevoegen aan je Ample-projecten. In het volgende codevoorbeeld staan commentaarregels. Als je de code overneemt, kun je die regels gerust weglaten.

31 de basisingrediënten van een online gui 39 <script type="text/javascript"> ample.ready(function() { /*Definieer de locatie van de namespace.*/ var xulns = " /*Selecteer het element met id 'mijnmenu'.*/ var opopup = ample.getelementbyid("mijnmenu"); /*Maak een nieuw menu-item.*/ oitem= ample.createelementns(xulns, "xul:menuitem"); /*Geef een 'label' aan het nieuwe menu-item.*/ oitem.setattribute("label", "Een nieuw menu-item"); /*Voeg het nieuwe menu-item toe aan 'mijnmenu'.*/ opopup.appendchild(oitem); /*Verander het label van het nieuwe menu-item in 'Voorkeuren'.*/ ample.query(oitem, this).attr("label", "Voorkeuren"); /*Selecteer alle menu-items*/ var mijnitems=opopup.queryselectorall("xul menuitem"); /*Als de gebruiker op een menu-item klikt, wordt de inhoud van het label in een alert weergegeven*/ ample.query("xul menuitem").bind("click", function(oevent) { alert(oevent.currenttarget.getattribute('label')); }, false); }) </script> Uiteraard is de Ample SDK niet bedoeld voor standaard webpagina s, maar voor high-end webapplicaties. Dankzij AMPLE kan je crossbrowser gebruik maken van onder andere HTML5 (forms, canvas), CSS3, SVG, SMIL, XUL, grafieken enz. zelfs in het halfslachtige Internet Explorer vanaf versie 6. De Ample-SDK komt met een eigen (crossbrowser en compatibel met de webstandaarden) implementatie van de laatste DOM-specificaties (Dom Level 3). Het maakt het zelfs mogelijk om een eigen XML-gebaseerde markeertaal te integreren in je webapplicaties Een bos van libraries Wanneer je aan een webapplicatie werkt, raak je al snel verstrikt in de massa gelinkte CSSen/of javascript-bestanden die je aan je pagina moet koppelen. Om door het bos de bomen nog te kunnen zien, kun je gebruik maken van head.js ( Hiermee kun je net zoals in een echte programmeertaal de benodigde (javascript- en CSS-)libraries dynamisch inlezen. Op de website van dit boek vind je ook het onderstaande voorbeeld waarmee je vrij eenvoudig javascipt- en CSS-bestanden dynamisch kunt laden.

32 40 hoofdstuk 1 Icaros= {}; Icaros.Include= function(fname){ var chk1=icaros.checkallowedextension(fname, ".js"); var chk2=icaros.checkallowedextension(fname, ".css") var Resource=""; if(chk1){ Resource=document.createElement('script') Resource.setAttribute("type","text/javascript") Resource.setAttribute("src", fname) } if(chk2){ Resource=document.createElement("link") Resource.setAttribute("rel", "stylesheet") Resource.setAttribute("type", "text/css") Resource.setAttribute("href", fname) } if(typeof Resource!="undefined"){ document.getelementsbytagname("head")[0].appendchild(resource); } return true; } Icaros.GetFileExtension = function(checkfile) { if(checkfile.length == 0) return ; var dot = CheckFile.lastIndexOf(. ); if( dot == -1 ) return ; var extension = CheckFile.substr(dot,CheckFile.length); return extension; } Icaros.CheckAllowedExtension= function(checkfile,allowedextension){ var ext = Icaros.GetFileExtension(CheckFile); if(ext == AllowedExtension){ return true; }else{ return false; } } Je roept de functie als volgt op: Icaros.Include("eenstijl.css"); Icaros.Include("eenscript.js");

33 de basisingrediënten van een online gui Voorbeelden Een webtop simuleert een desktopomgeving in een webpagina. Wanneer je de webtop fullscreen opstart, is hij op het eerste gezicht niet te onderscheiden van een echte desktop. De webtop IcarOS combineert XHTML, CSS, Javascript, AJAX en XML voor de bedieningsinterface.

34 42 hoofdstuk 1 Met de van Google Suggest bekende autocomplete/suggest-functie worden invulformulieren een stuk gebruiksvriendelijker. In bovenstaand voorbeeld zie je de autocomplete-plugin van jquery. In plaats van de invoer van de gebruiker te valideren, kun je er ook voor zorgen dat de invoer meteen op de gewenste manier gebeurt. jquery UI voorziet een invoerveld voor kalendergegevens. Ook voor het invoeren van de tijd bestaan er kant-en-klare Javascript-plugins. HTML5 voorziet time- en date-invoervelden.

35 de basisingrediënten van een online gui 43 jquery kan een reeks div-elementen renderen als tabbladen. Een accordeon-interface maakt lange pagina s en/of formulieren overzichtelijk. Knoppenbalken brengen de webapp een stuk dichter bij de klassieke desktopomgeving.

36 44 hoofdstuk 1 Met CSS en Javascript kun je vensters simuleren. De Ample SDK brengt XUL-ondersteuning naar alle browsers. Dit venster en deze menubalk zijn getekend met behulp van het op XML gebaseerde XUL. [volgende pagina] Het Cappuccino-framework is een javascript-implementatie van de cocoa-frameworks van Apple en laat je toe fantastische desktop-achtige tools te integreren in je webapps.

37 de basisingrediënten van een online gui 45 [onder] De meeste Javascript-frameworks voorzien in de mogelijkheid om knoppen of UI-controls zoals knoppen, menubalken, sliders toe te voegen. Hier zie je het UKI-framework in werking.

38 46 hoofdstuk 1 De jquery UI-slider kun je ook inzetten voor het online bewerken van of CSS-posities. Met Javascript en CSS kun je de native interface-elementen van ios of Android nagenoeg perfect simuleren.

39 WEBAPPLICATIES Toegankelijke gebruikersinterfaces bouwen voor het web HTML5, Javascript, jquery, webframeworks, SVG en Canvas maken het mogelijk om webapplicaties te bouwen die bijna niet meer te onderscheiden zijn van klassieke desktopprogramma s. Vaak zijn ze zelfs flexibeler, crossplatform en crossbrowser. Dankzij een aantal open source frameworks kan iedere applicatieontwikkelaar met een basiskennis van HTML, Javascript en CSS in een mum van tijd zijn eigen killer-webapp bouwen. Het boek Webapplicaties van webontwikkelaar en auteur Kris Merckx richt zich zowel op klassieke browsers als Firefox, Internet Explorer en Chrome als op platformen voor smartphones en mobiele devices (ios, Android, Blackberry). Dit praktische boek gaat onder andere in op Office-applicaties, media, tekenmogelijkheden, animaties, games en lokalisatie. Over de auteur Kris Merckx is webontwikkelaar, auteur van tientallen boeken (studie- en ICT-boeken), docent (informatica, geschiedenis, Nederlands, grafische vormgeving) en werkte aan IT-projecten voor de Vlaamse Overheid Ë xhstalcy582858z 980