sdk/utils/tests/template/sample.dart

// Copyright (c) 2011, 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.

#import('dart:html');

// Utility functions:
String safeHTML(String value) {
  // TODO(terry): TBD
  return value;
}

/* Data Model */
class Friend {
  String name;
  String phone;
  int age;
  int friendsCircle, familyCircle, workCircle;

  Friend(this.name, this.phone, this.age,
         this.friendsCircle, this.familyCircle, this.workCircle);
}

/* Simple template:
   ================

  template HTML FriendList(List<Friend> friends) {
    <div>Friends:
      <ul>
        ${#each friends}          // Iterates over each friend
          <li>${name}</li>        // Scope of block is Friend type
        ${/each}
      </ul>
    </div>
  }
*/
class FriendList /*extends Template*/ {
  Element _fragment;

  // ${#each friends}
  each_0(List items, Element parent) {
    for (var item in items) {
      var e0 = new Element.html('<li></li>');      // Node before injection
      e0.innerHTML = inject_0(item);
      parent.elements.add(e0);
    }
  }

  // ${name}
  String inject_0(item) {
    return safeHTML('''${item.name}''');
  }

  FriendList(List<Friend> friends) {
    _fragment = new Element.tag('div');
    Element e0 = new Element.html('<div>Friends:</div>');
    _fragment.elements.add(e0);
    Element e0_0 = new Element.html('<ul></ul>');  // Node before #each
    e0.elements.add(e0_0);
    each_0(friends, e0_0);
  }

  Element get root() => _fragment.nodes.first;

  String toString(){
    return _fragment.innerHTML;
  }
}


/* More template control:
   ======================

  template HTML FriendEntry(Friend friend) {
    <li>
      ${#with friend}
        <span>${name}</span>
        ${#if (age < 18)}
          <span class=”left-space”>child</span>
        ${#else}
          <span class=”left-space”>adult</span>
        ${/if}
        <span class=”left-space”>circles = ${friendCircle + familyCircle + workCircle}</span>
      ${/friend}
    </li>
  }
*/
class FriendEntry /*extends Template*/ {
  Element _fragment;

  // ${#with friend}
  with_0(Friend item, Element parent) {
    var e0 = new Element.html('<span></span>');  // Node before injection
    e0.innerHTML = inject_0(item);
    parent.elements.add(e0);

    // ${#if expression} 
    if (if_0(item)) {
      var e1 = new Element.html('<span class="left-space">child</span>');
      parent.elements.add(e1);
    } else {
      var e2 = new Element.html('<span class="left-space">adult</span>');
      parent.elements.add(e2);
    }

    // Node before injection.
    var e3 = new Element.html('<span class="left-space"></span>');
    e3.innerHTML = inject_1(item);
    parent.elements.add(e3);
  }

  // expression (age < 18)}
  bool if_0(var item) {
    return (item.age < 18);
  }

  // ${name}
  String inject_0(item) {
    return safeHTML('''${item.name}''');
  }

  // ${friendCircle + family.Circle + workCircle
  String inject_1(item) {
    return safeHTML('circles = ${item.friendsCircle + item.familyCircle + item.workCircle}');
  }

  FriendEntry(Friend friend) {
    _fragment = new Element.tag('div');
    Element e0 = new Element.html('<li></li>');  // Node before #with
    _fragment.elements.add(e0);
    with_0(friend, e0);
  }

  Element get root() => _fragment.nodes.first;

  String toString(){
    return _fragment.innerHTML;
  }
}


/* Template with events:
   =====================

  template HTML FriendEntryEvents(Friend friend) {
   <li>
     ${#with friend}
       <span var=friendElem style="cursor: pointer;">${name}</span>
       ${#if (age < 18)}
         <span class=”left-space”>child</span>
       ${#else}
         <span class=”left-space”>adult</span>
       ${/if}
       <span class=”left-space”>circles = ${friendCircle + familyCircle + workCircle}</span>
     ${/friend}
   </li>
  }
*/
class FriendEntryEvents /*extends Template*/ {
  Element _fragment;
  var _friendElem;

  get friendElem() => _friendElem;

  // ${#with friend}
  with_0(Friend item, Element parent) {
    _friendElem = new Element.html('<span style="cursor: pointer;"></span>');  // Node before injection
    _friendElem.innerHTML = inject_0(item);
   parent.elements.add(_friendElem);

   // ${#if expression} 
   if (if_0(item)) {
     var e1 = new Element.html('<span class="left-space">child</span>');
     parent.elements.add(e1);
   } else {
     var e2 = new Element.html('<span class="left-space">adult</span>');
     parent.elements.add(e2);
   }

   // Node before injection.
   var e3 = new Element.html('<span class="left-space"></span>');
   e3.innerHTML = inject_1(item);
   parent.elements.add(e3);
  }

  // expression (age < 18)}
  bool if_0(var item) {
   return (item.age < 18);
  }

  // ${name}
  String inject_0(item) {
   return safeHTML('''${item.name}''');
  }

  // ${friendCircle + family.Circle + workCircle
  String inject_1(item) {
   return safeHTML('circles = ${item.friendsCircle + item.familyCircle + item.workCircle}');
  }

  FriendEntryEvents(Friend friend) {
   _fragment = new Element.tag('div');
   Element e0 = new Element.html('<li></li>');  // Node before #with
   _fragment.elements.add(e0);
   with_0(friend, e0);
  }

  Element get root() => _fragment.nodes.first;

  String toString(){
   return _fragment.innerHTML;
  }
}


void main() {
  // Setup style sheet for page.
  document.head.elements.add(new Element.html('<style>.left-space { margin-left: 10px; }</style>'));

  // Create data model.
  List<Friend> friends = new List<Friend>();
  friends.add(new Friend('Tom','425.123.4567', 35, 20, 10, 40));
  friends.add(new Friend('Sue','802.987.6543', 23, 53, 25, 80));
  friends.add(new Friend('Bill','617.123.4444', 50, 10, 5, 110));

  // Simple template.
  document.body.elements.add(new FriendList(friends).root);

  // Use control template.
  document.body.elements.add(new FriendEntry(friends[0]).root);

  // Template with Events:
  var clickableFriend = new FriendEntryEvents(friends[0]);
  document.body.elements.add(clickableFriend.root);
  clickableFriend.friendElem.on.click.add((e) {
    var elemStyle = e.srcElement.style;
    String toggleColor = elemStyle.getPropertyValue("background-color") == "red" ? "white" : "red";
    elemStyle.setProperty("background-color", "${toggleColor}");
  });

  // Calling template inside of a template:
//  document.body.elements.add(new Templates(friends).root);
}