Vaadin - ธีม

บทนี้จะกล่าวถึงรายละเอียดเกี่ยวกับคุณลักษณะอื่นของ Vaadin หรือที่เรียกว่า Theme โดยทั่วไปธีมหมายถึงกรอบงานที่ปรับแต่งได้ในขณะรันไทม์ เนื้อหาจะเป็นแบบไดนามิกขึ้นอยู่กับการตอบสนองที่ได้รับเมื่อสิ้นสุดเซิร์ฟเวอร์

Vaadin มีอินเทอร์เฟซที่ยอดเยี่ยมสำหรับการใช้ธีมในไม่กี่วินาทีด้วยความช่วยเหลือของคอมไพเลอร์ SAAS ที่ใช้ Java ของตัวเอง ฟีเจอร์ธีมมอบให้กับ Vaadin เพื่อมอบสไตล์ที่ปรับแต่งได้และดูแอปพลิเคชัน ธีมเป็นเทมเพลตที่สร้างไว้ล่วงหน้าและนักพัฒนาจำเป็นต้องปรับแต่งเพื่อสร้างแอปพลิเคชันของตนเองซึ่งช่วยประหยัดเวลา

คุณสามารถค้นหาธีมทั้งหมดใน Vaadin ได้ที่ด้านล่าง themeโฟลเดอร์และแต่ละโฟลเดอร์ย่อยสามารถอธิบายตนเองได้ ดังนั้นจึงง่ายมากที่จะเปลี่ยนรหัสและปรับแต่งเหมือนกัน ธีมใด ๆ สามารถมีไฟล์ CSS ได้สองประเภท -.saas พิมพ์และ .cssชนิด. แม้ว่า Vaadin จะไม่มีข้อ จำกัด ใด ๆ เกี่ยวกับชื่อโฟลเดอร์ แต่ขอแนะนำให้ใช้ชื่อโฟลเดอร์ตามที่คุณสามารถสังเกตเห็นได้จากภาพด้านบน

มีธีมให้เลือกสองแบบ - Inbuilt และ Custom. ส่วนนี้จะกล่าวถึงรายละเอียด

สร้างขึ้นในธีม

Vaadin ที่สร้างขึ้นในธีมมีให้โดยใส่คำอธิบายประกอบด้วยชื่อธีมดังที่แสดงด้านล่าง

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

พื้นหลังสีเทาทั้งหมดในขณะที่เรียกใช้แอปพลิเคชัน Vaadin มาจาก inbuilt cssไฟล์. เราสามารถทำการเปลี่ยนแปลงไฟล์เหล่านั้นเพื่อให้เป็นธีมที่กำหนดเองซึ่งเป็นธีมอีกแบบหนึ่ง ไม่มีอะไรที่เราสามารถเรียนรู้เกี่ยวกับ Vaadin ที่สร้างขึ้นในธีม ส่วนประกอบที่กล่าวถึงข้างต้นทั้งหมดเป็นส่วนหนึ่งของ Vaadin Theme

ธีมที่กำหนดเอง - การสร้างและใช้ธีม

ธีมที่กำหนดเองจะอยู่ในไฟล์ VAADIN/themes โฟลเดอร์ของเว็บแอ็พพลิเคชันในโปรเจ็กต์ Eclipse ภายใต้ไฟล์ WebContent โฟลเดอร์หรือ src/main/webappในโครงการ Maven สถานที่เหล่านี้ได้รับการแก้ไขและไม่แนะนำให้เปลี่ยนแปลงสำหรับข้อกำหนดประเภทใด ๆ เพื่อกำหนดธีม 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 {}
}

เมื่อคุณรันโค้ดที่ระบุข้างต้นคุณสามารถสังเกตผลลัพธ์ต่อไปนี้ในเบราว์เซอร์

ในการทดสอบการตอบสนองของเค้าโครงให้ลดเบราว์เซอร์และคุณจะสังเกตได้ว่าแผงควบคุมและองค์ประกอบเค้าโครงจะเปลี่ยนขนาดและรูปร่างตาม