Skip to content

Wicket – Flexibilität mit Factories

Komplexe Komponenten entstehen in Wicket durch das zusammenfügen von einfacheren Komponenten. Dabei werden die verwendeten Komponenten direkt adressiert. Nach außen ist nicht sichtbar, wie sich eine Komponente zusammensetzt. Um von dieser Komponente eine leicht abgewandelte Form zu erstellen, kann man auf z.B. Vererbung zurückgreifen, Komponenten ausblenden, das Markup überschreiben. Je mehr Variationen nötig sind, desto komplizierter wird der Aufbau. Der Aufwand steigt erheblich an.

Einen Ausweg aus dieser Situation könnte die Verwendung von Factories liefern. Dazu benötigen wir ein sehr einfach gehaltenes Interface:

 Java(TM) 2 Platform Standard Edition 5.0 |  copy code |? 
1
package de.wicketpraxis.web.blog.pages.questions.factories;
2
 
3
import org.apache.wicket.Component;
4
 
5
public interface IComponentFactory<T extends Component>
6
{
7
  T newComponent(String id);
8
}

Eine einfach Implementierung, die immer ein Label mit einem bestimmten Text liefert, können wir wie folgt implementieren:

 Java(TM) 2 Platform Standard Edition 5.0 |  copy code |? 
01
package de.wicketpraxis.web.blog.pages.questions.factories;
02
 
03
import org.apache.wicket.markup.html.basic.Label;
04
import org.apache.wicket.model.IModel;
05
 
06
public class LabelFactory implements IComponentFactory<Label>
07
{
08
  IModel<?> _model;
09
 
10
  public LabelFactory(IModel<?> model)
11
  {
12
    _model = model;
13
  }
14
 
15
  public Label newComponent(String id)
16
  {
17
    return new Label(id,_model);
18
  }
19
}

Wir übergeben hierbei ein Model, das durch das Label angezeigt wird. Soll ein anderer Text angezeigt werden, muss man dafür eine neue Factory erstellen. Bis jetzt ist noch kein Vorteil dieser Lösung absehbar. Deshalb steigern wir etwas die Komplexität. Wir erstellen eine Factory, die einen Rahmen um eine Komponente ziehen kann. Dabei wird für die Darstellung das style-Attribut erweitert.

 Java(TM) 2 Platform Standard Edition 5.0 |  copy code |? 
01
package de.wicketpraxis.web.blog.pages.questions.factories;
02
 
03
import org.apache.wicket.AttributeModifier;
04
import org.apache.wicket.Component;
05
import org.apache.wicket.behavior.AttributeAppender;
06
import org.apache.wicket.markup.html.WebMarkupContainer;
07
import org.apache.wicket.markup.html.panel.Panel;
08
import org.apache.wicket.model.IModel;
09
 
10
public class BorderPanelFactory implements IComponentFactory<Panel>
11
{
12
  private final IComponentFactory<? extends Component> _content;
13
  private final IModel<String> _style;
14
 
15
  public BorderPanelFactory(IComponentFactory<? extends Component> content, IModel<String> style)
16
  {
17
    _content = content;
18
    _style = style;
19
  }
20
 
21
  public Panel newComponent(String id)
22
  {
23
    return new BorderPanel(id, _content, _style);
24
  }
25
 
26
  static class BorderPanel extends Panel
27
  {
28
    public BorderPanel(String id,IComponentFactory<? extends Component> content,IModel<String> style)
29
    {
30
      super(id);
31
 
32
      WebMarkupContainer border=new WebMarkupContainer("border");
33
      border.add(content.newComponent("content"));
34
      border.add(new AttributeAppender("style", true, style,";"));
35
      add(border);
36
    }
37
  }
38
}

Wir übergeben daher eine Factory, die Komponenten erzeugt und ein Model, dass die Styleattribute beinhaltet. In dem Panel, was innerhalb der Factory erzeugt wird, wir dann eine Komponente eingebunden (“content”), die aus der übergebenen Factory kommt. Wir benötigen noch eine passende Markup-Datei (BorderPanelFactory$BorderPanel.html):
 HTML |  copy code |? 
1
<wicket:panel>
2
  <div wicket:id="border" style="padding: 8px">
3
    <wicket:container wicket:id="content"></wicket:container>
4
  </div>
5
</wicket:panel>

Um zu demonstrieren, welche Flexibilität man mit diesen wenigen Klassen bereits erreicht hat, verwenden wir beide Factories in einem Beispiel:

 Java(TM) 2 Platform Standard Edition 5.0 |  copy code |? 
01
package de.wicketpraxis.web.blog.pages.questions.factories;
02
 
03
import org.apache.wicket.markup.html.WebPage;
04
import org.apache.wicket.model.Model;
05
 
06
public class ComponentFactoryPage extends WebPage
07
{
08
  public ComponentFactoryPage()
09
  {
10
    Model<String> redBorderStyle = Model.of("border:1px solid red; background-color: #fff0f0;");
11
    Model<String> greenBorderStyle = Model.of("border:1px solid green; background-color: #f0fff0;");
12
    Model<String> blueBorderStyle = Model.of("border:1px solid blue; background-color: #f0f0ff;");
13
 
14
    LabelFactory haveFunLabelFactory = new LabelFactory(Model.of("Have Fun"));
15
 
16
    BorderPanelFactory redBorderHasFunFactory = new BorderPanelFactory(haveFunLabelFactory,redBorderStyle);
17
    BorderPanelFactory greenBorderWrapsRedFactory = new BorderPanelFactory(redBorderHasFunFactory,greenBorderStyle);
18
    BorderPanelFactory blueBorderWrapsAllFactory = new BorderPanelFactory(greenBorderWrapsRedFactory,blueBorderStyle);
19
 
20
    add(blueBorderWrapsAllFactory.newComponent("element"));
21
  }
22
}

Wir erstellen 3 Modelle mit unterschiedlichen Werten für das style-Attribut. Um etwas Text anzuzeigen benutzen wir die LabelFactory. Danach werden drei BorderPanelFactory-Instanzen erzeugt, die eine andere Factory “umwickelt”. Zum Schluss wird ein Element erzeugt und in der Seite benutzt. Das Markup ist entsprechend einfach:

 HTML |  copy code |? 
