附录：外文参考文献及翻译

Full-stack Java web dev with Vaadin

Sing Li

Published in IBM.com,September 30, 2015

This document is to introduce the development of the full stack Java Vaadin web, which is the most important use of HTML5 and the latest advances in JavaScript technology, you can learn to make multiple Java Web Applications Learn how the Vaadin framework puts Javatrade; developers on the fast track to modern webdevelopment. With Vaadin, you dont need to master HTML5, CSS, and JavaScript to create a compelling user experience. The framework deploys those technologies for you while you program in 100-percent Java in your favorite IDE.

1.Introduction

To create a compelling interactive user experience in web applications, Java developers often must learn the non-Java technologies that underlie modern browsers: JavaScript, CSS, and HTML5. Interfacing between an HTML5/JavaScript front end and a Java back end — typically, via Ajax — tends to require a complex assembly thats difficult to maintain. But now, thanks to the open source Vaadin framework, Java developers can gain full-stack control of their modern web apps with an all-Java programming environment.

As a mature framework, Vaadin supports all popular Java development environments (Eclipse, IntelliJ, NetBeans, Maven, and so on; ). And Vaadin has hundreds of community-contributed and commercially available UI components. These components are crafted and maintained to work with all modern browsers, and they use the latest available HTML5, CSS, and JavaScript features.

Vaadins server-side UI-creation support enables you to compose and deploy reusable components in Java technology. The framework manages the complexity of client-side UI creation and management. Integration with all the mid-tier and back-end Java technologies youre already familiar with — such as Enterprise Java Beans (EJB) technology, the Java Persistence API (JPA), and Spring — is easy. Vaadins server-centric nature makes the framework compatible with all modern cloud-hosted solutions (including IBM Bluemixtrade;), so you can readily deploy your highlyinteractive web applications in the cloud. Vaadin is also compatible with many other programming languages in the JVM-powered ecosystem, including Python (Jython), Groovy, and Scala.

This tutorial introduces Vaadin, reveals its architecture, explains how it works, and offers multiple hands-on examples that familiarize you with Vaadin development in an Eclipse environment. A final Jython example highlights Vaadins flexibility in working with many JVM-supported programming languages.

2.Inside Vaadin

Architecturally, Vaadin is similar to AWT, Swing, and SWT. You instantiate and wire together readyto-go components on the server side, and the framework automatically generates and deploys the UI elements. The main difference between Vaadin and those traditional Java toolkits is that instead of desktop GUI components rendered using Java (or through the specific graphical API of the supported OS) the components are HTML5/CSS/JavaScript components, communicating via Ajax with the server and managed automatically by the framework.

Vaadin completely shields the developer from the complexity of the UI-rendering technology stack. As a Vaadin developer, you create your UI, including event handlers for various interactions, by wiring prefabricated components using Java inside a Java servlet (a VaadinServlet). Then Vaadin takes care of the rest. Together, the client-side Vaadin engine (written in HTML5/CSS/JavaScript, and based on the Google Web Toolkit) and the serverside framework support realize (generate) and manage the UI for you. The network of server-side UI components is realized by a network of client-side UI widgets in the browser.

Server-side UI components can support data binding in Vaadin, making it easy to work with backoffice databases. Your Java application code can continue to take advantage of any features offered by the server, including Java Platform, Enterprise Edition (Java EE) and web services.

In accordance with industry best practices, presentation is separated from business logic when you use Vaadin. You can create layouts declaratively using Vaadin HTML design documents, or by programming in Java. Optionally, you can further customize and tune the look of the application by using themes in CSS or Sass.

Vaadin apps work well with Bluemix, which offers the Vaadin Rich Web Starterboilerplate. Vaadin apps that are deployed on Bluemix enjoy industry-standard Liberty Profile application server runtime support, and IBM DB2 for relational data storage. And all Vaadin apps on Bluemix can take advantage of a rich and growing variety of server-side services.

3.Get up and running with Vaadin

With an understanding of all the pieces that make up Vaadin, youre almost ready to start building something with the framework. To try the following examples, you need to install:

bull; Java Development Kit (JDK) 1.7 or later (1.7.0_60-b19 was used in the development of the example code).

bull; Eclipse EE Edition (Luna or later).

bull; Tomcat 8. If you dont already have the Tomcat 8 server configured in Eclipse, follow these instructions to configure it.

