Web Components (Part 6) – Polymer Dynamic Forms

polymer 0.5 web components
Sat Sep 20 2014

Introduction

In the previous post we got a first glimpse of the Polymer framework and created a very simple element together. In this blog post we’ll go over a larger implementation that will give us the chance to see some more advanced Polymer features. I won’t go over Polymer extensively but mostly pass over some cool stuff that aren’t immediately obvious and took me some time to figure out.

Dymanic Forms

Let us firstly go over the scope of the project.

You can view the project over here => http://bstavroulakis.com/demos/webcomponents/form-creator/

Also the project’s code is located here => https://github.com/bstavroulakis/web-components/tree/master/form-creator

form-generator

It is a simple form-creator. On the left we can notice some input types and on the right you can edit the input options. Also it has an Edit View where you can edit your form and Visitor View where you can just preview the form.

Elements

In the previous post we saw how can we create our own simple element with encapsulated logic.

Attributes

Polymer elements have some more attributes. The one we saw is “name” which is necessary to name our element.

<polymer-element name=”my-popup”> … </polymer>

The rest are

attributes Custom attributes for our element
extends Responsible for extending elements
noscript Attribute for elements without the Polymer() call
constructor Attribute for custom constructors

 

You can see the attributes attribute in action over here => https://github.com/bstavroulakis/web-components/blob/master/form-creator/Components/wc-edit-field/wc-edit-field.html where depending on the element’s attributes we can pass parameters.

Javascript registering elements

Elements can be registered with Javascript only as well.

<script>
Polymer(‘wc-edit-field’, {text:”, editMode:false});
</script>

Element Lifecycles

 

created When the element is created
ready When all of the element’s properties are set as well
attached When the element is attached to the DOM
domReady When the element and its children exist
detached When it is removed from the DOM
attributeChanged When an attributes is changed or removed

 

Polymer('wc-edit-field', {
     created: function() { ... },
      ready: function() { ... },
      attached: function () { ... },
      domReady: function() { ... },
      detached: function() { ... },
      attributeChanged: function(attrName, oldVal, newVal) { ... },
 });

 

You can checkout the ready function used over here => https://github.com/bstavroulakis/web-components/blob/master/form-creator/Components/wc-el-thumb/wc-el-thumb.html

Binding

If we visit the basic form file => https://github.com/bstavroulakis/web-components/blob/master/form-creator/Components/wc-form/wc-form.html

you can notice the snippet

<template repeat="{{el, elIndex in elements}}">
                 <li class="form_element" data-index="{{elIndex}}">                     <template if="{{(el.typeID == 1)}}">
                         <wc-input pindex="{{elIndex}}" editMode="{{editMode}}" question="{{el.question}}" >

(function () {
            Polymer('wc-form', {
                formTitle: "",
                elements: [],

 

In this code in between the {{ … }} areas we can bind variables located in the Polymer object. Also we can loop arrays as well.

Expressions

While binding params there are some expressions we can use. For example {{editMode + ‘:’ + el.question}} will concatenate these two params as one would expect. You can find the whole list here => http://www.polymer-project.org/docs/polymer/expressions.html

Scope

In a template loop how can I have access to a parent object? For example in the above code snippet that we used whatever is in the

<template repeat=”{{el,elIndex in elements}}”> … </template> 

has the scope of the elements array. How can I access the formTitle which is in the Polymer object but out of that scope. The answer is with the $parent selector. So in that loop we could write {{ $parent.formTitle }}

Also, to access an element in the Polymer object with javascript you can use the $ selector. In the code snippet below we have an input with id edit_input and to access it we write this.$.edit_input. You could also access it by writing this.shadowRoot.querySelector(“#edit_input”)

....
<div id="edit_mode">
            <input id="edit_input" class="fancy" type="text" value="{{text}}" />

    </template>
    <script>
        (function () {
            Polymer('wc-edit-field', {
                text: "",
                editMode: false,
                showInputClick: function () {
                    var self = this;
                    self.enableEdit();
                    self.$.edit_input.style.display = "block";
                    self.$.edit_input.focus();
....

Events

Looking in another file => https://github.com/bstavroulakis/web-components/blob/master/form-creator/Components/wc-selector/wc-selector.html

we can checkout custom events in Polymer. When we run the self.fire(‘wc-selected’, this); method this fires a custom event.

In this file => https://github.com/bstavroulakis/web-components/blob/master/form-creator/index.html we receive the event fired.

var wcSelector = document.querySelector('.wc-sidebar wc-selector');
         wcSelector.addEventListener('wc-selected', function (el) {
             var typeID = (el.detail.getAttribute("data-typeID"));
             wcForm.elements.push({ description: "", typeID: typeID, options: [], question: "" });
         });

 

as we’ve added a listener for that custom event.

Conclusion

In this post we went over some more advanced concepts of the Polymer library. Also, you can checkout the full form creator example which uses most of them.

The next post will be the last one of the “Web Components” blog series. It won’t cover any concepts but will just offer you some resources that I’ve found helpful while trying to figure out these new technologies.

Full Stack Weekly Newsletter

A free weekly newsletter for full stack web developers!