Zufällig bin ich auf ein Wicket-Eclipse-Plugin gestoßen, dass im täglichen Umgang mit Wicket-basierten Projekten zu einer nicht unwesentlichen Arbeitserleichterung führt. In Anbetracht des frühen Entwicklungsstadiums (Version 0.1) ist das bereits eine reife Leistung.

Was macht das Plugin?

Mit dem Plugin ist es möglich, durch den Klick auf die Wicket-ID einer Komponente zwischen Java-Klasse und zugehörigen Markup wechseln zu können. Dabei springt der Cursor gleich an die richtige Stelle. Kurz: Das ist genau das, was ich am häufigsten benötige.

Bei der Installation sollte man zwei Dinge beachten: 1. Das Plugin befindet sich wirklich noch in einem sehr frühen Stadium, so dass Fehler auftreten. Man muss also abwägen, ob der Vorteil die Nachteile aufwiegt. 2. Die Hinweise zur Installation und zur Handhabung auf der Seite sollte man beachten.

Diese Plugin sollte man im Auge behalten. Sofern es meine Zeit erlaubt, werde ich versuchen, an diesem Plugin mitzuentwickeln.

Wie ich bereits beschrieben habe, kann man mit Wicket relativ leicht eine lose Koppelung von Komponenten über einen Event-Mechanismus erreichen. Dabei wurden bisher nur Komponenten berücksichtigt. Manchmal ist es aber sinnvoll, die Behandlung dieser Events an einer zentralen Stelle durchzuführen. Daher habe ich die Basisklasse leicht erweitert. Dabei ist der Visitior in eine eigene Klasse gewandert. Außerdem ist es wesentlich geschickter, auch bei nicht Ajax-Requests mit Events zu arbeiten. Die Modifikation des EventListener-Interface trägt dem Rechnung.

package de.wicketpraxis.web.blog.pages.questions.events;

public interface EventListenerInterface
{
  public void notifyEvent(AbstractEvent event);
}

Die Methode lautet nun notifyEvent statt notifyAjaxEvent .

package de.wicketpraxis.web.blog.pages.questions.events;

import org.apache.wicket.Component;
import org.apache.wicket.Component.IVisitor;

public class NotifyVisitor implements IVisitor<Component> 
{
  private final AbstractEvent _event;
   
  public NotifyVisitor(final AbstractEvent event)
  {
    _event = event;
  }
   
  public Object component(final Component component)
  {
    if (component instanceof EventListenerInterface) 
    {
      ((EventListenerInterface) component).notifyEvent(_event);
    }
    return IVisitor.CONTINUE_TRAVERSAL;
  }
}

Der Event sucht jetzt nicht nur in allen Komponenten nach dem EventListenerInterface, sondern auch in der Application, der Session und der Page.

package de.wicketpraxis.web.blog.pages.questions.events;

import org.apache.wicket.Application;
import org.apache.wicket.Component;
import org.apache.wicket.Page;
import org.apache.wicket.Session;
import org.apache.wicket.Component.IVisitor;
import org.apache.wicket.ajax.AjaxRequestTarget;

public class AbstractEvent
{
  private final Component _source;
  protected final AjaxRequestTarget _target;
  
  public AbstractEvent(final Component source, AjaxRequestTarget target)
  {
    _source = source;
    _target = target;
  }
  
  public AbstractEvent(final Component source)
  {
    this(source,null);
  }
  
  public Component getSource()
  {
    return _source;
  }
  
  /**
   * notify Application, Session, Page and Components
   */
  public final void fire()
  {
    Page page=getSource().getPage();
    
    Application application=page.getApplication();
    if (application instanceof EventListenerInterface)
    {
      ((EventListenerInterface) application).notifyEvent(this);
    }
    Session session=page.getSession();
    if (session instanceof EventListenerInterface)
    {
      ((EventListenerInterface) session).notifyEvent(this);
    }
    if (page instanceof EventListenerInterface)
    {
      ((EventListenerInterface) page).notifyEvent(this);
    }
    page.visitChildren(EventListenerInterface.class, getVisitor());
    onAfterFire();
  }

  protected  void onAfterFire()
  {
    
  }

  protected IVisitor<Component> getVisitor()
  {
    return new NotifyVisitor(this);
  }

  public AjaxRequestTarget getTarget()
  {
    return _target;
  }
  
  public boolean isAjax()
  {
    return _target!=null;
  }

  public final void update(Component component)
  {
    if (_target!=null)
    {
      _target.addComponent(component);
    }
  }

}

Hinzugekommen ist außerdem die Funktion onAfterFire() die aufgerufen wird, sobald alle möglichen Listener benachrichtig wurden. An dieser Stelle könnte man dann Prüfungen einbauen, ob z.B. der Event überhaupt ein Ziel erreicht hat.

Ich glaube, dass diese Lösung zu offensichtlich war, so dass man sie leicht übersehen konnte.

Wer wissen möchte, wohin die Nutzer in der eigenen Anwendung so klicken (z.B. auf Dinge, von denen man selbst nicht annehmen würde, das Nutzer darauf klicken), der muss jeden Mausklick des Nutzers aufzeichnen. Aus diesen Daten kann man dann ermitteln, wohin die Nutzer ihren Mauszeiger so wandern lassen. Dafür gibt es bereits Opensourcelösungen, die meist auf PHP basieren. Unter dem Suchbergriff Heatmap wird man auch bei Google fündig. Da sich alles in diesem Blog um Java und dann noch um Wicket dreht, lag es natürlich nahe, zu prüfen, ob und wie man diese Anforderung mit Wicket realisieren kann. Dieser Beitrag wäre viel kürzer, wenn man die Frage nach dem "ob" mit nein beantworten müsste. Kommen wir also zum "wie?".

Für die Umsetzung habe ich mir anfänglich einiges aus dem Beispielen aus folgendem Blogbeitrag entlehnt. Im Laufe der Zeit ist zwar davon nicht mehr viel zu sehen, das Grundprinzip ist aber das Gleiche geblieben.

