Events in Polymer

Posted on November 30, 2016 by Tammo Sminia

When playing around in Polymer, we encounter iron signals. Besides normal javascript events, this gives us a lot of options for dealing with events. Lets try it all out!

We can catch events using the on-event attribute:

<button id="button1" on-tap="push1">1</button>

1	<button id="button1" on-tap="push1">1</button>

This calls method push1:

push1: function() {
    console.log("sub-component1: button 1 pushed. Using the on-tap property");
}

push1: function() {

console.log("sub-component1: button 1 pushed. Using the on-tap property");

}

Scroll down for the complete code listing. Or see it on github.

Another way to catch it is using a listener:

<button id="button2">2</button>

listeners: {
    'button2.tap': 'push2'
},

push2: function() {
    console.log("sub-component1: button 2 pushed. Using a listener");
}

listeners: {

'button2.tap': 'push2'

push2: function() {

console.log("sub-component1: button 2 pushed. Using a listener");

}

We can also fire our own events:

push3: function() {
    this.fire("push3");
}

push3: function() {

this.fire("push3");

}

We can catch that in the parent component using the on-event attribute or a listener.

These events will always bubble up to parent components. Even when the event is caught. But never sideways.

So in this situation the methods push, push-parent and push-grandparent will be called, but not push-sibling.

<div on-tap="push-grandparent">
  <div on-tap="push-parent">
    <button id="button1" on-tap="push">1</button> 
    <button on-tap="push-sibling">2</button>
  </div>
</div>

</div>

So it’s good to not use too generic names, because the parent component might also use that event.
You can prevent that by prefixing your event names with your component name.

you can stop an event from bubbling up by using event.stopPropagation():

push5: function(event) {
    event.stopPropagation();
    console.log("sub-component1: button 5 pushed. This stops the event from bubbling upward.");
}

push5: function(event) {

event.stopPropagation();

console.log("sub-component1: button 5 pushed. This stops the event from bubbling upward.");

}

You can also use iron-signals to throw events sideways.

Throw them:

this.fire('iron-signal', {name: 'push4', data: null});

1	this.fire('iron-signal', {name: 'push4', data: null});

and catch them:

<iron-signals on-iron-signal-push4="push4"></iron-signals>

1	<iron-signals on-iron-signal-push4="push4"></iron-signals>

You can also catch them in multiple places.

I recommend against using iron-signals, because it can be hard to find out where the even comes from or will be caught. Use the rule of least power and stay with normal javascript events.

Complete code.
Polymer-events.html:

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-signals/iron-signals.html">
<link rel="import" href="sub-component1.html">
<link rel="import" href="sub-component2.html">

<dom-module id="polymer-events">
    <template>
        <div id="polymer-events" style="background: #d3f2b0">
            polymer-events
            <sub-component1 id="subcomponent1" on-push3="push3a" on-tap="tapSubcomponent1"></sub-component1>
            <sub-component2 id="subcomponent2"></sub-component2>
        </div>
        <iron-signals on-iron-signal-push4="push4"></iron-signals>
    </template>

    <script>
        Polymer({
            is: 'polymer-events',

            listeners: {
                'push3': 'push3b'
            },

            push3a: function() {
                console.log("polymer-events: button 3 pushed. Using a custom javascript event and the on-push3 property.")
            },

            push3b: function() {
                console.log("polymer-events: button 3 pushed. Using a custom javascript event and a listener.")
            },

            push4: function() {
                console.log("polymer-events: button 4 pushed. Using iron-signals.")
            },

            tapSubcomponent1: function() {
                console.log("polymer-events: tapSubcomponent1. This also happens when a specific button tap is already caugth in subComponent1. Events always bubble up.")
            }
        });
    </script>
</dom-module>

<dom-module id="polymer-events">

polymer-events

<sub-component1 id="subcomponent1" on-push3="push3a" on-tap="tapSubcomponent1"></sub-component1>

<sub-component2 id="subcomponent2"></sub-component2>

</div>

<iron-signals on-iron-signal-push4="push4"></iron-signals>

</template>

Polymer({

is: 'polymer-events',

listeners: {

'push3': 'push3b'

push3a: function() {

console.log("polymer-events: button 3 pushed. Using a custom javascript event and the on-push3 property.")

push3b: function() {

console.log("polymer-events: button 3 pushed. Using a custom javascript event and a listener.")

push4: function() {

console.log("polymer-events: button 4 pushed. Using iron-signals.")

tapSubcomponent1: function() {

console.log("polymer-events: tapSubcomponent1. This also happens when a specific button tap is already caugth in subComponent1. Events always bubble up.")

}

});

</script>

</dom-module>

This uses subComponent1:

<link rel="import" href="../polymer/polymer.html">

<dom-module id="sub-component1">

    <template>
        <div id="sub-component1" style="background: #f2eda0">
            sub-component1
            <button id="button1" on-tap="push1">1</button>
            <button id="button2">2</button>
            <button id="button3" on-tap="push3">3</button>
            <button id="button4" on-tap="push4">4</button>
            <button id="button5" on-tap="push5">5</button>
        </div>
    </template>

    <script>
        Polymer({
            is: 'sub-component1',

            listeners: {
                'button2.tap': 'push2'
            },

            push1: function() {
                console.log("sub-component1: button 1 pushed. Using the on-tap property");
            },

            push2: function() {
                console.log("sub-component1: button 2 pushed. Using a listener");
            },

            push3: function() {
                this.fire("push3");
            },

            push4: function() {
                this.fire('iron-signal', {name: 'push4', data: null});
            },

            push5: function(event) {
                event.stopPropagation();
                console.log("sub-component1: button 5 pushed. This stops the event from bubbling upward.");
            }
        });
    </script>
</dom-module>

<dom-module id="sub-component1">

sub-component1

</div>

</template>

Polymer({

is: 'sub-component1',

listeners: {

'button2.tap': 'push2'

push1: function() {

console.log("sub-component1: button 1 pushed. Using the on-tap property");

push2: function() {

console.log("sub-component1: button 2 pushed. Using a listener");

push3: function() {

this.fire("push3");

push4: function() {

this.fire('iron-signal', {name: 'push4', data: null});

push5: function(event) {

event.stopPropagation();

console.log("sub-component1: button 5 pushed. This stops the event from bubbling upward.");

}

});

</script>

</dom-module>

and subComponent2:

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-signals/iron-signals.html">

<dom-module id="sub-component2">
    <template>
        <div id="sub-component2" style="background: #f2c3af">
            sub-component2
        </div>
        <iron-signals on-iron-signal-push4="push4"></iron-signals>
    </template>

    <script>
        Polymer({
            is: 'sub-component2',

            listeners: {
                'push3': 'push3'
            },

            push3: function() {
                console.log("sub-component2: button 3 pushed. This will not happen because javascript events only go upwards in the element hierarchy.")
            },

            push4: function() {
                console.log("sub-component2: button 4 pushed. Using iron-signals.")
            }
        });
    </script>
</dom-module>

<dom-module id="sub-component2">

sub-component2

</div>

<iron-signals on-iron-signal-push4="push4"></iron-signals>

</template>

Polymer({

is: 'sub-component2',

listeners: {

'push3': 'push3'

push3: function() {

console.log("sub-component2: button 3 pushed. This will not happen because javascript events only go upwards in the element hierarchy.")

push4: function() {

console.log("sub-component2: button 4 pushed. Using iron-signals.")

}

});

</script>

</dom-module>

Handling YAML format in your REST with Spring Boot

Posted on November 30, 2016 by Willem Cheizoo

In general a REST service serves JSON document formats. In Spring Boot it is even the standard without having to configure anything.
Over HTTP we have the ability to send a Content-Type as header to instruct the server to return a certain document format (Mime type).
Besides handling JSON, XML is another common document format. But what if we want to serve or read a YAML document format?

This tutorial provides the required steps to be able to handle objects in YAML format. To be able to send a YAML Content-Type with the header, and to be able to serialize and deserialize with the existing ObjectMappers of Jackson. This tutorial will use Spring Boot, Jackson and a YAML dataformat extension library for Jackson.

Continue reading →

Gradle Goodness: Adding Task With Rule Based Model Configuration

Posted on November 30, 2016 by mrhaki

Gradle has an incubating feature Rule based model configuration. This is a new way to configure Gradle projects where Gradle has more control of the configuration and the dependencies between configuration objects. This allows Gradle to resolve configuration values before they are used, because Gradle knows there is a dependency. With this new model we don’t need any lazy evaluation “tricks” we had to use. For example there was an internal convention mapping mechanism for tasks to assign values to a task configuration after the task was already created. Also the project.afterEvalute is a mechanism to have late binding for task properties. With the new rule based model Gradle can do without these options, we can rely on Gradle resolving all dependent configuration values when we create a task.

Continue reading →

Awesome Asciidoctor: Using Ruby Extensions With Asciidoctor Gradle Plugin

Posted on November 24, 2016 by mrhaki

Asciidoctor is a Ruby tool, but luckily we can use AsciidoctorJ to use Asciidoctor in Java code. The Asciidoctor Gradle plugin relies on AsciidoctorJ to run. AsciidoctorJ allows us to write custom extensions in Java (or Groovy), but we can still use Asciidoctor extensions written in Ruby with the Gradle plugin.

Continue reading →

Gradle Goodness: Custom Plugin Repositories With Plugins DSL

Posted on November 23, 2016 by mrhaki

To apply a plugin in our Gradle build script we can use the plugins DSL. The plugins DSL is very concise and allows Gradle to be more efficient and more in control when loading the plugin. Normally the plugin we define is fetched from the Gradle plugin portal. If we have our own repository, for example on the intranet of our company, we have to define that extra repository with a pluginRepositories configuration block in the settings.gradle file of our project.

Continue reading →

AI movie critic – part 1 – Reading the training data

Posted on November 13, 2016 by Tammo Sminia

This is the first of a series of posts. Where we will use machine learning to rate movies. For this task we’re not going to watch all the movies. I assume it’s good enough to just read the plot. We’ll use Markov chains to rate the movies and as an added bonus we can also generate new movie plots for awesome (or terrible) movies.

In this first part we’ll get the data and change it into a more usable format.
We can use the data from IMDB, which is published on ftp://ftp.fu-berlin.de/pub/misc/movies/database/. Of interest are the plots and the ratings.

Plots look like this:

-------------------------------------------------------------------------------
MV: Fear and Loathing in Las Vegas (1998)

PL: The big-screen version of Hunter S. Thompson's seminal psychedelic classic
PL: about his road trip across Western America as he and his large Samoan
PL: lawyer searched desperately for the "American dream"... they were helped in
PL: large part by the huge amount of drugs and alcohol kept in their
PL: convertible, The Red Shark.

BY: Laurence Mixson

PL: Raoul duke is a drug addled gonzo journalist. he is sent to cover a
PL: motorcycle race as an article for his magazine, but then the situation
PL: escalates into him and his psychotic attorney searching for the American
PL: dream, aided by almost every drug known to man in the boot of his red
PL: convertible.

BY: palmtreehead

PL: An adaptation of Hunter S. Thompson's novel of the same name. The film
PL: details a whacky search for the "American Dream", by Thompson and his
PL: crazed, Samoan lawyer. Fueled by the massive amount of drugs they purchased
PL: with an advance from a magazine to cover a sporting event in Vegas; they
PL: set out in the Red Shark. Encountering police, reporters, gamblers, racers,
PL: and hitchhikers; they search for some undefinable thing know only as the
PL: "American Dream" and find fear, loathing and hilarious adventures into the
PL: dementia of the modern American West.

BY: J. D. Keith <jkeith@compunet.net>

-------------------------------------------------------------------------------

-------------------------------------------------------------------------------

MV: Fear and Loathing in Las Vegas (1998)

PL: The big-screen version of Hunter S. Thompson's seminal psychedelic classic

PL: about his road trip across Western America as he and his large Samoan

PL: lawyer searched desperately for the "American dream"... they were helped in

PL: large part by the huge amount of drugs and alcohol kept in their

PL: convertible, The Red Shark.

BY: Laurence Mixson

PL: Raoul duke is a drug addled gonzo journalist. he is sent to cover a

PL: motorcycle race as an article for his magazine, but then the situation

PL: escalates into him and his psychotic attorney searching for the American

PL: dream, aided by almost every drug known to man in the boot of his red

PL: convertible.

BY: palmtreehead

PL: An adaptation of Hunter S. Thompson's novel of the same name. The film

PL: details a whacky search for the "American Dream", by Thompson and his

PL: crazed, Samoan lawyer. Fueled by the massive amount of drugs they purchased

PL: with an advance from a magazine to cover a sporting event in Vegas; they

PL: set out in the Red Shark. Encountering police, reporters, gamblers, racers,

PL: and hitchhikers; they search for some undefinable thing know only as the

PL: "American Dream" and find fear, loathing and hilarious adventures into the

PL: dementia of the modern American West.

BY: J. D. Keith <jkeith@compunet.net>

-------------------------------------------------------------------------------

and from ratings.list:

      0000001212  208460   7.7  Fear and Loathing in Las Vegas (1998)

1	0000001212 208460 7.7 Fear and Loathing in Las Vegas (1998)

We’ll combine these and output one file with just a title, one plot and a rating in stars (1 to 5).

Now it looks like this:

Fear and Loathing in Las Vegas (1998)
The big-screen version of Hunter S. Thompson's seminal psychedelic classic about his road trip across Western America as he and his large Samoan lawyer searched desperately for the "American dream"... they were helped in large part by the huge amount of drugs and alcohol kept in their convertible, The Red Shark.
4

Fear and Loathing in Las Vegas (1998)

The big-screen version of Hunter S. Thompson's seminal psychedelic classic about his road trip across Western America as he and his large Samoan lawyer searched desperately for the "American dream"... they were helped in large part by the huge amount of drugs and alcohol kept in their convertible, The Red Shark.

next time: Markov chains

You can find all the code on github.

Ratpacked: Creating Pairs From Promises

Posted on November 2, 2016 by mrhaki

The Pair class in Ratpack is an easy way to create a growing data structure, passed on via Promise methods. A Pair object has a left and right part containing data. These parts can even be other Pair objects. Since Ratpack 1.4.0 the Promise class has methods to set the right or left part of a Pair: left, flatLeft, right and flatRight. The result of these methods is a Promise<Pair> object. The input can be Promise type or a Function that can use a previous Promise.

Continue reading →

Groovy Goodness: Identity Closure

Posted on November 1, 2016 by mrhaki

In functional programming we have the concept of an identity function. An identity function returns the same result as the input of the function. Groovy has a lot of functional paradigms including a identity function. Of course in Groovy’s case it is an identity closure. It is defined as a constant in the Closure class: Closure.IDENTITY. If we use this closure we get the same result as the argument we provide.

Continue reading →