Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Yes, NetBeans Can Do Polymer!

DZone's Guide to

Yes, NetBeans Can Do Polymer!

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Last weekend I was training a small group of developers on Polymer during a local Google Developer Group DevFest here in Burkina Faso. Basically, Polymer is a new web UI framework that helps programmers to develop modularized web applications with cross-browser capabilities.

Polymer is composed of four main layers:

  • Native. The required features of this layer are currently available natively in all major browsers.
  • Foundation. Polyfills that implement required browser features are not yet natively available in browsers themselves. (The intention is for this layer to disappear over time as the capabilities it provides become available natively in the browser.)
  • Core. The necessary infrastructure for Polymer elements to exploit the capabilities provided by the Native and Foundation layers.
  • Elements. A basic set of elements, intended to serve as building blocks that can help you create your application. Includes elements that provide basic functionality like AJAX, animation, flex layout, and gestures. Encapsulation of complicated browser APIs and CSS layouts. UI component renderers such as accordions, cards, and sidebars.

In the next paragraphs, I will show you how we used NetBeans IDE for developing a web application based on Polymer, the latest web revolution. 


NetBeans Sample Polymer Application

Here is the ZIP file that we will use to create our application:

http://java.dzone.com/sites/all/files/PolymerBasis.zip

Simply download and unzip the above. Then open it into NetBeans IDE.

In the Projects window, this is what the project looks like:


Source code of  Post-card.html in the elements folder, where the shadow element is defined: 

<link rel="import"
  href="../components/polymer/polymer.html">
<link rel="import"  href="../components/core-icon-button/core-icon-button.html">

<polymer-element name="post-card">
  <template>
    <style>
    :host {
      display: block;
      position: relative;
      background-color: white;
      padding: 20px;
      width: 100%;
      font-size: 1.2rem;
      font-weight: 300;
    }
    .card-header {
     margin-bottom:10px;
      }

    .card-header ::content h2 {
      margin : 0;
      font-size :1.8rem;
      font-weight:300;
    }

    .card-header ::content img {
      width :70px;
      border-radius:50%;
      margin: 10px;
    }
    </style>

    <!-- CARD CONTENTS GO HERE -->
    <div class="card-header" layout horizontal center>
      <content select="img"></content>
      <content select="h2"></content>
    </div>
    <content></content>

  </template>
  <script>
  Polymer({
    // define the element's JavaScript prototype here
  });
  </script>
</polymer-element>

Code contained in app.css in the css folder: 

body {
  background-color: #E5E5E5;
  font-family: 'RobotoDraft', sans-serif;
}
.container {
  width: 80%;
  margin: 50px auto;
}

/* Add your styles here! */
core-toolbar {
  background: #03a9f4;
  color: white;
}
paper-tabs {
  text-transform: uppercase;
}

@media (min-width: 481px) {
  .container {
    width: 400px;
  }
}

Code contained in app.js in the scripts folder:

var tabs = document.querySelector('paper-tabs');

tabs.addEventListener('core-select', function() {
  console.log("Selected: " + tabs.selected);
});

and ... the source of the index.html file:

<!DOCTYPE html>
<html>
    <head>
        <title>Tabs with Polymer</title>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="css/app.css">

        <script src="components/webcomponentsjs/webcomponents.js"></script>

        <link rel="import" href="components/font-roboto/roboto.html">
        <link rel="import" href ="components/core-header-panel/core-header-panel.html">
        <link rel="import" href ="components/core-toolbar/core-toolbar.html">
        <link rel="import" href="components/paper-tabs/paper-tabs.html">
        <link rel="import" href="elements/Post-card.html">
        
    </head>
    <body unresolved fullbleed layout vertical>

    <core-header-panel flex>
        <core-toolbar>
            <paper-tabs class="fit" selected="messages" flex>
                <paper-tab name="messages">Message</paper-tab>
                <paper-tab name="favorite">Favorites</paper-tab>
            </paper-tabs>
        </core-toolbar>

        <div class="container" layout vertical center>

            <post-card>
                <img width="70" height="70"
                     src="images/avatar-07.svg">
                <h2>NetBeans IDE Developer</h2>
                <p>I'm Polymer developer on NetBeans!</p>
            </post-card>

        </div>

    </core-header-panel>

    <script src="scripts/app.js"></script>

    </body>
</html>

The code below included in the index.html file imports into your page the predefined library and web components:

  <script src="components/webcomponentsjs/webcomponents.js"></script>
        <link rel="import" href="components/font-roboto/roboto.html">
        <link rel="import" href ="components/core-header-panel/core-header-panel.html">
        <link rel="import" href ="components/core-toolbar/core-toolbar.html">
        <link rel="import" href="components/paper-tabs/paper-tabs.html">

The instruction below allows you to import into the page your custom element defined in the Post-card.html file:

<link rel="import" href="elements/Post-card.html">

When you run the index.html file the result should be like this: 


Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}