bull; The Vaadin Eclipse Plugin. Find the Vaadin Plugin for Eclipse in the Eclipse marketplace

The declarative UI example later in this tutorial makes use of the Vaadin designer. To save your design, youll need a trial license of the Vaadin designer. Your Vaadin Eclipse Plugin installation can also include a beta of the UI designer; accept the license and restart Eclipse.

Create and run your first Vaadin application Follow these steps in Eclipse to create the Vaadin starter app:

1. Select File gt; New gt; Other gt; Vaadin gt; Vaadin 7 Project

2. Name your project FirstProject

剩余内容已隐藏，支付完成后下载完整资料

---

使用 Vaadin 实现全堆栈 Java Web 开发

Sing Li

2015年11月30号发表在IBM网站

这篇文献介绍的是全栈的java Vaadin Web的发展，这是最重要的，在使用HTML5 JavaScript技术的最新进展，你可以使多个java web应用学会Vaadin框架提出trade;java开发者对现代Web开发的快车道借助 Vaadin，您无需掌握 HTML5、CSS 和 JavaScript 就可以创建引人注目的用户体验。当您在最喜欢的 IDE 中用 100 % 的 Java 进行编程时，该框架会为您部署这些技术。

1.简介

创建一个引人入胜的交互式用户体验的Web应用程序，Java 开发人员通常必须掌握作为现代浏览器基础的一些非 Java 技术：JavaScript、CSS 和 HTML5。接口之间的HTML5/Javascript的前端和后端java (通常通过AJAX来实现 )往往需要一个复杂的装配，维护困难的程序集。但现在，由于开源Vaadin框架，java开发人员可以与所有的java编程环境中获得他们的现代Web应用程序的全栈控制。

作为一个成熟的框架，Vaadin支持所有流行的java开发环境（Eclipse、NetBeans，IntelliJ，Maven等；）。Vaadin有数百个社区贡献和市售的UI组件。这些组件的制作和维护工作可以用在所有现代浏览器，其中包括他们使用的最新的可用的HTML5，CSS和JavaScript功能。

Vaadin服务器端的用户界面创建支持使您能够编写和部署java技术的可重用组件。该框架管理客户端UI创建和管理的复杂性。整合所有的中间层和后端java技术。你已经熟悉的如企业java bean（EJB）技术，java持久化API（JPA），它们的集成很容易。Vaadin服务器为中心的性质使得框架兼容所有现代的云托管解决方案（包括IBM BlueMixtrade;），所以你可以很容易地在云中部署你的高度交互式的Web应用程序。Vaadin还随着JVM驱动的生态系统的许多其他编程语言兼容，包括Python（Jython），Groovy，Scala。

本教程介绍了Vaadin，揭示其结构，解释它是如何工作的，并提供了多种实用的例子，让你们看看在Eclipse环境Vaadin开发。最后一个 Jython 示例突出强调了 Vaadin 在处理许多 JVM 支持的编程语言方面的灵活性。

2.Vaadin 内部揭秘

在结构上，Vaadin是类似于AWT、Swing和SWT。你准备好去实例化和线一起在服务器端组件，框架会自动生成和部署的UI元素。Vaadin和那些传统的java开发工具之间的主要区别是，使用的组件是 HTML5/CSS/JavaScript 组件，通过Ajax与服务器和由框架自动管理，而不是桌面GUI组件渲染使用java（或通过受支持的操作系统的特定的图形API ）。

Vaadin完全屏蔽开发者从UI渲染技术栈的复杂性。作为 Vaadin 的开发人员，您可以创建您的 UI（包括各种交互的事件处理程序）：通过在一个Java servlet（一个VaadinServlet）中使用 Java 来连接预制组件。然后由 Vaadin 负责其余的工作。客户端 Vaadin 引擎（用 HTML5/CSS/JavaScript 编写，而且基于 Google Web Toolkit）和服务器端框架都支持为您实现（生成） UI 和管理 UI。服务器端 UI 组件网络是通过浏览器中的客户端 UI小部件网络来实现的。

服务器端UI组件的网页可以在Vaadin支持数据绑定，使它容易与后台数据库的工作。你的java应用程序代码可以继续利用任何功能由服务器提供，包括java平台，企业版（java EE）和Web服务。

