TOC

Introduction à Vaadin

1. Vue d’ensemble

Vaadin est un framework Java côté serveur permettant de créer des interfaces utilisateur Web.

En l’utilisant, nous pouvons créer notre front-end à l’aide de fonctionnalités Java.

2. Dépendances et configuration Maven

Commençons par ajouter les dépendances suivantes à notre pom.xml : 

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-server</artifactId>
</dependency>
<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-client-compiled</artifactId>
</dependency>
<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-themes</artifactId>
</dependency>

Les dernières versions des dépendances peuvent être trouvées ici:

vaadin-server , vaadin-client-compiled , vaadin-themes .

  • package vaadin-server - inclut des classes pour gérer tous les serveurs

des détails tels que les sessions, la communication client, etc.

  • vaadin-client-compiled - est basé sur GWT et comprend les éléments nécessaires

paquets pour compiler le client ** vaadin-themes - inclut des thèmes pré-créés et tous les utilitaires pour

faire nos thèmes

Pour compiler nos widgets Vaadin, nous devons configurer le https://search.maven.org/classic/#search%7Cgav%7C1%7Cg%3A%22org.apache.maven.plugins%22%20AND%20a%3A% 22maven-war-plugin% 22[plugin maven-war], https://search.maven.org/classic/#search%7Cgav%7C1%7Cg%3A%22com.vaadin%22%20and%20a%3A% 22vaadin-maven-plugin% 22[vaadin-maven-plugin], ainsi que https://search.maven.org/classic/#search%7Cgav%7C1%7C%%%A%22org.apache.maven.plugins%22% 20AND% 20a% 3A% 22maven-clean-plugin% 22[maven-clean-plugin].

Pour le pom complet, assurez-vous de vérifier le fichier pom dans le code source - à la fin du tutoriel.

Nous devons également ajouter le référentiel Vaadin et la gestion des dépendances: 

<repositories>
    <repository>
        <id>vaadin-addons</id>
        <url>http://maven.vaadin.com/vaadin-addons</url>
    </repository>
</repositories>
<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-bom</artifactId>
            <version>8.0.7</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

La balise DependencyManagement contrôle les versions de toutes les dépendances Vaadin.__

Pour exécuter rapidement l’application, nous allons utiliser le plugin Jetty: 

<plugin>
    <groupId>org.eclipse.jetty</groupId>
    <artifactId>jetty-maven-plugin</artifactId>
    <version>9.2.22.v20170606</version>
    <configuration>
        <scanIntervalSeconds>2</scanIntervalSeconds>
        <skipTests>true</skipTests>
    </configuration>
</plugin>

La dernière version du plugin peut être trouvée ici:

jetty-maven-plugin .

Avec ce plugin, nous pouvons exécuter notre projet en utilisant la commande: 

mvn jetty:run

3. Qu’est-ce que Vaadin?

  • En termes simples, Vaadin est un framework Java permettant de créer des interfaces utilisateur ** , avec des thèmes, des composants et de nombreuses options d’extensibilité.

  • Le framework couvre également le côté serveur ** , ce qui signifie que chaque modification apportée à l’interface utilisateur est immédiatement envoyée au serveur. Ainsi, l’application back-end sait à tout moment ce qui se passe dans le serveur frontal.

  • Vaadin consiste en un côté client et un côté serveur ** - avec le côté client construit sur le célèbre cadre Google Widget Toolkit et le côté serveur géré par le VaadinServlet .

** 4. Le servlet

**

Généralement, une application Vaadin n’utilise pas de fichier web.xml ; au lieu de cela, il définit son servlet en utilisant des annotations: 

@WebServlet(urlPatterns = "/** ", name = "MyUIServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = VaadinUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {}

Dans ce cas, cette servlet sert du contenu à partir du chemin racine.

** 5. La classe principale

**

La classe VaadinUI qui est référencée dans le servlet doit étendre la classe d’interface utilisateur à partir du framework et doit remplacer la méthode init pour terminer l’amorçage de l’application avec Vaadin activé.

L’étape suivante consiste à créer une mise en page et à l’ajouter à une mise en page principale de l’application: 

public class VaadinUI extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        VerticalLayout verticalLayout = new VerticalLayout();
        verticalLayout.setSpacing(true);
        verticalLayout.setMargin(true);
        setContent(verticalLayout);
}

** 6. Gestionnaires de mise en page de Vaadin

**

Le cadre est fourni avec un certain nombre de gestionnaires de disposition prédéfinis.

6.1. VerticalLayout

Empilez les composants sur une colonne où le premier ajouté est en haut et le dernier en bas: 

VerticalLayout verticalLayout = new VerticalLayout();
verticalLayout.setSpacing(true);
verticalLayout.setMargin(true);
setContent(verticalLayout);

Notez que les propriétés ici sont vaguement empruntées à la terminologie CSS typique.

6.2. HorizontalLayout

Cette disposition place chaque composant côte à côte de gauche à droite est similaire à la disposition verticale: 

HorizontalLayout horizontalLayout = new HorizontalLayout();

6.3. Disposition de la grille