Folgende Fragestellung stand am Anfang dieses Versuchs: Wie kann man mit Wicket Werte in einem AjaxRequest übergeben (z.B. die Mausposition). Die erste Idee bestand darin, ein unsichtbares Formular zu erstellen, in das man die Werte per Javascript einfügt und dieses Formular per Ajax abschickt. Das hat auch funktioniert, war aber irgendwie auch ein wenig zu aufwendig. Nach einer Reihe missglückter Versuche, den richtigen Ansatz zu finden, stellte ich diese Frage in der Wicket-Mailingliste und bekam den entscheidenen Tipp von Ernesto Reinaldo Barreiro. Es gab einen Vortrag der London Wicket User Group, der dieses Problem löste. Mit dieser Vorarbeit begann ich das Thema umzusetzen. Dabei hat sich die eigene Implementierung vom Original entfernt. Hier nun Schritt für Schritt der vollständige Code:

AbstractParameterizedDefaultAjaxBehavior

package de.wicketpraxis.web.blog.pages.questions.ajax.parameter;

import java.util.HashMap;
import java.util.Map;

import org.apache.wicket.Request;
import org.apache.wicket.RequestCycle;
import org.apache.wicket.ResourceReference;
import org.apache.wicket.ajax.AbstractDefaultAjaxBehavior;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.IHeaderResponse;
import org.apache.wicket.util.time.Duration;

public abstract class AbstractParameterizedDefaultAjaxBehavior extends AbstractDefaultAjaxBehavior
{
  static int sec=0;
  
  private Duration _throttleDelay;

  @Override
  public void renderHead(IHeaderResponse response)
  {
    super.renderHead(response);
    response.renderJavascriptReference(new ResourceReference(AbstractParameterizedDefaultAjaxBehavior.class,"AbstractParameterizedDefaultAjaxBehavior.js"));
  }
  
  @Override
  protected void respond(AjaxRequestTarget target)
  {
    Request request = RequestCycle.get().getRequest();
    
    Map<String,Object> map=new HashMap<String, Object>();
    Parameter<?>[] parameter = getParameter();
    for (Parameter<?> p : parameter)
    {
      String svalue = request.getParameter(p.getName());
      if (svalue!=null)
      {
        Object value=getComponent().getConverter(p.getType()).convertToObject(svalue, getComponent().getLocale());
        map.put(p.getName(), value);
      }
    }
    
    respond(target, new ParameterMap(map));
  }
  
  @Override
  public CharSequence getCallbackUrl(boolean onlyTargetActivePage)
  {
    StringBuilder sb=new StringBuilder();
    sb.append(super.getCallbackUrl(onlyTargetActivePage));
    
    Parameter<?>[] parameter = getParameter();
    for (Parameter<?> p : parameter)
    {
      sb.append("&").append(p.getName()).append("='+").append(p.getJavascript()).append("+'");
    }
    
    return sb.toString();
  }
  
  @Override
  protected final CharSequence getCallbackScript()
  {
    if (_throttleDelay!=null)
    {
      return throttleScript(super.getCallbackScript(),"thw"+(sec++),_throttleDelay);
    }
    return super.getCallbackScript();
  }
  
  protected static class Parameter<T>
  {
    String _name;
    String _javascript;
    Class<T> _type;
    
    protected Parameter(String name,Class<T> type,String javascript)
    {
      _name=name;
      _type=type;
      _javascript=javascript;
    }
    
    protected String getName()
    {
      return _name;
    }
    protected String getJavascript()
    {
      return _javascript;
    }
    protected Class<T> getType()
    {
      return _type;
    }
  }
  
  protected static <T> Parameter<T> of(String name,Class<T> type,String javascript)
  {
    return new Parameter<T>(name, type, javascript);
  }
  
  protected static class ParameterMap
  {
    Map<String, Object> _map;
    
    protected ParameterMap(Map<String, Object> map)
    {
      _map=map;
    }
    
    public <T> T getValue(Parameter<T> parameter)
    {
      return (T) _map.get(parameter.getName());
    }
  }
  
  public final AbstractParameterizedDefaultAjaxBehavior setThrottleDelay(Duration throttleDelay)
  {
    _throttleDelay=throttleDelay;
    return this;
  }
  
  protected abstract void respond(AjaxRequestTarget target,ParameterMap parameterMap);
  
  protected abstract Parameter<?>[] getParameter();

}

Die drei wichtigsten Bestandteile dieser Klasse sind folgende: Die Klasse Parameter definiert den Namen, den Typ, und das Javascript, das für das Ermitteln des Wertes im Browser aufgerufen muss. Die Methode respond(AjaxRequestTarget) liest die Werte aus dem Request aus, konvertiert diese in den gewünschen Typ und ruf damit eine zu überschreibende Methode auf. Die Methode getCallbackUrl() liefert das Javascript-Fragment für die Url, die dann per Ajax aufgerufen wird.

Um die Position des Mauszeigers ermitteln zu können, muss man sich mit einer eigenen Funktion für so einen Event registrieren. Damit mehr als eine Funktion auf so einen Event reagieren kann, sollte man die Funktion, die davor registriert war, ebenfalls aufrufen. Um für diese Problematik, die vermutlich in allen abgeleiteten Klassen vorhanden ist, besser lösen zu können, binden wir automatisch eine hilfreiche Javascript-Klasse ein.

Callback = {
  create: function(oldCallback,newCallback)
  {
    return function(a,b,c,d,e,f)
    {
      if (oldCallback) 
      {
        oldCallback(a,b,c,d,e,f);
      }
      newCallback(a,b,c,d,e,f);
    }
  },
};

Der Code sieht etwas merkwürdig aus. Das liegt an folgenden Gründen: zum einen stehe ich mit Javascript immer noch auf Kriegsfuß (mit Wicket kann man den Javascript-Teil sehr schön verstecken) und habe daher keine geeignete Lösung gefunden, mit der es mir möglich war, alle Argumente des Funktionsaufrufs an die zwei Funktionen weiterzureichen. Da es aber Javascript egal ist, mit wie vielen Parametern man eine Funktion aufruft, werden auf diese Weise bis zu 6 Übergabeparameter weitergereicht. Für Hinweise an dieser Stelle bin ich extrem dankbar.

WicketWindowJavascript

Für vieles bringt Wicket bereits fertige Implementierungen mit. Allerdings verstecken sich diese manchmal an unauffälligen Stellen. Für das Ermitteln des sichtbaren Bereichs fand ich die nötigen Javascript-Funktionen bei der ModelWindow-Klasse. Da ich nicht das vollständige ModalWindow-Javascript einbinden wollte, habe ich diese allgemeinen Funktionen in eine eigene Resource verpackt.

package de.wicketpraxis.web.blog.pages.questions.ajax.parameter;

import org.apache.wicket.ResourceReference;

