object serialization not working

Alex,

If you create 2 obects that are of the same type, but don't explicitly set the ID they will end up with the same auto-assigned ID. As you might think, this causes problems. Normally this would not be an issue to me as when I create objects I assign then unique ID's. But now that I am creating custome controls, the sub components are getting assigned the same ID so when I try and change one of the sub components they all change. How do we assign a unique ID to the sub components? Here is a quick example, how would I set the name to something unique?

AW.HTML.NavButton = AW.System.Template.subclass();
AW.HTML.NavButton.create = function()
{
  var obj = this.prototype;
  obj.setTag("SPAN");

  with (obj)
  {
    setStyle("overflow", "hidden");
    setStyle("top", 0);
    setStyle("width", 23);
    setStyle("height", 22);
    setStyle("background", "white");
  }

  obj.defineTemplate("ButtonImage", new AW.HTML.IMG);
  with (obj.getTemplate("ButtonImage"))
  {
     setAttribute("src", "shell.gif");
     setStyle("position", "absolute");
     setStyle("top", 0);
     setAttribute("enabled", true);
     setEvent('onmouseover', function(src){if (this.getAttribute("enabled") != false) this.setStyle("top", "-22px");});
     setEvent('onmouseout', function(src){if (this.getAttribute("enabled") != false) this.setStyle("top", "0px");});
     setEvent('onmousedown', function(src){if (this.getAttribute("enabled") != false) this.setStyle("top", "-44px");});
     setEvent('onmouseup', function(src){if (this.getAttribute("enabled") != false) this.setStyle("top", "0px");});
  }
  obj.setImageLeft = function(newLeft)
  {
    this.getTemplate("ButtonImage").setStyle("left", newLeft);
  }

  obj.setContent("html", function()
  {
    return this.getButtonImageTemplate();
  })

}

I have to assign ButtonImage an unique ID otherwise when I call setImageLeft all images of this type get the same left value.

The above controls are getting consumed in another control and if I give each one a unique ID there it still does not work because at the time the LEFT property is getting set, they have the same ID. The ID does not seem to get applied until the object gets written to the document. Here is the code where the above control is getting consumed:

AW.HTML.NavHolder = AW.System.Template.subclass();
AW.HTML.NavHolder.create = function()
{
  var obj = this.prototype;

  obj.setTag("SPAN");

  obj.defineTemplate("ViewButton", new AW.HTML.NavButton);
  obj.getTemplate("ViewButton").setId("View");
  obj.getTemplate("ViewButton").setImageLeft(-253);
  obj.defineTemplate("FirstButton", new AW.HTML.NavButton);
  obj.getTemplate("FirstButton").setId("First");
  obj.getTemplate("FirstButton").setImageLeft(-276);

  obj.setContent("html", function()
  {
    return this.getViewButtonTemplate()
      + this.getFirstButtonTemplate()
       ;
  });
}

When this new control is created and writen to the document, both buttons have a LEFT setting of -276 which is not what I want at all.

When trying to create a simple example to show this, I found that I could not duplicate it. Everything seems to be working fine with regard to serialization. I must have had something wrong in my code so I will re-visit it to make sure everything is correct. And I was able to fix the above problem with the LEFT issue, but I really don't know what I did to correct it. I hate that! But bottom line is that it is working now.