响应式网站模版,东莞网站开发哪家强,wordpress评论头像不显示,华为云做的网站怎么样vaadin教程1.简介 当您是后端开发人员时#xff0c;您会听到别人说您无法创建内置HTML的UI页面并且无法在CSS中设置样式而引起的痛苦。 就像成为后端开发人员一样#xff0c;它具有已知的局限性#xff0c;即我们可以播放和运行大型生产后端应用程序#xff0c;但不能创建漂… vaadin教程 1.简介 当您是后端开发人员时您会听到别人说您无法创建内置HTML的UI页面并且无法在CSS中设置样式而引起的痛苦。 就像成为后端开发人员一样它具有已知的局限性即我们可以播放和运行大型生产后端应用程序但不能创建漂亮的页面来实际显示这些后端应用程序管理的数据。 如果相同的想法曾经困扰过您请不用担心 Vaadin在这里。 使用Vaadin可以完全使用Java创建应用程序的前端 。 它提供了高度成熟的服务器端UI创建支持使我们能够用Java语言编写生产级可重用组件。 它具有所有流行的Java开发环境EclipseIntelliJNetBeansMaven等本教程的示例使用IntelliJ的支持。 我们将首先了解Vaadin的实际工作原理并遵循Vaadin中存在的各种组件和布局。 我们将以出色的示例应用程序结束本课程该示例应用程序在单个视图中演示事件处理和多种布局。 让我们开始吧。 目录 1.简介 2. Vaadin如何工作 3. Vaadin插件 4.创建一个项目 5. Maven依赖 6. Vaadin Servlet 7. Vaadin主班 8. Vaadin布局管理器 8.1 VerticalLayout 8.2 HorizontalLayout 8.3网格布局 8.4 FormLayout 9. Vaadin成分 9.1标签 9.2链接 9.3文字栏位 9.4 TextArea 9.5 DateField和InlineDateField 9.6 PasswordField 9.7按钮 9.8复选框 9.9清单 10.使用Vaadin主题 11.结论 12.下载源代码 2. Vaadin如何工作 一般来说Vaadin与AWTSpring和SWT十分相似。 我们有一些布局和组件可以实例化并提供数据最后将它们绑定到父布局中以显示容器。 这些组件和布局的实际呈现方式不同。 Vaadin组件不是使用布局取决于底层操作系统的Java来呈现的传统组件而是通过Ajax与后端服务器通信并由框架自动管理HTML5 / CSS / JavaScript组件。 让我们可视化Vaadin如何在前端UI引擎及其自身组件之间进行排列 Vaadin建筑 在上图中非常清楚的是Vaadin如何防止后端开发人员编写基于HTMLCSS和JS的组件并提供Vaadin引擎我们可以在该引擎上为UI组件开发Java代码本身然后可以通过框架将其翻译为HTML组件。本身。 它是客户端Vaadin引擎以HTML5 / CSS / JavaScript编写基于Google Web Toolkit和服务器端框架它们为我们管理UI。 服务器端组件还支持Vaadin中的数据绑定这使得将数据库集成到组件中非常容易。 最后不要认为Vaadin仅限于Java。 使用最新版本的Vaadin还可以编写基于HTML的Vaadin布局使用CSS设置样式并使用Javascript本身来调整行为。 在本课程中我们将仅限于仅使用Java语言。 3. Vaadin插件 既然我们了解了Vaadin的工作原理就可以为我们的机器进行设置了。 为了继续学习本课程以及IDE内提供的易于使用的插件我们可以将Eclipse插件安装为 Vaadin Eclipse插件 如果您像我一样使用IntelliJ我们也可以获取IDE的插件 Vaadin IntelliJ插件 该插件不是绝对需要的但是它为使用100基于UI的系统提供了机会您可以在其中使用WYSIWYG系统。 4.创建一个项目 现在我们已经准备就绪终于可以使用Maven为我们创建一个项目。 我们将使用Vaadin原型创建一个应用程序。 让我们看一下这里的命令 创建一个项目 mvn archetype:generate -DarchetypeGroupIdcom.vaadin -DarchetypeArtifactIdvaadin-archetype-application -DarchetypeVersionLATEST -DgroupIdcom.javacodegeeks.example -DartifactIdJCG-Vaadin-Example -Dversion1.0 -Dpackagingjar 这是创建项目时得到的结果我们仅显示有趣的部分 建立专案 [INFO] Scanning for projects...
[INFO]
[INFO] ------------------ org.apache.maven:standalone-pom -------------------
[INFO] Building Maven Stub Project (No POM) 1
[INFO] --------------------------------[ pom ]---------------------------------
[INFO]
[INFO] maven-archetype-plugin:3.0.1:generate (default-cli) generate-sources standalone-pom
[INFO]
[INFO] maven-archetype-plugin:3.0.1:generate (default-cli) generate-sources standalone-pom
[INFO]
[INFO]
[INFO] --- maven-archetype-plugin:3.0.1:generate (default-cli) standalone-pom ---
[INFO] Generating project in Interactive mode
[INFO] Archetype repository not defined. Using the one from [com.vaadin:vaadin-archetype-application:8.4.1] found in catalog remote....some non-interesting parts....[INFO] Using property: groupId com.javacodegeeks.example
[INFO] Using property: artifactId JCG-Vaadin-Example
[INFO] Using property: version 1.0
[INFO] Using property: package com.javacodegeeks.example
[INFO] Using property: themeName mytheme
[INFO] Using property: uiName MyUI
Confirm properties configuration:
groupId: com.javacodegeeks.example
artifactId: JCG-Vaadin-Example
version: 1.0
package: com.javacodegeeks.example
themeName: mytheme
uiName: MyUIY: :
[INFO] ----------------------------------------------------------------------------
[INFO] Using following parameters for creating project from Archetype: vaadin-archetype-application:LATEST
[INFO] ----------------------------------------------------------------------------
[INFO] Parameter: groupId, Value: com.javacodegeeks.example
[INFO] Parameter: artifactId, Value: JCG-Vaadin-Example
[INFO] Parameter: version, Value: 1.0
[INFO] Parameter: package, Value: com.javacodegeeks.example
[INFO] Parameter: packageInPathFormat, Value: com/javacodegeeks/example
[INFO] Parameter: package, Value: com.javacodegeeks.example
[INFO] Parameter: version, Value: 1.0
[INFO] Parameter: groupId, Value: com.javacodegeeks.example
[INFO] Parameter: themeName, Value: mytheme
[INFO] Parameter: uiName, Value: MyUI
[INFO] Parameter: artifactId, Value: JCG-Vaadin-Example
[INFO] Project created from Archetype in dir: /Users/shubham/JCG-Vaadin-Example
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 32.100 s
[INFO] Finished at: 2018-05-13T18:43:4305:30
[INFO] ------------------------------------------------------------------------ Vaadin原型负责在项目中添加适当的依赖项以及构建项目所需的所有其他信息。 在下一节中我们将了解项目的pom.xml文件中的所有部分。 5. Maven依赖 我们使用Vaadin原型创建的项目负责在项目中添加适当的依赖项。 让我们看一下项目的pom.xml文件。 让我们开始看看添加到文件中的依赖项 pom.xml dependenciesdependencygroupIdjavax.servlet/groupIdartifactIdjavax.servlet-api/artifactIdversion3.0.1/versionscopeprovided/scope/dependencydependencygroupIdcom.vaadin/groupIdartifactIdvaadin-server/artifactId/dependencydependencygroupIdcom.vaadin/groupIdartifactIdvaadin-push/artifactId/dependencydependencygroupIdcom.vaadin/groupIdartifactIdvaadin-client-compiled/artifactId/dependencydependencygroupIdcom.vaadin/groupIdartifactIdvaadin-themes/artifactId/dependency
/dependencies 以下依赖项已添加到项目中 javax.servlet-api 此依赖关系提供了将Servlet保留在我们的项目中以进行网络调用的能力 vaadin-server 此依赖性包括用于管理服务器详细信息如会话客户端通信等的软件包。 vaadin-push 这种依赖关系对于本课程不是必需的但仍然很重要。 当我们需要基于在服务器上执行的线程来更新UI时我们可以将请求从服务器发送到UI这样UI可以立即更新并且UI不必发出网络请求即可获取UI上的数据状态。服务器。 为此使用推包。 vaadin-client-compiled 此依赖项基于GWT并且包含用于编译客户端组件的软件包。 vaadin-themes 此依赖项包括一些内置主题和用于制作自定义主题的所有实用程序。 接下来我们还需要添加Vaadin存储库和依赖项管理。 dependencyManagement标签有助于管理所有Vaadin依赖项的版本 pom.xml repositoriesrepositoryidvaadin-addons/idurlhttp://maven.vaadin.com/vaadin-addons/url/repository
/repositoriesdependencyManagementdependenciesdependencygroupIdcom.vaadin/groupIdartifactIdvaadin-bom/artifactIdversion${vaadin.version}/versiontypepom/typescopeimport/scope/dependency/dependencies
/dependencyManagement 最后我们需要有Jetty插件该插件使我们可以通过在命令行上运行jetty:run来轻松测试开发版本。 pom.xml plugingroupIdorg.eclipse.jetty/groupIdartifactIdjetty-maven-plugin/artifactIdversion${jetty.plugin.version}/versionconfigurationscanIntervalSeconds2/scanIntervalSeconds/configuration
/plugin 这使我们可以直接从命令行运行Vaadin应用程序并为我们提供嵌入式Jetty服务器。 6. Vaadin Servlet 在Vaadin中我们没有web.xml文件来配置应用程序的调度程序servlet。 相反我们有Vaadin Servlet它通过一些注释定义了应用程序的入口点 MyUI.java WebServlet(urlPatterns /*, name MyUIServlet, asyncSupported true)
VaadinServletConfiguration(ui MyUI.class, productionMode false)
public static class MyUIServlet extends VaadinServlet { } 在上面的servlet应用程序中 ui字段明确提到MyUI.class是指定应用程序的主要入口点。 7. Vaadin主班 当我们使用Vaadin原型定义应用程序时该应用程序附带一个已经在应用程序主类中设置的基本UI如上一节所示该UI还包含Vaadin Servlet的定义。 这是我们的应用程序中预定义的主要入口点UI类 MyUI.java package com.javacodegeeks.example;import javax.servlet.annotation.WebServlet;import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;Theme(mytheme)
public class MyUI extends UI {private static final long serialVersionUID 7132834690301152714L;Overrideprotected void init(VaadinRequest vaadinRequest) {final VerticalLayout layout new VerticalLayout();final TextField name new TextField();name.setCaption(Type your name here:);Button button new Button(Click Me);button.addClickListener(e - {layout.addComponent(new Label(Thanks name.getValue() , it works!));});layout.addComponents(name, button);setContent(layout);}WebServlet(urlPatterns /*, name MyUIServlet, asyncSupported true)VaadinServletConfiguration(ui MyUI.class, productionMode false)public static class MyUIServlet extends VaadinServlet {}
} 此UI是应用程序的入口点。 UI可以代表浏览器窗口或选项卡或嵌入Vaadin应用程序HTML页面的某些部分。 UI使用VaadinRequest初始化。 旨在重写此方法以将组件添加到用户界面并初始化非组件功能。 实际上我们现在就可以运行该项目以显示Vaadin原型本身所做的默认应用程序布局。 运行以下命令以运行项目 运行项目 mvn jetty:run 访问以下网址以查看该应用程序的运行情况 打开网址 http://localhost:8080/ 我们现在可以尝试该应用程序 运行示例应用程序 8. Vaadin布局管理器 我们上面运行的示例应用程序使用VerticalLayout来以垂直方式排列UI元素。 与VerticalLayout相似Vaadin为我们提供了各种布局管理器以将UI组件布置在不同的方向。 让我们探讨一下经理是什么 8.1 VerticalLayout 当我们需要将组件堆叠在单个列中其中第一个元素保留在底部其余元素显示在上述组件下方时我们可以使用VerticalLayout布置 垂直布局 VerticalLayout vertical new VerticalLayout();
vertical.setSpacing(true);
vertical.setMargin(true);
setContent(vertical); 添加到此布局的所有组件都将堆叠在一起。 请注意与每个组件 布局也是一个组件 相关的方法的样式都很好其名称基于它们设置CSS属性。 这使得方法名称易于猜测并且更具可读性。 8.2 HorizontalLayout 与将组件以垂直方式排列的VerticalLayout HorizontalLayout将组件水平排列。 让我们看一下如何实例化此布局的示例 水平布局 final HorizontalLayout layout new HorizontalLayout(); 在示例应用程序只需更换VerticalLayout与VerticalLayout和看到的布局现在怎么会出现 Vaadin水平布局 8.3网格布局 另一个布局GridLayout允许我们制作一个组件网格该网格为我们渲染的页面提供了非常光滑一致的外观。 网格布局 GridLayout gridLayout new GridLayout(3, 2); 继续尝试现有布局中的GridLayout 以与UI组件的布局配合使用。 8.4 FormLayout 最后我们可以使用FormLayout将组件的标签和组件本身放在两个单独的列中并且还可以为必填字段提供可选的指示器。 可以实例化为 表格布局 FormLayout formLayout new FormLayout();9. Vaadin成分 在本节中我们将介绍一些基本但最有用的Vaadin UI元素这些元素几乎在所有用于Web的UI中使用。 9.1标签 Label是用于显示静态文本的组件该文本不会随应用程序状态而改变。 让我们定义一个提供Label实例并将其设置在VerticalLayout的函数 标签 private Layout showLabels() {final VerticalLayout layout new VerticalLayout();Label label new Label();label.setId(LabelID);label.setValue(JavaCodeGeeks);label.setCaption(Label);layout.addComponent(label);return layout;
} 此Label外观如下 Vaadin中的标签 9.2链接 在提供外部网页地址时Vaadin提供了具有相同目的的链接组件 链接 private Layout showLink() {final VerticalLayout layout new VerticalLayout();Link jcgLink new Link(JavaCodeGeeks,new ExternalResource(https://www.javacodegeeks.com/));jcgLink.setTargetName(_blank);layout.addComponent(jcgLink);return layout;
} 这是Link外观 Vaadin Link组件 9.3文字栏位 TextFields是由Label组件和允许用户提供输入的一行TextArea组合而成的组件。 这是一个示例程序用于显示带有图标的TextField以及内置于Vaadin库中的图标 文本域 private Layout showTextField() {final VerticalLayout layout new VerticalLayout();TextField textField new TextField();textField.setIcon(FontAwesome.USER);layout.addComponent(textField);return layout;
} 这是TextField外观 Vaadin TextField组件 9.4 TextArea TextArea组件就像TextField组件一样唯一的区别是TextArea组件中允许多行输入。 让我们看一个示范 文字区域 private Layout showTextArea() {final VerticalLayout layout new VerticalLayout();TextArea textArea new TextArea();layout.addComponent(textArea);return layout;
} 这是TextArea外观 Vaadin TextArea组件 TextArea组件使我们能够在组件中输入大文本并反映应输入的文本限制。 9.5 DateField和InlineDateField 在Web UI中选择日期是非常常见的任务。 Vaadin提供了两个相同的元素DateField和InlineDateField 。 DateField组件显示一个下拉日历我们可以在其中选择一个日期。 在其中选择日期后 InLineDateField不会消失。 让我们看一个示例程序 DateField和InlineDateField private Layout showDateField() {final VerticalLayout layout new VerticalLayout();DateField dateField new DateField(DateField, LocalDate.now());InlineDateField inlineDateField new InlineDateField();layout.addComponent(dateField);layout.addComponent(inlineDateField);return layout;
} 这是DateField外观 Vaadin DateField组件 这是InLineDateField外观 Vaadin内联DateField组件 用户从中选择日期后 InlineDateField不会消失。 9.6 PasswordField 要在UI中接受秘密密钥和密码我们可以使用PasswordField 。 让我们看一个示范 密码栏位 private Layout showPasswordField() {final VerticalLayout layout new VerticalLayout();PasswordField passwordField new PasswordField();layout.addComponent(passwordField);return layout;
} 这是PasswordField外观 Vaadin PasswordField组件 PasswordField是一个TextField 它只是掩盖我们在其中输入的文本。 9.7按钮 为了使用户能够在某些情况下例如提交表单或类似内容执行操作Button是最好的使用组件。 让我们看一个示例程序 纽扣 private Layout showButton() {final VerticalLayout layout new VerticalLayout();Button normalButton new Button(Normal Button);layout.addComponent(normalButton);return layout;
} 这是Button组件的外观 Vaadin按钮组件 Vaadin允许我们制作多种类型的按钮例如“危险”按钮默认为红色相当多的按钮等等。 9.8复选框 为了接受多个值到某个值我们可以使用CheckBoxes 它允许用户设置或取消设置它们而不必依赖UI中是否设置了其他CheckBoxes 。 让我们看一个示例程序 复选框 private Layout showCheckBox() {final VerticalLayout layout new VerticalLayout();CheckBox checkbox new CheckBox(CheckBox);checkbox.setValue(true);layout.addComponent(checkbox);return layout;
} 这是CheckBox组件的外观 Vaadin复选框组件 9.9清单 作为最终组件显示包含固定元素的项目列表是非常常见的任务。 让我们看一下如何做到这一点的演示 清单 private Layout showLists() {final VerticalLayout layout new VerticalLayout();ListString numbers new ArrayList();numbers.add(One);numbers.add(Ten);numbers.add(Eleven);ComboBox comboBox new ComboBox(ComboBox);comboBox.setItems(numbers);layout.addComponent(comboBox);return layout;
} 这是Lists组件的外观 Vaadin列表组件 因此我们只创建了一个List来收集项目并将其显示在ComboBox元素中该元素显示了一个包含List项目的下拉菜单。 10.使用Vaadin主题 Vaadin主题是将应用外观完全指向Vaadin项目使用的样式表中的新主题的最佳方式。 默认情况下Vaadin提供了四个内置主题我们可以随时更改它们。 内置主题是valo 驯鹿 变色龙和runo 。 要查找样式表请访问WebContent/themes/declarativeui/declarativeui.scss 。 我们可以在指定文件的末尾更改指定的主题值这将更改应用程序选择的主题。 请查看Vaadin目录 查找几乎无限数量的可以在您的项目中使用的即用型Vaadin主题。 11.结论 在本课程中我们研究了如何使用单个Maven命令创建非常简单但有效的Vaadin应用程序。 我们看到了生产级Vaadin应用程序需要哪些Maven依赖项和插件。 我们研究了Vaadin UI应用程序中常用的许多Vaadin组件。 对于Java后端工程师而言Vaadin是一个出色的框架。 它提供了Java开发人员可以想到的所有优势因为它允许基于Maven的构建系统进行依赖关系管理这是一种非常简单的方法可以直接在同一项目本身中直接使用Spring服务或者仅遵循设计模式来保持UI和网络层在项目中完全分开。 在未来的Vaadin课程中我们将看到如何通过在应用程序中添加一个工作后端来使Vaadin应用程序动态化例如使用Spring Boot应用程序从数据库向应用程序提供动态内容。 12.下载源代码 这是Vaadin框架的一个示例。 下载 您可以在此处下载此示例的完整源代码 Vaadin示例 翻译自: https://www.javacodegeeks.com/2018/05/vaadin-tutorial.htmlvaadin教程