public class WicketWindowJavascript
{
  private WicketWindowJavascript()
  {
  }
  
  public static final ResourceReference RESOURCE=new ResourceReference(WicketWindowJavascript.class,"WicketWindowJavascript.js");
}

// aus der Datei modal.js zur Klasse ModalWindow

if (typeof(Wicket.Window) == "undefined") {
  Wicket.Window = { };
}

/**
 * Returns the height of visible area.
 */
Wicket.Window.getViewportHeight = function() {
  if (window.innerHeight != window.undefined) 
    return window.innerHeight;
  
  if (document.compatMode == 'CSS1Compat') 
    return document.documentElement.clientHeight;
    
  if (document.body) 
    return document.body.clientHeight;
     
  return window.undefined; 
}

/**
 * Returns the width of visible area.
 */
Wicket.Window.getViewportWidth =  function() {
  if (window.innerWidth != window.undefined) 
    return window.innerWidth;
     
  if (document.compatMode == 'CSS1Compat') 
    return document.documentElement.clientWidth; 
    
  if (document.body) 
    return document.body.clientWidth;
     
  return window.undefined;
}

/**
 * Returns the horizontal scroll offset
 */
Wicket.Window.getScrollX = function() {
  var iebody = (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body  
  return document.all? iebody.scrollLeft : pageXOffset
}

/**
 * Returns the vertical scroll offset
 */
Wicket.Window.getScrollY = function() {
  var iebody = (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body  
  return document.all? iebody.scrollTop : pageYOffset
}


/**
 * Returns element offset
 */
Wicket.Window.getXYOffset = function(obj)
{
  var curleft = 0;
  var curtop = 0;
  if (obj.offsetParent)
  {
    while (obj.offsetParent)
    {
      curleft += obj.offsetLeft;
      curtop += obj.offsetTop;
      obj = obj.offsetParent;
    }
  }
  else
  {
    if (obj.x)
    {
      curleft += obj.x;
    }
    if (obj.y)
    {
      curtop += obj.y;
    }
  }
  
  if (Wicket.Browser.isIE())
  {
    bodyElement=document.getElementsByTagName('body')[0];
    // In IE there's a default margin in the page body. If margin's not defined,
    // use defaults
    var marginLeftExplorer  = parseInt(bodyElement.style.marginLeft);
    var marginTopExplorer   = parseInt(bodyElement.style.marginTop);
    /* assume default 10px/15px margin in explorer */
    if (isNaN(marginLeftExplorer)) {marginLeftExplorer=10;}
    if (isNaN(marginTopExplorer)) {marginTopExplorer=15;}
    curleft=curleft+marginLeftExplorer;
    curtop=curtop+marginTopExplorer;
  }

  return [curleft,curtop];
}

Hinzugefügt habe ich nur die Methode Wicket.Window.getXYOffset(), um den Offset für ein bestimmtes oder das erste Kindelement der Seite ermitteln zu können. Eine Klasse, die diese Methoden benötigt, muss die Resource entsprechend einbinden.

WindowResizeBehavior

Um die Heatmap in der richtigen Größe zeichnen zu können, benötigen wir Informationen über die Dimensionen des sichtbaren Bereichs. Für window.onresize wird ein neuer Callback registriert. Die Werte können über die ensprechend Wicket.Window-Funktionen ermittelt werden. Daher wird nicht nur der Callback registiert, sondern die Funktion nach dem Laden der Seite direkt aufgerufen. Auf diese Weise bekommen wir die Informationen über den sichtbaren Bereich nicht erst, wenn der Nutzer die Fenstergröße verändert.

package de.wicketpraxis.web.blog.pages.questions.ajax.parameter;

import org.apache.wicket.ResourceReference;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.IHeaderResponse;
import org.apache.wicket.util.time.Duration;

public abstract class WindowResizeBehavior extends AbstractParameterizedDefaultAjaxBehavior
{
  static final Parameter<Integer> WIDTH=of("width", Integer.class, "Wicket.Window.getViewportWidth()");
  static final Parameter<Integer> HEIGHT=of("height", Integer.class, "Wicket.Window.getViewportHeight()");

  @Override
  public void renderHead(IHeaderResponse response)
  {
    super.renderHead(response);
    response.renderJavascriptReference(WicketWindowJavascript.RESOURCE);
    response.renderOnDomReadyJavascript(getJavascript());
    response.renderOnDomReadyJavascript(getCallbackScript().toString());
  }
  
  protected final String getJavascript()
  {
    return "window.onresize = Callback.create(window.onresize,function () {"+getCallbackScript()+"});";
  }

  @Override
  protected final Parameter<?>[] getParameter()
  {
    return new Parameter<?>[]{ WIDTH,HEIGHT};
  }
  
  @Override
  protected void respond(AjaxRequestTarget target, ParameterMap parameterMap)
  {
    onResize(target, parameterMap.getValue(WIDTH), parameterMap.getValue(HEIGHT));    
  }
  
  protected abstract void onResize(AjaxRequestTarget target, int width, int height);
}

ElementOffsetBehavior

Die Bestimmung der richtigen Mauskoordinaten gestaltet sich insofern schwierig, als das nicht jede Webseite bei jeder Fenstergröße gleich aussieht. Damit die Koordinaten bei der Auswertung verwendbar bleiben, berechnen wir die Position in Relation zu einem Element, dass den Rahmen der Seite darstellen sollte (z.B. das erste div-Tag innerhalb des body-Tags, dass auf eine feste Breite gesetzt wurde und im sichtbaren Bereich zentriert dargestellt wird).

package de.wicketpraxis.web.blog.pages.questions.ajax.parameter;

import org.apache.wicket.ResourceReference;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.IHeaderResponse;

import de.wicketpraxis.web.blog.pages.questions.ajax.parameter.AbstractParameterizedDefaultAjaxBehavior.Parameter;

public abstract class ElementOffsetBehavior extends AbstractParameterizedDefaultAjaxBehavior
{
  static final Parameter<Integer> X_OFFSET=of("xOffset", Integer.class, "xOffset");
  static final Parameter<Integer> Y_OFFSET=of("yOffset", Integer.class, "yOffset");
  
  private String _contentId;

  @Override
  public void renderHead(IHeaderResponse response)
  {
    super.renderHead(response);
    response.renderJavascriptReference(WicketWindowJavascript.RESOURCE);
    response.renderJavascriptReference(new ResourceReference(ElementOffsetBehavior.class,"ElementOffsetBehavior.js"));
    response.renderOnDomReadyJavascript(getJavascript());
  }
  
  public ElementOffsetBehavior()
  {
    
  }
  
  public ElementOffsetBehavior(String contentId)
  {
    _contentId=contentId;
  }
  
  protected final String getJavascript()
  {
    if (_contentId!=null) return "ElementOffsetBehavoir.init(function (xOffset,yOffset) {"+getCallbackScript()+"},'"+_contentId+"');";
    return "ElementOffsetBehavoir.init(function (xOffset,yOffset) {"+getCallbackScript()+"});";
  }

  @Override
  protected final Parameter<?>[] getParameter()
  {
    return new Parameter<?>[]{ X_OFFSET,Y_OFFSET};
  }
  
  @Override
  protected void respond(AjaxRequestTarget target, ParameterMap parameterMap)
  {
    onOffset(target, parameterMap.getValue(X_OFFSET), parameterMap.getValue(Y_OFFSET));   
  }
  
  protected abstract void onOffset(AjaxRequestTarget target, int xOffset, int yOffset);
}

Im Gegensatz zum letzten Behavior sind wir in diesem Fall auf etwas mehr Javascript angewiesen.

ElementOffsetBehavoir =
{
  init : function(callback, contentId)
  {
    function Listener(callback, contentId)
    {
      this.xOffset = 0;
      this.yOffset = 0;
      this.firstElement = null;

      // function(xOffset,yOffset)
      this.onOffsetChanged = callback;

      this.updateOffsets = function()
      {
        var offsets = Wicket.Window.getXYOffset(this.firstElement);
        this.xOffset = offsets[0];
        this.yOffset = offsets[1];
        this.onOffsetChanged(this.xOffset, this.yOffset);
      };

      var bodyElement = document.getElementsByTagName('body')[0];
      this.firstElement = bodyElement.childNodes[1];
      if (contentId != null)
      {
        this.firstElement = document.getElementById(contentId);
      }
    }

    var listener = new Listener(callback, contentId);
    listener.updateOffsets();
    window.onresize = Callback.create(window.onresize, function()
    {
      listener.updateOffsets();
    });
  }
}

Der Listener wird über die init-Methode initialisiert und wird ebenfalls aufgerufen, wenn die Fenstergröße verändert wurde. Außerdem wird die updateOffsets()-Methode bereits bei der Initialisierung aufgerufen. Somit ist auch in diesem Fall der Offset eines Elements bekannt.

PageMouseClickBehavior

Das letzte Behavior ist gleichzeitig das aufwendigste. In diesem Fall muss nicht nur die Position des Klicks ermittelt werden, sondern gleichzeitig in Relation zu einem Element gebracht werden. Auf diese Weise kommen die Koordinaten schon passend an und können z.B. auch negative Werte annehmen.

package de.wicketpraxis.web.blog.pages.questions.ajax.parameter;

import org.apache.wicket.Request;
import org.apache.wicket.ResourceReference;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.IHeaderResponse;

public abstract class PageMouseClickBehavior extends AbstractParameterizedDefaultAjaxBehavior
{
  static final Parameter<Integer> MOUSE_X=of("x", Integer.class, "x");
  static final Parameter<Integer> MOUSE_Y=of("y", Integer.class, "y");
  
  String _contentId;
  
  public PageMouseClickBehavior()
  {
  }
  
  public PageMouseClickBehavior(String contentId)
  {
    _contentId=contentId;
  }
  
  @Override
  public void renderHead(IHeaderResponse response)
  {
    super.renderHead(response);
    
    response.renderJavascriptReference(WicketWindowJavascript.RESOURCE);
    response.renderJavascriptReference(new ResourceReference(PageMouseClickBehavior.class,"PageMouseClickBehavior.js"));
    response.renderOnDomReadyJavascript(getJavascript());
  }
  
  protected String getJavascript()
  {
    if (_contentId!=null) return "PageMouseClickBehavoir.init(function (x,y,xOffset,yOffset) {"+getCallbackScript()+"},'"+_contentId+"');";
    return "PageMouseClickBehavoir.init(function (x,y,xOffset,yOffset) {"+getCallbackScript()+"});";
  }

  @Override
  protected Parameter<?>[] getParameter()
  {
    return new Parameter<?>[] { MOUSE_X, MOUSE_Y };
  }
  
  @Override
  protected void respond(AjaxRequestTarget target, ParameterMap map)
  {
    onClick(target, map.getValue(MOUSE_X), map.getValue(MOUSE_Y));    
  }

  protected abstract void onClick(AjaxRequestTarget target, int x, int y);
}

Das dazugehörige Javascript kümmert sich um die Verarbeitung:

PageMouseClickBehavoir = 
{
  init: function(callback,contentId)
  {
    function Listener(callback,contentId)
    {
      this.xOffset=0;
      this.yOffset=0;
      this.firstElement=null;
  
      // function(x,y)
      this.onMouseEvent=callback;
      
      this.mouseEvent= function(e)
      {
        tempX=0;
        tempY=0;
        
        if (Wicket.Browser.isIE() || Wicket.Browser.isGecko())
        {
          tempX = e.clientX + Wicket.Window.getScrollX();
          tempY = e.clientY + Wicket.Window.getScrollY();
        }
        else
        {
          tempX = e.pageX
          tempY = e.pageY
        }
        tempX-=this.xOffset;
        tempY-=this.yOffset;
        this.onMouseEvent(tempX,tempY);
        return true;
      };
      
      this.updateOffsets=function()
      {
        var offsets=Wicket.Window.getXYOffset(this.firstElement);
        this.xOffset=offsets[0];
        this.yOffset=offsets[1];
      };
      
      var bodyElement=document.getElementsByTagName('body')[0];
      this.firstElement=bodyElement.childNodes[1];
      if (contentId!=null)
      {
        this.firstElement=document.getElementById(contentId);
      }
      
      this.updateOffsets();
    }
  
  
    var listener=new Listener(callback,contentId);
    
    document.onmousedown=Callback.create(document.onmousedown,function(e)
    {
      listener.mouseEvent(e)
    });
    window.onresize=Callback.create(window.onresize,function()
    {
      listener.updateOffsets();
    });
  },
}

Sobald der Nutzer klickt (auch wenn es eigentlich nichts klickbares gibt), wird eine Request an die Anwendung gesendet. Diese Behavior können wir nun in die Anwendung einbauen, um die Mausklicks der Nutzer aufzuzeichnen.

Die Anwendung

In unserer Beispielanwendung werfen wir alles in einen Topf. Wir zeichnen alle Mausklicks auf und aktualisieren dann die Heatmap.

package de.wicketpraxis.web.blog.pages.questions.ajax.parameter;

import java.awt.AlphaComposite;
import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Composite;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.image.Image;
import org.apache.wicket.markup.html.image.NonCachingImage;
import org.apache.wicket.markup.html.image.resource.DynamicImageResource;
import org.apache.wicket.markup.html.image.resource.RenderedDynamicImageResource;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.protocol.http.WebResponse;
import org.apache.wicket.util.time.Duration;

public class HeatMapPage extends WebPage
{
  List<Pos> _points=new ArrayList<Pos>();
  int _xOffset=0;
  int _yOffset=0;
  
  public HeatMapPage()
  {
    final FeedbackPanel feedbackPanel = new FeedbackPanel("feedback");
    feedbackPanel.setOutputMarkupId(true);
    add(feedbackPanel);

    final WebMarkupContainer box=new WebMarkupContainer("box");
    final ClickMap imageResource = new ClickMap(100, 100);
    final Image image = new NonCachingImage("map",imageResource);
    box.setOutputMarkupId(true);
    box.add(image);
    add(box);
    
    add(new ElementOffsetBehavior("#content")
    {
      @Override
      protected void onOffset(AjaxRequestTarget target, int xOffset, int yOffset)
      {
        info("Offset: "+xOffset+","+yOffset);
        _xOffset=xOffset;
        _yOffset=yOffset;
        imageResource.invalidate();
        target.addComponent(feedbackPanel);
        target.addComponent(box);
      }
    }.setThrottleDelay(Duration.milliseconds(250)));
    
    add(new PageMouseClickBehavior("#content")
    {
      @Override
      protected void onClick(AjaxRequestTarget target, int x, int y)
      {
        info("Clicked: "+x+","+y);
        _points.add(new Pos(x,y));
        imageResource.invalidate();
        target.addComponent(box);
        target.addComponent(feedbackPanel);
      }
    }.setThrottleDelay(Duration.milliseconds(50)));
    
    add(new WindowResizeBehavior()
    {
      @Override
      protected void onResize(AjaxRequestTarget target, int width, int height)
      {
        info("Size changed: "+width+","+height);
        imageResource.setWidth(width);
        imageResource.setHeight(height);
        imageResource.invalidate();
        
        target.addComponent(feedbackPanel);
        target.addComponent(box);
      }
    }.setThrottleDelay(Duration.milliseconds(250)));
    
  }
  
  class ClickMap extends RenderedDynamicImageResource
  {
    public ClickMap(int width, int height)
    {
      super(width, height,"jpg");
      setCacheable(false);
    }
    
    @Override
    protected boolean render(Graphics2D graphics)
    {
      graphics.setBackground(new Color(255,255,255));
      graphics.setColor(new Color(0,0,0,50));
      graphics.clearRect(0, 0, getWidth(), getHeight());
 
      graphics.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
      
      for (Pos p : _points)
      {
        graphics.fillArc(_xOffset+p.getX()-5, _yOffset+p.getY()-5, 9, 9, 0, 360);
      }
      return true;
    }
  }
  
  static class Pos implements Serializable
  {
    int _x;
    int _y;
    
    public Pos(int x, int y)
    {
      super();
      _x = x;
      _y = y;
    }
    
    public int getX()
    {
      return _x;
    }
    
    public int getY()
    {
      return _y;
    }
  }
}

Im Markup müssen wir dann nur das Image hinter der Seite platzieren und schon stimmen Mausklick und Heatmap überein.

<html>
  <head>
    <title>Heatmap Page</title>
  </head>
  <body>
    <div id="#content" style="width:800px; margin:auto; border:1px solid #888;">
      <div wicket:id="feedback"></div>
    </div>
    <div wicket:id="box" style="z-index: -1; position: absolute; top: 0px;left: 0px;">
      <img wicket:id="map">
    </div>
  </body>
</html>

In diesem Beispiel haben ich den Rahmen auf eine Breite von 800 Pixeln gesetzt und zentriert. Trotzdem werden die Mausklicks immer korrekt angezeigt.

Wie man sehen kann, ist die Interaktion von Wicket mit Ereignissen, die durch Javascript ausgelöst werden, ohne weiteres möglich. Dabei können diese Komponenten ohne weiteres in beliebigen Anwendungen benutzt werden, ohne das sich ein anderer Entwickler mit den Implementierungsdetails beschäftigen muss. Allerdings hätte ich mir gewünscht, dass die Parameterisierung von Ajax-Aufrufen bereits in den Kern von Wicket integriert wäre.

Viel Spass mit dem ausprobieren:)

Wicket liefert im Bereich Extensions Komponenten mit, die zwar nicht direkt zum Kern von Wicket gehören, die aber fast so häufig wie die Standardwicketkomponenten zum Zuge kommen. Im folgenden Beitrag zeige ich, wie man die ModalWindow-Komponente benutzen kann und wie man die Darstellung an eigene Wünsche anpasst. Als erstes benötigen wir eine Komponente, die durch das ModalWindow angezeigt werden soll.

package de.wicketpraxis.web.blog.pages.questions.ajax.modal;

import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.AjaxLink;
import org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow;
import org.apache.wicket.markup.html.panel.Panel;

public abstract class AbstractModalClosePanel extends Panel
{
  public AbstractModalClosePanel(ModalWindow modalWindow)
  {
    super(modalWindow.getContentId());
    
    add(new AjaxLink<Void>("link")
    {
      @Override
      public void onClick(AjaxRequestTarget target)
      {
        AbstractModalClosePanel.this.onClick(target);
      }
    });
  }
  
  public abstract void onClick(AjaxRequestTarget target);
}

Die ModalWindow-Komponente kann nur eine andere Komponente anzeigen. Daher ist die Komponenten-ID fest definiert. Daher macht es Sinn, statt einer eigenen ID einfach das ModalWindow, in dem die Komponente angezeigt werden soll als Parameter zu übergeben. Damit diese Komponente auch eine Funktion bereitstellt, fügen wir einen Link hinzu. Wichtig: Wenn man Formulare benutzen möchte, muss man diese bei Anzeige durch ein ModalWindow per Ajax absenden.

Das Markup der Komponente ist wenig überraschend:

<wicket:panel>
  <div>
    Nothing to hide:)
    <a wicket:id="link">Link</a>
  </div>
