Upgrade your Component

Alright, so you're ready to re-invent the counter, huh? That time-tested and proven foundation of many a fireworks app? Awesome! Let's do some work...

1. Add an Attribute

Let's add an editable attribute to the counter called multiplier. It will be a number, with a minimum value of 1 and maximum value of 10. Later, we'll use it to multiply the current count. Make sure that this attribute is editable in the Appmaker designer and that the value persists when you save the app and refresh the designer. Set the default value to 2.

Component Attributes, Polymer & Attributes

2. Add a Listener Method

Add a listener method called "Multiply Count" and link it to a method that multiplies the the current count by the multiplier attribute that you added earlier. Turn this listener on by default and set the default channel color to pink.

Listener Methods

3. Add a Broadcast Method

Add a broadcast method to the Counter called Click. We'll add some functionality to it later.

Broadcast Methods

4. Add a Click Handler

Add a click event handler to the component so that when the component is clicked, it broadcasts it's current count on the Click broadcast. Use the special Polymer on-click shorthand.

Polymer Events

5. Make it Pretty

What's your favourite color? Oh.. really? Yikes. Well, anyway - change the background colour of the counter to that!

Help - Component Styling

6. Localize it

Add a french translation for the multiplier attribute that you added.

Localization