Updated Tracker to deal with Polymer element restrictions

samples/tracker/web/elements/task_form_element.dart

Index: samples/tracker/web/elements/task_form_element.dart
diff --git a/samples/tracker/web/elements/task_form_element.dart b/samples/tracker/web/elements/task_form_element.dart
index 52efd28cb85b95a7028a87441b5fb6adfaf3b34f..d9c92cf1a0482fdcf7bc03b527ca52dd523f1b14 100644
--- a/samples/tracker/web/elements/task_form_element.dart
+++ b/samples/tracker/web/elements/task_form_element.dart
@@ -23,6 +23,34 @@ class TaskFormElement extends PolymerElement {
   @observable String previousStatus = '';
   @observable String submitLabel = '';
 
+  // Define variables, getters, and setters to get around Polymer Element

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

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.

+  // restrictions.
+  @observable bool titleErrorMessageIsEmpty;
+  @observable bool descriptionErrorMessageIsEmpty;
+  @observable bool taskSaved;

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

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.

+
+  int _taskTitleLength = 0;
+  int get taskTitleLength => _taskTitleLength;
+  void set taskTitleLength(int c) {
+    _taskTitleLength = notifyPropertyChange(#taskTitleLength,
+        _taskTitleLength, c);
+  }
+
+  int _taskDescriptionLength = 0;
+  int get taskDescriptionLength => _taskDescriptionLength;
+  void set taskDescriptionLength(int c) {
+    _taskDescriptionLength = notifyPropertyChange(#taskDescriptionLength,
+        _taskDescriptionLength, c);
+  }

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

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.

+
+  titleErrorMessageChanged(String oldValue) {
+    titleErrorMessageIsEmpty = titleErrorMessage.isEmpty;
+  }

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

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

+
+  descriptionErrorMessageChanged(String oldValue) {
+    descriptionErrorMessageIsEmpty = descriptionErrorMessage.isEmpty;
+  }
+
   TaskFormElement.created() : super.created();
 
   enteredView() {
@@ -33,14 +61,18 @@ class TaskFormElement extends PolymerElement {
       statusSelectedIndex = taskStatusOptions.indexOf(task.status);
       previousStatus = task.status;
     }
+
+    taskTitleLength = task.title.length;
+    taskDescriptionLength = task.description.length;
+    taskSaved = task.saved;
   }
 
   bool validateTitle() {
-    int len = task.title.length;
+    taskTitleLength = task.title.length;
     bool valid = false;
-    if (len == 0 && Task.TITLE_REQUIRED) {
+    if (taskTitleLength == 0 && Task.TITLE_REQUIRED) {
       titleErrorMessage = 'Title is required';
-    } else if (len > maxTitleLength) {
+    } else if (taskTitleLength > maxTitleLength) {
       titleErrorMessage = 'Title must be less than $maxTitleLength characters';
     } else {
       titleErrorMessage = '';
@@ -50,9 +82,9 @@ class TaskFormElement extends PolymerElement {
   }
 
   bool validateDescription() {
-    int len = task.description.length;
+    taskDescriptionLength = task.description.length;
     bool valid = false;
-    if (len >= maxDescriptionLength) {
+    if (taskDescriptionLength >= maxDescriptionLength) {
       descriptionErrorMessage = 'Description must be less than '
           '$maxDescriptionLength characters';
     } else {