Vaadin - 主題

本章詳細討論了 Vaadin 的另一個特性，稱為主題。一般來說，主題指的是一個可以在執行時自定義的框架。內容將根據伺服器端接收到的響應而動態變化。

Vaadin 提供了一個很酷的介面，可以透過其基於 Java 的 SAAS 編譯器在幾秒鐘內使用主題。提供主題功能是為了讓 Vaadin 能夠為應用程式提供可自定義的樣式和外觀。主題是一個預製的模板，開發人員需要對其進行自定義以構建自己的應用程式，從而節省時間。

您可以在 Vaadin 的 **theme** 資料夾下找到所有主題，並且每個子資料夾都是自描述的。因此，更改程式碼和自定義程式碼也非常容易。任何主題都可以包含兩種型別的 CSS 檔案 - **.saas** 型別和 **.css** 型別。雖然 Vaadin 對資料夾名稱沒有任何限制，但始終建議使用資料夾名稱，如上圖所示。

有兩種型別的主題可用 - **內建** 和 **自定義**。本節將詳細討論它們。

內建主題

Vaadin 內建主題是透過使用主題名稱進行註釋來提供的，如下所示。

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

執行 Vaadin 應用程式時，所有灰色背景都來自內建的 **css** 檔案。我們可以更改這些檔案以將其作為自定義主題，這是另一種主題。關於 Vaadin 內建主題，我們沒有什麼可以學習的。所有上述元件都是 Vaadin 主題的一部分。

自定義主題 – 建立和使用主題

自定義主題放置在 Web 應用程式的 **VAADIN/themes** 資料夾中，在 Eclipse 專案的 **WebContent** 資料夾下或 Maven 專案的 **src/main/webapp** 資料夾下。這些位置是固定的，建議不要為了任何型別的需求而更改。要定義一個名為 **mytheme** 的 SAAS 主題，必須將檔案放置在 theme 資料夾下的 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 {}
}

當您執行上面給出的程式碼時，您可以在瀏覽器中觀察到以下輸出。

要測試佈局的響應能力，請縮小瀏覽器，您會發現面板和佈局元件會相應地改變其大小和形狀。