Introduction au framework Wicket

1. Vue d'ensemble

Wicket est un framework orienté composants Web côté serveur Java qui vise à simplifier la création d'interfaces Web en introduisant des modèles connus du développement de l'interface utilisateur de bureau.

Avec Wicket, il est possible de créer une application Web en utilisant uniquement du code Java et des pages HTML compatibles XHTML. Pas besoin de Javascript, ni de fichiers de configuration XML.

Il fournit une couche sur le cycle requête-réponse, évitant de travailler à un niveau bas et permettant aux développeurs de se concentrer sur la logique métier.

Dans cet article, nous présenterons les bases en créant l'applicationHelloWorld Wicket, suivi d'un exemple complet utilisant deux composants intégrés qui communiquent entre eux.

2. Installer

Pour exécuter un projet Wicket, ajoutons les dépendances suivantes:


    org.apache.wicket
    wicket-core
    7.4.0

Vous voudrez peut-être consulter la dernière version de Wicket dans lesMaven Central repository, qui au moment de votre lecture peut ne pas coïncider avec celle utilisée ici.

Nous sommes maintenant prêts à créer notre première application Wicket.

3. PortefeuilleHelloWorld

Commençons par sous-classer la classeWebApplication de Wicket, qui, au minimum, nécessite de remplacer la méthodeClass<? extends Page> getHomePage().

Wicket utilisera cette classe comme point d’entrée principal de l’application. Dans la méthode, retournez simplement un objetclass d'une classe nomméeHelloWorld:

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

Wicket privilégie la convention à la configuration. L'ajout d'une nouvelle page Web à l'application nécessite la création de deux fichiers: un fichier Java et un fichier HTML portant le même nom (mais une extension différente) dans le même répertoire. Une configuration supplémentaire n'est nécessaire que si vous souhaitez modifier le comportement par défaut.

Dans le répertoire du package du code source, ajoutez d'abord lesHelloWorld.java:

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

puisHelloWorld.html:

Enfin, ajoutez la définition du filtre à l'intérieur desweb.xml:


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

C'est ça. Nous venons de coder notre première application Web Wicket.

Exécutez le projet en créant un fichierwar, (mvn package à partir de la ligne de commande) et déployez-le sur un conteneur de servlet tel que Jetty ou Tomcat.

Accédons àhttp://localhost:8080/HelloWorld/ dans le navigateur. Une page vide avec le messageHello World! doit apparaître.

4. Composants du guichet

Les composants de Wicket sont des triades composés d'une classe Java, du balisage HTML et d'un modèle. Les modèles sont une façade que les composants utilisent pour accéder aux données.

Cette structure permet de dissocier de manière judicieuse les préoccupations et, en dissociant le composant des opérations centrées sur les données, augmente la réutilisation du code.

The example that follows montre comment ajouter un comportement Ajax à un composant. Il se compose d'une page avec deux éléments: un menu déroulant et une étiquette. Lorsque la sélection par liste déroulante est modifiée, l'étiquette (et seule l'étiquette) est mise à jour.

Le corps du fichier HTMLCafeSelector.html sera minimal, avec seulement deux éléments, un menu déroulant et une étiquette:



    Address: address

Du côté Java, créons le libellé:

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

Le premier argument du constructeurLabel correspondant auxwicket:id assignés dans le fichier HTML. Le deuxième argument est le modèle du composant, un wrapper pour les données sous-jacentes présentées dans le composant.

La méthodesetOutputMarkupId rend le composant éligible à la modification via Ajax. Créons maintenant la liste déroulante et ajoutons-y le comportement 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 création est similaire à celle de l'étiquette, le constructeur accepte l'identifiant du guichet, un modèle et une liste de noms de cafés.

Ensuite,AjaxFormComponentUpdatingBehavior est ajouté avec la méthode de rappelonUpdate qui met à jour le modèle de l'étiquette une fois la requête ajax émise. Enfin, le composant label est défini comme cible pour l'actualisation.

Enfin, le composant label est défini comme cible pour l'actualisation.

Comme vous pouvez le voir, tout est en Java, aucune ligne de Javascript n'a été nécessaire. Afin de changer l'affichage de l'étiquette, nous avons simplement modifié un POJO. Le mécanisme par lequel la modification d'un objet Java se traduit par une modification de la page Web se passe derrière les rideaux et n'est pas pertinent pour le développeur.

Wicket propose un grand nombre de composants prêts à l'emploi avec AJAX. Le catalogue des composants avec des exemples en direct est disponiblehere.

5. Conclusion

Dans cet article d'introduction, nous avons couvert les bases de Wicket, le framework Web basé sur des composants en Java.

Wicket fournit une couche d'abstraction qui vise à supprimer complètement le code de plomberie.

Nous avons inclus deux exemples simples, que vous pouvez trouveron GitHub, pour vous donner un aperçu de ce à quoi ressemble le développement avec ce framework.

TOC

Introduction au framework Wicket