Google’s Polymer and Paper Elements

Polymer

An interesting take on web future at Devoxx 2014 was Polymer. This framework is build on top of the HTML Web Components specification. It allows you to create your own HTML elements. These elements have their own element-contained HTML (called shadow-dom), private CSS for styling and even some JavaScript for the user to be able to interact with the component.

One example of a useful way to use your own HTML element is the Google Maps widget. Normally we should import the JavaScript source (functionality), create a div with a certain ID, and then initiate the map by selecting the HTML element that represents the map. With the Web Components specification, Google was able to create a <google-map>-element that does all that for you. The only thing you need to do is import the element (which contains element, styling and functionality). Making your code more readable.

Paper elements

In a previous blogpost we mentioned the style guidelines for Material Design. Google also implemented these guidelines in Polymer, giving you a range of new HTML Web Components that follow the Material Design guidelines. This HTML extension is called Paper elements and is easy to install and use.

Installing Polymer and Paper elements

Using Bower, we can easily install Polymer and Paper elements, but you can also download the ZIPs on the polymer website.

bower install --save Polymer/polymer
bower install --save Polymer/core-elements
bower install --save Polymer/paper-elements

After installing, you will see that all the new HTML elements are added to the bower_components folder in your application.

Using core and paper-elements

First of all, we will need to include the polymer.html script to make sure that everything runs on legacy browsers supported by Polymer. Also a main.css file can be useful to style the added elements.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>polymer blogpost</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <script src="../bower_components/polymer/polymer.html"></script>
        <link rel="stylesheet" href="styles/main.css">
    </head>

<body>

</body>
</html>

Next, we will need to import some core-elements to create a nice looking app. For this example we will use core-toolbar, paper-icon-button, and paper-progress.

We can import these elements by adding a link to the html page’s HEAD section.

<link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-progress/paper-progress.html">

Now we can start using the new HTML elements, but first of all we need to add some attributes to the body tag. To make sure that the layout is displayed correctly we need to add: fullbleed (makes sure there are no more margins and paddings), layout (makes sure body takes up 100% of the screen), and vertical (makes sure the layout is vertically flowed).

<body fullbleed layout vertical>

</body>

Now that we got the body out of the way, we will need to add the toolbar to our application. We’ll add a nice looking menu button to the left of the application’s name.

<body fullbleed layout vertical>

        <core-toolbar>
            <paper-icon-button icon="menu"></paper-icon-button>
            <div>MY APP</div>
        </core-toolbar>

</body>

This will show us a nice looking toolbar with our application name (originally called MY APP). The button on the left of the title has the fancy ripple effect when you click on it (as described in the Material Design guidelines). but we can do more than that. For example we can add a progress bar to this toolbar. We can even make it fit and stick to the bottom.

<body fullbleed layout vertical>

        <core-toolbar>
            <paper-icon-button icon="menu"></paper-icon-button>
            <div>MY APP</div>
            <paper-progress class="bottom fit" value="30"></paper-progress>
        </core-toolbar>

</body>

The result looks somewhat like this

Polymer, Paper elements ExampleThis looks and feels already like a native mobile application and we didn’t have to style anything. Everything has been done with real HTML Elements, which makes the code very readable and easy to maintain.

For more examples and guides for creating your own polymer / paper elements application goto the polymer website.

Advertisements

One thought on “Google’s Polymer and Paper Elements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

About Arvraepe