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:)

Andere Beiträge

• 3. März 2010 -- Wicket Extensions – Anpassungen am ModalWindow
• 23. Dezember 2009 -- Wicket Ajax Tipp – AjaxRequestTarget nachträglich ermitteln
• 11. Dezember 2009 -- Wicket Form Submit – mit und ohne Ajax

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.

Andere Beiträge

• 7. März 2010 -- Wicket Heatmap – Ajax mit Parametern
• 23. Dezember 2009 -- Wicket Ajax Tipp – AjaxRequestTarget nachträglich ermitteln
• 11. Dezember 2009 -- Wicket Form Submit – mit und ohne Ajax

Andere Beiträge

• 19. Oktober 2009 -- Wicketbuch aus dem dpunkt Verlag
• 9. September 2009 -- Wicket im JavaMagazin
• 27. Mai 2009 -- Wicket Praxis als Buch

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:

Andere Beiträge

• 11. Dezember 2009 -- Wicket Form Submit – mit und ohne Ajax
• 9. September 2009 -- Migration zu Wicket : Formulare
• 2. September 2009 -- Datenbankeinträge auswählen mit der CheckGroup

package de.wicketpraxis.web.blog.pages.questions.transparent.lazy;
 
import org.apache.wicket.Component;
import org.apache.wicket.MarkupContainer;
import org.apache.wicket.markup.html.panel.Panel;
 
public abstract class AbstractLazyPanel extends Panel
{
  boolean _lazyInitCalled;
 
  public AbstractLazyPanel(String id)
  {
    super(id);
  }
 
  @Override
  protected void onBeforeRender()
  {
    if (!_lazyInitCalled)
    {
      _lazyInitCalled=true;
      lazyInit();
    }
    super.onBeforeRender();
  }
 
  protected abstract MarkupContainer lazyInit();
}

Die Methode lazyInit() liefert die Komponente zurück, unter der alle Kindkomponenten eingehangen werden müssen. Das sieht in eigenen Komponenten dann wie folgt aus:

package de.wicketpraxis.web.blog.pages.questions.transparent.lazy;
 
import org.apache.wicket.MarkupContainer;
import org.apache.wicket.markup.html.WebMarkupContainer;
 
public abstract class BasePanel extends AbstractLazyPanel
{
  public BasePanel(String id)
  {
    super(id);
  }
 
  @Override
  protected MarkupContainer lazyInit()
  {
    WebMarkupContainer border = new WebMarkupContainer("border");
    add(border);
    return border;
  }
}

Hier erstellen wir einen Container, den wir an ein div-Tag binden.

<wicket:panel>
  Base
  <div style="border:1px solid blue" wicket:id="border">
    <wicket:child />
  </div>
  Base End
</wicket:panel>

Die davon abgeleitete Klasse sieht dann wie folgt aus:

package de.wicketpraxis.web.blog.pages.questions.transparent.lazy;
 
import org.apache.wicket.MarkupContainer;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.model.Model;
 
public class SubPanel extends BasePanel
{
  public SubPanel(String id)
  {
    super(id);
  }
 
  @Override
  protected MarkupContainer lazyInit()
  {
    MarkupContainer root = super.lazyInit();
    root.add(new Label("label",Model.of("Sub")));
    return root;
  }
}

<wicket:extend>
  <span wicket:id="label"></span>
</wicket:extend>

Wie man sehen kann, wurde in diesem Beispiel sowohl Markup- als auch Komponentenvererbung benutzt. Trotzdem konnte auf den Einsatz von TransparentResolver verzichtet werden. Die Komponentenhierarchie entspricht der im Markup.

Ich hätte nicht gedacht, dass die Lösung so nahe liegt. Feedback wie immer willkommen…

Andere Beiträge

• 20. Januar 2010 -- Wicket – verzögerte Initialisierung
• 7. März 2010 -- Wicket Heatmap – Ajax mit Parametern
• 3. März 2010 -- Wicket Extensions – Anpassungen am ModalWindow

package de.wicketpraxis.web.blog.pages.questions.lazy;
 
import org.apache.wicket.markup.html.panel.Panel;
 
public abstract class AbstractLazyPanel extends Panel
{
  boolean _lazyInitCalled;
 
  public AbstractLazyPanel(String id)
  {
    super(id);
  }
 
  @Override
  protected void onBeforeRender()
  {
    if (!_lazyInitCalled)
    {
      _lazyInitCalled=true;
      lazyInit();
    }
    super.onBeforeRender();
  }
 
  protected abstract void lazyInit();
}

Eigene Komponenten werden dann von dieser Klasse abgeleitet. Dieser Umbau hat keine Veränderung des Markup zur Folge, da keinerlei Hilfskomponenten eingefügt wurden.

