Frans de Boer

Voorbeeld van email. Klik op de afbeelding voor de source.

Op een veelvoud aan websites wordt gesproken over email. Vaak hebben de bijbehorende bedrijven of instellingen helemaal niks met keramiek te maken. De meeste mensen die dit verhaal lezen zullen de “brug” die ik net sla, totaal niet begrijpen. Terwijl het eigenlijk helemaal geen brug is. email is niet de elektronische post waar deze mensen over denken te praten. Email is namelijk totaal iets anders. Het is een, op glas lijkende (vaak gekleurde) laag waarmee sieraden zoals hiernaast bedekt zijn. En dit heeft dan weer alles met keramiek te maken. Naast enkele sieraden zijn ook aardewerk, badkuipen en metalen potten  soms afgewerkt met een laagje email.

Waarom wordt er dan toch vaak van email gesproken als men e-mail bedoeld? Dit is omdat de meeste mensen verwachten dat het Nederlands het woord klakkeloos heeft overgenomen uit het Engels. Helaas voor velen, is dit niet het geval, en zijn we genoodzaakt om toch het streepje ertussen te plakken.

Wat overigens niet fout is, maar minder netjes, en niet overal toepasbaar is spreken van mail. Dus zonder de e ervoor. Maar het voorkomt wel dat je een streepje in je woord moet plaatsen.

Natuurlijk is een project, gemaakt met GWT ook voorzien van een css-bestand. Dit is in je project (linker kant van het scherm) terug te vinden in de map ‘war’. Hier staat tevens het html-bestand, waar de rest van de website in te bouwen is. Je zou daar dus heel goed een hele website kunnen bouwen, en alleen een klok in GWT kunnen bouwen, en die op je website plaatsen. Maar leuker is het om je hele applicatie in GWT te bouwen, en het html-bestand vrijwel leeg te laten. Op die manier kan alles dynamisch zijn op je website.

Zoals jullie merken is de GWT-plugin erg traag. Dit komt omdat die plugin pure Java-code live voor jouw, elke pagina opnieuw moet doorlopen, compilen en dan de gegenereerde javascript moet uitvoeren. Je leest het, dat is heel veel werk. En dat kan zo niet langer. Zeker omdat je niet wilt dat je bezoekers een plugin moeten installeren. Daar hebben ze natuurlijk al veel eerder over nagedacht. Je kunt je code namelijk compilen. De gecompilede code, puur javascript + html, kan je zo op je webserver plaatsen. Dit zal probleemloos werken in elke browser (Dus ook IE6.0)
Om je code te compilen klik je met je rechter muisknop op je project (Staat dus links in je boomstructuur) vervolgens klik je op Google > GWT Compile. Eclipse zal nu je code compilen. (Lees, omzetten naar html / javascript, voor elke browser een eigen pakketje, zodat je dus geen hacky javascript krijgt wat het in elke browser doet) Dit compilen hoef je dus eigenlijk alleen maar te doen als je project klaar is, en live gezet wordt. Het kan, afhankelijk van je computer enkele minuten duren voor alle code gecompiled is. Eclipse zal je ook nu weer een url geven. Deze url kan je openen in een willekeurige browser. Je zal merken dat je applicatie vliegensvlug reageert, en erg fijn aanvoelt. Dit komt omdat het allemaal javascript is, en al in de browser ingeladen is. Alles client-side dus!

Make a few changes

We ontkomen er als programmeurs niet aan om toch code te gaan schrijven. Het was natuurlijk wel erg makkelijk dat er een complete web-app in je browser verscheen zonder dat je ook maar een regel code hebt getypt

De code, natuurlijk in het beruchte Java geschreven is te vinden in Eclipse. Omdat lenen makkelijker is dan zelf maken heb ik een mooi screenshot van Google geleend van hoe de code in Eclipse te vinden is.

De mappenstructuur in Eclipse

HIerin zie je waar je code te vinden is. Dubbelklik op het bestand MyWebApp.java om het te openen.

We krijgen nu een hele lap code te zien. 153 regels om precies te zijn. Waarvan de laatste regel een wit-regel is. Dus dat scheelt alweer!