</wicket:panel>

Die ModalWindow-Komponente unterscheidet sich von anderen Komponenten in einem wesentlichen Punkt. Die Darstellung wird nicht durch ein Markup realisiert, dass man überschreiben könnte. Der Rahmen für das Fenster wird per Javascript erzeugt. Um das Aussehen der Komponente anzupassen müssen wir also etwas tiefer in die Trickkiste greifen.

In diesem Beispiel nehmen wir Veränderungen an verschiedenen Stellen vor. Fangen wir mit den Grafiken für den Rahmen an. Der Einfachheit halber verändere ich nur die Farbwirkung aber nicht die Dimensionen, so dass ich die vorhandenen Grafiken (die man sich aus dem wicket-extension.jar extrahieren kann) nur leicht verändere:

Es gibt zwei Grafiken, wobei es für jede noch eine Version für den InternetExplorer gibt, die auf transparente Schatten verzichtet (der InternetExplorer hat da Schwierigkeiten, ähm.. nicht nur da). Wie man sieht befinden sich die Grafikinformationen für die Ränder, Ecken und Buttons in einer Grafik. Das Stylesheet sorgt dafür, dass an der richtigen Stelle die richtige Grafik eingeblendet wird. Daher müssen wir eine eigene Stylesheet-Datei einbinden, die unsere Anpassungen wiederspiegelt. Auch an dieser Stelle ist es sinnvoll, sich den Inhalt der ModalWindow-eigenen Stylesheet-Datei anzuschauen.