package de.wicketpraxis.web.blog.pages.questions.lazy;
 
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.model.Model;
 
public class TestPanel extends AbstractLazyPanel
{
  public TestPanel(String id)
  {
    super(id);
  }
 
  @Override
  protected void lazyInit()
  {
    add(new Label("label",Model.of("Label")));
    add(new SimplePanel("panel"));
  }
}

<wicket:panel>
  <span wicket:id="label"></span>
  <br>
  <wicket:container wicket:id="panel"></wicket:container>
</wicket:panel>

Wie man sieht, lässt sich die neuen Klasse sehr einfach als Ersatz für die Panel-Klasse benutzen. Vielleicht ist dieser Ansatz ausbaufähig, so dass man durch eine verspätete Initialisierung auch die Probleme rund um TransparentResolver umgehen kann.

Andere Beiträge

• 20. Januar 2010 -- Wicket – No TransparentResolver
• 7. März 2010 -- Wicket Heatmap – Ajax mit Parametern
• 3. März 2010 -- Wicket Extensions – Anpassungen am ModalWindow

So habe ich mich bisher gescheut, für Wicket entsprechende Templates in Eclipse zu Pflegen, weil ich dachte, dass sich der Aufwand nicht lohnt, weil man davon nicht ausreichend profitiert. Das war bis vor ein paar Tagen so. Als ich dann merkte, dass ich immer häufiger “wicket:id” tippen musste, fügte ich dafür ein passendes Template in Eclipse hinzu. Es funktionierte wie erwartet und ich konnte etwas flüssiger arbeiten. Schon am darauf folgenden Tag benutzte ich in einem anderen Projekt ein neuen Workspace. Als ich das erste mal wieder “wicket:id” schreiben wollte und nun auf die Unterstützung von Eclipse wartete, fiel mir auf, was mir fehlt: in dem Projekt waren die Wicket-Templates noch nicht eingebunden.

Damit man sich nicht selbst hinsetzen muss und diese Templates in Eclipse konfigurieren muss, hier die Datei zum download.

Andere Beiträge

• 27. Oktober 2009 -- Wicket Tipps: Markup
• 7. März 2010 -- Wicket Heatmap – Ajax mit Parametern
• 3. März 2010 -- Wicket Extensions – Anpassungen am ModalWindow

Der Unterschied zwischen einem normalen Request und einem Ajax-Request liegt darin, dass bei einem Ajax-Request nur Teile der Seite neu gerendert werden. Dazu müssen die Komponenten markiert werden, die in der Zielseite ersetzt werden sollen. Wenn es sich um einen normalen Request handelt, ist das nicht notwendig, da die ganze Seite und damit alle Komponenten neu gerendert werden.

Solange sich alle Aktionen auf die Änderungen von Daten beziehen, die dann entweder per Ajax neu dargestellt werden oder beim Darstellen der ganzen Seite automatisch angezeigt werden, besteht eigentlich kein Grund, mehr Aufwand in das Entkoppeln von Komponenten zu stecken. Doch oft ist das Ändern der Daten nicht trivial, der Code verteilt sich unwillkürlich auf verschiedene Komponenten.

Um dieser Entwicklung entgegen zu wirken, erweitert man das Event-Konzept einfach auch auf normale Requests. Im folgenden Code werden daher alle notwendigen Klassen aufgeführt. Die im Buch verwendeten Klassen können durch diese ersetzt werden.

package de.wicketpraxis.web.blog.pages.questions.events;
 
public interface EventListenerInterface
{
  public void notifyAjaxEvent(AbstractEvent event);
}

Das EventListenerInterface muss jede Komponente implementieren, dass auf Events reagieren muss.

package de.wicketpraxis.web.blog.pages.questions.events;
 
import org.apache.wicket.Component;
import org.apache.wicket.Page;
import org.apache.wicket.Component.IVisitor;
import org.apache.wicket.ajax.AjaxRequestTarget;
 
public class AbstractEvent
{
  Component _source;
  AjaxRequestTarget _requestTarget;
 
  protected AbstractEvent(Component source,AjaxRequestTarget requestTarget)
  {
    _source=source;
    _requestTarget=requestTarget;
  }
 
  public Component getSource()
  {
    return _source;
  }
 
  public void fire()
  {
    Page page = _source.getPage();
    if (page instanceof EventListenerInterface)
    {
      ((EventListenerInterface) page).notifyAjaxEvent(this);
    }
    page.visitChildren(EventListenerInterface.class, new AjaxEventVisitor(this));
  }
 
  public void update(Component component)
  {
    if (_requestTarget!=null) _requestTarget.addComponent(component);
  }
 
  protected static class AjaxEventVisitor implements IVisitor<Component>
  {
    AbstractEvent _event;
 
    protected AjaxEventVisitor(AbstractEvent event)
    {
      _event=event;
    }
 