Rocket sience

En dan nu met de echte rocket sience verder. We gaan wat aanpassen. Ik zal het maar verklappen, we gaan de tekst aanpassen die wij op ons scherm in de browser zien. Ergens rond regel 40 vindt je de volgende regel code:

final Button sendButton = new Button(“Send”);

Dit is wat de ‘Send’-button bouwt. Hoe dat precies gaat hebben we voor nu even niks mee te maken. Daarvoor gebruiken we het framework van Google! We gaan later wel eens kijken wat die precies uitvoert. We willen later zelf immers ook widgets kunnen maken die we op dezelfde manier kunnen gebruiken.

Verander het woord “Send” en save the changes!

Ga terug naar je browser, en ververs de pagina. Afhankelijk van je browser kan de plugin soms erg langzaam zijn.

Error’s & problemen

Als je de url niet ziet staan aan de rechterkant in Eclipse, of je browser zegt dat je GWT disconnected is, dan heb je Eclipse waarschijnlijk al een keer afgesloten sinds de vorige blogpost. Je Eclipse-server draait op dit moment niet, en je zal deze moeten starten. Gelukkig is dit simpeler dan een auto aanslingeren. Boven in het Eclipse-venster staan wat kleine icoontjes. Hier is ook een groen rondje, met een wit driehoekje erin. Een play-knop. Als je daarop klikt zal Eclipse vragen of je het als een web-app wil runnen, of op een externe server wil runnen. We kiezen voor de bovenste optie (Dus niet de externe server).

Je hebt je applicatie aangepast! Experimenteer er gerust nog even mee.

Bouw je eerste web-applicatie
Klik: File > New > Web Application Project
Er komt nu een (nee ik zal het geen wizard noemen..) venster in je eclipse naar voren. Geef het project een projectnaam. Dit kan iets zijn als FransZijnWebApp. Geef ook een package op. Bijvoorbeeld: ‘nl.fransdeboer.FransZijnWebApp’.

Als je netjes alles hebt geinstalleerd, zoals geschreven in het vorige blog-bericht, dan mag je nu de ‘Use Google App Engine’ Uitvinken. Druk vervolgens op Finish.

Gefeliciteerd
Hiep hiep hoera! Je hebt je eerste Google Web Toolkit-web-applicatie gemaakt. Inclusief een workspace.

Test, Test & Test
In Eclipse zie je nu aan de linkerkant van het scherm een boomstructuur. Klik met de rechtermuisknop op de map van je eerder benoemde app. Selecteer ‘Debug As’ en dan ‘Web Application’. Eclipse zal nu van alles laten zien. In de rechter onderhoek is een scherm genaamd ‘Development mode’ Hierin zal na enige tijd de ‘launch-url’ gegeven worden. Kopier deze url en plak deze in je favoriete browser (Google Chrome, Firefox, of Safari). Als dit de eerste keer is dat je lokaal test, zal je browser vragen om een plugin te installeren. Dit is een goed plan, en ik zou het doen! Herstart de browser, en navigeer opnieuw naar dezelfde url. Je eerste web-applicatie staat nu in je browser!

Beginnen

Om te beginnen in GWT (Java) hebben we natuurlijk een fijne werkomgeving nodig. Hiervoor kiezen wij, zoals in de vorige post al vermeld: Eclipse. Dit is een gratis, en open source editor. Een groot voordeel van Eclipse is dat het voor een veelvoud aan talen te gebruiken is, en daarnaast ook nog voor, Mac OS X, Windows en Linux beschikbaar is. (Voor de mensen die het willen weten, er is voor elk OS een 32 en een 64bits uitvoering)

Eclipse kan hier (Mac OS X), hier (Windows) of hier (Linux) gedownload worden.

Downloaden

We kiezen voor deze versie: ‘Eclipse IDE for Java Developers’ (Pas wel op voor KPN. Ze willen je deze download tegenwoordig in rekening brengen! )

Installeren

De installatie is op elk platform anders. Dit weet elke gebruiker van zijn eigen platform het beste! Op de Mac is het een fluitje van een cent.

Opstarten van Eclipse