根据行业最佳实践，当你使用Vaadin，呈现是与业务逻辑无关的。您可以创建使用HTML设计文件声明Vaadin布局，或是用java编程。甚至，你可以进一步自定义的CSS或SASS使用主题调整应用程序的外观。

Vaadin应用程序以及工作BlueMix，提供丰富的网络启动Vaadin样板。Vaadin应用程序部署在BlueMix享受行业标准自由配置应用服务器运行时支持，和IBM DB2关系型数据存储。和Bluemix上所有Vaadin应用程序可以利用丰富的和不断增长的各种服务器端的服务。

3.设置和运行 Vaadin

与所有的作品作出了Vaadin的理解，你几乎准备好开始建立一些框架。尝试下面的例子，你需要安装：

bull;java开发工具（JDK）1.7或更高版本（1.7.0_60-b19用于示例代码的开发）。

Eclipse EE版（月神或稍后）。

Tomcat 8。如果您还没有在Eclipse中配置Tomcat 8服务器，请按照这些说明来配置它。

bull;Vaadin Eclipse插件。发现在日食月食的Vaadin插件市场。

声明UI例子后面的教程中使用Vaadin设计师。保存你的设计，你会需要一个Vaadin设计师试用许可证。你的Vaadin Eclipse Plugin安装还包括一个 UI 设计器的测试版；接受许可并重新启动Eclipse。

创建和运行你的第一个Vaadin应用程序遵循这些步骤在Eclipse创建Vaadin应用程序启动器：

1、选择文件gt;新建gt;其他gt; gt; Vaadin Vaadin 7项目

2、你的项目的第一名，然后选择项目gt;建设项目。如果你使用JDK 1.7，你可能需要调整的Eclipse项目方面包括java 1.7而不是1.8。

3、在“企业资源管理器”窗格中高亮显示项目，右击，选择“运行”gt;运行在服务器上，然后选择Tomcat 8服务器来运行应用程序。当您创建项目时，应用两Vaadin组件生成：一verticallayout和按钮。每次你点击按钮的界面，一个新的Vaadin标签创建组件。这个简单的应用程序是非常适合学习Vaadin开发入门。

实例说明组件组成部分。一个verticallayout包含一个按钮。在单击Click Me button 时，可以创建一个或多个 Label 并将它们添加到 VerticalLayout 中。你构建你的用户界面中的一个或多个类继承抽象类com.vaadin.ui.ui。用户界面是在init（）方法在界面的构建。注意“webservlet注释在servlet类-来自com.vaadin.server.vaadinservlet，将服务于您创建的用户界面并管理它。

4.Vaadin中的事件处理

在组件中，addclicklistener()添加一个按钮的点击事件。在这种情况下，按钮上的单击监听器只是简单地创建一个消息“谢谢您点击“添加到verticalLayout组成新的标签组件。每一行“谢谢点击”出现在现有标签下面。

在很多情况下，VerticalLayout 是包含 HorizontalLayout。这个 HorizontalLayout 由左边的 Table 组件和右边的 Embedded 组件填充。在实例中，为了显示文章查看器应用程序的用户界面。该应用程序包括一个在左边显示文章列表和出版年Vaadin表。用户从列表中选择任何一篇文章，把它显示在一个嵌入式（浏览器）Vaadin组件右边。你会发现articleviewer类的代码，组织结构与vaadinservlet作为第一个例子的服务方式相同。在前面的示例中，创建类的（）方法的UI代码。

在代码中，一行选择的itemclickevent监听器处理。在这种情况下，处理程序查找与被点击的文章相关联的URL，并设置嵌入组件的源属性并导致显示该文章。表中的数据是由遍历数组元素的列表数据。这使我们的代码简短而简单。

5.Vaadin 的数据绑定

同样的Vaadin表元素也支持数据绑定。如果你从示例代码的articleviewer databinding.zip项目文件导入，你会发现一个增强版本articleviewer执行适当的数据表元素的结合。

相比于原articleviewer项目，你会看到一些不同：

bull;它是一个老式的java对象（POJO）类存储数据的一篇文章。

bull;Articleservice是服务类提供静态数据源；在生产代码中，这服务应该从数据库中获取数据。

bull;向父组件注册值变更监听器是用来代替在表元clicklistener支持键盘导航。

bull;Beanitemcontainer用于直接绑定第POJOs表元素。

