Introduzione al Wicket Framework

1. Panoramica

Wicket è un framework Java orientato ai componenti Web lato server che mira a semplificare la creazione di interfacce Web introducendo modelli noti dallo sviluppo dell'interfaccia utente desktop.

Con Wicket è possibile costruire un'applicazione web utilizzando solo codice Java e pagine HTML compatibili con XHTML. Non sono necessari Javascript, né file di configurazione XML.

Fornisce un livello sul ciclo richiesta-risposta, evitando di lavorare a un livello basso e consentendo agli sviluppatori di concentrarsi sulla logica di business.

In questo articolo, introdurremo le nozioni di base creando l' applicazione HelloWorld W icket, seguita da un esempio completo che utilizza due componenti incorporati che comunicano tra loro.

2. Configurazione

Per eseguire un progetto Wicket, aggiungiamo le seguenti dipendenze:

 org.apache.wicket wicket-core 7.4.0 

Potresti voler controllare l'ultima versione di Wicket nel repository Maven Central, che al momento della tua lettura potrebbe non coincidere con quella usata qui.

Ora siamo pronti per creare la nostra prima applicazione Wicket.

3. HelloWorld Wicket

Iniziamo creando una sottoclasse della classe WebApplication di Wicket , che, come minimo, richiede l'override del metodo Class getHomePage () .

Wicket utilizzerà questa classe come punto di ingresso principale dell'applicazione. All'interno del metodo, restituisci semplicemente un oggetto classe di una classe denominata HelloWorld:

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

Wicket privilegia le convenzioni rispetto alla configurazione. L'aggiunta di una nuova pagina Web all'applicazione richiede la creazione di due file: un file Java e un file HTML con lo stesso nome (ma estensione diversa) nella stessa directory. È necessaria una configurazione aggiuntiva solo se si desidera modificare il comportamento predefinito.

Nella directory del pacchetto del codice sorgente, aggiungi prima HelloWorld.java :

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

quindi HelloWorld.html :

Come passaggio finale, aggiungi la definizione del filtro all'interno di web.xml:

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

Questo è tutto. Abbiamo appena codificato la nostra prima applicazione web Wicket.

Esegui il progetto creando un file war , ( pacchetto mvn dalla riga di comando) e distribuiscilo su un contenitore servlet come Jetty o Tomcat.

Accediamo a // localhost: 8080 / HelloWorld / nel browser. Una pagina vuota con il messaggio Hello World! apparirà.

4. Componenti Wicket

I componenti in Wicket sono triadi costituite da una classe Java, il markup HTML e un modello. I modelli sono una facciata che i componenti utilizzano per accedere ai dati.

Questa struttura fornisce una buona separazione delle preoccupazioni e disaccoppiando il componente dalle operazioni incentrate sui dati, aumenta il riutilizzo del codice.

L'esempio che segue mostra come aggiungere il comportamento Ajax a un componente. Consiste in una pagina con due elementi: un menu a discesa e un'etichetta. Quando la selezione del menu a discesa cambia, l'etichetta (e solo l'etichetta) verrà aggiornata.

Il corpo del file HTML CafeSelector.html sarà minimo, con solo due elementi, un menu a discesa e un'etichetta:

Address: address

Sul lato Java, creiamo l'etichetta:

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

Il primo argomento nel costruttore Label che corrisponde al wicket: id assegnato nel file HTML. Il secondo argomento è il modello del componente, un wrapper per i dati sottostanti presentati nel componente.

Il metodo setOutputMarkupId rende il componente idoneo per la modifica tramite Ajax. Creiamo ora l'elenco a discesa e aggiungiamo il comportamento Ajax:

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); } });

La creazione è simile a quella dell'etichetta, il costruttore accetta l'ID del wicket, un modello e un elenco di nomi di caffè.

Quindi AjaxFormComponentUpdatingBehavior viene aggiunto con il metodo di callback onUpdate che aggiorna il modello dell'etichetta una volta inviata la richiesta ajax. Infine, il componente etichetta viene impostato come destinazione per l'aggiornamento.

Infine, il componente etichetta viene impostato come destinazione per l'aggiornamento.

Come puoi vedere tutto è Java, non è stata necessaria una sola riga di Javascript. Per cambiare ciò che mostra l'etichetta abbiamo semplicemente modificato un POJO. Il meccanismo con cui la modifica di un oggetto Java si traduce in un cambiamento nella pagina web avviene dietro le quinte e non è rilevante per lo sviluppatore.

Wicket offre un ampio set di componenti abilitati AJAX pronti all'uso. Il catalogo dei componenti con esempi dal vivo è disponibile qui.

5. conclusione

In questo articolo introduttivo, abbiamo trattato le basi di Wicket, il framework web basato su componenti in Java.

Wicket fornisce uno strato di astrazione che mira a eliminare completamente il codice dell'impianto idraulico.

Abbiamo incluso due semplici esempi, che possono essere trovati su GitHub, per darti un assaggio di come appare lo sviluppo con questo framework.