Your Component & Polymer

Appmaker components are built with the help of a framework called Polymer. It's a neat framework that helps you built your own custom HTML elements. In this guide, we'll show you the basics of what you need to know about Polymer! We'll be using the Counter Component from the Getting Started repo.

####We'll take a look at...

1. Working with Attributes
2. Data Binding
3. Event Binding
4. Polymer Events
5. Component DOM Manipulation

Working with Attributes

Polymer has some cool tricks for handling attributes. Let's take a look at the counter element.

<polymer-element name="ceci-counter" extends="ceci-element" attributes="unit increment value">

####Getting or setting an attribute

The counter element has three attributes, and they're available inside of the element via javascript using this shorthand.

this.attributeName

You can also use the classic

this.getAttribute("increment")

####Tracking changes When an attribute changes, Polymer will automatically look for and fire an attributeChanged function with the corresponding name. Here's how the counter component handles changes to the increment attribute.

incrementChanged: function(oldValue, newValue) {
  this.increment = Number(this.increment) || 0;
}

Check out the full Polymer Attribute Docs

Data Binding

Polymer Data Binding Docs

Polymer allows you bind special variables inside of your element's markup to it's attributes, properties and methods. The counter component uses this data binding to display the value attribute and the displayUnit property, like this...

<div class="count-wrapper">
  <span class="count">{{value}}</span>
  <span class="count-label">{{displayUnit}}</span>
</div>

Check out the full Polymer Data Binding Docs

###Events Polymer provides a shorthand for binding common events to methods inside an element as well. The following demonstrates using a click handler to fire off a method.

<button on-click="{{clickHandler}}" />

clickHandler : function(){ console.log("I done been clicked!") }

You can use this shorthand for all common web events like:

• keypress
• mouseenter
• And many more!

###Component Dom Polymer has some cool shorthand for selecting nodes with an id attribute. You can select a node with id="jumbo" using...

this.$.jumbo

For other types of selectors, it's best to use the shadowRoot combined with a querySelector. So, for selecting a node with class="important"

this.$.shadowRoot.querySelector(".important")