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 主题,您必须将文件放置在主题文件夹下的 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 ",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 {} }
运行上述代码时,您可以在浏览器中观察到以下输出。

要测试布局的响应性,请缩小浏览器,您可以观察到面板和布局组件将相应地改变其大小和形状。