Vaadin - Thèmes

Ce chapitre traite en détail d'une autre fonctionnalité de Vaadin, connue sous le nom de thème. En général, le thème signifie un cadre qui est personnalisable à l'exécution. Le contenu sera dynamique en fonction de la réponse reçue du côté serveur.

Vaadin fournit une interface sympa pour utiliser un thème en une seconde à l'aide de son propre compilateur SAAS basé sur Java. La fonction de thème est donnée à Vaadin afin de fournir un style et un look personnalisables à l'application. Le thème est un modèle prédéfini et les développeurs doivent le personnaliser afin de créer leur propre application, ce qui leur fait gagner du temps.

Vous pouvez retrouver tous les thèmes de Vaadin sous le themedossier et chacun des sous-dossiers sont auto-descriptibles. Par conséquent, il est également très facile de modifier le code et de le personnaliser. Tout thème peut contenir deux types de fichiers CSS -.saas type et .csstype. Bien que Vaadin n'ait aucune restriction sur le nom du dossier, il est toujours recommandé d'utiliser le nom du dossier comme vous pouvez le remarquer sur l'image ci-dessus.

Il existe deux types de thèmes disponibles - Inbuilt et Custom. Cette section les aborde en détail.

Thème intégré

Le thème Vaadin intégré est fourni en l'annotant avec un nom de thème comme indiqué ci-dessous.

@Theme("mytheme")
public class MyUI extends UI {

Tout le fond de couleur grise lors de l'exécution d'une application Vaadin provient du intégré cssdes dossiers. Nous pouvons modifier ces fichiers afin de les transformer en thème personnalisé qui est un autre type de thème. Il n'y a rien que nous puissions apprendre sur les thèmes intégrés de Vaadin. Tous les composants mentionnés ci-dessus font partie du thème Vaadin.

Thème personnalisé - Création et utilisation de thèmes

Les thèmes personnalisés sont placés dans le VAADIN/themes dossier de l'application web, dans un projet Eclipse sous le WebContent dossier ou src/main/webappdans les projets Maven. Ces emplacements sont fixes et il est recommandé de ne pas changer pour tout type d'exigence. Pour définir un thème SAAS avec le nommytheme, vous devez placer le fichier dans le dossier mytheme sous le dossier thème puis reconstruire votre projet. Vaadin créera automatiquement son propre fichier .css à la volée à la demande du navigateur.

Vous pouvez modifier le contenu de style dans le fichier css selon vos besoins. Cependant, n'oubliez pas de reconstruire le projet et il commencera à refléter en cours.

Thème réactif

Vaadin prend également en charge le thème réactif. Une page Web réactive peut définir automatiquement la taille de la police en fonction de la taille de l'écran. Dans l'application Vaadin, nous devons ajouter une seule ligne de code afin de rendre toute l'application réactive.

Prenons l'exemple suivant pour en savoir plus sur Vaadin. Apportez des modifications à la classe MyUI.java comme indiqué ci-dessous.

package com.TutorialsMy.myApp;
import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.time.LocalDate;
import java.util.Arrays;
import java.util.List;
import java.util.Locale;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.TreeData;
import com.vaadin.icons.VaadinIcons;
import com.vaadin.server.Responsive;
import com.vaadin.server.UserError;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;
import com.vaadin.ui.CustomLayout;
import com.vaadin.ui.DateField;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.HorizontalSplitPanel;

import com.vaadin.ui.Label;
import com.vaadin.ui.Notification;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.Tree;
import com.vaadin.ui.UI;
import com.vaadin.ui.Upload;
import com.vaadin.ui.Upload.Receiver;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.VerticalSplitPanel;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      final VerticalLayout hLayout = new VerticalLayout();
      Label l1 = new Label("Enter today's Date\n",ContentMode.PREFORMATTED);
      DateField date = new DateField();
      date.setValue(LocalDate.now());
      date.setLocale(new Locale("en","IND"));
      hLayout.addComponents(l1,date);
      hLayout.setComponentAlignment(l1,Alignment.BOTTOM_CENTER);
      hLayout.setComponentAlignment(date,Alignment.BOTTOM_CENTER);
      Responsive.makeResponsive(hLayout);
      setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

Lorsque vous exécutez le code ci-dessus, vous pouvez observer la sortie suivante dans le navigateur.

Pour tester la réactivité de la mise en page, réduisez le navigateur et vous pouvez observer que le panneau et le composant de mise en page changeront leur taille et leur forme en conséquence.