Vaadin - Temas

Este capítulo analiza en detalle otra característica de Vaadin, conocida como Tema. En general, tema significa un marco que se puede personalizar en tiempo de ejecución. El contenido será dinámico según la respuesta recibida en el servidor.

Vaadin proporciona una interfaz genial para usar un tema en un segundo con la ayuda de su propio compilador SAAS basado en Java. La función del tema se le otorga a Vaadin para proporcionar un estilo y apariencia personalizables a la aplicación. El tema es una plantilla prefabricada y los desarrolladores deben personalizarla para crear su propia aplicación, lo que les ahorra tiempo.

Puede encontrar todos los temas en Vaadin bajo el themecarpeta y cada una de las subcarpetas son autodescriptibles. Por lo tanto, también es muy fácil cambiar el código y personalizarlo. Cualquier tema puede tener dos tipos de archivos CSS:.saas tipo y .csstipo. Aunque Vaadin no tiene ninguna restricción sobre el nombre de la carpeta, siempre se recomienda usar el nombre de la carpeta, como puede observar en la imagen que se muestra arriba.

Hay dos tipos de temas disponibles: Inbuilt y Custom. Esta sección los analiza en detalle.

Tema incorporado

El tema integrado de Vaadin se proporciona anotándolo con un nombre de tema como se muestra a continuación.

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

Todo el fondo de color gris mientras se ejecuta una aplicación Vaadin proviene del cssarchivos. Podemos modificar esos archivos para convertirlos en un tema personalizado, que es otro tipo de tema. No hay nada que podamos aprender sobre los temas integrados de Vaadin. Todos los componentes mencionados anteriormente son parte de Vaadin Theme.

Tema personalizado: creación y uso de temas

Los temas personalizados se colocan en el VAADIN/themes carpeta de la aplicación web, en un proyecto Eclipse bajo la WebContent carpeta o src/main/webappen proyectos Maven. Estas ubicaciones son fijas y se recomienda no cambiar por ningún tipo de requerimiento. Para definir un tema SAAS con el nombremytheme, debe colocar el archivo en la carpeta mytheme en la carpeta del tema y luego reconstruir su proyecto. Vaadin creará automáticamente su propio archivo .css sobre la marcha cuando lo solicite el navegador.

Puede cambiar el contenido de estilo en el archivo css según sus necesidades. Sin embargo, recuerde construir el proyecto una vez más y comenzará a reflejarse en el progreso.

Tema sensible

Vaadin también admite el tema receptivo. La página web receptiva puede establecer automáticamente el tamaño de fuente de acuerdo con el tamaño de la pantalla. En la aplicación Vaadin, necesitamos agregar una sola línea de código para que toda la aplicación responda.

Consideremos el siguiente ejemplo para aprender más sobre Vaadin. Realice cambios en la clase MyUI.java como se muestra a continuación.

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

Cuando ejecuta el código proporcionado anteriormente, puede observar el siguiente resultado en el navegador.

Para probar la capacidad de respuesta del diseño, reduzca el navegador y podrá observar que el panel y el componente de diseño cambiarán su tamaño y forma en consecuencia.

↰ Previous page