1
<html>
2
  <head>
3
    <title>ComponentFactory Page</title>
4
  </head>
5
  <body>
6
    <wicket:container wicket:id="element"></wicket:container>
7
  </body>
8
</html>

Das Ergebnis sieht dann wie folgt aus:

Um zu zeigen, wie schnell die Möglichkeiten wachsen, die man mit diesem Ansatz abdecken kann, erstellen wir eine weitere Factory. In diesem Fall möchten wir zwei Elemente nebeneinander dargestellen:

 Java(TM) 2 Platform Standard Edition 5.0 |  copy code |? 
01
package de.wicketpraxis.web.blog.pages.questions.factories;
02
 
03
import org.apache.wicket.Component;
04
import org.apache.wicket.markup.html.panel.Panel;
05
 
06
public class TwoInARowFactory implements IComponentFactory<Component>
07
{
08
  private final IComponentFactory<? extends Component> _left;
09
  private final IComponentFactory<? extends Component> _right;
10
 
11
  public TwoInARowFactory(IComponentFactory<? extends Component> left, IComponentFactory<? extends Component> right)
12
  {
13
    _left = left;
14
    _right = right;
15
  }
16
 
17
  public Component newComponent(String id)
18
  {
19
    return new ContainerPanel(id, _left, _right);
20
  }
21
 
22
  static class ContainerPanel extends Panel
23
  {
24
    public ContainerPanel(String id,IComponentFactory<? extends Component> left, IComponentFactory<? extends Component> right)
25
    {
26
      super(id);
27
 
28
      add(left.newComponent("left"));
29
      add(right.newComponent("right"));
30
    }
31
  }
32
}

Es werden daher zwei Factories übergeben, die dann für die Erzeugung des linken und des rechten Elements zuständig sind. Das Markup benutzt der Einfachheit halber Html-Tabellen für die Anordnung:
 HTML |  copy code |? 
1
<wicket:panel>
2
  <table>
3
    <tr>
4
      <td><wicket:container wicket:id="left"></wicket:container></td>
5
      <td><wicket:container wicket:id="right"></wicket:container></td>
6
    </tr>
7
  </table>
8
</wicket:panel>

Unsere Seitenklasse ergänzen wir entsprechend:

 Java(TM) 2 Platform Standard Edition 5.0 |  copy code |? 
01
package de.wicketpraxis.web.blog.pages.questions.factories;
02
 
03
import org.apache.wicket.markup.html.WebPage;
04
import org.apache.wicket.model.Model;
05
 
06
public class ComponentFactoryPage extends WebPage
07
{
08
  public ComponentFactoryPage()
09
  {
10
    Model<String> redBorderStyle = Model.of("border:1px solid red; background-color: #fff0f0;");
11
    Model<String> greenBorderStyle = Model.of("border:1px solid green; background-color: #f0fff0;");
12
    Model<String> blueBorderStyle = Model.of("border:1px solid blue; background-color: #f0f0ff;");
13
 
14
    LabelFactory haveFunLabelFactory = new LabelFactory(Model.of("Have Fun"));
15
 
16
    BorderPanelFactory redBorderHasFunFactory = new BorderPanelFactory(haveFunLabelFactory,redBorderStyle);
17
    BorderPanelFactory greenBorderWrapsRedFactory = new BorderPanelFactory(redBorderHasFunFactory,greenBorderStyle);
18
    BorderPanelFactory blueBorderWrapsAllFactory = new BorderPanelFactory(greenBorderWrapsRedFactory,blueBorderStyle);
19
 
20
    add(blueBorderWrapsAllFactory.newComponent("element"));
21
 
22
    TwoInARowFactory twoInARowFactory = new TwoInARowFactory(redBorderHasFunFactory, greenBorderWrapsRedFactory);
23
 
24
    add(twoInARowFactory.newComponent("two"));
25
  }
26
}

Das Markup muss ebenfalls angepasst werden:

 HTML |  copy code |? 
1
<html>
2
  <head>
3
    <title>ComponentFactory Page</title>
4
  </head>
5
  <body>
6
    <wicket:container wicket:id="element"></wicket:container>
7
    <wicket:container wicket:id="two"></wicket:container>
8
  </body>
9
</html>

Das Ergebnis kann sich sehen lassen:

Wie man an diesem Beispiel sehr gut erkennen kann, liegt in diesem Ansatz sehr viel Potential, gerade wenn die Anforderungen an die Flexibilität sehr hoch sind. In Projekten, die eine hohe Flexibilität erforderten hat sich dieses System bereits erfolgreich bewährt. Dabei kommt eine Kombinationen aus dem “klassischen” und dem Factory-Ansatz zum Einsatz, wodurch sich die meisten Anforderungen wesentlich besser abdecken lassen.

Gibt es noch ganz andere Lösungsstrategien?

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Posted in Refactoring, Wicket.

Tagged with , , .

2 comments

By michael – 15. Juli 2010

Wicket Eclipse Plugin – qwickie

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.

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Posted in Allgemein, Technologie, Wicket, eclipse.

Tagged with , , .

No comments

By michael – 14. April 2010

Wicket – AbstractEvent Update

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.

 Java(TM) 2 Platform Standard Edition 5.0 |  copy code |? 
1
package de.wicketpraxis.web.blog.pages.questions.events;
2
 
3
public interface EventListenerInterface
4
{
5
  public void notifyEvent(AbstractEvent event);
6
}
7


Die Methode lautet nun notifyEvent statt notifyAjaxEvent.


 Java(TM) 2 Platform Standard Edition 5.0 |  copy code |? 
01
package de.wicketpraxis.web.blog.pages.questions.events;
02
 
03
import org.apache.wicket.Component;
04
import org.apache.wicket.Component.IVisitor;
05
 