div.wicket-modal div.w_content_3
{
  border:0px;
}

div.wicket-modal div.w_caption
{
  background-color: inherit;
}

div.wicket-modal a.w_close {  
  top: 3px;
}

div.wicket-modal div.custom div.w_left,
div.wicket-modal div.custom div.w_right {
  background-image: url('frame-custom-2-alpha.png'); 
  _background-image: url('frame-custom-2-ie.png');
}


div.wicket-modal div.custom div.w_top,
div.wicket-modal div.custom div.w_bottom,
div.wicket-modal div.custom div.w_topLeft,
div.wicket-modal div.custom div.w_topRight,
div.wicket-modal div.custom div.w_bottomRight,
div.wicket-modal div.custom div.w_bottomLeft,
div.wicket-modal div.custom a.w_close {
  background-image: url('frame-custom-1-alpha.png'); 
  _background-image: url('frame-custom-1-ie.png');
}

Wie ich bereits weiter oben erwähnt habe, wird das Html für den Rahmen nicht wie üblich sondern per Javascript erzeugt. Da wir auch an dieser Stelle Anpassungen vornehmen wollen, müssen wir die entsprechende Funktion überschreiben:

Wicket.Window.getMarkup = function(idWindow, idClassElement, idCaption, idContent, idTop, idTopLeft, idTopRight, idLeft, idRight, idBottomLeft, idBottomRight, idBottom, idCaptionText, isFrame) {
  var s =
      "<div class=\"wicket-modal\" id=\""+idWindow+"\" style=\"top: 10px; left: 10px; width: 100px;\"><form style='background-color:transparent;padding:0px;margin:0px;border-width:0px;position:static'>"+
      "<div id=\""+idClassElement+"\">"+
        "<div class=\"w_caption\"  id=\""+idCaption+"\">"+
          "<a class=\"w_close\" href=\"#\"></a>"+                 
          "<span id=\""+idCaptionText+"\" class=\"w_captionText\"></span>"+
        "</div>"+
        
        "<div class=\"w_top_1\">"+

        "<div class=\"w_topLeft\" id=\""+idTopLeft+"\">"+
        "</div>"+       

        "<div class=\"w_topRight\" id=\""+idTopRight+"\">"+
        "</div>"+

        "<div class=\"w_top\" id='"+idTop+"'>"+                 
        "</div>"+

        "</div>"+
                
        "<div class=\"w_left\" id='"+idLeft+"'>"+
          "<div class=\"w_right_1\">"+
            "<div class=\"w_right\" id='"+idRight+"'>"+
              "<div class=\"w_content_1\" onmousedown=\"if (Wicket.Browser.isSafari()) { event.ignore = true; }  else { Wicket.stopEvent(event); } \">"+                                      
              
                "<div class=\"w_content_2\">"+
                "<div class=\"w_content_3\">"+
                  "<div class=\"w_content\">";
        if (isFrame) {
          if (Wicket.Browser.isIELessThan7() || !Wicket.Browser.isIE()) {                       
            s+= "<iframe src='\/\/:' frameborder=\"0\" id='"+idContent+"' allowtransparency=\"false\" style=\"height: 200px\">"+
                    "</iframe>";
          } else {
            s+= "<iframe src='about:blank' frameborder=\"0\" id='"+idContent+"' allowtransparency=\"false\" style=\"height: 200px\">"+
            "</iframe>";
          }
        } else {
          s+=
                    "<div id='"+idContent+"'></div>";
        }
          s+=             
                  "</div>"+
                "</div>"+
                "</div>"+
              "</div>"+
            "</div>"+
          "</div>"+
        "</div>"+


        "<div class=\"w_bottom_1\" id=\""+idBottom+"\">"+         
          
          "<div class=\"w_bottomRight\"  id=\""+idBottomRight+"\">"+
          "</div>"+
          
          "<div class=\"w_bottomLeft\" id=\""+idBottomLeft+"\">"+
          "</div>"+

          "<div class=\"w_bottom\" id=\""+idBottom+"\">"+       
          "</div>"+       


        "</div>"+       


      "</div>"+
    "</form></div>";
    
    return s;
}

