Vaadin - Temas

Este capítulo discute em detalhes sobre outro recurso do Vaadin, conhecido como Tema. Em geral, tema significa uma estrutura personalizável em tempo de execução. O conteúdo será dinâmico dependendo da resposta recebida no final do servidor.

Vaadin fornece uma interface legal para usar um tema em um segundo com a ajuda de seu próprio compilador SAAS baseado em Java. O recurso de tema é fornecido ao Vaadin para fornecer um estilo e aparência personalizáveis ao aplicativo. O tema é um modelo predefinido e os desenvolvedores precisam personalizá-lo para construir seu próprio aplicativo, o que economiza seu tempo.

Você pode encontrar todos os temas do Vaadin sob o themepasta e cada uma das subpastas são autodescritíveis. Portanto, também é muito fácil alterar o código e personalizá-lo. Qualquer tema pode ter dois tipos de arquivos CSS -.saas digite e .csstipo. Embora o Vaadin não tenha nenhuma restrição ao nome da pasta, é sempre recomendável usar o nome da pasta, como você pode notar na imagem fornecida acima.

Existem dois tipos de temas disponíveis - Inbuilt e Custom. Esta seção os discute em detalhes.

Tema integrado

O tema integrado do Vaadin é fornecido anotando-o com um nome de tema, conforme mostrado abaixo.

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

Todo o fundo de cor cinza durante a execução de um aplicativo Vaadin vem do embutido cssarquivos. Podemos fazer alterações nesses arquivos para torná-los um tema personalizado, que é outro tipo de tema. Não há nada que possamos aprender sobre os temas integrados do Vaadin. Todos os componentes mencionados acima fazem parte do Tema Vaadin.

Tema personalizado - Criando e usando temas

Temas personalizados são colocados no VAADIN/themes pasta do aplicativo da web, em um projeto Eclipse sob o WebContent pasta ou src/main/webappem projetos Maven. Esses locais são fixos e não devem ser alterados para nenhum tipo de requisito. Para definir um tema SAAS com o nomemytheme, você deve colocar o arquivo na pasta mytheme na pasta theme e reconstruir seu projeto. O Vaadin criará automaticamente seu próprio arquivo .css em tempo real, sempre que solicitado pelo navegador.

Você pode alterar o conteúdo do estilo no arquivo css de acordo com suas necessidades. No entanto, lembre-se de construir o projeto mais uma vez e ele começará a refletir em andamento.

Tema Responsivo

Vaadin também oferece suporte ao tema responsivo. A página da Web responsiva pode definir automaticamente o tamanho da fonte de acordo com o tamanho da tela. No aplicativo Vaadin, precisamos adicionar uma única linha de código para tornar todo o aplicativo responsivo.

Vamos considerar o exemplo a seguir para aprender mais sobre Vaadin. Faça alterações na classe MyUI.java conforme mostrado abaixo.

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

Ao executar o código fornecido acima, você pode observar a seguinte saída no navegador.

Para testar a capacidade de resposta do layout, reduza o navegador e você pode observar que o painel e o componente de layout mudarão de tamanho e forma de acordo.

↰ Previous page