In this blog post I will create an interactive web application based on Google Polymer 1.0 to show how data binding can be used and how a basic Polymer application might look like. In this case I don’t want to dive deep into the creation of custom components using Polymer but give a first introduction how you can design applications by using the Polymer paper elements.
Based on Polymer and web components it’s very easy to create a web application that is based on custom components instead falling in the <div> hell.
Here is a short example that shows how a Google maps web component can be integrated in any web page:
Polymer provides an element catalog with documentation and many examples of all components that are part of the lib.
Let’s start with a first project that uses Polymer and the Polymer paper components to create an application. This project only needs 2 file:
a index.html that contains our application
a bower.json that defines all external dependencies
Our final application should be a picture viewer that support some user interaction. I want to change the size of all images by using a slider. Here is a first sketch:
To use the Polymer paper components we only need 1 dependency to PolymerElements/paper-elements in the bower file. If you are not familiar with Bower you can find a short introduction here.
Once you have added the dependency your bower.json file like look like this:
After calling bower install all dependencies are downloaded to the bower_components folder. This includes:
webcomponentsjs - A polyfill that provides the features of the web components spec for browser version that doesn’t support native support for the features
polymer - the basic api of polymer.
paper-* - all Polymer paper components like controls and layouts
iron-* - basic web components like an icon view. The Polymer paper components are based on this basic components
Once this is done we can create the initial index.html file. Here we will start to provide the functionality of the web components spec by adding the polypill. To do so we include the script in our page:
Now we can start using the new features. We want to start with the import. In our example we need the Polymer API and some paper components. Therefore we add imports to all these dependencies:
The paper elements already depends on the Polymer API and therefore we don’t need to add it explicitly.
Starting with Polymer
This code snippet defines a Polymer based web component that can be added to a html page by using the <app-view> tag (as defined in the polymer id). This web component only contains the static text “Content”. Let’s add this code snippet and the custom tag to our index.html:
Here is a pic of the current state in chrome:
As a Java developer I simply use IntelliJ to test my app. By opening the page from IntelliJ the IDE starts automatically a web server to provide the web app.
Let’s add some first Polymer paper elements. Here I want to start with a paper-header-panel that defines a header and a content area. The header area is always on top and you can use it perfectly to display a toolbar. The content are will fill the rest of the page size and is scrollable by default.
In this header panel we want to add a toolbar with a title and a slider. For all these components Polymer paper offers ready to use web components. How this components can be used is documented in the Polymer elements catalog. Once this is done our code look like this:
In chrome we can already see the toolbar but the layout doesn’t look that perfect:
Polymer provides a flexbox based layout that can be simply modified by using custom attributes that are provided by Polymer. I don’t want to dive deep here in flexbox and Polymer layout (since this post is already very long) and simply show the final code:
Ok, as a next step I want to add some static images. Therefore I will use lorempixel.com that is a perfect service to get some random images. After adding some images to the content as shown in the following code snippet our application already look like some kind of image viewer:
Thanks to the flex box layout that is used in Polymer the images are aligned in a responsive grid. When resizing the browser windows the column count in each row will fit to the width of the browser. In addition a scrollbar automatically appears if all images can’t be shown on screen.
As a next step I want to finalize the styling of our application by adding some CSS. Here is the final html file:
Ok, this will be enough for today :)
In the next post I will show how the Polymer properties and data binding can be used to create the needed interaction.
Hendrik Ebbers is a co-founder of Karakun AG and lives in Dortmund, Germany. He is the founder and leader of the Java User Group Dortmund and gives talks and presentations in user groups and conferences. His JavaFX book "Mastering JavaFX 8 Controls" was released 2014 by Oracle press. Hendrik is JavaOne Rockstar, JSR expert group member and Java Champion.