    public Object component(Component component)
    {
      ((EventListenerInterface) component).notifyAjaxEvent(_event);
      return IVisitor.CONTINUE_TRAVERSAL;
    }
  }
}

Die Eventklasse wurde dahingehend erweitert, dass jetzt auch für die Seite geprüft wird, ob das EventListernerInterface implementiert wurde. Ob Ajax benutzt wurde oder nicht, wird in der update()-Methode überprüft, so dass man diese Prüfung nicht mehr selbst vornehmen muss.

package de.wicketpraxis.web.blog.pages.questions.events;
 
import org.apache.wicket.Component;
import org.apache.wicket.ajax.AjaxRequestTarget;
 
public class ChangeEvent extends AbstractEvent
{
  int _change;
 
  protected ChangeEvent(Component source, AjaxRequestTarget requestTarget, int change)
  {
    super(source, requestTarget);
 
    _change=change;
  }
 
  public int getChange()
  {
    return _change;
  }
}

Der ChangeEvent wurde abgeleitet und um eine Information erweitert. In der folgenden Komponente wird diese Information ausgewertet:

package de.wicketpraxis.web.blog.pages.questions.events;
 
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.IModel;
 
public class CounterPanel extends Panel implements EventListenerInterface
{
  IModel<Integer> _counter;
 
  public CounterPanel(String id,IModel<Integer> counter)
  {
    super(id);
 
    setOutputMarkupId(true);
 
    _counter=counter;
 
    add(new Label("counter",_counter));
  }
 
  public void notifyAjaxEvent(AbstractEvent event)
  {
    if (event instanceof ChangeEvent)
    {
      int change = ((ChangeEvent) event).getChange();
      Integer cur = _counter.getObject();
 
      info("Aktuell: "+cur+" Change: "+change);
 
      _counter.setObject(cur+change);
      event.update(this);
    }
  }
}

Man beachte, dass für die Komponente setOutputMarkupId() aufgerufen wird, da diese Komponente evtl. per Ajax aktualisiert werden kann.

<wicket:panel>
  <span wicket:id="counter"></span>
</wicket:panel>

Jetzt benötigen wir noch eine Komponente, die diesen Event auslöst:

package de.wicketpraxis.web.blog.pages.questions.events;
 
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.AjaxFallbackLink;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.IModel;
 
public class ActionPanel extends Panel
{
  public ActionPanel(String id,IModel<Integer> change)
  {
    super(id);
 
    AjaxFallbackLink<Integer> link = new AjaxFallbackLink<Integer>("link",change)
    {
      @Override
      public void onClick(AjaxRequestTarget target)
      {
        new ChangeEvent(ActionPanel.this,target,getModelObject()).fire();
      }
    };
    link.add(new Label("change",change));
    add(link);
  }
}

<wicket:panel>
  <a wicket:id="link"><span wicket:id="change"></span></a>
</wicket:panel>

Nachdem wir alle Komponten erstell habe, benutzen wir sie in einer Anwendung:

package de.wicketpraxis.web.blog.pages.questions.events;
 
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.model.Model;
 
public class EventPage extends WebPage
{
  public EventPage()
  {
    add(new EventFeedbackPanel("feedback"));
 
    add(new ActionPanel("changeAdd1",Model.of(1)));
    add(new ActionPanel("changeSub1",Model.of(-1)));
 
    add(new CounterPanel("counter",Model.of(5)));
  }
 
  static class EventFeedbackPanel extends FeedbackPanel implements EventListenerInterface
  {
    public EventFeedbackPanel(String id)
    {
      super(id);
 
      setOutputMarkupId(true);
    }
 
    public void notifyAjaxEvent(AbstractEvent event)
    {
      event.update(this);
    }
  }
}

Wie man sieht, habe ich auch ein FeedbackPanel erstellt, dass auf Events (und in diesem Fall jedes) reagiert.

<html>
  <head>
    <title>EventPage</title>
  </head>
  <body>
    <div wicket:id="feedback"></div>
 
    <wicket:container wicket:id="changeAdd1"></wicket:container>
    <wicket:container wicket:id="changeSub1"></wicket:container>
 
    <div wicket:id="counter"></div>
  </body>
</html>

Wenn Komponenten per Ajax aktualisiert werden müssen, funktioniert das nur, wenn es auch ein Html-Tag mit der passenden ID gibt, dass per Javascript gefunden und ersetzt werden kann. Daher muss man die Komponente dann an ein Html-Tag binden, die Einbettung über wicket:container funktioniert nicht.

