Updated Tracker to deal with Polymer element restrictions

Updated Tracker to deal with Polymer element restrictions

[shailentuli, 2013-11-12 05:59:53]

This fixes Tracker, I think. PTAL, and thank you for your patience.

[Siggi Cherem (dart-lang), 2013-11-12 18:53:54]

https://codereview.chromium.org/66783006/diff/1/samples/tracker/web/elements/...
File samples/tracker/web/elements/task_form_element.dart (right):

https://codereview.chromium.org/66783006/diff/1/samples/tracker/web/elements/...
samples/tracker/web/elements/task_form_element.dart:26: // Define variables,
getters, and setters to get around Polymer Element
Consider rephrasing this. This is really a restriction on polymer-element. Maybe
a MirrorsUsed restriction or a polymer expression restriction, or an observable
restriction :-)?

Might be just easier to explain the real reason for this:
// define getters to work around that String.length and String.isEmpty are not
reflectable properties.

https://codereview.chromium.org/66783006/diff/1/samples/tracker/web/elements/...
samples/tracker/web/elements/task_form_element.dart:30: @observable bool
taskSaved;
Let's move some of these workarounds to Task so that you can preserve the
encapsulation that you already have in the model.

More precisely, consider changing Task as follows:

class Task extends Observable {
  ...

  int _taskID;
  @reflectable get int taskID => _taskId;
  @reflectable void set taskID(int value) {
     var wasSaved = _taskID != null;
     _taskID = notifyPropertyChange(#taskId, _taskID, value);
     notifyPropertyChange(#saved, wasSaved, value != null);
  }
  @reflectable bool get saved => _taskID != null;


  String _title;
  @reflectable get String title => _title;
  @reflectable void set title(String value) {
     var oldLength = _title.length;
     _title = notifyPropertyChange(#title, _title, value);
     notifyPropertyChange(#saved, oldLength, value.length);
  }
  @reflectable get int titleLength => _title.length;
 
  ... 
}


What I'm doing above is turning Task.saved into an actual observable property. A
normal getter is not observable, so I had to:
  -- switch to manually notify changes on the underlying taskId, so we can
notify changes not just in the taskId, but also in Task.saved
  -- added @reflectable on [Task.saved] so it can be used in your template
  -- With these changes you should be able get rid of the [taskSaved] variable.

I did a similar trick for Task.title so we can intercept when it changes and
notify about changes to the titleLength property. You'd need to do something
like that for description too.

https://codereview.chromium.org/66783006/diff/1/samples/tracker/web/elements/...
samples/tracker/web/elements/task_form_element.dart:44: }
with my suggestion above you should be able to get rid of these 2 properties
above.

Note: if you want to keep these workarounds here, then you are not gaining
anything from using the setter/getter pattern. You can just make this:

@observable int taskDescriptionLength;

and it would work the same way.

https://codereview.chromium.org/66783006/diff/1/samples/tracker/web/elements/...
samples/tracker/web/elements/task_form_element.dart:48: }
FYI - this trick s very similar to what I'm suggesting in Task. The main
difference is that here you are using the magical propertyChanged() methods,
which are not available outside of PolymerElement