06
public class NotifyVisitor implements IVisitor<Component> 
07
{
08
  private final AbstractEvent _event;
09
 
10
  public NotifyVisitor(final AbstractEvent event)
11
  {
12
    _event = event;
13
  }
14
 
15
  public Object component(final Component component)
16
  {
17
    if (component instanceof EventListenerInterface) 
18
    {
19
      ((EventListenerInterface) component).notifyEvent(_event);
20
    }
21
    return IVisitor.CONTINUE_TRAVERSAL;
22
  }
23
}


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


 Java(TM) 2 Platform Standard Edition 5.0 |  copy code |? 
01
package de.wicketpraxis.web.blog.pages.questions.events;
02
 
03
import org.apache.wicket.Application;
04
import org.apache.wicket.Component;
05
import org.apache.wicket.Page;
06
import org.apache.wicket.Session;
07
import org.apache.wicket.Component.IVisitor;
08
import org.apache.wicket.ajax.AjaxRequestTarget;
09
 
10
public class AbstractEvent
11
{
12
  private final Component _source;
13
  protected final AjaxRequestTarget _target;
14
 
15
  public AbstractEvent(final Component source, AjaxRequestTarget target)
16
  {
17
    _source = source;
18
    _target = target;
19
  }
20
 
21
  public AbstractEvent(final Component source)
22
  {
23
    this(source,null);
24
  }
25
 
26
  public Component getSource()
27
  {
28
    return _source;
29
  }
30
 
31
  /**
32
   * notify Application, Session, Page and Components
33
   */
34
  public final void fire()
35
  {
36
    Page page=getSource().getPage();
37
 
38
    Application application=page.getApplication();
39
    if (application instanceof EventListenerInterface)
40
    {
41
      ((EventListenerInterface) application).notifyEvent(this);
42
    }
43
    Session session=page.getSession();
44
    if (session instanceof EventListenerInterface)
45
    {
46
      ((EventListenerInterface) session).notifyEvent(this);
47
    }
48
    if (page instanceof EventListenerInterface)
49
    {
50
      ((EventListenerInterface) page).notifyEvent(this);
51
    }
52
    page.visitChildren(EventListenerInterface.class, getVisitor());
53
    onAfterFire();
54
  }
55
 
56
  protected  void onAfterFire()
57
  {
58
 
59
  }
60
 
61
  protected IVisitor<Component> getVisitor()
62
  {
63
    return new NotifyVisitor(this);
64
  }
65
 
66
  public AjaxRequestTarget getTarget()
67
  {
68
    return _target;
69
  }
70
 
71
  public boolean isAjax()
72
  {
73
    return _target!=null;
74
  }
75
 
76
  public final void update(Component component)
77
  {
78
    if (_target!=null)
79
    {
80
      _target.addComponent(component);
81
    }
82
  }
83
 
84
}


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.


		




Share and Enjoy:



    
	
  • Digg
    • 
	
  • Sphinn
    • 
	
  • del.icio.us
    • 
	
  • Facebook
    • 
	
  • Mixx
    • 
	
  • Google Bookmarks
    • 




		

	

	
	
Posted in Wicket.

	
Tagged with , , .

	
1 comment


	

		
			By admin		
		– 9. April 2010
	


	

	

	
	



	
	
Wicket Heatmap – Ajax mit Parametern

	
	


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


 Java(TM) 2 Platform Standard Edition 5.0 |  copy code |? 
001
package de.wicketpraxis.web.blog.pages.questions.ajax.parameter;
002
 
003
import java.util.HashMap;
004
import java.util.Map;
005
 
006
import org.apache.wicket.Request;
007
import org.apache.wicket.RequestCycle;
008
import org.apache.wicket.ResourceReference;
009
import org.apache.wicket.ajax.AbstractDefaultAjaxBehavior;
010
import org.apache.wicket.ajax.AjaxRequestTarget;
011
import org.apache.wicket.markup.html.IHeaderResponse;
012
import org.apache.wicket.util.time.Duration;
013
 
014
public abstract class AbstractParameterizedDefaultAjaxBehavior extends AbstractDefaultAjaxBehavior
015
{
016
  static int sec=0;
017
 
018
  private Duration _throttleDelay;
019
 
020
  @Override
021
  public void renderHead(IHeaderResponse response)
022
  {
023
    super.renderHead(response);
024
    response.renderJavascriptReference(new ResourceReference(AbstractParameterizedDefaultAjaxBehavior.class,"AbstractParameterizedDefaultAjaxBehavior.js"));
025
  }
026
 
027
  @Override
028
  protected void respond(AjaxRequestTarget target)
029
  {
030
    Request request = RequestCycle.get().getRequest();
031
 
032
    Map<String,Object> map=new HashMap<String, Object>();
033
    Parameter<?>[] parameter = getParameter();
034
    for (Parameter<?> p : parameter)
035
    {
036
      String svalue = request.getParameter(p.getName());
037
      if (svalue!=null)
038
      {
039
        Object value=getComponent().getConverter(p.getType()).convertToObject(svalue, getComponent().getLocale());
040
        map.put(p.getName(), value);
041
      }
042
    }
043
 
044
    respond(target, new ParameterMap(map));
045
  }
046
 
047
  @Override
048
  public CharSequence getCallbackUrl(boolean onlyTargetActivePage)
049
  {
050
    StringBuilder sb=new StringBuilder();
051
    sb.append(super.getCallbackUrl(onlyTargetActivePage));
052
 
053
    Parameter<?>[] parameter = getParameter();
054
    for (Parameter<?> p : parameter)
055
    {
056
      sb.append("&").append(p.getName()).append("='+").append(p.getJavascript()).append("+'");
057
    }
058
 
059
    return sb.toString();
060
  }
061
 
062
  @Override
063
  protected final CharSequence getCallbackScript()
064
  {
065
    if (_throttleDelay!=null)
066
    {
067
      return throttleScript(super.getCallbackScript(),"thw"+(sec++),_throttleDelay);
068
    }
069
    return super.getCallbackScript();
070
  }
071
 
072
  protected static class Parameter<T>
073
  {
074
    String _name;
075
    String _javascript;
076
    Class<T> _type;
077
 
078
    protected Parameter(String name,Class<T> type,String javascript)
079
    {
080
      _name=name;
081
      _type=type;
082
      _javascript=javascript;
083
    }
084
 
085
    protected String getName()
086
    {
087
      return _name;
088
    }
089
    protected String getJavascript()
090
    {
091
      return _javascript;
092
    }
093
    protected Class<T> getType()
094
    {
095
      return _type;
096
    }
097
  }
098
 
099
  protected static <T> Parameter<T> of(String name,Class<T> type,String javascript)
100
  {
101
    return new Parameter<T>(name, type, javascript);
102
  }
103
 
104
  protected static class ParameterMap
105
  {
106
    Map<String, Object> _map;
107
 
108
    protected ParameterMap(Map<String, Object> map)
109
    {
110
      _map=map;
111
    }
112
 
113
    public <T> T getValue(Parameter<T> parameter)
114
    {
115
      return (T) _map.get(parameter.getName());
116
    }
117
  }
118
 
119
  public final AbstractParameterizedDefaultAjaxBehavior setThrottleDelay(Duration throttleDelay)
120
  {
121
    _throttleDelay=throttleDelay;
122
    return this;
123
  }
124
 
125
  protected abstract void respond(AjaxRequestTarget target,ParameterMap parameterMap);
126
 
127
  protected abstract Parameter<?>[] getParameter();
128
 
129
}


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.


 Javascript |  copy code |? 
