Wicket 6.0 – Teil 1 : JQuery Backing Library

Hallo,

in den nächsten Tagen werde ich versuchen, einige neue Wicket Features die mit der Version 6 kommen etwas genauer zu beleuchten, hauptsächlich mache ich das, um mir selber ein Bild zu machen.

Schlussendlich definiere ich folgende Abhängigkeit in meiner pom.

[code language=”xml”]
6.0.0-beta1
<!– WICKET DEPENDENCIES –>

org.apache.wicket
wicket
${wicket.version}
pom

org.apache.wicket
wicket-extensions
${wicket.version}

org.apache.wicket
wicket-spring
${wicket.version}

org.apache.wicket
wicket-guice
${wicket.version}

[/code]

Allgemein

Die Roadmap (leicht veraltet ) findet sich hier.

Der Migrationsguide (bisher eher ein wenig mau) findet sich hier.

JQuery und Wicket 6 – Die Backing Library

Wicket 6 setzt endlich auf JQuery als Javascript-Bibliothek, meiner Ansicht nach genau die richtige Entscheidung.

Schön ist zu sehen, dass trotzdem nicht nativ auf JQuery aufgebaut wird, sondern im Prinzip bleibt die Wicket-Javascript-API im großen und ganzen erhalten und JQuery wird quasi “versteckt” intern verwendet. So ist es theoretisch auch möglich, andere Javascript-Bibliotheken wie beispielsweise Dojo, Qooxdoo oder Prototype zu verwenden (aber warum sollte man das tun?:)).

JavaScriptLibrarySettings

Die Deklaration der JQuery – und Wicket-Ajax-Bibliotheken findet sich in der Klasse JavaScriptLibrarySettings.

[code language=”java”]

public class JavaScriptLibrarySettings implements IJavaScriptLibrarySettings
{
private ResourceReference jQueryReference = JQueryResourceReference.get();

private ResourceReference wicketEventReference = WicketEventJQueryResourceReference.get();

private ResourceReference wicketAjaxReference = WicketAjaxJQueryResourceReference.get();

private ResourceReference wicketAjaxDebugReference = WicketAjaxDebugJQueryResourceReference.get();

}

[/code]

Die JavascriptBibliotheken werden in der Klasse Application angebunden.

[code language=”java”]
/**
* @return Application’s JavaScriptLibrary settings
* @since 6.0
*/
public final IJavaScriptLibrarySettings getJavaScriptLibrarySettings()
{
checkSettingsAvailable();
if (javaScriptLibrarySettings == null)
{
javaScriptLibrarySettings = new JavaScriptLibrarySettings();
}
return javaScriptLibrarySettings;
}

/**
*
* @param javaScriptLibrarySettings
*/
public final void setJavaScriptLibrarySettings(
final IJavaScriptLibrarySettings javaScriptLibrarySettings)
{
this.javaScriptLibrarySettings = javaScriptLibrarySettings;
}
[/code]

Über die Library-Settings werden automatisch die JQuery-Bibliotheken geladen (aktuell in der Version 1.7.2). Es kann aber auch
sehr einfach eine eigene Bibliothek über den Setter eingebunden weren.

Interessant ist, die JQuery-Referenz wird nur dann gerendert, wenn sie wirklich gebraucht wird, beispielsweise wenn ein
AjaxLink auf der Seite eingebunden wird.

Die Referenz im Markup sieht dann ungefähr so aus:

[code]
<script type="<a>text/javascript</a>" src="<a href=">// <![CDATA[
./wicket/resource/org.apache.wicket.resource.JQueryResourceReference/jquery/jquery-ver-1336836682000.js</a>">
// ]]></script>
[/code]

Das Einbinden geschieht in der Klasse AbstractDefaultAjaxBehavior, über die quasi die komplette Ajax-Funktionalität von Wicket realisiert ist.

In der Methode render Head findet man folgende Zeile:

[code language=”java”]

CoreLibrariesContributor.contributeAjax(component.getApplication(), response);

[/code]

Diese Zeile sorgt dafür, dass sobald dieses Behavior irgendwo auf der Seite eingebunden ist, die JQuery-Referenz gerendert wird (wenn sie denn nicht schon gerendert wurde).

Verwendung von JQuery

Wie wird jetzt aber JQuery verwendet?

Nehmen wir als Beispiel diese einfache Loginform, die ich in einem meiner Wicket-Workshops verwende.

Die Implementierung ist überhaupt nichts besonderes, sondern eine einfache Loginform, über die sich die User einloggen können (über die DropDown kann zusätzlich die Rolle des Users gewählt werden, beispielsweise Administrator).

Der Button ist (obwohl nicht notwendig) als Ajax Submit Link realisiert.

[code language=”java”]

protected AjaxSubmitLink submit(){
return new AjaxSubmitLink("submit"){
@Override
protected void onSubmit(AjaxRequestTarget target, Form form) {
super.onSubmit();
ShopSession.get().logIn((User)form.getModelObject());
continueToOriginalDestination();
}

@Override
protected void onError(AjaxRequestTarget target, Form form) {
target.add(form);
}
};
}

[/code]

Interessant ist der Javascript-Code der generiert wird.

[code language=”javascript”]

/*<![CDATA[*/
Wicket.Event.add(window, "domready", function(event) {
Wicket.Ajax.ajax({"f":"form1c","u":"./login?4-2.IBehaviorListener.0-form-submit","e":"click","c":"submit1d","sc":":submit"});;
;});

[/code]

Der Button selbst sieht so aus

[code language=”html”]
<input id="submit1d<" type="submit" />
[/code]

Ein Ajaxlink in Wicket 1.5.x sieht im Javascript so aus:

[code language=”javascript”]

var wcall=wicketAjaxGet(‘uebersicht?2-1.IBehaviorListener.0-content~panel-content-details’,function() { }.bind(this),function() { }.bind(this), function() {return Wicket.$(‘id22f’) != null;}.bind(this));return !wcall;

[/code]

Was das genau bedeutet ist beispielsweise schon hier beschrieben.

Das war ein wenig grundsätzliches zur neuen Wicket-Ajax-Bibliothek. Wer sich hier etwas genauer informieren möchte, dem lege ich die Javascript-Dateien ans Herz.

Wicket Ajax JQuery

Wicket Event

Im nächsten Teil wird es dann hoffentlich ein wenig praktischer.

Die Sourcen zu allen Artikeln kann man sich übrigens hier klonen : git@github.com:dilgerma/wicket-6.0-Playground.git


War dieser Blogeintrag für Sie interessant? Evtl. kann ich noch mehr für Sie tun.

Trainings & Know-How aus der Praxis zu

  • Apache Wicket 1.4.x, 1.5.x, 1.6.x
  • GIT – Best Practices, Einsatz, Methoden
  • Spring
  • Java
  • Scrum & Kanban
  • Agiles Arbeiten
Consulting & Softwareentwicklung

  • Requirements Engineering
  • Qualitätssicherung
  • Software-Entwicklung
  • Architektur
  • Scrum & Kanban

Effective Trainings & Consulting - Martin Dilger



Hat Ihnen dieser Blog-Eintrag gefallen? Ich stelle in diesem Blog Informationen über Tools, Frameworks und Werkzeuge zur Verfügung, die mich produktiver machen. Vielleicht kann ich auch Ihnen helfen, produktiver zu werden.


Ich unterstütze Sie als freier Mitarbeiter bei der Entwicklung von Software-Projekten, Agiler Arbeit sowie Schulungen / Fortbildungen.


Jeden Tag ein bisschen produktiver - ab heute