Vaadin - Темы

В этой главе подробно обсуждается еще одна особенность Vaadin, известная как Theme. В общем, тема означает фреймворк, который можно настраивать во время выполнения. Контент будет динамическим в зависимости от ответа, полученного на стороне сервера.

Vaadin предоставляет крутой интерфейс для использования темы за секунду с помощью собственного компилятора SAAS на основе Java. Функция темы предоставляется Vaadin, чтобы обеспечить настраиваемый стиль и внешний вид приложения. Тема - это готовый шаблон, и разработчикам необходимо настроить его, чтобы создать собственное приложение, которое экономит их время.

Вы можете найти все темы в Vaadin под themeПапка и каждая из подпапок могут самоописываться. Следовательно, также очень легко изменить код и настроить его. В любой теме может быть два типа файлов CSS:.saas тип и .cssтип. Хотя Vaadin не имеет никаких ограничений на имя папки, всегда рекомендуется использовать имя папки, как вы можете заметить на изображении, приведенном выше.

Доступны два типа тем: Inbuilt и Custom. В этом разделе они подробно рассматриваются.

Встроенная тема

Встроенная тема Vaadin предоставляется путем аннотирования ее именем темы, как показано ниже.

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

Весь серый цвет фона при запуске приложения Vaadin происходит от встроенного cssфайлы. Мы можем внести изменения в эти файлы, чтобы сделать их настраиваемой темой, которая является другим типом темы. Мы ничего не можем узнать о встроенных темах Vaadin. Все вышеупомянутые компоненты являются частью Vaadin Theme.

Пользовательская тема - Создание и использование тем

Пользовательские темы помещаются в VAADIN/themes папка веб-приложения в проекте Eclipse в папке WebContent папка или src/main/webappв проектах Maven. Эти местоположения являются фиксированными, и их не рекомендуется изменять при любых требованиях. Чтобы определить тему SAAS с именемmytheme, вы должны поместить файл в папку mytheme в папке темы, а затем перестроить проект. Vaadin автоматически создаст свой собственный файл .css на лету по запросу браузера.

Вы можете изменить содержимое стиля в файле css в соответствии с вашими требованиями. Однако не забудьте собрать проект еще раз, и он начнет отражаться в процессе.

Адаптивная тема

Vaadin также поддерживает адаптивную тему. Адаптивная веб-страница может автоматически устанавливать размер шрифта в соответствии с размером экрана. В приложении Vaadin нам нужно добавить одну строку кода, чтобы все приложение реагировало.

Давайте рассмотрим следующий пример, чтобы узнать больше о Ваадине. Внесите изменения в класс MyUI.java, как показано ниже.

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

Когда вы запустите приведенный выше код, вы увидите следующий результат в браузере.

Чтобы проверить отзывчивость макета, уменьшите размер окна браузера, и вы увидите, что панель и компонент макета изменят свой размер и форму соответственно.