Inleiding tot het Wicket Framework

1. Overzicht

Wicket is een Java-server-side webcomponent-georiënteerd framework dat tot doel heeft het bouwen van webinterfaces te vereenvoudigen door patronen te introduceren die bekend zijn uit de ontwikkeling van desktop-UI's.

Met Wicket is het mogelijk om een ​​webapplicatie te bouwen met alleen Java-code en XHTML-compatibele HTML-pagina's. Geen Javascript of XML-configuratiebestanden nodig.

Het biedt een laag over de aanvraag-responscyclus, beschermt tegen werken op een laag niveau en stelt ontwikkelaars in staat zich te concentreren op de bedrijfslogica.

In dit artikel introduceren we de basis door het HelloWorld W.icket-applicatie, gevolgd door een compleet voorbeeld met twee ingebouwde componenten die met elkaar communiceren.

2. Installatie

Laten we de volgende afhankelijkheden toevoegen om een ​​Wicket-project uit te voeren:

 org.apache.wicket wicket-core 7.4.0 

Misschien wil je de nieuwste versie van Wicket bekijken in de Maven Central-repository, die op het moment van lezen misschien niet samenvalt met de versie die hier wordt gebruikt.

Nu zijn we klaar om onze eerste Wicket-applicatie te bouwen.

3. Hallo Wereld Wicket

Laten we beginnen met het onderklassen van Wicket's Web applicatie class, waarvoor op zijn minst vereist is dat de Klasse getHomePage () methode.

Wicket gebruikt deze klasse als het belangrijkste toegangspunt van de applicatie. Retourneer binnen de methode gewoon een klasse object van een klasse met de naam Hallo Wereld:

openbare klasse HelloWorldApplication breidt WebApplication uit {@Override openbare klasse getHomePage () {return HelloWorld.class; }}

Wicket geeft de voorkeur aan conventie boven configuratie. Om een ​​nieuwe webpagina aan de applicatie toe te voegen, moeten twee bestanden worden aangemaakt: een Java-bestand en een HTML-bestand met dezelfde naam (maar met een andere extensie) in dezelfde map. Aanvullende configuratie is alleen nodig als u het standaardgedrag wilt wijzigen.

Voeg in de pakketmap van de broncode eerst het HelloWorld.java:

public class HelloWorld breidt webpagina uit {public HelloWorld () {add (new Label ("hallo", "Hello World!")); }}

dan HelloWorld.html:

Voeg als laatste stap de filterdefinitie toe binnen het web.xml:

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

Dat is het. We hebben zojuist onze eerste Wicket-webapplicatie gecodeerd.

Voer het project uit door een oorlog het dossier, (mvn-pakket vanaf de opdrachtregel) en implementeer het op een servlet-container zoals Jetty of Tomcat.

Laten we naar // localhost: 8080 / HelloWorld / gaan in de browser. Een lege pagina met het bericht Hallo Wereld! zal verschijnen.

4. Wicketcomponenten

Componenten in Wicket zijn drieklanken die bestaan ​​uit een Java-klasse, de HTML-opmaak en een model. Modellen zijn een façade die componenten gebruiken om toegang te krijgen tot de gegevens.

Deze structuur zorgt voor een mooie scheiding van zorgen en door het loskoppelen van de component van datacentrische bewerkingen, verhoogt het hergebruik van code.

Het voorbeeld dat volgt laat zien hoe Ajax-gedrag aan een component kan worden toegevoegd. Het bestaat uit een pagina met twee elementen: een vervolgkeuzemenu en een label. Wanneer de vervolgkeuzelijst verandert, wordt het label (en alleen het label) bijgewerkt.

De body van het HTML-bestand CafeSelector.html zal minimaal zijn, met slechts twee elementen, een vervolgkeuzemenu en een label:

Adres adres

Laten we aan de Java-kant het label maken:

Label addressLabel = nieuw label ("adres", nieuw PropertyModel (dit.adres, "adres")); addressLabel.setOutputMarkupId (true);

Het eerste argument in de Etiket constructor die overeenkomt met het wicket: id toegewezen in het HTML-bestand. Het tweede argument is het model van de component, een wrapper voor de onderliggende gegevens die in de component worden gepresenteerd.

De setOutputMarkupId methode maakt het onderdeel geschikt voor aanpassing via Ajax. Laten we nu de vervolgkeuzelijst maken en daar Ajax-gedrag aan toevoegen:

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

De creatie is vergelijkbaar met die van het label, de constructor accepteert de wicket-id, een model en een lijst met café-namen.

Dan AjaxFormComponentBijwerkenGedrag wordt toegevoegd met de onUpdate callback-methode die het model van het label bijwerkt zodra het ajax-verzoek is verzonden. Ten slotte wordt de labelcomponent ingesteld als een doel voor vernieuwing.

Ten slotte wordt de labelcomponent ingesteld als een doel voor vernieuwing.

Zoals je kunt zien is alles Java, er was geen enkele regel Javascript nodig. Om te veranderen wat het label weergeeft, hebben we eenvoudigweg een POJO aangepast. Het mechanisme waarmee het wijzigen van een Java-object zich vertaalt in een verandering in de webpagina, gebeurt achter de gordijnen en is niet relevant voor de ontwikkelaar.

Wicket biedt een grote set AJAX-compatibele componenten kant-en-klaar. De catalogus van de componenten met live voorbeelden is hier beschikbaar.

5. Conclusie

In dit inleidende artikel hebben we de basisprincipes van Wicket, het componentgebaseerde webraamwerk in Java, behandeld.

Wicket biedt een abstractielaag die tot doel heeft de sanitaire code volledig te schrappen.

We hebben twee eenvoudige voorbeelden toegevoegd, die u op GitHub kunt vinden, om u een idee te geven van hoe de ontwikkeling met dit framework eruitziet.