Cette disposition place chaque widget dans une grille, vous devez passer en paramètre les colonnes et les lignes de la grille: 

GridLayout gridLayout = new GridLayout(3, 2);

6.4. FormLayout

La mise en forme du formulaire place la légende et le composant dans deux colonnes différentes et peut avoir des indicateurs facultatifs pour les champs obligatoires: 

FormLayout formLayout = new FormLayout();

** 7. Composants Vaadin

**

Maintenant que la mise en page est gérée, examinons quelques-uns des composants les plus courants pour la construction de notre interface utilisateur.

** 7.1. Étiquette

**

/uploads/label.png

Bien entendu, l’étiquette est également bien connue - et est simplement utilisée pour afficher du texte: 

Label label = new Label();
label.setId("LabelID");
label.setValue("Label Value");
label.setCaption("Label");
gridLayout.addComponent(label);

Une fois le composant créé, notez l’étape critique de l’ajout à la présentation.

** 7.2. Link

**

/uploads/link.png

Le widget link est essentiellement un lien hypertexte de base: 

Link link = new Link("Baeldung",
  new ExternalResource("http://www.baeldung.com/"));
link.setTargetName("__blank");

Notez que toutes les valeurs HTML typiques d’un élément <a> se trouvent ici.

** 7.3. Champ de texte

**

/uploads/textfield.png

Ce widget est utilisé pour saisir du texte: 

TextField textField = new TextField();
textField.setIcon(FontAwesome.USER);

Nous pouvons personnaliser davantage les éléments. Par exemple, nous pouvons rapidement ajouter des images aux widgets via l’API setIcon () .

De plus, notez que Font Awesome est livré avec le framework ; c’est défini comme un Enum, et nous pouvons facilement l’utiliser.

** 7.4. TextArea

**

/uploads/textarea.png

Comme vous vous en doutez, TextArea est disponible à côté du reste des éléments HTML traditionnels: 

TextArea textArea = new TextArea();

** 7.5. DateField et InlineDateField

**

/uploads/datefield.png

Ce composant puissant est utilisé pour choisir les dates; le paramètre de date est la date actuelle à sélectionner dans le widget: 

DateField dateField = new DateField("DateField", new Date(0));

/uploads/inlinedatefield-277x300.png%20277w

Nous pouvons aller plus loin et l’imbriquer dans un contrôle box__combo pour économiser de l’espace: 

InlineDateField inlineDateField = new InlineDateField();

** 7.6. PasswordField

**

/uploads/passwordfield.png

C’est la saisie de mot de passe masquée standard: 

PasswordField passwordField = new PasswordField();

** 7.7. RichTextArea

**

lien:/uploads/richtextarea-300x174.png%20300w[]

Avec ce composant, nous pouvons montrer du texte formaté, et il fournit une interface pour manipuler ce texte avec des boutons pour contrôler les polices, la taille, l’alignement, etc. sont: 

RichTextArea richTextArea = new RichTextArea();
richTextArea.setCaption("Rich Text Area");
richTextArea.setValue("<h1>RichTextArea</h1>");
richTextArea.setSizeFull();
Panel richTextPanel = new Panel();
richTextPanel.setContent(richTextArea);

** 7.8. Bouton

**

/uploads/buttons-300x162.png%20300w

Les boutons sont utilisés pour capturer les entrées de l’utilisateur et sont disponibles dans une variété de tailles et de couleurs.

Pour créer un bouton, nous instancions la classe de widgets comme d’habitude: 

Button normalButton = new Button("Normal Button");

En changeant le style, on peut avoir différents boutons: 

tinyButton.addStyleName("tiny");
smallButton.addStyleName("small");
largeButton.addStyleName("large");
hugeButton.addStyleName("huge");
dangerButton.addStyleName("danger");
friendlyButton.addStyleName("friendly");
primaryButton.addStyleName("primary");
borderlessButton.addStyleName("borderless");
linkButton.addStyleName("link");
quietButton.addStyleName("quiet");

Nous pouvons créer un bouton désactivé: 

Button disabledButton = new Button("Disabled Button");
disabledButton.setDescription("This button cannot be clicked");
disabledButton.setEnabled(false);
buttonLayout.addComponent(disabledButton);

Un bouton natif qui utilise le look du navigateur: 

NativeButton nativeButton = new NativeButton("Native Button");
buttonLayout.addComponent(nativeButton);

Et un bouton avec une icône: 

Button iconButton = new Button("Icon Button");
iconButton.setIcon(FontAwesome.ALIGN__LEFT);
buttonLayout.addComponent(iconButton);

** 7.9. CheckBox

**

/uploads/checkbox.png

La case à cocher est un élément d’état de changement, coché ou décoché: 

CheckBox checkbox = new CheckBox("CheckBox");
checkbox.setValue(true);
checkbox.addValueChangeListener(e ->
  checkbox.setValue(!checkbox.getValue()));
formLayout.addComponent(checkbox);

** 7.10. Listes

**

Vaadin a quelques widgets utiles pour gérer les listes.

Tout d’abord, nous créons une liste de nos articles à placer dans le widget: 

