Introduction à Vaadin

1. Vue d'ensemble

Vaadin est un framework Java côté serveur pour la création d'interfaces utilisateur Web. En l'utilisant, nous pouvons créer notre front-end en utilisant les fonctionnalités Java.

2. Dépendances et configuration de Maven

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

 com.vaadin vaadin-server   com.vaadin vaadin-client-compiled   com.vaadin vaadin-themes  

Les dernières versions des dépendances peuvent être trouvées ici: vaadin-server, vaadin-client-compiled, vaadin-themes.

  • package vaadin-server - comprend des classes pour gérer tous les détails du serveur tels que les sessions, la communication client, etc.
  • vaadin-client-compiled - est basé sur GWT et inclut les packages nécessaires pour compiler le client
  • vaadin-themes - comprend des thèmes prédéfinis et tous les utilitaires pour créer nos thèmes

Pour compiler nos widgets Vaadin, nous devons configurer le maven-war-plugin, vaadin-maven-plugin et le maven-clean-plugin. Pour le pom complet, assurez-vous de vérifier le fichier pom dans le code source - à la fin du didacticiel.

De plus, nous devons également ajouter le référentiel Vaadin et la gestion des dépendances:

  vaadin-addons //maven.vaadin.com/vaadin-addons      com.vaadin vaadin-bom 13.0.9 pom import   

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

Pour exécuter rapidement l'application, nous utiliserons le plugin Jetty:

 org.eclipse.jetty jetty-maven-plugin 9.3.9.v20160517  2 true  

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 et des composants, et de nombreuses options d'extensibilité.

Le cadre couvre également le côté serveur , ce qui signifie que chaque modification que vous apportez à l'interface utilisateur est immédiatement envoyée au serveur - donc à chaque instant, l'application backend sait ce qui se passe dans le front-end.

Vaadin se compose d'un côté client et serveur - avec le côté client construit au-dessus du cadre bien connu de Google Widget Toolkit, et le côté serveur géré par le VaadinServlet .

4. Le servlet

Habituellement, une application Vaadin n'utilise pas de fichier web.xml ; à la place, il définit son servlet à l' aide d'annotations:

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

Dans ce cas, ce servlet diffuse du contenu à partir du chemin / VAADIN .

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 disposition Vaadin

Le framework est livré avec un certain nombre de gestionnaires de mise en page 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 comment les propriétés ici sont librement empruntées à la terminologie CSS typique.

6.2. Mise en page horizontale

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 page 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 certains des composants les plus courants pour la construction de notre interface utilisateur.

7.1. Étiquette

Le libellé est bien sûr également bien connu - et simplement utilisé pour afficher du texte:

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

Après avoir créé le composant, notez l'étape critique consistant à l'ajouter à la mise en page.

7.2. Lien

Le widget de lien est essentiellement un lien hypertexte de base:

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

Remarquez comment les valeurs HTML typiques d'un élément sont tous ici.

7.3. Champ de texte

Ce widget est utilisé pour saisir du texte:

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

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

Notez également que Font Awesome est livré avec le framework ; il est défini comme un Enum, et nous pouvons facilement l'utiliser.

7.4. TextArea

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

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", LocalDate.ofEpochDay(0));

On peut aller plus loin et l'imbriquer dans un champ combo pour gagner de la place:

InlineDateField inlineDateField = new InlineDateField();

7.6. PasswordField

This is the standard masked password input:

PasswordField passwordField = new PasswordField();

7.7. RichTextArea

With this component, we can show formatted text, and it provides an interface to manipulate such text with buttons to control the fonts, size, alignment, etc.are:

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

7.8. Button

Buttons are used for capturing user input and come in a variety of sizes and colors.

To create a button we instantiate the widget class as usual:

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

Changing the style we can have some different buttons:

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

We can create a disabled button:

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

A native button that uses the browser's look:

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

And a button with an icon:

Button iconButton = new Button("Icon Button"); iconButton.setIcon(VaadinIcons.ALIGN_LEFT); buttonLayout.addComponent(iconButton);

7.9. CheckBox

The check box is a change state element, is checked or is unchecked:

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

7.10. Lists

Vaadin has some useful widgets to handle lists.

First, we create a list of our items to be placed in the widget:

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

The ComboBox is a drop down list:

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

The ListSelect vertically places items and uses a scroll bar in case of overflow:

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

The NativeSelect is like the ComboBox but have the browser look and feel:

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

The TwinColSelect is a dual list where we can change the items between these two panes; each item can only live in one of the panes at a time:

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

7.11. Grid

The grid is used to show data in a rectangular way; you have rows and columns, can define header and foot for the data:

Grid grid = new Grid(Row.class); grid.setColumns("column1", "column2", "column3"); Row row1 = new Row("Item1", "Item2", "Item3"); Row row2 = new Row("Item4", "Item5", "Item6"); List rows = new ArrayList(); rows.add(row1); rows.add(row2); grid.setItems(rows);

The Row class above is a simple POJO we've added to represent a row:

public class Row { private String column1; private String column2; private String column3; // constructors, getters, setters }

8. Server Push

Another interesting feature is an ability to send messages from the server to the UI.

To use server push, we need to add the following dependency to our pom.xml:

 com.vaadin vaadin-push 8.8.5 

The latest version of the dependency can be found here: vaadin-push.

Also, we need to add the @Push annotation to our class representing UI:

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

We create a label to capture the server push message:

private Label currentTime;

We then create a ScheduledExecutorService that sends the time from the server to the label:

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

The ScheduledExecutorService is running on the server side of the application and every time it runs, the user interface gets updated.

9. Data Binding

We can bind our user interface to our business classes.

First, we create a Java class:

public class BindData { private String bindName; public BindData(String bindName){ this.bindName = bindName; } // getter & setter }

Then we bind our class that has a single field to a TextField in our user interface:

Binder binder = new Binder(); BindData bindData = new BindData("BindData"); binder.readBean(bindData); TextField bindedTextField = new TextField(); binder.forField(bindedTextField).bind(BindData::getBindName, BindData::setBindName);

First, we create a BindData object using the class we created before, then the Binder binds the field to the TextField.

10. Validators

We can create Validators to validate the data in our input fields. To do that, we attach the validator to the field we want to validate:

BindData stringValidatorBindData = new BindData(""); TextField stringValidator = new TextField(); Binder stringValidatorBinder = new Binder(); stringValidatorBinder.setBean(stringValidatorBindData); stringValidatorBinder.forField(stringValidator) .withValidator(new StringLengthValidator("String must have 2-5 characters lenght", 2, 5)) .bind(BindData::getBindName, BindData::setBindName);

Then we validate our data before we use it:

Button buttonStringValidator = new Button("Validate String"); buttonStringValidator.addClickListener(e -> stringValidatorBinder.validate());

In this case, we are using the StringLengthValidator that validates the length of a String but Vaadin provides other useful validators and also allows us to create our custom validators.

11. Summary

Of course, this quick writeup barely scratched the surface; the framework is much more than user interface widgets, Vaadin provides all you need for creating modern web applications using Java.

Et, comme toujours, le code peut être trouvé sur Github.