Using the Widget lib for custom widgets.

This is an awsome library for building UI widgets. I tripped a little the first time I tried to use the library to build a moderatly complex widget.

I couldn't figure out how the "layout" template content is set in the Active.Controls.Grid Object.

I was trying to use the Widget library to build a custom widget that would behave like the right click context menu, with a title, and list of selectable menu options.

Looking at Active.Controls.Grid, I think I follow the template Model/Object hierachy well enough, but I can't decipher how the layout, row, column, and item templates are put together. I am also a little fuzzy about how they are populated from the model object.

Could you explain this stuff to me, or at least tell me which parts of the code I should study more thoroughly.


Here is what I have so far. I know I should probably use a List template for the context menu items, but I was trying to crawl before walking.
Your input is greatly appreciated!


Active.Controls.Context = Active.System.Control.subclass();


Active.Controls.Context.create = function( ) {
var obj = this.prototype;
var _super = this.superclass.prototype;

// ------------------------------------------------------------

obj.setTag("div");
obj.setClass("templates", "context");
obj.setClass("context", "container");
obj.setContent("Surf");

obj.defineTemplate("layout", new Active.HTML.DIV);
obj.defineTemplate("header", new Active.HTML.DIV);
obj.defineTemplate("data", new Active.Templates.List);
obj.defineTemplate("row", new Active.System.Template);


obj.defineModel("header");
obj.defineProperty("header/text", function() { return "HEADER";});

obj.defineModel("row");
obj.defineProperty("row/count", function(){return this.getDataProperty("count")} );
obj.defineProperty("row/index", function(i){return i});
obj.definePropertyArray("row/text", function(i){return i});

obj.getRowTemplate = function(i){return this.getTemplate("data/item", i)};
obj.setRowTemplate = function(template, i){this.setTemplate("data/item", template, i)};


obj.setContent(function(){return this.getLayoutTemplate()});


}

Active.Controls.Context.create();