Software is hard

• Published:October 4th, 2008
• Comments:6 Comments
• Category:Domplate

There is bunch of various possibilities how to generate UI using Domplate (remember entire Firebug UI is generated using Domplate - i.e. content of all panels) and so here is another set of how to examples that is trying to reveal some other useful aspect and patterns. Of course, all examples can be explored using Domplate Runner again.

See all posts about Domplate here.

Enjoy! 😉

How to generate a TABLE from 2D array

This example shows how to iterate two-dimensional data (using two nested loops) and generate corresponding HTML TABLE.

.myTableCell {
    padding: 5px;
    text-align: center;
}

var tableData = {
  rows: [
    {values: [1,2,3,4]},
    {values: [11,22,33,44]},
    {values: [111,222,333,444]},
  ]
};

var template = domplate(
{
  table:
      TABLE({border: "1"},
        TBODY(
          FOR("row", "$data.rows",
              TR(
                  FOR("value", "$row.values",
                      TD({class: "myTableCell"},
                          "$value")
                  )
              )
          )
        )
      ),
});

template.table.replace({data: tableData}, parentNode, template);

Demo

How to dynamically compose value of a class attribute

This example shows two ways how value of a class attribute can be dynamically generated.

1. expression: $brand|getBrandClass is replaced by a value returned from getBrandClass method
2. expression: $myFaforite: "$brand|isMyFavorite" inserts additional class name myFaforite into the class attribute if isMyFavorite method returns true

.carBrand {
  font-weight: bold;
}

.myFaforite {
  color: red;
}

.brand-Ford {
  color: green;
}

var inputData = ["Honda", "Chevrolet", "Toyota", "Ford", "Pontiac",
    "Dodge", "Mazda", "Nissan", "Volkswagen", "Hyundai"];

var template = domplate(
{
  tag:
    DIV(
      FOR("brand", "$carBrands",
        DIV({class: "carBrand $brand|getBrandClass",
             $myFaforite: "$brand|isMyFavorite"},
          "$brand"
        )
      )
    ),

  isMyFavorite: function(brand) {
    return (brand == "Nissan");
  },

  getBrandClass: function(brand) {
    return "brand-" + brand;
  }
});

template.tag.replace({carBrands: inputData}, parentNode, template);

Demo

How to use custom iterator in a FOR loop

This example shows how a custom iterator function can be implemented for a FOR loop. The FOR loop always expects an array to be iterated. In case when the input data isn't an array we can provide it using a function.

var searchResult = {
  title: "corvete.jpg",
  summary: "Chevrolet Corvette",
  url: "http://www.vu.union.edu/~jaquezk/MG/corvette.jpg",
  clickUrl: "http://www.vu.union.edu/~jaquezk/MG/corvette.jpg",
  RefererUrl: "http://www.neiu.edu/~ssalas/FramePage.htm",
  FileSize: 103936,
  FileFormat: "jpeg",
  Height: 768,
  Width: 1024,
};

var template = domplate(
{
  tag:
    TABLE(
      TBODY(
        FOR("member", "$object|getMembers",
          TR(
            TD("$member.label"),
            TD("$member.value")
          )
        )
      )
    ),

  getMembers: function(object) {
    var members = [];
    for (var p in object)
      members.push({label: p, value: object[p]});
    return members;
  },
});

template.tag.replace({object: searchResult}, parentNode, template);

Demo

How to build a tree

This example shows how to build an HTML tree with expandable/collapsible nodes. Notice that this example uses a few useful DOM util functions from Firebug framework (FBL namespace).

• getAncestorByClass(node, className) Returns an ancestor of a node with specified className.
• hasClass(node, className) Returns true if a given className is present on specified node.
• removeClass(node, className) Removes a given className from a node
• setClass(node, className) Adds a given className to a node.

This example is a bit complex, but every aspect of it has been already explained in previous examples.

.treeRow.hasChildren .treeLabel {
    background-image: url(/images/twistyClosed.png);
    background-repeat: no-repeat;
    background-position: 2px 2px;
}

.treeRow.hasChildren.opened .treeLabel {
    background-image: url(/images/twistyOpen.png);
}

.treeRow .treeLabel {
    padding-left: 18px;
    padding-right: 10px;
    white-space: nowrap;
}

.treeRow.hasChildren .treeLabel:hover {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
}

var treeData = {"menu":{"appetizers":[{"name":"some yummy appetizer","prize":{"ammount":8,"currency":"EUR"}},{"name":"a not so yummy soup","prize":{"ammount":5,"currency":"EUR"}}],"main-meals":[{"name":"bunny leg with fries and ketchup","prize":{"ammount":13,"currency":"EUR"}},{"name":"bunny stew","prize":{"ammount":12,"currency":"EUR"}}]},"owners":[{"last-name":"Hunter","first-name":"Bunny"}],"name":"Le lupin","cooks":[{"last-name":"Pits","first-name":"Sweaty"}],"address":{"street":"some french street","zip-code":"123456","city":"some french city","country":"some french country"},"waiters":[{"last-name":"Cheeks","first-name":"Rosy"}]}

var tree = domplate(
{
  tag:
    TABLE({onclick: "$onClick"},
      TBODY(
        FOR("member", "$object|memberIterator",
          TAG("$row", {member: "$member"}))
      )
    ),

  row:
    TR({class: "treeRow", $hasChildren: "$member.hasChildren",
        _repObject: "$member", level: "$member.level"},
      TD({style: "padding-left: $member.indent\\px"},
        DIV({class: "treeLabel"},
            "$member.name")
      ),
      TD(
        DIV("$member.label")
      )
    ),

  loop:
    FOR("member", "$members",
      TAG("$row", {member: "$member"})),

  memberIterator: function(object)
  {
    return this.getMembers(object);
  },

  onClick: function(event)
  {
    if (!isLeftClick(event))
      return;

    var row = getAncestorByClass(event.target, "treeRow");
    var label = getAncestorByClass(event.target, "treeLabel");
    if (label && hasClass(row, "hasChildren"))
      this.toggleRow(row);
  },

  toggleRow: function(row)
  {
    var level = parseInt(row.getAttribute("level"));

    if (hasClass(row, "opened"))
    {
      removeClass(row, "opened");

      var tbody = row.parentNode;
      for (var firstRow = row.nextSibling; firstRow;
           firstRow = row.nextSibling)
      {
        if (parseInt(firstRow.getAttribute("level")) <= level)
          break;
        tbody.removeChild(firstRow);
      }
    }
    else
    {
      setClass(row, "opened");

      var repObject = row.repObject;
      if (repObject) {
        var members = this.getMembers(repObject.value, level+1);
        if (members)
          this.loop.insertRows({members: members}, row);
      }
    }
  },

  getMembers: function(object, level)
  {
    if (!level)
      level = 0;

    var members = [];
    for (var p in object)
      members.push(this.createMember(p, object[p], level));

    return members;
  },

  createMember: function(name, value, level)
  {
    var hasChildren = (typeof(value) == "object");
    return {
      name: name,
      label: hasChildren ? "" : value,
      value: value,
      level: level,
      indent: level*16,
      hasChildren: hasChildren
    };
  }
});

tree.tag.replace({object: treeData}, parentNode, tree);

Demo