Vaadin - Chủ đề
Chương này thảo luận chi tiết về một tính năng khác của Vaadin, được gọi là Chủ đề. Nói chung, chủ đề có nghĩa là một khuôn khổ có thể tùy chỉnh trong thời gian chạy. Nội dung sẽ động tùy thuộc vào phản hồi nhận được ở cuối máy chủ.
Vaadin cung cấp một giao diện tuyệt vời để sử dụng chủ đề trong giây lát với sự trợ giúp của trình biên dịch SAAS dựa trên Java của riêng nó. Tính năng chủ đề được cung cấp cho Vaadin để cung cấp phong cách và giao diện có thể tùy chỉnh cho ứng dụng. Chủ đề là một mẫu được tạo sẵn và các nhà phát triển cần phải tùy chỉnh nó để xây dựng ứng dụng của riêng họ giúp tiết kiệm thời gian của họ.
Bạn có thể tìm thấy tất cả các chủ đề trong Vaadin trong themethư mục và mỗi thư mục con đều có thể tự mô tả. Do đó, cũng rất dễ dàng thay đổi mã và tùy chỉnh giống nhau. Bất kỳ chủ đề nào cũng có thể có hai loại tệp CSS trong đó -.saas gõ và .csskiểu. Mặc dù Vaadin không có bất kỳ hạn chế nào đối với tên thư mục, nhưng bạn luôn nên sử dụng tên thư mục như bạn có thể nhận thấy từ hình ảnh ở trên.
Có hai loại chủ đề có sẵn - Inbuilt và Custom. Phần này thảo luận chi tiết về chúng.
Chủ đề tích hợp
Chủ đề tích hợp sẵn Vaadin được cung cấp bằng cách chú thích nó bằng tên chủ đề như hình dưới đây.
@Theme("mytheme")
public class MyUI extends UI {
Tất cả màu xám trở lại trong khi chạy ứng dụng Vaadin đều đến từ csscác tập tin. Chúng tôi có thể thực hiện thay đổi các tệp đó để biến chúng thành một chủ đề tùy chỉnh, một loại chủ đề khác. Không có gì chúng ta có thể tìm hiểu về các chủ đề được tích hợp sẵn trong Vaadin. Tất cả các thành phần được đề cập ở trên là một phần của Vaadin Theme.
Chủ đề tùy chỉnh - Tạo và sử dụng chủ đề
Các chủ đề tùy chỉnh được đặt trong VAADIN/themes thư mục của ứng dụng web, trong một dự án Eclipse trong WebContent thư mục hoặc src/main/webapptrong các dự án Maven. Các vị trí này là cố định và khuyến cáo không thay đổi theo bất kỳ loại yêu cầu nào. Để xác định một chủ đề SAAS với tênmytheme, bạn phải đặt tệp trong thư mục mytheme trong thư mục chủ đề, sau đó xây dựng lại dự án của bạn. Vaadin sẽ tự động tạo tệp .css của riêng mình bất cứ khi nào trình duyệt yêu cầu.
Bạn có thể thay đổi nội dung kiểu trong tệp css theo yêu cầu của bạn. Tuy nhiên, hãy nhớ xây dựng dự án một lần nữa và nó sẽ bắt đầu phản ánh quá trình thực hiện.
Chủ đề đáp ứng
Vaadin cũng hỗ trợ chủ đề đáp ứng. Trang web đáp ứng có thể tự động đặt kích thước phông chữ theo kích thước màn hình. Trong ứng dụng Vaadin, chúng tôi cần thêm một dòng mã để làm cho toàn bộ ứng dụng phản hồi.
Chúng ta hãy xem xét ví dụ sau để tìm hiểu thêm về Vaadin. Thực hiện các thay đổi trong lớp MyUI.java như hình dưới đây.
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 {}
}
Khi bạn chạy mã được đưa ra ở trên, bạn có thể quan sát kết quả sau trong trình duyệt.
Để kiểm tra khả năng đáp ứng của bố cục, hãy giảm trình duyệt xuống và bạn có thể quan sát thấy bảng điều khiển và thành phần bố cục sẽ thay đổi kích thước và hình dạng của chúng tương ứng.