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.

AJAX calls from core_ajax_dart

The first phase is 

1. Make a call to the YouTube api (a hardcoded url and parameters).  
2. Parse and display the response.

Problems I encountered.

I would like to bind the "response" attribute from the core_ajax_dart element to a object in my custom element (api-wrapper).  When triggered by the core-response event, a function in the api-wrapper would process the object.  I kept getting "null" in object (the default response value).  I don't know how long the response persists.  

I solved the problem by capture the detail of the core-response event in a function in the api-wrapper element.

handleResponse(Event e, var detail, Node sender){
print(detail['response']);
parseResponse(detail['response']);
}

Parsing the response

I would like to use JSON.decode to parse the response (detail).  I convert to a string and then pass to JSON.decode.  I get a FormatException.  

After searching, I found that the response is a collection.  I can use [selectors] to navigate to the fields I want.  For example:

handleResponse(Event e, var detail, Node sender){
e.preventDefault();
apiResponse = detail['response'];
print(apiResponse['feed']['entry'].length);
print(apiResponse['feed']['entry'][0]['title'][r'$t']);
}


This gets me close.  Ideally I would iterate through the list in the DOM to display the desired fields.  I haven't got this to work yet.

I can use a for-in loop in my dart file to display the fields from the response.  Now, I need to get the values onto the page.

MVC in Polymer.Dart

I have seen a couple of different implementations of the MVC model in Polymer.Dart.

I redid the codelab example adding indexedDB support.  I followed the count-down example given on the Dart sample code page.  The MVC model is implemented with a model and a view model.

The basic class structure and how to write objects to memory are included in the model.  The model is extended by the view model.  The "view" model integrates managing the indexedDB and managing the objects in memory.

Example the addCodelab code:
void addCodelab(Codelab codelab){
//validate codelab
_store.add(codelab).then((_){
hasCodelabs = notifyPropertyChange(const Symbol('hasCodelabs'),
hasCodelabs, (codelabs.length == 0) ? false: true);
},
onError: (e) {print('duplicate key'); });
}The polymer element then controls the firing of functions and life cycle functions (initialization, placed in the DOM, and being removed from the DOM).  The different lifecycle functions lead to interesting questions about using a bind if template or a plain if template and how that effects the call of attached functions.

Another remaining question is where to put the validation.  The current validation is in the polymer element.  It seems prudent to place validation in the either the view controller or in the model.

Core Elements Working

I got the polymer <core-elements> working.  I have to compile to JS and include the components in index.html.
The result is a very crowded index.html.  I would prefer to compartmentalize the components and pass data through.
Having to place all the <core-elements> in index.html also makes styling the components difficult.  Components styles can be encapsulated.  Styling the page can be broken down into segments.  With all the <core-elements> living in index.html, the styling is universal.

Validating in the Class Model

I am still working on moving the input validation from the form to the class model.
I am considering two options for passing the result of the validation to the polymer element.

1. A bool function with a FormatException for the error message.
2. Add validation to the setter.
3. Or return a CustomEvent with a Map of the result and message.

In the setter

The object is more protected  if the validation is in the setter.   Defining the setter with validation requires creating a private field and removing the @observable status from the field; Observables can have setters or getters.

So that the field can continue to function as an observable, the function notifyPropertyChange needs to be added to the setter.  Seth provides an example.

Is it worth it?

Implementing the validator in the model class has complicated the code.  Is having a more robust class worth it?

Validation in the Class

I can implement a validation in the class that throws an exception to the object.  I need to do some work to send and receive the right messaging - right now I get a "State Error: message" or "Instance of Validation Error".  An option is to send an event instead of the exception.  

I am unsure of the trade offs of sending the message from the class to the object in an event or as an exception.

Class Validation in Dart Polymers

My goal is to validate within the class definition and pass the errors to the UI.

Input Forms and Classes

My input form in HTML passes a String.  My class expects a DateTime or int.  I handle this by creating a public string variable and an internal variable (_variable) of the correct class. In the constructor, I parse the public string variable into the desired class.
I may try holding on to the public string in "quarantine" until the user submits the form and then set the internal variables.  I am not sure if this is good practice.

Validation

First I need to be able to call the validation method from my polymer element.  Dart.Polymer doesn't let me call the method directly with:
<on-event = "{{instance.method}}">

So I create a method in my polymer element.
bool FormDateValidation ()=> instance.method();

Parse throws a FormatException.  I want to catch and display the exception.  The method becomes:

bool FormDateValidation (){
try{
return instance.method();
} catch(e){
formError = e;}

Questions:

• Can HTML pass DateTime and int directly?
• How to throw and catch an exception if the String Variable can not be parsed to the desired class?