01
Callback = {
02
  create: function(oldCallback,newCallback)
03
  {
04
    return function(a,b,c,d,e,f)
05
    {
06
      if (oldCallback) 
07
      {
08
        oldCallback(a,b,c,d,e,f);
09
      }
10
      newCallback(a,b,c,d,e,f);
11
    }
12
  },
13
};


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.


 Java(TM) 2 Platform Standard Edition 5.0 |  copy code |? 
01
package de.wicketpraxis.web.blog.pages.questions.ajax.parameter;
02
 
03
import org.apache.wicket.ResourceReference;
04
 
05
public class WicketWindowJavascript
06
{
07
  private WicketWindowJavascript()
08
  {
09
  }
10
 
11
  public static final ResourceReference RESOURCE=new ResourceReference(WicketWindowJavascript.class,"WicketWindowJavascript.js");
12
}


 Javascript |  copy code |? 
01
// aus der Datei modal.js zur Klasse ModalWindow
02
 
03
if (typeof(Wicket.Window) == "undefined") {
04
  Wicket.Window = { };
05
}
06
 
07
/**
08
 * Returns the height of visible area.
09
 */
10
Wicket.Window.getViewportHeight = function() {
11
  if (window.innerHeight != window.undefined) 
12
    return window.innerHeight;
13
 
14
  if (document.compatMode == 'CSS1Compat') 
15
    return document.documentElement.clientHeight;
16
 
17
  if (document.body) 
18
    return document.body.clientHeight;
19
 
20
  return window.undefined; 
21
}
22
 
23
/**
24
 * Returns the width of visible area.
25
 */
26
Wicket.Window.getViewportWidth =  function() {
27
  if (window.innerWidth != window.undefined) 
28
    return window.innerWidth;
29
 
30
  if (document.compatMode == 'CSS1Compat') 
31
    return document.documentElement.clientWidth; 
32
 
33
  if (document.body) 
34
    return document.body.clientWidth;
35
 
36
  return window.undefined;
37
}
38
 
39
/**
40
 * Returns the horizontal scroll offset
41
 */
