Wicket 6.2 und JQuery – Dream Team in Action

In meinen letzten beiden Artikeln zum Thema Wicket 6 habe ich mich mit Wicket 6 und JQuery und Formularvalidierung beschäftigt. Heute möchte ich das Thema JQuery ein wenig auskosten. Wie wahrscheinlich jeder mittlerweile weiß, ist die Javascript-Backing-Library von Wicket mittlerweile JQuery. Betrachten wir doch mal, was damit jetzt alles möglich ist.

Zunächst bauen wir uns einen schönen Maven-Archetype.

[code]

mvn archetype:generate -DarchetypeGroupId=org.apache.wicket -DarchetypeArtifactId=wicket-archetype-quickstart -DarchetypeVersion=6.2.0 -DgroupId=de.effectivetrainings -DartifactId=wicket-6-jquery -DarchetypeRepository=https://repository.apache.org/ -DinteractiveMode=false

[/code]

Anschließend räumen wir die ganzen Klassen und Templates ein wenig auf, damit wir mit einem sauberen Stand starten können.

[code language=”java”]

public class HomePage extends WebPage {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<meta charset="utf-8" />
<title>Apache Wicket Quickstart</title>
</head>
<body>

</body>
</html>

[/code]

Damit wir auch was schönes zu sehen bekommen laden wir zusätzlich  jquery-ui in der Version 1.9.1. Hierfür implementieren wir folgendes in der Klasse HomePage. Wir ziehen uns die Bibliothek einfach direkt von der JQuery UI Homepage. (Das wäre aber nichts, was man in einem produktiven System machen würde..)

[code language=”java”]

@Override
public void renderHead(HtmlHeaderContainer container) {
super.renderHead(container);
IHeaderResponse response = container.getHeaderResponse();
response.render(JavaScriptHeaderItem.forUrl("http://code.jquery.com/ui/1.9.1/jquery-ui.js","jquery-ui"));
}

[/code]

Starten wir das Ganze sieht man zwar noch nichts (bisher haben wir ja keinen Content angelegt), im Sourcecode der Seite sieht man aber folgendes.

[code language=”html”]
<script type="text/javascript" id="jquery-ui" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
[/code]

Hm, eine Besonderheit haben wir aber. JQuery-UI benötigt zwingend JQuery, das bedeutet, das aktuelle Setup ist invalide.
Wie aber deklariert man eine derartige Abhängigkeit?

Mit Wicket 1.5.x wäre das etwas kompliziert, mit Wicket 6 total einfach. Ziehen wir die JQuery-UI-Resource in eine eigene Klasse.

[code language=”java”]

public class JQueryUIResourceReference extends JavaScriptUrlReferenceHeaderItem {

private static final String URL= "http://code.jquery.com/ui/1.9.1/jquery-ui.js";

public JQueryUIResourceReference() {
super(URL, "jquery-ui-1.9.1", true, "utf-8", "");
}

/**
* jedesmal wenn die jquery-ui resource reference gerendert wird muss auch
* die jquery-bibliothek gerendert werden.
* @return
*/
@Override
public Iterable<? extends HeaderItem> getDependencies() {
List<HeaderItem> deps = new ArrayList<HeaderItem>();
deps.add(JavaScriptHeaderItem.forReference(JQueryResourceReference.get()));
return deps;
}
}

[/code]

Schön ist die Methode “getDepdendencies”
Diese Methode liefert eine Liste von HeaderItems, die von der aktuellen Resource verwendet wird. Wicket stellt sicher, dass jede Abhängigkeit in der richtigen Reihenfolge gerendert wird.

Folgende Deklaration in der Page stellt sicher, dass beide Resourcen gerendert werden.

[code language=”java”]

@Override
public void renderHead(HtmlHeaderContainer container) {
super.renderHead(container);
IHeaderResponse response = container.getHeaderResponse();
response.render(new JQueryUIResourceReference());
}

[/code]

Bauen wir die üblichen Tabs

Folgendes Markup ist die Basis-Struktur für die JQuery-UI-Tabs.

[code language=”html”]

<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>Tab 1</span></a></li>
<li><a href="#fragment-2"><span>Tab 2</span></a></li>
<li><a href="#fragment-3"><span>Tab 3</span></a></li>
</ul>
<div id="fragment-1">
erster
</div>
<div id="fragment-2">
zweiter
</div>
<div id="fragment-3">
dritter
</div>
</div>

[/code]

Bauen wir uns ein einfaches eigenes Panel.

[code language=”java”]
public class TabbedPanel extends Panel {
public TabbedPanel(String id) {
super(id);
}

@Override
public void renderHead(HtmlHeaderContainer container) {
super.renderHead(container);
container.getHeaderResponse().render(new JQueryUIResourceReference());
container.getHeaderResponse().render(
JavaScriptHeaderItem.forReference(
new PackageResourceReference(TabbedPanel.class, "tabbed-script.js")));
}
}
[/code]

Das entsprechende Markup sieht so aus

[code language=”html”]
<html xmlns:wicket="http://wicket.apache.org">
<wicket:panel>
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>Tab 1</span></a></li>
<li><a href="#fragment-2"><span>Tab 2</span></a></li>
<li><a href="#fragment-3"><span>Tab 3</span></a></li>
</ul>
<div id="fragment-1">
erster
</div>
<div id="fragment-2">
zweiter
</div>
<div id="fragment-3">
dritter
</div>
</div>
</wicket:panel>
</html>
[/code]

Das einzig besondere ist die renderHead()-Methode im TabbedPanel. Denn die Reihenfolge, in der Resourcen gerendert werden ist Depth-First.
Alle Komponenten rendern ihr Resourcen und erst dann kommt die Page. Da die JQuery- und JQuery-UI Referenz bisher in der Page deklariert ist,
rendert die TabbedPanel Komponente ihr Javascript und erst dann werden die JQuery-Referenzen gerendert. Autsch… das geht so nicht, ein einfacher
Workaround hierzu ist, die JQuery-Referenz einfach nochmals zu deklarieren. Wicket ist so schlau und rendert die Referenz nur einmal, und zwar an der richtigen Stelle.

Bingo!
War dieser Blogeintrag für Sie interessant? Braucht Ihr Team Unterstützung? Kontaktieren Sie mich, ich bin hier um zu helfen.

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