Vaadin-테마

이 장에서는 테마로 알려진 Vaadin의 또 다른 기능에 대해 자세히 설명합니다. 일반적으로 테마는 런타임에 사용자 정의 할 수있는 프레임 워크를 의미합니다. 콘텐츠는 서버 측에서받은 응답에 따라 동적입니다.

Vaadin은 자체 Java 기반 SAAS 컴파일러의 도움으로 테마를 사용할 수있는 멋진 인터페이스를 제공합니다. 테마 기능은 사용자 정의 가능한 스타일을 제공하고 애플리케이션을보기 위해 Vaadin에 제공됩니다. 테마는 미리 만들어진 템플릿이며 개발자는 시간을 절약 할 수있는 자체 애플리케이션을 구축하기 위해이를 사용자 정의해야합니다.

Vaadin의 모든 테마는 theme폴더 및 각 하위 폴더는 자체 설명이 가능합니다. 따라서 코드를 변경하고 사용자 정의하는 것도 매우 쉽습니다. 모든 테마는 두 가지 유형의 CSS 파일을 가질 수 있습니다..saas 유형 및 .css유형. Vaadin은 폴더 이름에 대한 제한이 없지만 위에 주어진 이미지에서 알 수 있듯이 항상 폴더 이름을 사용하는 것이 좋습니다.

두 종류의 테마를 사용할 수 있습니다. Inbuilt 과 Custom. 이 섹션에서는 이에 대해 자세히 설명합니다.

내장 테마

Vaadin 내장 테마는 아래와 같이 테마 이름으로 주석을 달아 제공됩니다.

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

Vaadin 응용 프로그램을 실행하는 동안 모든 회색 배경은 내장 css파일. 다른 종류의 테마 인 사용자 지정 테마로 만들기 위해 해당 파일을 변경할 수 있습니다. 테마에 내장 된 Vaadin에 대해 배울 수있는 것은 없습니다. 위에서 언급 한 모든 구성 요소는 Vaadin 테마의 일부입니다.

사용자 지정 테마 – 테마 만들기 및 사용

사용자 정의 테마는 VAADIN/themes Eclipse 프로젝트의 웹 애플리케이션 폴더 WebContent 폴더 또는 src/main/webappMaven 프로젝트에서. 이러한 위치는 고정되어 있으며 어떤 유형의 요구 사항에도 변경하지 않는 것이 좋습니다. 이름으로 SAAS 테마를 정의하려면mytheme, 테마 폴더 아래의 mytheme 폴더에 파일을 배치 한 다음 프로젝트를 다시 빌드해야합니다. Vaadin은 브라우저가 요청할 때마다 즉시 자체 .css 파일을 자동으로 생성합니다.

요구 사항에 따라 css 파일의 스타일 콘텐츠를 변경할 수 있습니다. 그러나 프로젝트를 다시 빌드하면 진행중인 내용이 반영되기 시작합니다.

반응 형 테마

Vaadin은 반응 형 테마도 지원합니다. 반응 형 웹 페이지는 화면 크기에 따라 글꼴 크기를 자동으로 설정할 수 있습니다. 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 {}
}

위에 주어진 코드를 실행하면 브라우저에서 다음과 같은 출력을 볼 수 있습니다.

레이아웃의 응답 성을 테스트하려면 브라우저를 줄이면 패널 및 레이아웃 구성 요소가 그에 따라 크기와 모양이 변경되는 것을 확인할 수 있습니다.