TOC

Einführung in das Wicket Framework

Einführung in das Wicket Framework

1. Überblick

Wicket ist ein serverseitiges Java-Webkomponenten-Framework, das darauf abzielt, das Erstellen von Webschnittstellen zu vereinfachen, indem Muster eingeführt werden, die aus der Entwicklung der Desktop-Benutzeroberfläche bekannt sind.

Mit Wicket ist es möglich, eine Webanwendung nur mit Java-Code und XHTML-kompatiblen HTML-Seiten zu erstellen. Keine Javascript- oder XML-Konfigurationsdateien erforderlich.

Es bietet eine Schicht über den Anfrage-Antwort-Zyklus, die das Arbeiten auf niedriger Ebene abschirmt und Entwicklern die Möglichkeit gibt, sich auf die Geschäftslogik zu konzentrieren.

In diesem Artikel werden die Grundlagen vorgestellt, indem die Sicket-AnwendungHelloWorld Werstellt wird, gefolgt von einem vollständigen Beispiel mit zwei integrierten Komponenten, die miteinander kommunizieren.

2. Konfiguration

Fügen Sie zum Ausführen eines Wicket-Projekts die folgenden Abhängigkeiten hinzu: 


    org.apache.wicket
    wicket-core
    7.4.0

Möglicherweise möchten Sie die neueste Version von Wicket inMaven Central repository überprüfen, die zum Zeitpunkt Ihres Lesens möglicherweise nicht mit der hier verwendeten übereinstimmt.

Jetzt können wir unsere erste Wicket-Anwendung erstellen.

3. HelloWorld Wicket

Beginnen wir mit der Unterklasse der Wicket-KlasseWebApplication, für die mindestens die MethodeClass<? extends Page> getHomePage()überschrieben werden muss.

Wicket wird diese Klasse als Haupteinstiegspunkt der Anwendung verwenden. Geben Sie innerhalb der Methode einfach einclass-Objekt einer Klasse mit dem NamenHelloWorld: zurück 

public class HelloWorldApplication extends WebApplication {
    @Override
    public Class getHomePage() {
        return HelloWorld.class;
    }
}

Wicket bevorzugt Konventionen gegenüber Konfigurationen. Zum Hinzufügen einer neuen Webseite zur Anwendung müssen zwei Dateien erstellt werden: eine Java-Datei und eine HTML-Datei mit demselben Namen (aber unterschiedlicher Erweiterung) im selben Verzeichnis. Eine zusätzliche Konfiguration ist nur erforderlich, wenn Sie das Standardverhalten ändern möchten.

Fügen Sie im Paketverzeichnis des Quellcodes zuerst dieHelloWorld.java hinzu: 

public class HelloWorld extends WebPage {
    public HelloWorld() {
        add(new Label("hello", "Hello World!"));
    }
}

dannHelloWorld.html:

Fügen Sie als letzten Schritt die Filterdefinition inweb.xml: hinzu 


    wicket.examples
    
      org.apache.wicket.protocol.http.WicketFilter
    
    
        applicationClassName
        
          com.example.wicket.examples.HelloWorldApplication

Das ist es. Wir haben gerade unsere erste Wicket-Webanwendung programmiert.

Führen Sie das Projekt aus, indem Sie einewar-Datei (mvn package über die Befehlszeile) erstellen und auf einem Servlet-Container wie Jetty oder Tomcat bereitstellen.

Lassen Sie uns im Browser aufhttp://localhost:8080/HelloWorld/ zugreifen. Eine leere Seite mit der MeldungHello World! wird angezeigt.

4. Wicket-Komponenten

Komponenten in Wicket sind Triaden, die aus einer Java-Klasse, dem HTML-Markup und einem Modell bestehen. Modelle sind eine Fassade, über die Komponenten auf die Daten zugreifen.

Diese Struktur bietet eine gute Trennung von Bedenken und erhöht die Wiederverwendung von Code, indem die Komponente von datenzentrierten Vorgängen abgekoppelt wird.

The example that follows zeigt, wie einer Komponente Ajax-Verhalten hinzugefügt wird. Es besteht aus einer Seite mit zwei Elementen: einem Dropdown-Menü und einer Bezeichnung. Wenn sich die Dropdown-Auswahl ändert, wird die Bezeichnung (und nur die Bezeichnung) aktualisiert.

Der Hauptteil der HTML-DateiCafeSelector.html ist minimal, mit nur zwei Elementen, einem Dropdown-Menü und einer Bezeichnung: 




    Address: address

Erstellen wir auf der Java-Seite das Label: 

Label addressLabel = new Label("address",
  new PropertyModel(this.address, "address"));
addressLabel.setOutputMarkupId(true);

Das erste Argument im KonstruktorLabel, das mit den in der HTML-Datei zugewiesenenwicket:id übereinstimmt. Das zweite Argument ist das Modell der Komponente, ein Wrapper für die zugrunde liegenden Daten, die in der Komponente dargestellt werden.

Mit der MethodesetOutputMarkupIdkann die Komponente über Ajax geändert werden. Erstellen wir nun die Dropdown-Liste und fügen ihr Ajax-Verhalten hinzu: 

DropDownChoice cafeDropdown
  = new DropDownChoice<>(
    "cafes",
    new PropertyModel(this, "selectedCafe"),
    cafeNames);
cafeDropdown.add(new AjaxFormComponentUpdatingBehavior("onchange") {
    @Override
    protected void onUpdate(AjaxRequestTarget target) {
        String name = (String) cafeDropdown.getDefaultModel().getObject();
        address.setAddress(cafeNamesAndAddresses.get(name).getAddress());
        target.add(addressLabel);
    }
});

Die Erstellung ähnelt der des Labels. Der Konstruktor akzeptiert die Wicket-ID, ein Modell und eine Liste mit Cafénamen.

Dann wirdAjaxFormComponentUpdatingBehavior mit der RückrufmethodeonUpdate hinzugefügt, die das Modell des Etiketts aktualisiert, sobald eine Ajax-Anforderung ausgegeben wird. Schließlich wird die Label-Komponente als Ziel für die Aktualisierung festgelegt.

Schließlich wird die Label-Komponente als Ziel für die Aktualisierung festgelegt.

Wie Sie sehen, ist alles Java, es war keine einzige Zeile Javascript erforderlich. Um zu ändern, was das Etikett anzeigt, haben wir einfach ein POJO modifiziert. Der Mechanismus, mit dem das Ändern eines Java-Objekts zu einer Änderung der Webseite führt, ist für den Entwickler nicht relevant.

Wicket bietet eine große Auswahl an AJAX-fähigen Komponenten an. Der Katalog der Komponenten mit Live-Beispielen ist inhere verfügbar.

5. Fazit

In diesem Einführungsartikel haben wir die Grundlagen von Wicket, dem komponentenbasierten Webframework in Java, behandelt.

Wicket bietet eine Abstraktionsebene, die darauf abzielt, den Installationscode vollständig zu beseitigen.

Wir haben zwei einfache Beispiele beigefügt, dieon GitHub enthalten, um Ihnen einen Eindruck davon zu geben, wie die Entwicklung mit diesem Framework aussieht.

Related