Building a modern GWT app using Polymer Elements:

Disclaimer :

This tutorial is based on the usage of three third-party open-source libraries, external to, and not managed by, the gwtproject organization:

  • Polymer: a JavaScript library for building web applications with Web Components. Polymer is owned by Google Inc.
  • Polymer Elements: a collection of widgets built in Polymer. Owned by Google Inc.
  • GWT-Polymer-Elements: a Java wrapper enabling Polymer Elements to be used in GWT projects. Owned by Vaadin Ltd.

The main goal of the tutorial is to teach our audience the process of creating real GWT projects that use JavaScript widgets and libraries.

The gwtproject is not affiliated with, nor does it endorse, the aforementioned libraries.

Introduction

In this tutorial, you'll learn how to write a TodoList application using Polymer Web Components. Web Components define a collection of standards allowing us to bundle markup and styles into custom HTML elements. Polymer is a JavaScript library designed to make web component development easier.

In this case, we want to fulfil the Material Design specification. Therefore, we'll be using the Vaadin gwt-polymer-elements library. This library, generated by gwt-api-generator, is a JsInterop wrapper for the Polymer Iron and Paper elements.

Before we start, you might want to try out the TodoList application to see what we are about to build.

The Learning process

During this build process you'll learn how to:

  • Create a new Maven project.
  • Run your project using SuperDevMode.
  • Add external libraries to your application.
  • Configure the project to use the experimental JsInterop mode.

This application can be built using either widgets or JsInterop elements. The former is the classic approach, while the latter has become the new tendency. Either option will teach you how to:

  • Create new widgets using UiBinder.
  • Import and use Polymer Web Components.
  • Deal with responsive layouts.
  • Style elements using UiBinder.
  • Add event handlers to UiBinder components.
  • Use a basic data model.

What's next

Step 1: Create and prepare a new Project