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 error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

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: 


What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}