Da die Javascript-Datei der ModalWindow-Komponente automatisch eingebunden wird (da von dieser Klasse abgeleitet wird), muss ich nur diese eine Funktion überschreiben. Ich habe mich in diesem Beispiel darauf beschränkt, den Bereich für die Überschrift und den CloseButton oberhalb des Rahmens darstellen zu lassen (Das div mit der Klasse "w_caption").

In unsere Komponentenklasse betreten wir nun wieder vertrautes Terrain. Wir leiten von ModalWindow ab und passen ein paar grundsätzliche Dinge an:

package de.wicketpraxis.web.blog.pages.questions.ajax.modal;

import org.apache.wicket.ResourceReference;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow;
import org.apache.wicket.markup.html.CSSPackageResource;
import org.apache.wicket.markup.html.JavascriptPackageResource;
import org.apache.wicket.markup.html.resources.CompressedResourceReference;
import org.apache.wicket.markup.html.resources.JavascriptResourceReference;

public class CustomModalWindow extends ModalWindow
{
  private static ResourceReference CSS = new CompressedResourceReference(CustomModalWindow.class, "styles/custom-modal.css");
  private static ResourceReference JAVASCRIPT = new JavascriptResourceReference(CustomModalWindow.class,  "styles/custom-modal.js");
  