List<String> numbers = new ArrayList<>();
numbers.add("One");
numbers.add("Ten");
numbers.add("Eleven");

Le ComboBox est une liste déroulante:

/uploads/combobox-300x168.png%20300w 

ComboBox comboBox = new ComboBox("ComboBox");
comboBox.addItems(numbers);
formLayout.addComponent(comboBox);

ListSelect place verticalement les éléments et utilise une barre de défilement en cas de débordement:

/uploads/listselect.png 

ListSelect listSelect = new ListSelect("ListSelect");
listSelect.addItems(numbers);
listSelect.setRows(2);
formLayout.addComponent(listSelect);

Le NativeSelect est semblable au ComboBox , mais le navigateur ressemble à celui-ci:

/uploads/nativeselect.png 

NativeSelect nativeSelect = new NativeSelect("NativeSelect");
nativeSelect.addItems(numbers);
formLayout.addComponent(nativeSelect);

TwinColSelect est une double liste dans laquelle nous pouvons modifier les éléments entre ces deux volets. chaque élément ne peut vivre que dans l’un des volets à la fois:

/uploads/twincolselect-300x206.png%20300w 

TwinColSelect twinColSelect = new TwinColSelect("TwinColSelect");
twinColSelect.addItems(numbers);

** 7.11. La grille

**

La grille est utilisée pour afficher les données de manière rectangulaire; vous avez des lignes et des colonnes, vous pouvez définir un en-tête et un pied pour les données:

/uploads/grid-300x261.png%20300w 

Grid grid = new Grid("Grid");
grid.setColumns(new Object[]{"Column1", "Column2", "Column3"});
grid.addRow(new Object[]{"Item1", "Item2", "Item3"});
grid.addRow(new Object[]{"Item4", "Item5", "Item6"});

** 8. Push serveur

**

Une autre caractéristique intéressante est la possibilité d’envoyer des messages du serveur à l’interface utilisateur.

Pour utiliser le serveur Push, nous devons ajouter la dépendance suivante à notre fichier pom.xml: 

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-push</artifactId>
    <versionId>8.0.7</versionId>
</dependency>

La dernière version de la dépendance peut être trouvée ici:

vaadin-push .

De plus, nous devons ajouter l’annotation @ Push à notre classe représentant l’interface utilisateur: 

@Push
@Theme("mytheme")
public class VaadinUI extends UI {...}

Nous créons une étiquette pour capturer le message push du serveur: 

private Label currentTime;

Nous créons ensuite un ScheduledExecutorService qui envoie l’heure du serveur au label : 

ScheduledExecutorService scheduleExecutor = Executors.newScheduledThreadPool(1);
Runnable task = () -> {
    currentTime.setValue("Current Time : " + Instant.now());
};
scheduleExecutor.scheduleWithFixedDelay(task, 0, 1, TimeUnit.SECONDS);

ScheduledExecutorService est en cours d’exécution côté serveur de l’application et l’interface utilisateur est mise à jour à chaque exécution.

** 9. Liaison de données

**

Nous pouvons lier notre interface utilisateur à nos classes commerciales.

Tout d’abord, nous créons une classe Java: 

public class BindData {

    private String bindName;

    public BindData(String bindName){
        this.bindName = bindName;
    }

   //getter & setter
}

Ensuite, nous lions notre classe qui a un seul champ à un TextField dans notre interface utilisateur: 

BindData bindData = new BindData("BindData");
BeanFieldGroup beanFieldGroup = new BeanFieldGroup(BindData.class);
beanFieldGroup.setItemDataSource(bindData);
TextField bindedTextField
  = (TextField) beanFieldGroup.buildAndBind("BindName", "bindName");

Tout d’abord, nous créons un objet BindData en utilisant la classe créée précédemment, puis le BeanFieldGroup lie le champ à l’objet TextField.

** 10. Validateurs

**

Nous pouvons créer Validators pour valider les données de nos champs de saisie. Pour ce faire, nous attachons le validateur au champ que nous voulons valider: 

TextField stringValidator = new TextField();
stringValidator.addValidator(
  new StringLengthValidator("String must have 2-5 characters lenght", 2, 5, true));
stringValidator.setValidationVisible(false);

Ensuite, nous validons nos données avant de les utiliser: 

Button buttonStringValidator = new Button("Validate String");
buttonStringValidator.addClickListener(e -> {
    try {
        stringValidator.setValidationVisible(false);
        stringValidator.validate();
    } catch (InvalidValueException err) {
        stringValidator.setValidationVisible(true);
    }
});

Dans ce cas, nous utilisons StringLengthValidator qui valide la longueur d’un String mais Vaadin fournit d’autres validateurs utiles et nous permet également de créer nos validateurs personnalisés.

11. Résumé

Bien sûr, ce bref compte rendu a à peine effleuré la surface; le cadre est bien plus que des widgets d’interface utilisateur, Vaadin fournit tout ce dont vous avez besoin pour créer des applications Web modernes en utilisant Java.

Et, comme toujours, le code peut être trouvé à l’adresse over sur Github .

Related