开发手册 欢迎您!
软件开发者资料库

Vaadin - Themes

Vaadin主题 - 从简单和简单的步骤学习Vaadin,从基本到高级概念,包括概述,环境设置,创建第一个应用程序,架构,用户界面组件,核心元素,布局组件,主题。

本章详细讨论了Vaadin的另一个功能,即主题.通常,theme表示可在运行时自定义的框架.根据服务器端收到的响应,内容将是动态的.

Vaadin在其自己的基于Java的SAAS编译器的帮助下提供了一个很酷的界面来使用主题. Vaadin提供主题功能,以便为应用程序提供可自定义的样式和外观.主题是预制模板,开发人员需要自定义它以构建自己的应用程序,节省时间.

您可以在主题下找到Vaadin中的所有主题文件夹和每个子文件夹都是自我描述的.因此,更改代码和自定义代码也非常容易.任何主题都可以包含两种类型的CSS文件和减号; .saas 类型和 .css 类型.尽管Vaadin对文件夹名称没有任何限制,但始终建议您使用文件夹名称,如上图所示.

有两种主题可用 :  内置自定义.本节将详细讨论它们.

内置主题

内置主题的Vaadin通过使用主题名称进行注释来提供,如下所示./p>

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

运行Vaadin应用程序时,所有灰色背景都来自内置的 css 文件.我们可以更改这些文件,以使它们成为另一种主题的自定义主题.我们无法了解Vaadin内置主题.所有上述组件都是Vaadin Theme的一部分.

自定义主题 - 创建和使用主题

自定义主题放在 VAADIN中/themes Web应用程序的文件夹,位于 WebContent 文件夹下的Eclipse项目或Maven项目中的 src/main/webapp .这些位置是固定的,建议不要因任何类型的要求而改变.要定义名称为 mytheme 的SAAS主题,必须将文件放在主题文件夹下的mytheme文件夹中,然后重建项目.无论何时浏览器请求,Vaadin都会自动创建自己的.css文件.

Vaadin Custom theme

您可以根据需要更改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 {}}

当您运行上面给出的代码时,您可以在浏览器中观察以下输出./p> Vaadin Responsive Theme

要测试布局的响应性,请减少浏览器,你可以观察到面板和布局组件将相应地改变它们的大小和形状.

t>