Dit is ook per platform anders, maar ook daar red iedereen zichzelf prima mee.

Installatie van Plugins & SDK

Nu eclipse up and running is, gaan we de laatste tools installeren. Hiervoor drukken we op Help. In het menu kiezen we voor ‘Install new Software’

Er zal nu een dialoogvenster in beeld komen. In dit venster vullen we de volgende download-url in: http://dl.google.com/eclipse/plugin/3.6

(versienummer is afhankelijk van de geinstalleerde eclipse-versie) Druk nu op de Enter-toets.

Er zouden nu 2 pakketjes moeten staan. Namelijk ‘Plugin’ en ‘SDK’. Staan er meer of minder, klik maar gewoon op select all! Druk op Next, en nogmaals op Next. Lees nu netjes de algemene voorwaarden goed, en tot in detail door en druk op finish. Eclipse zal nu met je meedenken, en vragen of je het programma opnieuw wilt opstarten. Ik zeg doen!

Sterk verhaal

Je bent klaar om een Google Web Toolkit & Appengine-applicaties te bouwen!

Google web toolkit
Google web toolkit, afgekort GWT is een ontwikkelomgeving waarmee complexe browser-based applicaties gebouwd kunnen worden. GWT is er in de eerste plaats om ‘high performance’ webapplicaties te ontwikkelen. Dit zijn applicaties die ook onder zware belasting prima blijven presteren. Neem als voorbeeld een website als google.com waar enkele miljoenen requests per dag uitgevoerd moeten worden. Daarnaast hoef je als ontwikkelaar geen expert te zijn in XMLHttpRequests, JavaScript en Quirks van browsers.

XMLHttpRequests
XMLHttpRequests is een manier om het script vanuit de client data te laten ophalen op de webserver. Deze data kan direct weer door de client worden gebruikt. Op deze manier kan je zonder paginaverversing verder werken

Quirksmodus
De Quirks van internetbrowsers is letterlijk vertaald de fratsenmodus. Dit is een techniek die door sommige webbrowsers word gebruikt om een pagina te renderen. In eerste instantie zal de browser proberen de pagina volgens de standaarden, opgelegd door W3C en IETF te renderen. In de zogenoemde Quirkmodus wordt hiervan afgeweken, om oudere en of slecht geprogrammeerde webpagina’s wel te kunnen weergeven. Natuurlijk kennen we hier ook weer uitzonderingen. En we weten natuurlijk allemaal gelijk dat de uitzondering Internet explorer is. Deze browser kiest vaak standaard voor de quirksmodus terwijl dit helemaal niet nodig is.

Waarom hoef je hiervoor geen expert te zijn?
Simpel! Je schrijft je applicatie in Java, en compilet het naar extreem geoptimaliseerde html/javascript wat precies toegespitst is op de browser die het opvraagt. GWT handelt dus alle uitzonderingen voor je af.

Fijn om te weten

Het is gewoon javascript. Niet eng dus
 

Back-end naar keuze. GWT ondersteunt een veelvoud aan standaard communicatieprotocollen
 

GWT bied optimale code per client aan. Als jouw app het ondersteunt krijgt een Franstalige Firefox gebruiker alleen de Franse vertaling. En alleen code voor Firefox. Geen hotfixes/hacks waardoor andere browsers het ook snappen. Die krijgen gewoon hun eigen pakket.

Eenvoudig userinterface-elementen hergebruiken in andere projecten door ‘widgets’ te bouwen en aan het volgende project mee te geven

AJAX-applicaties breken toch je browser back- & fowardknopfunctionaliteit af? Nee, GWT fixt dat probleem voor jou.

Java is een strikte taal. Tijdens het typen zal je editor (Eclipse) al aangeven dat het niet goed gaat. Je krijgt dan ook suggesties die je vertellen hoe het wel moet. Je hoeft dus niet in de browser te kijken wat voor error er uitgespuugd word!

Het is open source!
 

Omdat ik hoognodig een nieuwe website moest maken voor mijzelf, heb ik besloten om ook een blog bij te gaan houden. Hier zal ik vertellen over mijn werk, bedrijf en mijn stage bij Lable.