Wicket Ajax – IAjaxRegionMarkupIdProvider | wicket praxis
Skip to content


Wicket Ajax – IAjaxRegionMarkupIdProvider

Fast unbemerkt versammeln sich in den Wicket-Updates neben einer Reihe von Bugfixes kleine Anpassungen, die das Entwickeln mit Wicket einfacher machen können. Da man nicht bei jedem Update nachsieht, was sich verändert hat, weil die Erfahrung gezeigt hat, dass man bei Wicket eigentlich immer auf die aktuelle Version wechseln kann, läuft man Gefahr, dass man wichtige Anpassungen verpasst. Deshalb stelle ich heute eine Erweiterung von Wicket vor, die in meinen Augen ein erhebliches Potential bietet: das Interface IAjaxRegionMarkupIdProvider.

Über dieses Interface ist es möglich, Wicket mitzuteilen, welches Seitenelement in einem Ajax-Response eigentlich ersetzt werden soll. So ist es möglich, z.B. in einem Behavior vor und nach der Komponente Html-Markup einzufügen, dass bei Aktualisierung der Komponente ebenfalls ersetzt wird. Was sich kompliziert anhört ist in der Anwendung recht einfach. Wir implementieren ein Interface, dass einen roten Rahmen um eine Komponente ziehen soll, die per Ajax aktualisiert wird.

 Java(TM) 2 Platform Standard Edition 5.0 | 
 
 copy code |
?

  1. package de.wicketpraxis.web.blog.pages.questions.ajax.behavior;
  2. import org.apache.wicket.Component;
  3. import org.apache.wicket.ajax.IAjaxRegionMarkupIdProvider;
  4. import org.apache.wicket.behavior.AbstractBehavior;
  5. public class AjaxRegionBehavior extends AbstractBehavior implements IAjaxRegionMarkupIdProvider {
  6.   @Override
  7.   public void beforeRender(Component component) {
  8.     component.getResponse().write("<div style=\"border:1px solid red;\" id=\""+getAjaxRegionMarkupId(component)+"\">");
  9.     super.beforeRender(component);
  10.   }
  11.   
  12.   @Override
  13.   public void onRendered(Component component) {
  14.     super.onRendered(component);
  15.     component.getResponse().write("</div>");
  16.   }
  17.   
  18.   @Override
  19.   public String getAjaxRegionMarkupId(Component component) {
  20.     return component.getMarkupId()+"_border";
  21.   }
  22.   
  23. }

Das Behavior funktioniert wie folgt: In beforeRender() und in onRendered() wird um die Komponente herum ein div-Tag mit passender Style-Anweisung geschrieben. Hierbei muss in beforeRender() die id des Tags auf den Wert gesetzt werden, den Wicket dann auch über die Interface-Methode getAjaxRegionMarkupId() bekommt. Das führt dazu, dass Wicket die Ersetzung per Ajax automatisch auf den durch das Behavior definierten Rahmen, eben die ID, die per getAjaxRegionMarkupId() definiert wurde, ausweitet.

Die Anwendung ist recht einfach:

 Java(TM) 2 Platform Standard Edition 5.0 | 
 
 copy code |
?

  1. package de.wicketpraxis.web.blog.pages.questions.ajax.behavior;
  2. import org.apache.wicket.ajax.AjaxRequestTarget;
  3. import org.apache.wicket.ajax.markup.html.AjaxLink;
  4. import org.apache.wicket.markup.html.WebPage;
  5. import org.apache.wicket.markup.html.basic.Label;
  6. import org.apache.wicket.model.Model;
  7. public class AjaxRegionPage extends WebPage {
  8.   
  9.   private Model<Integer> _counter;
  10.   public AjaxRegionPage() {
  11.     
  12.     _counter = Model.of(0);
  13.     final Label label=new Label("label",_counter);
  14.     label.setOutputMarkupId(true);
  15.     label.add(new AjaxRegionBehavior());
  16.     add(label);
  17.     
  18.     add(new AjaxLink<Integer>("link",_counter) {
  19.       @Override
  20.       public void onClick(AjaxRequestTarget target) {
  21.         setModelObject(1+getModelObject());
  22.         target.addComponent(label);
  23.       }
  24.     });
  25.   }
  26. }

Wie man im Code-Beispiel sehen kann, wird das Behavior zur Komponente hinzugefügt. Würde man das Interface nicht implementieren, würden bei jeder Aktualisierung immer neue rote Rahmen um die Komponente entstehen.

 HTML | 
 
 copy code |
?

  1. <html>
  2.   <head>
  3.     <title>AjaxRegion Page</title>
  4.   </head>
  5.   <body>
  6.     <span wicket:id="label"></span>
  7.     <a wicket:id="link">Count</a>
  8.   </body>
  9. </html>

Bisher war es nötig, diese Anforderung immer auf Komponenten abzubilden, die dann korrekt ersetzt werden mussten. Damit ist es jetzt sehr viel einfacher möglich, Eine Komponente zu dekorieren und diese Dekoration auch per Ajax korrekt zu ersetzten. Auch wenn der erste Gedanke einer Anwendung sich vermutlich um Formularfelder mit fehlerhaften Eingaben dreht, gibt es unzählige Möglichkeiten, wo diese Funktionalität die Entwicklung nachhaltig vereinfachen wird.

Posted in Allgemein.


0 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.



Some HTML is OK

or, reply to this post via trackback.