Vaadin - Temi

Questo capitolo discute in dettaglio su un'altra caratteristica di Vaadin, nota come Tema. In generale, per tema si intende un framework personalizzabile in fase di esecuzione. Il contenuto sarà dinamico a seconda della risposta ricevuta sul lato server.

Vaadin fornisce un'interfaccia interessante per utilizzare un tema in un secondo con l'aiuto del proprio compilatore SAAS basato su Java. La funzionalità del tema viene fornita a Vaadin per fornire uno stile e un aspetto personalizzabili all'applicazione. Il tema è un modello predefinito e gli sviluppatori devono personalizzarlo per creare la propria applicazione che fa risparmiare tempo.

Puoi trovare tutti i temi in Vaadin sotto themecartella e ciascuna delle sottocartelle sono auto-descrittive. Quindi, è anche molto facile cambiare il codice e personalizzare lo stesso. Ogni tema può contenere due tipi di file CSS:.saas tipo e .cssgenere. Sebbene Vaadin non abbia alcuna restrizione sul nome della cartella, si consiglia sempre di utilizzare il nome della cartella come puoi notare dall'immagine sopra.

Sono disponibili due tipi di temi: Inbuilt e Custom. Questa sezione li discute in dettaglio.

Tema incorporato

Il tema integrato Vaadin viene fornito annotandolo con un nome del tema come mostrato di seguito.

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

Tutto lo sfondo di colore grigio durante l'esecuzione di un'applicazione Vaadin proviene dall'integrato cssFile. Possiamo apportare modifiche a quei file per renderli come un tema personalizzato che è un altro tipo di tema. Non c'è niente che possiamo imparare sui temi incorporati di Vaadin. Tutti i componenti sopra menzionati fanno parte del tema Vaadin.

Tema personalizzato: creazione e utilizzo di temi

I temi personalizzati vengono inseriti nel file VAADIN/themes cartella dell'applicazione web, in un progetto Eclipse sotto il file WebContent cartella o src/main/webappnei progetti Maven. Queste posizioni sono fisse e si consiglia di non cambiare per nessun tipo di esigenza. Per definire un tema SAAS con il nomemytheme, devi posizionare il file nella cartella mytheme sotto la cartella del tema, quindi ricostruire il tuo progetto. Vaadin creerà automaticamente il proprio file .css al volo ogni volta che richiesto dal browser.

È possibile modificare il contenuto dello stile nel file css secondo le proprie esigenze. Tuttavia, ricorda di costruire di nuovo il progetto e inizierà a riflettere in corso.

Tema reattivo

Vaadin supporta anche il tema reattivo. La pagina Web reattiva può impostare automaticamente la dimensione del carattere in base alle dimensioni dello schermo. Nell'applicazione Vaadin, dobbiamo aggiungere una singola riga di codice per rendere reattiva l'intera applicazione.

Consideriamo il seguente esempio per saperne di più su Vaadin. Apporta le modifiche nella classe MyUI.java come mostrato di seguito.

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 {}
}

Quando esegui il codice sopra indicato, puoi osservare il seguente output nel browser.

Per testare la reattività del layout, riduci il browser e puoi osservare che il pannello e il componente del layout cambieranno le loro dimensioni e forma di conseguenza.