  public CustomModalWindow(String id)
  {
    super(id);
    
    setCssClassName("custom");
    
    add(JavascriptPackageResource.getHeaderContribution(JAVASCRIPT));
    add(CSSPackageResource.getHeaderContribution(CSS));
    
    setCloseButtonCallback(new CloseButtonCallback()
    {
      public boolean onCloseButtonClicked(AjaxRequestTarget target)
      {
        return onCloseClicked(target);
      }
    });
    
    setWindowClosedCallback(new WindowClosedCallback()
    {
      public void onClose(AjaxRequestTarget target)
      {
        CustomModalWindow.this.onClose(target);
      }
    });
  }
  
  protected void onClose(AjaxRequestTarget target)
  {
    
  }

  protected boolean onCloseClicked(AjaxRequestTarget target)
  {
    return true;
  }
}

Wir setzen die Css-Klasse für den Rahmen, fügen unsere CSS- und Javascript-Anpassungen hinzu (da unsere Referenzen nach den ModalWindow-Referenzen eingebunden werden, überschreiben wir sowohl die CSS-Definitionen als auch die Javascript-Funktionen). Außerdem fügen wir zwei Callbacks hinzu, die auf einen Klick auf das Schließen-Symbol reagieren. Für diese Komponenten benötigen wir keine eigene Markup-Datei.

Jetzt möchten wir diese Komponente endlich verwenden. Dazu legen wir eine Seitenklasse an:

package de.wicketpraxis.web.blog.pages.questions.ajax.modal;

import org.apache.wicket.ajax.AbstractAjaxTimerBehavior;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.AjaxLink;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.util.time.Duration;

public class ModalWindowPage extends WebPage
{
  public ModalWindowPage()
  {
    final CustomModalWindow modalWindow = new CustomModalWindow("modal");
    
    modalWindow.setTitle("Popup");
    modalWindow.setInitialWidth(400);
    modalWindow.setInitialHeight(400);
    modalWindow.setResizable(true);
    modalWindow.setContent(new AbstractModalClosePanel(modalWindow)
    {
      @Override
      public void onClick(AjaxRequestTarget target)
      {
        modalWindow.close(target);
      }
    });
    add(modalWindow);
    
    add(new AjaxLink<Void>("open")
    {
      @Override
      public void onClick(AjaxRequestTarget target)
      {
        modalWindow.show(target);
      }
    });
    
    add(new AbstractAjaxTimerBehavior(Duration.seconds(2))
    {
      @Override
      protected void onTimer(AjaxRequestTarget target)
      {
        modalWindow.show(target);
        stop();
      }
    });
  }
}

Wir erstellen eine Instanz unsere ModalWindow-Komponente und fügen ein Panel als Content-Element hinzu. Dabei wird beim Klick auf den Link innerhalb der Komponente das Fenster geschlossen. Da das ModalWindow per Ajax geöffnet und geschlossen werden muss, benötigen wir zum Öffnen einen AjaxLink. Wenn man dem Nutzer das Fenster bereits beim Aufruf der Seite einmalig anzeigen möchte, kann man sich damit behelfen, das man eine Instanz AbstractAjaxTimerBehavior-Klasse erstellt und die Zeit entsprechend klein wählt (weniger als die zwei Sekunden aus diesem Beispiel). In der onTimer()-Methode führt der Aufruf von stop() dazu, dass die Methode nach der abgelaufenen Zeit nicht noch einmal aufgerufen wird.

<html>
  <head>
    <title>ModalWindow Page</title>
  </head>
  <body>
    <div wicket:id="modal"></div>
    <a wicket:id="open">Open</a>
  </body>
</html>

Und so sieht das Ergebnis aus:

Der Aufwand für eine eigene Komponente ist zwar wesentlich höher als in anderen Fällen, aber der Aufwand lohnt schon deshalb, weil dann das Aussehen der ModalWindow-Kompoente zur restlichen Anwendung passt.

Eine der ersten Demonstrationen für die Möglichkeiten von Ajax bestand darin, dass man dem Nutzer während er Eingabe von Informationen Vorschläge unterbreitete, was er denn wohl gemeint haben könnte. Das ist lange her und gehört zum guten Ton einer moderneren Webanwendung. Wicket liefert das notwendige Werkzeug bereits mit, so dass sehr einfach ist, den Nutzer auf diese Art zu unterstützen.

Etwas komplizierter wird es, wenn man dem Nutzer Vorschläge unterbreiten möchte, die nicht nur für ein Eingabefeld relevant sind, sondern wie z.B. bei der Postleitzahl auch den Wert eines anderen Eingabefeldes beeinflussen kann. Im folgenden Beispiel versuchen wir, dem Nutzer bei der Eingabe einer Postleitzahl auch den Ort mit anzuzeigen und den Wert in das Ortsfeld zu übernehmen.

Normalerweise kommen die Daten für die Postleitzahlen aus einer Datenbank, in unserem Beispiel begnügen wir uns mit einer sehr kleinen Auswahl:

package de.wicketpraxis.web.blog.pages.questions.form.autocomplete;

import java.io.Serializable;

public class PlzOrt implements Serializable
{
  String _plz;
  
  String _ort;
  
  public PlzOrt(String plz, String ort)
  {
    _plz=plz;
    _ort=ort;
  }
  
  public String getPlz()
  {
    return _plz;
  }
  
  public String getOrt()
  {
    return _ort;
  }
}

package de.wicketpraxis.web.blog.pages.questions.form.autocomplete;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

public class PlzOrtListFactory implements Serializable
{
  List<PlzOrt> _all=new ArrayList<PlzOrt>();
  
  {
    _all.add(new PlzOrt("23562", "Lübeck"));
    _all.add(new PlzOrt("23858", "Reinfeld"));
    _all.add(new PlzOrt("14199", "Berlin"));
    _all.add(new PlzOrt("70619", "Stuttgart"));
    
  }
  
