Getting started with Polymer 1.1.0 – Part 2

//Getting started with Polymer 1.1.0 – Part 2

Getting started with Polymer 1.1.0 – Part 2

This post is a follow-up to Getting started with Polymer 1.1.0 – Part 1 and will continue with the implementation of so called „paper components“. The paper component library belongs to Polymer and is implementing Google Material Design. This component library will be utilized for the app we are building.

  1. First we are importing the necessary elements to display the <paper-drawer-panel>  and  <paper-header-panel>. It is easy to remember, whenever you are adding a tag starting with „paper“ (like <paper-drawer-panel> ) or „google“ (like <google-map>) this element needs to be included in your HTML head in the following way: <link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
  2. Now we are adding the <paper-drawer-panel> and  <paper-header-panel> to the HTML between <body></body>. The body has three classes ( class="fullbleed vertical layout"), that I will not explain here in detail. They all belong to the iron-flex-layout and you can get more details about them on the corresponding Polymer webpage. This is our base layout we will add new components to in the next step.
  3. The <paper-toolbar> s will both get extended content now.
    1. To the first one (drawerToolbar) we are adding a title.  
    2. To the second one we are adding a title and an icon, so we can toggle the menus visibility. This option  paper-drawer-toggle is used to toogle the drawers visibility when the page is in mobile mode (small window).
  4. The import section will look like this: We added in addition the iron-flex-layout and two paper style classes for basic formatting of our app. The <paper-icon-button> relies on the iron-icons, so that those also needs to be loaded. If you forgot to load them , you will find the following hint in your JavaScript console: [fusion_builder_container hundred_percent="yes" overflow="visible"][fusion_builder_row][fusion_builder_column type="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none"][iron-icon::_updateIcon]: could not find iconset `icons`, did you import the iconset?
  5. When you take a look to your app in the web browser through polyserve, resize your browser window to a smaller size and you will see the added  <paper-icon-button> . With a click on the button, the drawer slides in from the left side. In normal mode, the drawer will just be the left-sided menu.

    A first view to our app in Firefox.

    A first view to our app in Firefox.

     

Menu structure and content switchting

Now we are adding menu items and some content to the app and write some lines of JavaScript to switch between the different sections of our one-page application.

  1. Right after <paper-toolbar id="drawerToolbar"> closure we are adding our  <paper-menu> with several  <paper-item>s. In my case I added the following ones: Without addional imports, the output in our browser will just look like a list of words, so we are going to import more components.
  2. After the  <paper-toolbar id="mainToolbar"> closure (but before the  </paper-header-panel>) section of  <iron-pages selected="0"> is inserted, with focus on the first sub-item. This will look like the following:  
  3. When viewing the page in a browser, all five headings can be seen now, so it is time to add the iron-pages element to our application.  
  4. You can now click on the buttons in the menu, but only the first content element is shown. We will now add some lines of JavaScript – an event listener that will catch the clicks to our menu items. The following script is kept very simple, so you can get the clue how it works. In a later tutorial we will handle this in a more elegant way. Each button will get an event listener: The pages are just reflecting the numbered  <div>s in the surrounding  <iron-pages selected="0">. You call each  <paper-item> by its ID, so for instance a click on  <paper-item id="paperMenuFirstItem" paper-drawer-toggle>Home</paper-item> this paper-item will select the page „0“, that is our first one added to:  <iron-pages selected="0">.

Our app has now a drawer and some sections, rendered with the iron-pages element and will look like this:

Polymer app after adding the iron-pages and some basic JavaScript

Polymer app after adding the iron-pages and some basic JavaScript

Adding a theme

For the finalization of this part, we are adding a design to our app. I will post some polymer-themes below, that can be easily applied to your app and that are available free of costs.

I like the two designs „ice“ and „technology“ most. You can find more designs on https://polymerthemes.com/ There is also a great theme builder available.

When adding the „technology“ theme to our app, it looks like this:

Our Polymer App themes with the technology theme

Our Polymer App themes with the technology theme

To continue, see the next post Getting started with Polymer 1.1.0 – Part 3[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

By | 2017-01-29T10:32:00+00:00 September 23rd, 2015|Internet and Web Engineering|2 Comments

2 Comments

  1. Peter 24. September 2015 at 21:47 - Reply

    Hey and many thanks for this post!

  2. Joaquín 26. April 2017 at 18:56 - Reply

    Hi

    Great post. Is the source code available to download?

Leave A Comment