Updated Tracker to deal with Polymer element restrictions

samples/tracker/web/elements/task_form_element.dart

 // Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
 library tracker.web.task_form_element;
 
 import 'package:polymer/polymer.dart';
 import 'package:tracker/models.dart';
 import 'dart:html';
 import 'dart:math';
 
 @CustomTag('task-form-element')
 class TaskFormElement extends PolymerElement {
   bool get applyAuthorStyles => true;
   @observable Task task;
   @observable String titleErrorMessage = '';
   @observable int maxTitleLength = Task.MAX_TITLE_LENGTH;
   @observable String descriptionErrorMessage = '';
   @observable int maxDescriptionLength = Task.MAX_DESCRIPTION_LENGTH;
   @observable final List<String> taskStatusOptions = toObservable([
       Task.CURRENT, Task.PENDING, Task.COMPLETED]);
   @observable int statusSelectedIndex = 1;
   @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() {
     super.enteredView();
     submitLabel = task.saved ? 'Update' : 'Create';
     statusSelectedIndex = taskStatusOptions.indexOf(task.status);
     if (!task.saved) {
       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 = '';
       valid = true;
     }
     return valid;
   }
 
   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 {
       descriptionErrorMessage = '';
       valid = true;
     }
     return valid;
   }
 
   createOrUpdateTask(Event event, detail, sender) {
@@ skipping 40 matching lines @@
       appModel.tasks.add(task);
     }
   }
 
   deleteTask() {
     if (window.confirm('Are you sure you want to delete this?')) {
       appModel.tasks.remove(task);
     }
   }
 }