6.Vaadin 的声明性 UI

而构建java编程语言在一个时间线的界面，你可以指定所有的组件和一个特殊格式的HTML文件包含关系Vaadin设计。Vaadin可以阅读HTML文档，并为您一次生成整个 UI。同时，直观的拖放Vaadin设计师工具可用于制作UI设计文件，而无需编写一行Java代码或HTML。对于UI设计人员和应用程序开发人员相互独立工作的商店，此功能特别适用。

下一个示例创建相同的用户界面为article-viewer应用程序，但现在使用声明HTML设计文件而不是java代码指定UI。进口declarativeui.zip项目导入eclipse和检查articleviewer.html设计文件。这Vaadin HTML设计文件指定的UI布局。

自定义组件的代码读取并实现基于articleviewer.html设计文档的UI是articleviewdesign.java -自定义组件。这个类也是表填充数据和事件处理程序被连接起来的地方

7.用 Python 实现 Vaadin 编程

在设计上，Vaadin是比其他的java编程语言兼容，支持许多JVM中生态系统的编程语言（见维基百科的JVM语言列表），其中Python（通过Jython），Groovy，Scala）。

在成功加载并运行此示例之前，必须安装下列附加工具：

bull;Jython 2.7或更高版本。

bull;PyDev 4.3.0或后，测试使用Jython（见PyDev文档信息如何安装Eclipse）。

bull;Vaadin 6.8.16（或最新的6。x）罐；你必须把这个JAR文件在webcontent / webinf / lib文件夹。

你可以找到在jythonvaadin.zip档案例如Eclipse项目（见下载）。将此存档导入Eclipse以运行示例。请注意 Java 版本的代码结构的相似性。如果你看了Web应用的web.xml文件，加载的专门的解释器Servlet而不是一般的vaadinservlet。

实例化 Jython 解释器的 PythonServlet。在PythonServlet类中，Jython 解释器已加载并与PythonArticleViewer.py源文件一起提供。Python的文章查看器Web appshows部分的Python代码创建文章浏览器UI通过Vaadin。如果你熟悉Python，你可以看到这样的代码，java版本之间的相似性。

8.使用 Vaadin 主题更改应用程序的外观

您会注意到，应用程序的外观在编程版本和声明版本之间有所不同，因为两个版本使用主题。主题是CSS或Sass代码，自定义应用程序的外观，可以从应用程序代码的其余部分分开的应用。Vaadin有四个内置的主题，您可以随时在它们之间切换。内置的主题是valo、reindeer、chameleon 和 runo。在WebContent/themes/declarativeui/declarativeui.scss 中进行查找。更改在该文件末尾处指定的主题值可以更改应用程序使用的主题。您可轻松地在 Vaadin 增件目录 中查找几乎无限多种现成的 Vaadin。

9.总结

Vaadin 开发的应用程序为单一 Web 页面的应用程序。Vaadin 会自动追踪程序 UI 组件的状态更新，部分的刷新页面内容，并且能够缓存客户端浏览器中页面的 DOM 子树；Vaadin 使用服务器进行应用程序状态管理，所有的业务逻辑代码均在服务器端运行。使用了双 cookie 提交模式以及双重事件过滤技术，同时拥有非法事件和请求的过滤功能；Vaadin 拥有 Eclipse 和 Netbeans 的插件，可以在这两个 IDE 中集成应用服务器进行快速开发。生成的应用程序产品为标准的 War 文件。同时还支持使 Firebug 进行调试。

Vaadin 通过提供全堆栈 Java 开发解决方案提高了 Java Web 开发人员的生产力。您可以利用浏览器创新中的最新成果来创建 UI，这些创新成果包括 HTML5、CSS、Ajax 和 JavaScript，所有这些都无需牺牲您的 Java IDE 的舒适度。Vaadin的UI能够以编程方式创建使用java代码，或声明在一个HTML文档设计。Vaadin甚至支持用其他JVM支持的编程语言（包括Python代码）。丰富的可用增件（add-on）库使您能够轻松地将功能添加到您的应用程序中。应用程序创建使用Vaadin和标准java EE技术可以很容易地部署在云中。

剩余内容已隐藏，支付完成后下载完整资料

---

资料编号：[25518]，资料为PDF文档或Word文档，PDF文档可免费转换为Word