Element Events

I have a HTML canvas, I want to add elements.  Polymer elements have on-xxx event handlers built in.  The element class has defined events onXXX.  To correctly work the event must be labeled on-XxxXxx.

It turns out keypress events are a little harder to figure out than Mouse Events.

Variable Styling

Looking at options to dynamically control the styling.

Option 1.  Bind an attribute of an element to an attribute of the div.

<paper-toggle-button class="blue" checked="{{fadeSelected}}">

Then create a css rule that changes based on the value.
*[data-fade-selected="true"] {
  opacity: 0.3;
}

Option 2.  Call a function that changes a style attribute

For elements with change events, you can call a function on-change. In the function, you locate the id or class and then change the style.

$['drawerPanel'].style.display = 'none';

Polymer Expressions in Iterables

Polymer element allow you to iterate over a list that is filtered by a Polyer Expression - {{item in list | filterList}}.
For the Codlab project.
Iterating on a filtered list is handy, but does not allow me to eliminate the filteredCodelabs because I need the ability to dynamically change the filter.

Polymer Expressions

Polymer Expressions enable calling a function from the DOM of the polymer element.

1. The function with a single input and single output.
2. You need to import 'package:polymer_expressions/expression.dart';

The Polymer Expression I implemented formatted a DateTime to be human readable.  I imported 'package:intl/intl.dart';

readableDate(DateTime date){
var formatter = new DateFormat('EEEE MMMM d, yyyy');
return formatter.format(date);
}
For Practice: Take the Codelab and replace the filtered list of Codelabs with a function.

Api, Core-Ajax-Dart Problems

I learned two things about core-ajax-dart.

1. You have to pass an empty params attribute (params = "{}").  No params doesn't work.
2. Weather Underground is hard to play with.  Openweather gives you less information, but is easier to use.

Polymer.Dart Core Elements in Codelab

I worked on adding core-elements to a Codelab.  I replaced textarea's with core-inputs.  Some lessons learned.

1. Only the 'on-validate' method fires after every key stroke.
2.  I haven't gotten multiline to work yet.  The input looks like a text input.  I suspect the CSS style, but I disabled most (all) of the CSS.
3. Focus and text styling is different than the textarea input.  I am still trying to figure out how to style elements in the shadow-DOM.

Top - core-input.  Bottom - Textarea.  Notice the text fonts aren't the same.

After I got the core-input working.  I tried to implement core-list. 

I have a list of Codelabs that I input into the data attribute of the core-list element.  I want to repeat a custom polymer element.  I need to feed the custom element a single Codelab.  I had success accessing a Codelab fields, but I when I try to pass Codelab, I am unable.  I could deconstruct the element a little and pass the fields I want to access.  That would work for this simple example, but doesn't seem to scale well. 

Initializing a list of objects

It is a common pattern to maintain a list of objects.  To maintain the list, you need to add a new object to a list of objects and delete existing objects.  Lists have add and remove methods, but you have to properly initialize the list.
Doesn't Work:
   @ observable List<Object> objects
Works:
  final List<Object> objects = toObservable(new List());

@observable works for numbers and Strings, but not Maps and Lists.

I am working with the YouTube api example from the previous post.  My method of creating objects from the api response does not tolerate missing values.

1. Short term, I can stop looking for that fields where there are missing values (comments and average rating).
2. Check if a value exists before trying to assign the value to the object.  Solves the problem, but doesn't feel eloquent of robust.

I am ignoring the offending fields for now because what I want to work on is displaying the list. 

My initial idea is to use the template "repeat" to display the name.  It works after I remember specify the list in the class the contains the list and all the constructors and functions for maintaining the list.  

Example: 

<template repeat="{{class.list}}">

I decided to try <core-list-dart> because I am greedy.

1. I need to add a selector field.