  public PlzOrtListFactory()
  {
  }
  
  public List<PlzOrt> getList(String plz)
  {
    List<PlzOrt> ret=null;
    if ((plz!=null) && (plz.length()>0))
    {
      ret=new ArrayList<PlzOrt>();
      for (PlzOrt po : _all)
      {
        if (po.getPlz().startsWith(plz)) ret.add(po);
      }
    }
    return ret;
  }
}

Die Methode getList() liefert dann die passende Teilmenge für die eingegebene Postleitzahl. Wenn der Nutzer also "23" eingeben hat, werden die ersten beiden Einträge aus der Liste gewählt.

Wicket hat die Möglichkeit, dem Nutzer Vorschläge unterbreiten zu können, von der Darstellung dieser Vorschläge getrennt. Die relevanten Anpassungen müssen in unserem Fall in der Darstellungskomponente vorgenommen werden. Dazu leiten wir einen eigenen Renderer von einer passenden Wicket-Basisklasse ab:

package de.wicketpraxis.web.blog.pages.questions.form.autocomplete;

import org.apache.wicket.Response;
import org.apache.wicket.extensions.ajax.markup.html.autocomplete.AbstractAutoCompleteRenderer;
import org.apache.wicket.markup.html.form.FormComponent;

public class PlzOrtRenderer extends AbstractAutoCompleteRenderer<PlzOrt>
{
  FormComponent<?> _ortInput;
  
  public PlzOrtRenderer(FormComponent<?> ortInput)
  {
    _ortInput=ortInput;
    _ortInput.setOutputMarkupId(true);
  }
  
  @Override
  protected String getTextValue(PlzOrt object)
  {
    return object.getPlz();
  }

  @Override
  protected void renderChoice(PlzOrt object, Response response, String criteria)
  {
    response.write(object.getPlz() + "-" + object.getOrt());
  }
  
  @Override
  protected CharSequence getOnSelectJavascriptExpression(PlzOrt plzort)
  {
    StringBuilder js = new StringBuilder();
    js.append("wicketGet('").append(_ortInput.getMarkupId()).append("').value ='" + plzort.getOrt() + "';");
    js.append("input");
    return js.toString();
  }

}

In unserer Variante werden folgende Anpassungen vorgenommen: Für das zweite Eingabefeld wird die Ausgabe der MarkupId aktiviert, da wir uns später im Javascript darauf beziehen. Die Methode getTextValue() liefert den Wert zurück, der dann im Eingabefeld für die Postleitzahl erscheint. In der Methode renderChoice() wird die Auswahl gerendert. In unserem Fall zeigen wir Postleitzahl und Ort an. Damit der Ortsname korrekt im anderen Eingabefeld erscheint, übergeben wir durch das Überschreiben der Methode getOnSelectJavascriptExpression() die nötigen Javascript-Aufrufe. Die erste Zeile ermittelt das Objekt und setzt das Atrribut "input" auf den gewünschten Wert. Dabei ist zu beachten, dass die Zeile "input" den Wert darstellt, der in das Postleitzahlfeld geschrieben werden soll. Es sollte an dieser Stelle keine return-Anweisung aufgerufen werden.

package de.wicketpraxis.web.blog.pages.questions.form.autocomplete;

import java.util.Collections;
import java.util.Iterator;
import java.util.List;

import org.apache.wicket.extensions.ajax.markup.html.autocomplete.AutoCompleteBehavior;
import org.apache.wicket.markup.html.form.FormComponent;


class PlzAutoCompleteBehavior extends AutoCompleteBehavior<PlzOrt>
{
  PlzOrtListFactory _listFactory;
  
  public PlzAutoCompleteBehavior(PlzOrtListFactory listFactory, FormComponent<?> ortInput)
  {
    super(new PlzOrtRenderer(ortInput));
    
    _listFactory=listFactory;
  }

  @Override
  protected Iterator<PlzOrt> getChoices(String input)
  {
    List<PlzOrt> list = _listFactory.getList(input);
    if (list!=null) return list.iterator();
    return Collections.EMPTY_LIST.iterator();
  }
}

Wir leiten für dieses Beispiel unsere eigenes Behavior passend ab (Natürlich ist es möglich, das Behavior und den Renderer allgemeingültiger zu gestalten. Darauf wurde aber zu Gunsten der Lesbarkeit verzichtet.) Hinweis: Der Rückgabewert von getChoices() darf in diesem Fall nicht null sein.

Jetzt können wir endlich das Formular bauen und das Behavior einsetzen:

package de.wicketpraxis.web.blog.pages.questions.form.autocomplete;

import org.apache.wicket.extensions.ajax.markup.html.autocomplete.DefaultCssAutocompleteTextField;
import org.apache.wicket.markup.html.CSSPackageResource;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.TextField;
import org.apache.wicket.model.Model;

public class FormAutoCompletePage extends WebPage
{
  public FormAutoCompletePage()
  {
    add(CSSPackageResource.getHeaderContribution(DefaultCssAutocompleteTextField.class,"DefaultCssAutocompleteTextField.css"));
    
    Form<Void> form = new Form<Void>("form");
    
    TextField<String> plz = new TextField<String>("plz",Model.of(""));
    TextField<String> ort = new TextField<String>("ort",Model.of(""));
    
    plz.add(new PlzAutoCompleteBehavior(new PlzOrtListFactory(),ort));
    
    form.add(plz);
    form.add(ort);
    
    add(form);
  }
}

Für die Darstellung der Auswahl müssten wir jetzt noch etwas CSS bemühen. Das ersparen wir uns in diesem Beispiel, in dem wir die CSS-Datei der DefaultCssAutocompleteTextField-Klasse einbinden.

Eine kleine Besonderheit ist zu beachten: Man muss die Vorschläge, die der Browser dem Nutzer macht, unterbinden, damit die beiden Auswahlmöglichkeiten nicht kollidieren. Dazu fügt man im Markup das Attribut "autocomplete" mit dem Wert "off" hinzu.

<html>
  <head>
    <title>FormAutoCompletePage</title>
  </head>
  <body>
    <form wicket:id="form">
      Postleitzahl: <input wicket:id="plz" autocomplete="off" ></input><br>
      Ort: <input wicket:id="ort" autocomplete="off" ></input><br>
      <input type="submit" value="Button"> 
    </form>
  </body>
</html>

Und so sieht es dann aus: