GWT Widget Custom Look&Feel

In GWT kun je snel dingen maken die leuk ogen, maar al snel komt het Ikea gevoel om de hoek kijken. Iemand komt je huiskamer binnen, ziet een Ikea-meubel staan, en moet even opmerken dat hij het meubel uit de catalogus herkent. Er is niks mis met het meubel, maar mensen weten meteen hoeveel je betaald hebt en waar ze er ook zo een kunnen halen. Zo gaat het ook een beetje met GWT. Neem bijvoorbeeld een DialogBox die mooi geanimeerd verschijnt. De mooie lichtblauw randjes en geronde hoekjes verraden het al snel: "Ah, je hebt GWT gebruikt." Wat kunnen we hieraan doen?

Google heeft dit helaas niet heel makkelijk gemaakt, maar er zijn twee dingen die je kunt doen. De randjes worden gemaakt door een drietal plaatjes. Zo zitten alle hoekjes in hetzelfde plaatje. Wanneer je je project compileert staan deze p[laatjes in /gwt/standard/images. Je kunt van deze plaatjes de kleur, hoek of schaduw aanpassen en opnieuw opslaan. De randen van een DialogBox zullen er dan iets anders uitzien, maar je bent in ieder geval van die blauwe kleur af.


Download ze hier.

De andere manier is wat ingrijpender. Hiervoor moet je de CSS-style voor de DialogBox overriden. Als je alle classes die de DialogBox nodig heeft opnieuw definieert, en vervolgens de StylePrimaryName van het dialogBox object aanpast, zal je DialogBox er ook anders uitzien. Hieronder staan de classen die gedefinieerd moeten worden. Voor het gemak heb ik er de uitleg uit de documentatie bijgezet en de oorspronkelijke waarde laten staan. De primaire naam is al wel aangepast.

.gwt-CustomDialogBox { 
  /*the outside of the dialog */ 
}

.gwt-CustomDialogBox .Caption { 
  /*the caption */
  background: #e3e8f3 url(images/hborder.png) repeat-x 0px -2003px;
  padding: 4px 4px 4px 8px;
  cursor: default;
  border-bottom: 1px solid #bbbbbb;
  border-top: 5px solid #89130e;
}

.gwt-CustomDialogBox .dialogContent { 
  /*the wrapepr around the content */
}

.gwt-CustomDialogBox .dialogTopLeft { 
  /*the top left cell */
  background: url(images/corner.png) no-repeat -13px 0px;
  -background: url(images/corner_ie6.png) no-repeat -13px 0px;
}

.gwt-CustomDialogBox .dialogTopLeftInner { 
  /*the inner element of the cell  */
  width: 5px;
  zoom: 1;
}

.gwt-CustomDialogBox .dialogTopCenter { 
  /*the top center cell, where the caption is located  */
}

.gwt-CustomDialogBox .dialogTopCenterInner { 
  /*the inner element of the cell */
}

.gwt-CustomDialogBox .dialogTopRight { 
  /*the top right cell  */
  background: url(images/corner.png) no-repeat -18px 0px;
  -background: url(images/corner_ie6.png) no-repeat -18px 0px;
}

.gwt-CustomDialogBox .dialogTopRightInner { 
  /*the inner element of the cell */
  width: 8px;
  zoom: 1;
}

.gwt-CustomDialogBox .dialogMiddleLeft { 
  /*the middle left cell */
  background: url(images/vborder.png) repeat-y;
}

.gwt-CustomDialogBox .dialogMiddleLeftInner { 
  /*the inner element of the cell */
}

.gwt-CustomDialogBox .dialogMiddleCenter { 
  /*the middle center cell, where the content is located  */
  padding: 3px;
  background: white;
}

.gwt-CustomDialogBox .dialogMiddleCenterInner { 
  /*the inner element of the cell  */
}

.gwt-CustomDialogBox .dialogMiddleRight { 
  /*the middle right cell  */
  background: url(images/vborder.png) repeat-y -4px 0px;
  -background: url(images/vborder_ie6.png) repeat-y -4px 0px;
}

.gwt-CustomDialogBox .dialogMiddleRightInner { 
  /*the inner element of the cell  */
}

.gwt-CustomDialogBox .dialogBottomLeft { 
  /*the bottom left cell */
  background: url(images/corner.png) no-repeat 0px -15px;
  -background: url(images/corner_ie6.png) no-repeat 0px -15px;
}

.gwt-CustomDialogBox .dialogBottomLeftInner { 
  /*the inner element of the cell  */
}

.gwt-CustomDialogBox .dialogBottomCenter { 
  /*the bottom center cell */
  background: url(images/hborder.png) repeat-x 0px -4px;
  -background: url(images/hborder_ie6.png) repeat-x 0px -4px;
}

.gwt-CustomDialogBox .dialogBottomCenterInner { 
  /*the inner element of the cell  */
  width: 5px;
  height: 8px;
  zoom: 1;
}

.gwt-CustomDialogBox .dialogBottomRight { 
  /*the bottom right cell */
  background: url(images/corner.png) no-repeat -5px -15px;
  -background: url(images/corner_ie6.png) no-repeat -5px -15px;
}

.gwt-CustomDialogBox .dialogBottomRightInner { 
  /*the inner element of the cell  */
  width: 5px;
  height: 8px;
  zoom: 1;
}

In de CSS kun je de achtergronden van de hoekjes en randen van de DialogBox aanpassen. Het is het makkelijkst om per hoekje een apart plaatje te maken, maar je kunt ook zoveel mogelijk in één plaatje stoppen om het aantal downloads te beperken. Ik ben niet bepaald een Photoshop koning maar heb toch geprobeerd om een ander randje te maken. Zie hier het resultaat.


Hiervoor is de volgende CSS gebruikt:

.gwt-CustomDialogBox { 
 /*the outside of the dialog */ 
}

.gwt-CustomDialogBox .Caption { 
 /*the caption */
 background: url(img/t.png) repeat-x;
  padding: 4px 4px 4px 8px;
  cursor: default;
  
}

.gwt-CustomDialogBox .dialogContent { 
 /*the wrapepr around the content */
}

.gwt-CustomDialogBox .dialogTopLeft { 
 /*the top left cell */
 background: url(img/tl.png) no-repeat;
}

.gwt-CustomDialogBox .dialogTopLeftInner { 
 /*the inner element of the cell  */
 width: 12px;
 height: 12px;
  zoom: 1;
}

.gwt-CustomDialogBox .dialogTopCenter { 
 /*the top center cell, where the caption is located  */
}

.gwt-CustomDialogBox .dialogTopCenterInner { 
 /*the inner element of the cell */
 height: 12px;
}

.gwt-CustomDialogBox .dialogTopRight { 
 /*the top right cell  */
 background: url(img/tr.png) no-repeat;
}

.gwt-CustomDialogBox .dialogTopRightInner { 
 /*the inner element of the cell */
 width: 12px;
 height: 12px;
  zoom: 1;
}

.gwt-CustomDialogBox .dialogMiddleLeft { 
 /*the middle left cell */
 background: url(img/l.png) repeat-y;
}

.gwt-CustomDialogBox .dialogMiddleLeftInner { 
 /*the inner element of the cell */
}

.gwt-CustomDialogBox .dialogMiddleCenter { 
 /*the middle center cell, where the content is located  */
 padding: 1px;
  background: white;
}

.gwt-CustomDialogBox .dialogMiddleCenterInner { 
 /*the inner element of the cell  */
}

.gwt-CustomDialogBox .dialogMiddleRight { 
 /*the middle right cell  */
 background: url(img/r.png) repeat-y;
}

.gwt-CustomDialogBox .dialogMiddleRightInner { 
 /*the inner element of the cell  */
}

.gwt-CustomDialogBox .dialogBottomLeft { 
 /*the bottom left cell */
 background: url(img/bl.png) no-repeat;
}

.gwt-CustomDialogBox .dialogBottomLeftInner { 
 /*the inner element of the cell  */
}

.gwt-CustomDialogBox .dialogBottomCenter { 
 /*the bottom center cell */
 background: url(img/b.png) repeat-x;
}

.gwt-CustomDialogBox .dialogBottomCenterInner { 
 /*the inner element of the cell  */
 height: 12px;
  zoom: 1;
}

.gwt-CustomDialogBox .dialogBottomRight { 
 /*the bottom right cell */
 background: url(img/br.png) no-repeat;
}

.gwt-CustomDialogBox .dialogBottomRightInner { 
 /*the inner element of the cell  */
 width: 12px;
  height: 12px;
  zoom: 1;
}

Hier kun je de plaatjes downloaden.

GWT en Webservices

Een webservice is een service of programma welke beschikbaar is over een netwerk. Om gebruik te maken van de service, hoeft deze niet lokaal geinstalleerd te worden. De service kan over het netwerk aangeroepen worden. Het idee is vergelijkbaar met Remote Procedure Calls maar niet langer moet de service in dezelfde taal geschreven zijn als het programma dat gebruik wil maken van de service.

Een service wordt gedefinieerd in een op XML gebaseerde taal (WSDL). Dit WSDL bestand beschrijft wat de service doet, welke inputs nodig zijn, en welke outputs eruit komen. Aan de hand van deze WSDL kunnen de service- en clientstubs ontwikkeld worden. Veel software pakketten maken het mogelijk om een WSDL te genereren uit een reeds gebouwde service. Evengoed kan een clientstub gegenereerd worden uit deze WSDL-definitie. Voor het transport van de boodschappen worden ook XML berichten gebruikt (SOAP, XML-RPC of REST). Echter, nadat de service- en clientstub klaar zijn, heb je hier niks meer mee te maken. Je roept gewoon een methode aan in de clientstub en je krijgt, met een netwerk afhankelijke vertraging, een antwoord terug.

Het voordeel van webservices dat het platform onafhankelijk is. Betekent dat dat we een webservice ook kunnen aanroepen vanuit een website? Als de webservice draait op dezelfde server als waar de website draait, moet dat mogelijk zijn, maar wanneer deze op een andere server draait, komen we in aanraking met het "same origin policy". Het is in een browser om veiligheids redenen niet mogelijk om via JavaScript contact op te nemen met een vreemde server. Maar er is een omweg en GWT geeft ons wat we nodig hebben.

In GWT kunnen via RPC direct communiceren met Java code op de server. Voor onze server, geldt er geen "same origin policy", dus van daaruit kunnen gewoon gebruik maken van elke bereikbare webservice. Hieronder zal ik een voorbeeldje uitwerken. De webservice die ik zal gebruiken maakt het mogelijk om SQL achtige queries te doen op de databron achter de service. In die databron bevinden zich klantnamen. Wat we gaan maken is een textsuggestbox die suggesties levert die uit de webservice komen en afhankelijk zijn van de reeds ingetypte karakters.

De eerste stap bij het gebruiken van een webservice is het genereren van een clientstub. Er zijn een hoop verschillende tools die dit kunnen. Deze keer heb ik Axis (van Apache) gebruikt. Hierbij zit een scriptje genaamd WSDL2Java, wat precies doet wat je verwacht. Er wordt een class aangemaakt met daarin de methodes die de webservice levert. Ook worden er, indien nodig, allerlei complexe datatypen gemaakt.

De tweede stap is het aanmaken van een nieuw GWT project. Voeg hier de zojuist gegenereerde classes toe aan het classpath. Dit kan door alles in een jar-file in te pakken en deze in het buildpath van het project op te nemen, of door simpelweg alle genegereerde classes naar ons project te kopieren.

Definieer de volgende interface:

String[] getSuggestions(String start);

Maak hiervoor ook de asynchrome variant en implementeer de service op de webserver door gebruik te maken van de gegenereerde webservice clientstub. Ik ga ervanuit dat dat wel moet lukken.

Om onze suggestbox te voorzien van suggesties hebben we een zogenaamd Oracle nodig. Dit is een class, afgeleid van SuggestOracle, waarbij de requestSuggestions methode opnieuw gedefinieerd wordt. Dat ziet er als volgt uit:

private class XServerOracle extends SuggestOracle {

  @Override
  public void requestSuggestions(final Request request, final Callback callback) {
   testService.getSuggestions(request.getQuery(), new AsyncCallback() {
    @Override
    public void onSuccess(String[] result) {
     Collection suggestions = new ArrayList();
     for (final String row : result) {
      suggestions.add(new Suggestion() {
       @Override
       public String getDisplayString() {
        return row;
       }

       @Override
       public String getReplacementString() {
        return row;
       }
      });
     }
     Response resp = new Response(suggestions);

     callback.onSuggestionsReady(request, resp);
    }

    @Override
    public void onFailure(Throwable caught) {}
   });
  }
 }

Dit Oracle wordt vervolgens gebruikt bij het aanmaken van het SuggestBox object:

final SuggestBox box = new SuggestBox(new XServerOracle());

Klaar.

Een voorbeeld staat op:
http://waalwijk.yall.nl:8080/CustomerSearchWidget

GWT en Maps

Een locatie kan informatie verrijken en met de opkomst van Google Maps en concurrenten wordt daar op internet veel gebruik van gemaakt. Bij menig online service kun je een event, foto of bericht koppelen aan een locatie. Dat is op zich ook niet zo gek als je ziet hoe makkelijk Google het ons gemaakt heeft. Er is een uitgebreide en goed gedocumenteerde API om Google Maps ook op jouw website een plekje te geven.

Afgelopen jaar probeerde ik voor een project Google Maps te integreren in een Java programma. Dat viel nog niet mee. Dus de vraag waar ik nu mee zit is of Google Maps te integreren is binnen GWT.

Het antwoord zal je niet verrassen, natuurlijk kan dat en het is nog makkelijker dan ik verwacht had. Ik ga hieronder niet uitleggen hoe het werkt, maar verwijs naar een tutorial van Google waar het erg helder uit staat gewerkt.

http://code.google.com/p/gwt-google-apis/wiki/MapsGettingStarted

En mijn eigen probeersel:
http://waalwijk.yall.nl:8080/GoogleMaps/

GWT en Comet

Lang geleden, toen het world wide web uitgedacht werd, is er weinig rekening gehouden met de behoefte die de gebruikers later zouden krijgen. Er is een protocol bedacht (HTTP) waarmee een client, meestal een browser, een bestand op kan vragen. Een webserver antwoord dan door het bestand terug te sturen. Een aanvraag kan eventueel voorzien worden van extra informatie in de vorm van key-value pairs. Later is er nog een kleine aanpassing aan dit HTTP protocol geweest om het wat efficienter te laten werken wanneer er meerdere bestanden binnen gehaald moeten worden. Verdere aanpassingen zijn uitgebleven.

Met de opkomst van JavaScript in de browser, en daarmee AJAX, werd het mogelijk om informatie ook op een andere manier naar de browser te sturen. Niet langer moest keer op keer een volledige pagina worden gedownload, maar alleen de nieuwe informatie kon opgehaald worden in een asynchrone request. Wachttijden zijn hierdoor drastisch verlaagd. Het principe is echter niet veranderd. Nog steeds wordt er een bestand opgevraagd en ontvangen. Enkel de verwerking van dit bestand in de browser is gewijzigd.

Maar wat nu als je web applicatie afhankelijk is van server updates? Het is dan erg onhandig om de server periodiek te vragen of er misschien al een update is. Ten eerste zit er dan bijna altijd een vertraging in en ten tweede zullen er veel lege berichten op en neer gestuurd worden op de momenten dat er geen updates zijn. Helaas hebben we hier te maken met restricties in het HTTP protocol.

Zoals het altijd gaat in de software wereld, is er toch altijd wel weer iemand met een briljante ingeving die een loophole ontdekt in het protocol. Zo ook in dit geval. Wanneer je een webrequest doet, heb je vaak in no time het antwoord binnen. Maar zo was het niet altijd. Toen het internet nog wat trager was, deden berichten er wat langer over. Een browser moest dan maar wachten tot er een keer een antwoord kwam. Het is moeilijk vast te stellen of er nog niet lang genoeg is gewacht, of dat er iets mis is gegaan. Daarom is afgesproken dat er na een instelbare hoeveelheid tijd, vanuit gegaan mag worden dat er iets mis is gegaan. Er kan dan een nieuw request verstuurd worden. Dit principe is uitgebuit in een techniek die later PTTH, Reverse AJAX , of Comet (een ander populair Amerikaans schoonmaak middel naast Ajax) genoemd is.

Het idee is het volgende. Een client doet een request, maar hij krijgt geen antwoord. De server houdt de lijn open. Er kunnen twee dingen gebeuren. Er verschijnt een update op de server, welke opgestuurd kan worden naar de client. De openstaande lijn kan hiervoor worden gebruikt. Het tweede dat kan gebeuren is dat er geen update beschikbaar is voordat de timeout op gaat treden. In dat geval wordt er een leeg antwoord gestuurd. De client doet vervolgens een nieuwe aanvraag waardoor het proces opnieuw begint. De twee nadelen die aanwezig waren bij het polling mechanisme, worden hier verkleind. Updates worden meteen naar de client gestuurd en het aantal lege berichten is minimaal. Comet is niet nieuw, maar bestaat al een aantal jaren, al is het niet bij iedereen even bekend.

Kunnen we deze techniek nu ook gebruiken binnen GWT? Natuurlijk. En het mooie is, het vervelende werk is al gedaan door andere mensen. Ik heb gezocht naar libraries en na enkele uren lezen en spelen, ben ik blijven steken bij een project genaamd GWTEventService. Van alles dat ik geprobeerd heb, werkte deze toch het lekkerst. Een client kan zich inschrijven op een event type, en de server kan een event van dit type publiceren. Er gaat dan bij de client, mits hij geabonneerd is op dit event-type, vrijwel meteen een event af.

Tijd voor een voorbeeld. Stel we hebben twee simpele chat Widgets (toch weer een chat voorbeeld) die volledig onafhankelijk van elkaar zijn. Beide kunnen ze een berichtje sturen naar de server en dit berichtje moet dan meteen doorgestuurd worden naar de andere chat Widgets.

Maak een nieuw project aan, download de jar-file van GWTEventService en voeg deze toe aan je build-path. Voeg ook de volgende regel toe in het .gwt.xml configuratiebestand.

<inherits name="de.novanic.eventservice.GWTEventService" />

De volgende stap is het implementeren van het event dat we willen versturen.

import de.novanic.eventservice.client.event.Event;
import de.novanic.eventservice.client.event.domain.Domain;
import de.novanic.eventservice.client.event.domain.DomainFactory;

public class MyEvent implements Event
{
   /**
    * This distinguishes the event from others
    */
   public static final Domain NS = DomainFactory.getDomain("server_message_domain");

   private String message;

   private String sender;

   /**
    * Needed for serialization
    */
   public MyEvent() {}

   public MyEvent(String sender, String message) {
       this.sender = sender;
       this.message = message;
   }

   public String getMessage() {
       return message;
   }

   public String getSender() {
       return sender;
   }
}

De volgende stap is het schrijven van de standaard RPC interface zoals dat binnen GWT gebruikelijk is. We definieren een methode waarmee een chat client een berichtje kan sturen.

import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;

@RemoteServiceRelativePath("MyInterface")
public interface MyInterface extends RemoteService {
 public void say(String who, String what);
}

En zoals gewoonlijk hebben we ook de asynchrone variant.

import com.google.gwt.user.client.rpc.AsyncCallback;

public interface MyInterfaceAsync {
 public void say(String who, String what, AsyncCallback anAsyncCallback);
}

Deze methodes moeten we implementeren aan de server kant.

import nl.yall.test.eventservice.client.MyEvent;
import nl.yall.test.eventservice.client.MyInterface;
import de.novanic.eventservice.service.RemoteEventServiceServlet;

public class MyInterfaceImpl extends RemoteEventServiceServlet implements MyInterface {
   public void say(String who, String what) {
       MyEvent event = new MyEvent(who, what);
       addEvent(MyEvent.NS, event);
   }
}

Vervolgens moeten we enkel de client nog implementeren. Om het een beetje overzichtelijk te houden, heb ik alleen de essentiele dingen achter gelaten.

import de.novanic.eventservice.client.event.Event;
import de.novanic.eventservice.client.event.RemoteEventService;
import de.novanic.eventservice.client.event.RemoteEventServiceFactory;
import de.novanic.eventservice.client.event.listener.RemoteEventListener;

public class EventService implements EntryPoint {
 private final MyInterfaceAsync service =
  GWT.create(MyInterface.class);

 private RemoteEventService remoteService =
  RemoteEventServiceFactory.getInstance().getRemoteEventService();

 public void onModuleLoad() {
  HorizontalPanel panel = new HorizontalPanel();
  panel.add(new MyPanel("Gerben"));
  panel.add(new MyPanel("David"));

  RootLayoutPanel.get().add(panel);
 }

 private class MyPanel extends FlowPanel {
  private final TextBox messageBox = new TextBox();
  private final ListBox listBox = new ListBox(true);
  private final String user;
  
  public MyPanel(final String user) {
   this.user = user;
   
   setSize("60%", "60%");
   
   remoteService.addListener(MyEvent.NS, new RemoteEventListener() {
    public void apply(Event e) {
     if(e instanceof MyEvent) {
      MyEvent me = (MyEvent) e;
      listBox.addItem(me.getSender() + ": " + me.getMessage());
     }
    }
   });

   messageBox.addKeyPressHandler(new KeyPressHandler() {
    @Override
    public void onKeyPress(KeyPressEvent event) {
     if (event.getCharCode() == '\r') {
      sendMessage();
      messageBox.setText("");
     }
    }
   });
   
   listBox.setSize("100%", "80%");
   listBox.addItem("Listening...");
   add(new Label(user));
   add(listBox);
   add(messageBox);
  }

  private void sendMessage() {
   service.say(user, messageBox.getText(), new AsyncCallback() {
    public void onFailure(Throwable aThrowable) {}
    public void onSuccess(Void aResult) {}
   });
  }
 }
}

Tenslotte moeten we de servlet nog toevoegen aan de configuratie file voor de applicatie server (Web.xml)

<servlet>
  <servlet-name>EventService</servlet-name>
  <servlet-class>de.novanic.eventservice.service.EventServiceImpl</servlet-class>
</servlet>

<servlet-mapping>
  <servlet-name>EventService</servlet-name>
  <url-pattern>/eventservice/gwteventservice</url-pattern>
</servlet-mapping>

<servlet>
  <servlet-name>EventServlet</servlet-name>
  <servlet-class>nl.yall.test.eventservice.server.MyInterfaceImpl</servlet-class>
</servlet>

<servlet-mapping>
  <servlet-name>EventServlet</servlet-name>
  <url-pattern>/eventservice/MyInterface</url-pattern>
</servlet-mapping>

Het gebrek aan de mogelijkheid tot pushen van gegevens wordt vaak als een nadeel gezien van web applicaties, maar met de techniek die hierboven beschreven staat, hoeft dat dus niet zo te zijn.

Succes met spelen.

Gebruikte libraries:
http://code.google.com/p/gwteventservice/

Het voorbeeld:
http://waalwijk.yall.nl:8080/EventService/

GWT Widget

Het grafische deel van een GWT applicatie bestaat uit Panels en Widgets. Een Panel is een container die andere Panels of Widgets kan bevatten. Verschillende panels rangschikken hun inhoud op verschillende manieren (links naar rechts, boven naar beneden, etc). Een Widget is een user-interface element. Standaard hebben we hier de TextBox, Button, Checkboxen etc. Daarnaast kunnen we ook zelf Widgets bouwen.

Stel nu dat we zo'n Widget hebben gebouwd en we willen die graag gebruiken op onze website, zonder alles om te bouwen naar GWT. Dit gaat als volgt. We voegen aan onze bestaande website een element toe:

<div id="mijnwidget"></div>

Dit is de placeholder waar onze widget gaat komen. Start nu een nieuw GWT project en implementeer de onModuleLoad() methode als volgt:

public void onModuleLoad() {
 Widget widget = new MijnWidget();
 RootPanel.get("mijnwidget").add(widget);
}

Compileer je project en zet de directory met daarin het resultaat naast je oorspronkelijke HTML bestand. Voeg tenslotte de volgende regel toe binnen de <head> en </head> tags:

<script type="text/javascript" language="javascript" src="mywidget/mywidget.nocache.js"></script>

waarin mywidget verwijst naar het door GWT gegenereerde JS bestand. Nu zou het moeten werken.

Op zich is dit nog niet zo spannend, dus we gaan een stap verder. In het volgende voorbeeld gebruiken we een uitgebreide versie van de RichTextArea, voorzien van een toolbar. Deze Widget willen we voortaan gebruiken als standaard textarea. We maken het volgende html bestand:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="MyExample.css">
    <title>RichTextArea Demo</title>
    <script type="text/javascript" language="javascript" src="myexample/myexample.nocache.js"></script>
  </head>

  <body>
    <form action="myexample/print" method="post">
      <textarea name="mytext" class="rich"></textarea><br />
      <input type="submit" />
    </form>
  </body>
</html>

Nu moeten we nog een script maken dat onze Widget over de bovenstaande textarea heenplakt. Dit doen we als volgt. We gaan eerst op zoek naar de elementen waar onze Widget op geplakt moet worden. Deze elementen slaan we op. Vervolgens vervangen we deze elementen door placeholders. Vervolgens zetten we op de plaats van deze placeholder een kopie van onze Widget en een hidden input element waarin we de waarde van de textarea opslaan. Als de waarde in de textarea verandert, moet ook de waarde in onze hidden inputbox mee veranderen. En voila, onze eigen input widget.

public class MyExample implements EntryPoint {
 
 private Vector richTextAreas = new Vector();
 
 public void onModuleLoad() {
  Element body = RootPanel.getBodyElement();
  
  NodeList inputs = body.getElementsByTagName("textarea"); 
  
  for (int i = 0; i < inputs.getLength(); i++) {
   Element element = inputs.getItem(i);
   if (element instanceof TextAreaElement) {
    TextAreaElement textAreaElement = (TextAreaElement) element;
    if (textAreaElement.getClassName().startsWith("rich")) {
     richTextAreas.add(textAreaElement);
    }
   }
  }
   
  for (TextAreaElement element : richTextAreas) { 
   Element parent = element.getParentElement();
   String id = generateId(); 
   Element el = new Label().getElement();
   el.setId(id);
   parent.replaceChild(el, element);
   
   replaceTextArea(id, element.getName());
  }
  
  
 }
 
 private void replaceTextArea(String id, String name) {
  final Hidden hidden = new Hidden();
  hidden.setName(name);
  final RichTextArea textArea = 
   new RichTextArea();
  
  textArea.addRichTextHandler(new RichTextHandler() {

   @Override
   public void onChange(RichTextEvent event) {
    hidden.setValue(event.getHtml());
    
   }});
  RootPanel.get(id).clear();
  RootPanel.get(id).add(textArea);
  RootPanel.get(id).add(hidden);
 }
 
 private String generateId() {
  return UUID.uuid();
 }
}

An example can be found here.

GWT 2.0

In het kader van persoonlijke ontwikkeling heb ik met mijn werkgever afgesproken om komend jaar één dag per week te besteden aan het leren van nieuwe (werk gerelateerde) vaardigheden. Tijdens het normale werk is er vaak geen tijd om ergens wat dieper in te duiken, of om een onbekende techniek, die wellicht heel handig zou kunnen zijn, te onderzoeken. Tijdens mijn nieuwe dag in de week neem ik de tijd om met deze onbekende technieken te experimenteren. In deze blog wil ik zo nu en dan kort vertellen wat ik geleerd of gemaakt heb.

Om die reden ben ik kort geleden weer eens aan de slag gegaan met Google Web Toolkit 2.0 (GWT). GWT is een Java-framework dat het mogelijk maakt om JavaScript-applicaties te ontwikkelen in een Java omgeving. Het maken van wat exotischere JavaScript-applicaties is vervelend omdat de verschillende webbrowsers eigen JavaScript engines (en HTML renderers hebben). De ene fabrikant volgt de JavaScript standaard stricter dan de andere, waardoor er kleine verschillen zijn ontstaan. Een JavaScript-applicatie kan zich daarom op verschillende manieren gedragen in verschillende browsers. De programmeur moet hier rekening mee houden door in sommige gevallen functionaliteit op verschillende manieren te programmeren. Daarnaast is het debuggen van een JavaScript applicatie een vervelende klus.

GWT geeft ons een omgeving waarin we op een hoger niveau een applicatie kunnen ontwikkelen. Gebruikmakend van libraries en tools van Google, kun je je webapplicatie helemaal in Java ontwikkelen, debuggen en testen. Wanneer je klaar bent kun je je code omzetten naar JavaScript-code. Tijdens deze stap wordt er rekening gehouden met de browser verschillen. De ontwikkelaar is daarom sneller klaar, of kan in dezelfde tijd een geliktere applicatie in elkaar zetten.

GWT had lang last van kinderziektes en onvolledigheden, maar inmiddels kunnen we bij versie 2.0 zeggen dat GWT volwassen is geworden. Ik kan daarom iedereen die bezig is met webapplicaties aanraden er eens naar te kijken.