class Template.Block

//step 1) require the template engine (and all used interfaces)
jsx3.require("jsx3.gui.Template");
 
//step 2) define the new class
jsx3.lang.Class.defineClass(
  "my.custom.Widget",            //fully qualified name
  jsx3.gui.Template.Block,       //super class
  [],                            //interface(s)
  function(WIDGET, widget) {     //class alias, prototype alias
     
    //step 3) define the init method
    widget.init = function(strName) {
      this.jsxsuper(strName);
    };
     
    //step 4) define the MODEL defaults
    WIDGET.XYZ = 'xyz';          //CLASS defaults
    widget.xyz = 'xyz';          //prototype defaults
     
    //step 5) define the VIEW template
    widget.getTemplateXML = function() {
     return ['<transform version="1.0" ' ,
     '  xmlns="http://gi.tibco.com/transform/" ' ,
     '  xmlns:u="http://gi.tibco.com/transform/user">' ,
     '  <template>' ,
     '    <div onclick="{onclick}" ' ,
     '      style="position:{$position};left:{$left};background:{bg|red};">' ,
     '      <text>{mytext|some default text}</text>' ,
     '    </div>' ,
     '  </template>' ,
     '</transform>'].join("");
    };
     
    //6) define the CONTROLLER methods
    widget.onclick = function(objEvent, objGUI) {
      //show random information
      alert(objEvent.clientX() + objGUI.id + WIDGET.XYZ + this.bg);
    };
     
    widget.setBG = function(strBG) {
      this.setProperty("bg",strBG);
    };
     
    widget.setText = function(strText) {
      this.setProperty("mytext",strText);
    };
     
});