Betätigt man nun einen der Links in der AktionPanel-Komponente, dann wird der Zähler in der CounterPanel-Komponenten angepasst und eine entsprechende Meldung im FeedbackPanel angezeigt. Wenn man nun das CounterPanel einfach ausbaut, passiert nichts. Das zeigt zum einen, dass die Komponenten wirklich unabhängig voneinander sind, zum anderen aber auch, welches Risiko man eingeht: es kann vorkommen, dass Events nicht verarbeitet werden.

Dieses Beispiel veranschaulicht, wie einfach man Komponenten entkoppeln kann. Doch dieses Beispiel ist nur eine einfache Anwendung. Wie weit man diese Vorgehensweise in der Praxis treiben kann, möchte ich in ein paar Sichtpunkten erwähnen:

• Anwendung der Möglichkeiten von Vererbung auf Events
• Prüfung, ob ein Event einen Empfänger erreicht hat
• Kaskadierung von Events (wenn Event A eintrifft, wird Event B ausgelöst)
• Mehr als ein Sender und mehr als einen Empfänger für Events
• Ein Event kann mit und ohne Ajax ausgelöst werden, ohne dass der Code auf Empfängerseite angepasst werden muss.

Ich hoffe, dass dient als Anregung oder Vorlage. Komplexen Oberflächen mit Wicket steht nun nichts mehr im Weg.

Andere Beiträge

• 16. Oktober 2009 -- Wicket Komponentenübersicht
• 7. März 2010 -- Wicket Heatmap – Ajax mit Parametern
• 3. März 2010 -- Wicket Extensions – Anpassungen am ModalWindow

Auch wenn es anders kommt, als man sich denkt, wage ich hier doch mal ein paar Vorhersagen. Manches davon ist offensichtlich und wird vermutlich schon deshalb nicht eintreten, Anderes ist frei erfunden und hat damit die besten Chancen, zum Volltreffer zu werden.

Nachdem 2009 eigentlich ein Scala-Jahr war, wird es auch 2010 in diesem Bereich interessant bleiben. Zu meiner Überraschung konnte allerdings auch Java durch den Scala-Hype profitieren. Einige fühlten sich wohl durch die Möglichkeiten von Scala entsprechend angestachelt, dass selbst für Dinge wie Scala Traits Implementierungen (z.B. java-mixins) für Java geschrieben wurden. Java ist zwar etwas angestaubt aber eben noch nicht tot. Und was Google mit GWT und Android alles auf Basis von Java anstellt, zeigt deutlich, dass da noch Platz für Innovationen ist. Das bedeutet, dass es auch 2010 nicht verkehrt ist, auf Java zu setzen.

Nachdem JSF 2.0 wie zu erwarten war, nicht alle Probleme, die JSF bis jetzt angesammelt hat, lösen wird, gehe ich davon aus, dass wie schon 2009 immer mehr Projekte auch mit Wicket realisiert werden. Da Wicket als Basis schon sehr ausgereift ist, wird sich der Zustrom an Entwicklern vermutlich eher auf Integrationsthemen auswirken: Web-Worker, Javascript-Frameworks und andere noch unbekannte Entwicklungen. Ich erwarte außerdem (unabhängig von meinem eigenen Teilprojekt auf wicketstuff.org) ein paar Standardvorlagen für Wicket-Projekte.

Nachdem Groovy in der neuesten Version alle Sprachfeatures hat, die für eine saubere Wicket-Integration notwendig sind, wird es auch in diesem Bereich interessant. Die Bedenken, die ich trage, richten sich vielmehr an die Plattform Groovy/Grails an sich. Es gibt Entwicklungen, die bei mir Bauchschmerzen hervorrufen (Grape – Dependency Management als Annotation auf einem Import – WTF)), die merkwürdig sind und auf die Frage “Warum?” vermutlich nur mit einem “Weil es geht.” beantwortet werden.

Alles in Allem, es bleibt und wird spannend. Ich wünsche allen (unabhängig von der technologischen Präferenz) ein gutes und erfolgreiches Jahr.

Andere Beiträge

• 12. September 2009 -- Entscheidungshilfe Webframework
• 11. Mai 2009 -- Die Ruhe vor dem Sturm
• 7. März 2010 -- Wicket Heatmap – Ajax mit Parametern

Ich machte mich also erneut auf die Suche und fand die Code-Zeile in der AjaxFallbackButton-Klasse. Ich war kurz davor ein paar Zeilen Code daraus abzuleiten und warf nur einen flüchtigen Code in die AjaxRequestTarget-Klasse, um festzustellen, das es das natürlich schon gibt.

AjaxRequestTarget target=AjaxRequestTarget.get();

So einfach geht das. So einfach, dass ich es fast übersehen hätte.

Andere Beiträge

• 7. März 2010 -- Wicket Heatmap – Ajax mit Parametern
• 3. März 2010 -- Wicket Extensions – Anpassungen am ModalWindow
• 11. Dezember 2009 -- Wicket Form Submit – mit und ohne Ajax