42
Wicket.Window.getScrollX = function() {
43
  var iebody = (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body  
44
  return document.all? iebody.scrollLeft : pageXOffset
45
}
46
 
47
/**
48
 * Returns the vertical scroll offset
49
 */
50
Wicket.Window.getScrollY = function() {
51
  var iebody = (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body  
52
  return document.all? iebody.scrollTop : pageYOffset
53
}
54
 
55
 
56
/**
57
 * Returns element offset
58
 */
59
Wicket.Window.getXYOffset = function(obj)
60
{
61
  var curleft = 0;
62
  var curtop = 0;
63
  if (obj.offsetParent)
64
  {
65
    while (obj.offsetParent)
66
    {
67
      curleft += obj.offsetLeft;
68
      curtop += obj.offsetTop;
69
      obj = obj.offsetParent;
70
    }
71
  }
72
  else
73
  {
74
    if (obj.x)
75
    {
76
      curleft += obj.x;
77
    }
78
    if (obj.y)
79
    {
80
      curtop += obj.y;
81
    }
82
  }
83
 
84
  if (Wicket.Browser.isIE())
85
  {
86
    bodyElement=document.getElementsByTagName('body')[0];
87
    // In IE there's a default margin in the page body. If margin's not defined,
88
    // use defaults
89
    var marginLeftExplorer  = parseInt(bodyElement.style.marginLeft);
90
    var marginTopExplorer   = parseInt(bodyElement.style.marginTop);
91
    /* assume default 10px/15px margin in explorer */
92
    if (isNaN(marginLeftExplorer)) {marginLeftExplorer=10;}
93
    if (isNaN(marginTopExplorer)) {marginTopExplorer=15;}
94
    curleft=curleft+marginLeftExplorer;
95
    curtop=curtop+marginTopExplorer;
96
  }
97
 
98
  return [curleft,curtop];
99
}


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.


 Java(TM) 2 Platform Standard Edition 5.0 |  copy code |? 
01
package de.wicketpraxis.web.blog.pages.questions.ajax.parameter;
02
 
03
import org.apache.wicket.ResourceReference;
04
import org.apache.wicket.ajax.AjaxRequestTarget;
05
import org.apache.wicket.markup.html.IHeaderResponse;
06
import org.apache.wicket.util.time.Duration;
07
 
08
public abstract class WindowResizeBehavior extends AbstractParameterizedDefaultAjaxBehavior
09
{
10
  static final Parameter<Integer> WIDTH=of("width", Integer.class, "Wicket.Window.getViewportWidth()");
11
  static final Parameter<Integer> HEIGHT=of("height", Integer.class, "Wicket.Window.getViewportHeight()");
12
 
13
  @Override
14
  public void renderHead(IHeaderResponse response)
15
  {
16
    super.renderHead(response);
17
    response.renderJavascriptReference(WicketWindowJavascript.RESOURCE);
18
    response.renderOnDomReadyJavascript(getJavascript());
19
    response.renderOnDomReadyJavascript(getCallbackScript().toString());
20
  }
21
 
22
  protected final String getJavascript()
23
  {
24
    return "window.onresize = Callback.create(window.onresize,function () {"+getCallbackScript()+"});";
25
  }
26
 
27
  @Override
28
  protected final Parameter<?>[] getParameter()
29
  {
30
    return new Parameter<?>[]{ WIDTH,HEIGHT};
31
  }
32
 
33
  @Override
34
  protected void respond(AjaxRequestTarget target, ParameterMap parameterMap)
35
  {
36
    onResize(target, parameterMap.getValue(WIDTH), parameterMap.getValue(HEIGHT));    
37
  }
38
 
39
  protected abstract void onResize(AjaxRequestTarget target, int width, int height);
40
}


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


 Java(TM) 2 Platform Standard Edition 5.0 |  copy code |? 
01
package de.wicketpraxis.web.blog.pages.questions.ajax.parameter;
02
 
03
import org.apache.wicket.ResourceReference;
04
import org.apache.wicket.ajax.AjaxRequestTarget;
05
import org.apache.wicket.markup.html.IHeaderResponse;
06
 
07
import de.wicketpraxis.web.blog.pages.questions.ajax.parameter.AbstractParameterizedDefaultAjaxBehavior.Parameter;
08
 
09
public abstract class ElementOffsetBehavior extends AbstractParameterizedDefaultAjaxBehavior
10
{
11
  static final Parameter<Integer> X_OFFSET=of("xOffset", Integer.class, "xOffset");
12
  static final Parameter<Integer> Y_OFFSET=of("yOffset", Integer.class, "yOffset");
13
 
14
  private String _contentId;
15
 
16
  @Override
17
  public void renderHead(IHeaderResponse response)
18
  {
19
    super.renderHead(response);
20
    response.renderJavascriptReference(WicketWindowJavascript.RESOURCE);
21
    response.renderJavascriptReference(new ResourceReference(ElementOffsetBehavior.class,"ElementOffsetBehavior.js"));
22
    response.renderOnDomReadyJavascript(getJavascript());
23
  }
24
 
25
  public ElementOffsetBehavior()
26
  {
27
 
28
  }
29
 
30
  public ElementOffsetBehavior(String contentId)
31
  {
32
    _contentId=contentId;
33
  }
34
 
35
  protected final String getJavascript()
36
  {
37
    if (_contentId!=null) return "ElementOffsetBehavoir.init(function (xOffset,yOffset) {"+getCallbackScript()+"},'"+_contentId+"');";
38
    return "ElementOffsetBehavoir.init(function (xOffset,yOffset) {"+getCallbackScript()+"});";
39
  }
40
 
41
  @Override
42
  protected final Parameter<?>[] getParameter()
43
  {
44
    return new Parameter<?>[]{ X_OFFSET,Y_OFFSET};
45
  }
46
 
47
  @Override
48
  protected void respond(AjaxRequestTarget target, ParameterMap parameterMap)
49
  {
50
    onOffset(target, parameterMap.getValue(X_OFFSET), parameterMap.getValue(Y_OFFSET));   
51
  }
52
 
53
  protected abstract void onOffset(AjaxRequestTarget target, int xOffset, int yOffset);
54
}


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


 Javascript |  copy code |? 
01
ElementOffsetBehavoir =
02
{
03
  init : function(callback, contentId)
04
  {
05
    function Listener(callback, contentId)
06
    {
07
      this.xOffset = 0;
08
      this.yOffset = 0;
09
      this.firstElement = null;
10
 
11
      // function(xOffset,yOffset)
12
      this.onOffsetChanged = callback;
13
 
14
      this.updateOffsets = function()
15
      {
16
        var offsets = Wicket.Window.getXYOffset(this.firstElement);
17
        this.xOffset = offsets[0];
18
        this.yOffset = offsets[1];
19
        this.onOffsetChanged(this.xOffset, this.yOffset);
20
      };
21
 
22
      var bodyElement = document.getElementsByTagName('body')[0];
23
      this.firstElement = bodyElement.childNodes[1];
24
      if (contentId != null)
25
      {
26
        this.firstElement = document.getElementById(contentId);
27
      }
28
    }
29
 
30
    var listener = new Listener(callback, contentId);
31
    listener.updateOffsets();
32
    window.onresize = Callback.create(window.onresize, function()
33
    {
34
      listener.updateOffsets();
35
    });
36
  }
37
}


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.


 Java(TM) 2 Platform Standard Edition 5.0 |  copy code |? 
01
package de.wicketpraxis.web.blog.pages.questions.ajax.parameter;
02
 
03
import org.apache.wicket.Request;
04
import org.apache.wicket.ResourceReference;
05
import org.apache.wicket.ajax.AjaxRequestTarget;
06
import org.apache.wicket.markup.html.IHeaderResponse;
07
 
08
public abstract class PageMouseClickBehavior extends AbstractParameterizedDefaultAjaxBehavior
09
{
10
  static final Parameter<Integer> MOUSE_X=of("x", Integer.class, "x");
11
  static final Parameter<Integer> MOUSE_Y=of("y", Integer.class, "y");
12
 
13
  String _contentId;
14
 
15
  public PageMouseClickBehavior()
16
  {
17
  }
18
 
19
  public PageMouseClickBehavior(String contentId)
20
  {
21
    _contentId=contentId;
22
  }
23
 
24
  @Override
25
  public void renderHead(IHeaderResponse response)
26
  {
27
    super.renderHead(response);
28
 
29
    response.renderJavascriptReference(WicketWindowJavascript.RESOURCE);
30
    response.renderJavascriptReference(new ResourceReference(PageMouseClickBehavior.class,"PageMouseClickBehavior.js"));
31
    response.renderOnDomReadyJavascript(getJavascript());
32
  }
33
 
34
  protected String getJavascript()
35
  {
36
    if (_contentId!=null) return "PageMouseClickBehavoir.init(function (x,y,xOffset,yOffset) {"+getCallbackScript()+"},'"+_contentId+"');";
37
    return "PageMouseClickBehavoir.init(function (x,y,xOffset,yOffset) {"+getCallbackScript()+"});";
38
  }
39
 
40
  @Override
41
  protected Parameter<?>[] getParameter()
42
  {
43
    return new Parameter<?>[] { MOUSE_X, MOUSE_Y };
44
  }
45
 
46
  @Override
47
  protected void respond(AjaxRequestTarget target, ParameterMap map)
48
  {
49
    onClick(target, map.getValue(MOUSE_X), map.getValue(MOUSE_Y));    
50
  }
51
 
52
  protected abstract void onClick(AjaxRequestTarget target, int x, int y);
53
}


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


 Javascript |  copy code |? 
01
PageMouseClickBehavoir = 
02
{
03
  init: function(callback,contentId)
04
  {
05
    function Listener(callback,contentId)
06
    {
07
      this.xOffset=0;
08
      this.yOffset=0;
09
      this.firstElement=null;
10
 
11
      // function(x,y)
12
      this.onMouseEvent=callback;
13
 
14
      this.mouseEvent= function(e)
15
      {
16
        tempX=0;
17
        tempY=0;
18
 
19
        if (Wicket.Browser.isIE() || Wicket.Browser.isGecko())
20
        {
21
          tempX = e.clientX + Wicket.Window.getScrollX();
22
          tempY = e.clientY + Wicket.Window.getScrollY();
23
        }
24
        else
25
        {
26
          tempX = e.pageX
27
          tempY = e.pageY
28
        }
29
        tempX-=this.xOffset;
30
        tempY-=this.yOffset;
31
        this.onMouseEvent(tempX,tempY);
32
        return true;
33
      };
34
 
35
      this.updateOffsets=function()
36
      {
37
        var offsets=Wicket.Window.getXYOffset(this.firstElement);
38
        this.xOffset=offsets[0];
39
        this.yOffset=offsets[1];
40
      };
41
 
42
      var bodyElement=document.getElementsByTagName('body')[0];
43
      this.firstElement=bodyElement.childNodes[1];
44
      if (contentId!=null)
45
      {
46
        this.firstElement=document.getElementById(contentId);
47
      }
48
 
49
      this.updateOffsets();
50
    }
51
 
52
 
53
    var listener=new Listener(callback,contentId);
54
 
55
    document.onmousedown=Callback.create(document.onmousedown,function(e)
56
    {
57
      listener.mouseEvent(e)
58
    });
59
    window.onresize=Callback.create(window.onresize,function()
60
    {
61
      listener.updateOffsets();
62
    });
63
  },
64
}
65


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.


 Java(TM) 2 Platform Standard Edition 5.0 |  copy code |? 
001
package de.wicketpraxis.web.blog.pages.questions.ajax.parameter;
002
 
003
import java.awt.AlphaComposite;
004
import java.awt.BasicStroke;
005
import java.awt.Color;
006
import java.awt.Composite;
007
import java.awt.Graphics2D;
008
import java.awt.RenderingHints;
009
import java.io.Serializable;
010
import java.util.ArrayList;
011
import java.util.List;
012
 
013
import org.apache.wicket.ajax.AjaxRequestTarget;
014
import org.apache.wicket.markup.html.WebMarkupContainer;
015
import org.apache.wicket.markup.html.WebPage;
016
import org.apache.wicket.markup.html.image.Image;
017
import org.apache.wicket.markup.html.image.NonCachingImage;
018
import org.apache.wicket.markup.html.image.resource.DynamicImageResource;
019
import org.apache.wicket.markup.html.image.resource.RenderedDynamicImageResource;
020
import org.apache.wicket.markup.html.panel.FeedbackPanel;
021
import org.apache.wicket.protocol.http.WebResponse;
022
import org.apache.wicket.util.time.Duration;
023
 
024
public class HeatMapPage extends WebPage
025
{
026
  List<Pos> _points=new ArrayList<Pos>();
027
  int _xOffset=0;
028
  int _yOffset=0;
029
 
030
  public HeatMapPage()
031
  {
032
    final FeedbackPanel feedbackPanel = new FeedbackPanel("feedback");
033
    feedbackPanel.setOutputMarkupId(true);
034
    add(feedbackPanel);
035
 
036
    final WebMarkupContainer box=new WebMarkupContainer("box");
037
    final ClickMap imageResource = new ClickMap(100, 100);
038
    final Image image = new NonCachingImage("map",imageResource);
039
    box.setOutputMarkupId(true);
040
    box.add(image);
041
    add(box);
042
 
043
    add(new ElementOffsetBehavior("#content")
044
    {
045
      @Override
046
      protected void onOffset(AjaxRequestTarget target, int xOffset, int yOffset)
047
      {
048
        info("Offset: "+xOffset+","+yOffset);
049
        _xOffset=xOffset;
050
        _yOffset=yOffset;
051
        imageResource.invalidate();
052
        target.addComponent(feedbackPanel);
053
        target.addComponent(box);
054
      }
055
    }.setThrottleDelay(Duration.milliseconds(250)));
056
 
057
    add(new PageMouseClickBehavior("#content")
058
    {
059
      @Override
060
      protected void onClick(AjaxRequestTarget target, int x, int y)
061
      {
062
        info("Clicked: "+x+","+y);
063
        _points.add(new Pos(x,y));
064
        imageResource.invalidate();
065
        target.addComponent(box);
066
        target.addComponent(feedbackPanel);
067
      }
068
    }.setThrottleDelay(Duration.milliseconds(50)));
069
 
070
    add(new WindowResizeBehavior()
071
    {
072
      @Override
073
      protected void onResize(AjaxRequestTarget target, int width, int height)
074
      {
075
        info("Size changed: "+width+","+height);
076
        imageResource.setWidth(width);
077
        imageResource.setHeight(height);
078
        imageResource.invalidate();
079
 
080
        target.addComponent(feedbackPanel);
081
        target.addComponent(box);
082
      }
083
    }.setThrottleDelay(Duration.milliseconds(250)));
084
 
085
  }
086
 
087
  class ClickMap extends RenderedDynamicImageResource
088
  {
089
    public ClickMap(int width, int height)
090
    {
091
      super(width, height,"jpg");
092
      setCacheable(false);
093
    }
094
 
095
    @Override
096
    protected boolean render(Graphics2D graphics)
097
    {
098
      graphics.setBackground(new Color(255,255,255));
099
      graphics.setColor(new Color(0,0,0,50));
100
      graphics.clearRect(0, 0, getWidth(), getHeight());
101
 
102
      graphics.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
103
 
104
      for (Pos p : _points)
105
      {
106
        graphics.fillArc(_xOffset+p.getX()-5, _yOffset+p.getY()-5, 9, 9, 0, 360);
107
      }
108
      return true;
109
    }
110
  }
111
 
112
  static class Pos implements Serializable
113
  {
114
    int _x;
115
    int _y;
116
 
117
    public Pos(int x, int y)
118
    {
119
      super();
120
      _x = x;
121
      _y = y;
122
    }
123
 
124
    public int getX()
125
    {
126
      return _x;
127
    }
128
 
129
    public int getY()
130
    {
131
      return _y;
132
    }
133
  }
134
}


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


 HTML |  copy code |? 
01
<html>
02
  <head>
03
    <title>Heatmap Page</title>
04
  </head>
05
  <body>
06
    <div id="#content" style="width:800px; margin:auto; border:1px solid #888;">
07
      <div wicket:id="feedback"></div>
08
    </div>
09
    <div wicket:id="box" style="z-index: -1; position: absolute; top: 0px;left: 0px;">
10
      <img wicket:id="map">
11
    </div>
12
  </body>
13
</html>


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


wicket-heatmap-ajax


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


		




Share and Enjoy:



    
	
  • Digg
    • 
	
  • Sphinn
    • 
	
  • del.icio.us
    • 
	
  • Facebook
    • 
	
  • Mixx
    • 
	
  • Google Bookmarks
    • 




		

	

	
	
Posted in Wicket.

	
Tagged with , , , .

	
2 comments


	

		
			By michael		
		– 7. März 2010
	


	

	

	
	



	
	
Wicket Extensions – Anpassungen am ModalWindow

	
	


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.


 Java(TM) 2 Platform Standard Edition 5.0 |  copy code |? 
01
package de.wicketpraxis.web.blog.pages.questions.ajax.modal;
02
 
03
import org.apache.wicket.ajax.AjaxRequestTarget;
04
import org.apache.wicket.ajax.markup.html.AjaxLink;
05
import org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow;
06
import org.apache.wicket.markup.html.panel.Panel;
07
 
08
public abstract class AbstractModalClosePanel extends Panel
09
{
10
  public AbstractModalClosePanel(ModalWindow modalWindow)
11
  {
12
    super(modalWindow.getContentId());
13
 
14
    add(new AjaxLink<Void>("link")
15
    {
16
      @Override
17
      public void onClick(AjaxRequestTarget target)
18
      {
19
        AbstractModalClosePanel.this.onClick(target);
20
      }
21
    });
22
  }
23
 
24
  public abstract void onClick(AjaxRequestTarget target);
25
}


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:


 HTML |  copy code |? 
1
<wicket:panel>
2
  <div>
3
    Nothing to hide:)
4
    <a wicket:id="link">Link</a>
5
  </div>
6
</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:


frame-custom-1-alphaframe-custom-1-ieframe-custom-2-alphaframe-custom-2-ie


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.


 CSS |  copy code |? 
01
div.wicket-modal div.w_content_3
02
{
03
  border:0px;
04
}
05
 
06
div.wicket-modal div.w_caption
07
{
08
  background-color: inherit;
09
}
10
 
11
div.wicket-modal a.w_close {  
12
  top: 3px;
13
}
14
 
15
div.wicket-modal div.custom div.w_left,
16
div.wicket-modal div.custom div.w_right {
17
  background-image: url('frame-custom-2-alpha.png'); 
18
  _background-image: url('frame-custom-2-ie.png');
19
}
20
 
21
 
22
div.wicket-modal div.custom div.w_top,
23
div.wicket-modal div.custom div.w_bottom,
24
div.wicket-modal div.custom div.w_topLeft,
25
div.wicket-modal div.custom div.w_topRight,
26
div.wicket-modal div.custom div.w_bottomRight,
27
div.wicket-modal div.custom div.w_bottomLeft,
28
div.wicket-modal div.custom a.w_close {
29
  background-image: url('frame-custom-1-alpha.png'); 
30
  _background-image: url('frame-custom-1-ie.png');
31
}


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:


 Javascript |  copy code |? 
01
Wicket.Window.getMarkup = function(idWindow, idClassElement, idCaption, idContent, idTop, idTopLeft, idTopRight, idLeft, idRight, idBottomLeft, idBottomRight, idBottom, idCaptionText, isFrame) {
02
  var s =
03
      "<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'>"+
04
      "<div id=\""+idClassElement+"\">"+
05
        "<div class=\"w_caption\"  id=\""+idCaption+"\">"+
06
          "<a class=\"w_close\" href=\"#\"></a>"+                 
07
          "<span id=\""+idCaptionText+"\" class=\"w_captionText\"></span>"+
08
        "</div>"+
09
 
10
        "<div class=\"w_top_1\">"+
11
 
12
        "<div class=\"w_topLeft\" id=\""+idTopLeft+"\">"+
13
        "</div>"+       
14
 
15
        "<div class=\"w_topRight\" id=\""+idTopRight+"\">"+
16
        "</div>"+
17
 
18
        "<div class=\"w_top\" id='"+idTop+"'>"+                 
19
        "</div>"+
20
 
21
        "</div>"+
22
 
23
        "<div class=\"w_left\" id='"+idLeft+"'>"+
24
          "<div class=\"w_right_1\">"+
25
            "<div class=\"w_right\" id='"+idRight+"'>"+
26
              "<div class=\"w_content_1\" onmousedown=\"if (Wicket.Browser.isSafari()) { event.ignore = true; }  else { Wicket.stopEvent(event); } \">"+                                      
27
 
28
                "<div class=\"w_content_2\">"+
29
                "<div class=\"w_content_3\">"+
30
                  "<div class=\"w_content\">";
31
        if (isFrame) {
32
          if (Wicket.Browser.isIELessThan7() || !Wicket.Browser.isIE()) {                       
33
            s+= "<iframe src='\/\/:' frameborder=\"0\" id='"+idContent+"' allowtransparency=\"false\" style=\"height: 200px\">"+
34
                    "</iframe>";
35
          } else {
36
            s+= "<iframe src='about:blank' frameborder=\"0\" id='"+idContent+"' allowtransparency=\"false\" style=\"height: 200px\">"+
37
            "</iframe>";
38
          }
39
        } else {
40
          s+=
41
                    "<div id='"+idContent+"'></div>";
42
        }
43
          s+=             
44
                  "</div>"+
45
                "</div>"+
46
                "</div>"+
47
              "</div>"+
48
            "</div>"+
49
          "</div>"+
50
        "</div>"+
51
 
52
 
53
        "<div class=\"w_bottom_1\" id=\""+idBottom+"\">"+         
54
 
55
          "<div class=\"w_bottomRight\"  id=\""+idBottomRight+"\">"+
56
          "</div>"+
57
 
58
          "<div class=\"w_bottomLeft\" id=\""+idBottomLeft+"\">"+
59
          "</div>"+
60
 
61
          "<div class=\"w_bottom\" id=\""+idBottom+"\">"+       
62
          "</div>"+       
63
 
64
 
65
        "</div>"+       
66
 
67
 
68
      "</div>"+
69
    "</form></div>";
70
 
71
    return s;
72
}


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:


 Java(TM) 2 Platform Standard Edition 5.0 |  copy code |? 
01
package de.wicketpraxis.web.blog.pages.questions.ajax.modal;
02
 
03
import org.apache.wicket.ResourceReference;
04
import org.apache.wicket.ajax.AjaxRequestTarget;
05
import org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow;
06
import org.apache.wicket.markup.html.CSSPackageResource;
07
import org.apache.wicket.markup.html.JavascriptPackageResource;
08
import org.apache.wicket.markup.html.resources.CompressedResourceReference;
09
import org.apache.wicket.markup.html.resources.JavascriptResourceReference;
10
 
11
public class CustomModalWindow extends ModalWindow
12
{
13
  private static ResourceReference CSS = new CompressedResourceReference(CustomModalWindow.class, "styles/custom-modal.css");
14
  private static ResourceReference JAVASCRIPT = new JavascriptResourceReference(CustomModalWindow.class,  "styles/custom-modal.js");
15
 
16
  public CustomModalWindow(String id)
17
  {
18
    super(id);
19
 
20
    setCssClassName("custom");
21
 
22
    add(JavascriptPackageResource.getHeaderContribution(JAVASCRIPT));
23
    add(CSSPackageResource.getHeaderContribution(CSS));
24
 
25
    setCloseButtonCallback(new CloseButtonCallback()
26
    {
27
      public boolean onCloseButtonClicked(AjaxRequestTarget target)
28
      {
29
        return onCloseClicked(target);
30
      }
31
    });
32
 
33
    setWindowClosedCallback(new WindowClosedCallback()
34
    {
35
      public void onClose(AjaxRequestTarget target)
36
      {
37
        CustomModalWindow.this.onClose(target);
38
      }
39
    });
40
  }
41
 
42
  protected void onClose(AjaxRequestTarget target)
43
  {
44
 
45
  }
46
 
47
  protected boolean onCloseClicked(AjaxRequestTarget target)
48
  {
49
    return true;
50
  }
51
}


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:


 Java(TM) 2 Platform Standard Edition 5.0 |  copy code |? 
01
package de.wicketpraxis.web.blog.pages.questions.ajax.modal;
02
 
03
import org.apache.wicket.ajax.AbstractAjaxTimerBehavior;
04
import org.apache.wicket.ajax.AjaxRequestTarget;
05
import org.apache.wicket.ajax.markup.html.AjaxLink;
06
import org.apache.wicket.markup.html.WebPage;
07
import org.apache.wicket.util.time.Duration;
08
 
09
public class ModalWindowPage extends WebPage
10
{
11
  public ModalWindowPage()
12
  {
13
    final CustomModalWindow modalWindow = new CustomModalWindow("modal");
14
 
15
    modalWindow.setTitle("Popup");
16
    modalWindow.setInitialWidth(400);
17
    modalWindow.setInitialHeight(400);
18
    modalWindow.setResizable(true);
19
    modalWindow.setContent(new AbstractModalClosePanel(modalWindow)
20
    {
21
      @Override
22
      public void onClick(AjaxRequestTarget target)
23
      {
24
        modalWindow.close(target);
25
      }
26
    });
27
    add(modalWindow);
28
 
29
    add(new AjaxLink<Void>("open")
30
    {
31
      @Override
32
      public void onClick(AjaxRequestTarget target)
33
      {
34
        modalWindow.show(target);
35
      }
36
    });
37
 
38
    add(new AbstractAjaxTimerBehavior(Duration.seconds(2))
39
    {
40
      @Override
41
      protected void onTimer(AjaxRequestTarget target)
42
      {
43
        modalWindow.show(target);
44
        stop();
45
      }
46
    });
47
  }
48
}


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 |  copy code |? 
1
<html>
2
  <head>
3
    <title>ModalWindow Page</title>
4
  </head>
5
  <body>
6
    <div wicket:id="modal"></div>
7
    <a wicket:id="open">Open</a>
8
  </body>
9
</html>


Und so sieht das Ergebnis aus:


wicket-custom-modalwindow


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.


		




Share and Enjoy:



    
	
  • Digg
    • 
	
  • Sphinn
    • 
	
  • del.icio.us
    • 
	
  • Facebook
    • 
	
  • Mixx
    • 
	
  • Google Bookmarks
    • 




		

	

	
	
Posted in Allgemein,  Technologie,  Wicket.

	
Tagged with , , .

	
No comments


	

		
			By admin		
		– 3. März 2010