使用 Polymer Elements 构建现代 GWT 应用

免责声明

本教程基于使用三个第三方开源库,它们独立于gwtproject组织,也不受其管理。:

  • Polymer:一个使用 Web Components 构建 Web 应用的 JavaScript 库。Polymer 由Google Inc拥有。
  • Polymer Elements:一个使用 Polymer 构建的小部件集合。由Google Inc拥有。
  • GWT-Polymer-Elements:一个 Java 包装器,使 Polymer Elements 能够在 GWT 项目中使用。由Vaadin Ltd拥有。

本教程的主要目标是教会我们的受众创建使用 JavaScript 小部件和库的真实 GWT 项目的过程。

gwtproject与上述库没有关联,也不认可它们。

介绍

在本教程中,您将学习如何使用 Polymer Web Components 编写一个TodoList应用程序。Web Components 定义了一组标准,允许我们将标记和样式捆绑到自定义 HTML 元素中。Polymer 是一个旨在简化 Web Components 开发的 JavaScript 库。

在本例中,我们希望满足Material Design 规范。因此,我们将使用 Vaadin 的gwt-polymer-elements 库。该库由gwt-api-generator 生成,是 Polymer 的Iron 和 Paper 元素的 JsInterop 包装器。

在我们开始之前,您可能想尝试一下TodoList 应用程序,看看我们要构建的内容。

学习过程

在本构建过程中,您将学习如何

  • 创建一个新的 Maven 项目。
  • 使用SuperDevMode运行您的项目。
  • 将外部库添加到您的应用程序。
  • 配置项目以使用实验性的JsInterop模式。

此应用程序可以使用小部件或 JsInterop 元素构建。前者是经典方法,而后者已成为新的趋势。无论哪种选择,都将教会您如何

  • 使用 UiBinder 创建新的小部件。
  • 导入和使用 Polymer Web Components。
  • 处理响应式布局。
  • 使用UiBinder对元素进行样式化。
  • 将事件处理程序添加到 UiBinder 组件。
  • 使用基本数据模型。

下一步

步骤 1:创建并准备一个新项目