ZK Attributes, Variables, and Custom Attributes

<window>
  <attribute name="title">My Window</attribute>
  <attribute name="border">normal</attribute>
  <attribute name="width">200px</attribute>
  This is a Window
</window>

<zk>
  <zscript><![CDATA[
    public void test1() {
      result1.setValue(getData(div1.getAttribute("mykey")));
      result2.setValue(getData(div1.getVariable("mykey", false)));
    }
    public void test2() {
      result3.setValue(getData(div2.getAttribute("mykey2")));
      result4.setValue(getData(div2.getVariable("mykey2", false)));
    }
    public String getData(Object obj) {
      return obj == null ? "null" : (String) obj;
    }
  ]]></zscript>
  <hlayout>
    <vlayout>
      <vlayout>
        <div id="div2" style="border: 1px solid red">
          <custom-attributes mykey2="key2" />
          <html><![CDATA[ This is a DIV(div2) + <br /> &lt;custom-attributes mykey2="key2" /&gt; ]]></html>
        </div>
        <button label="get Sth" onClick="test2();" />
      </vlayout>
      <hlayout>
        div2 get attribute :
        <label id="result3" value="" />
      </hlayout>
      <hlayout>
        div2 get Variable :
        <label id="result4" value="" />
      </hlayout>
    </vlayout>
    <separator width="30px" />
    <vlayout>
      <vlayout>
        <div id="div1" style="border: 1px solid green">
          <variables mykey="key1" />
          <html><![CDATA[ This is a DIV(div1) + <br /> &lt;variables mykey="key1" /&gt; ]]></html>
        </div>
        <button label="get Sth" onClick="test1();" />
      </vlayout>
      <hlayout>
        div1 get attribute :
        <label id="result1" value="" />
      </hlayout>
      <hlayout>
        div1 get Variable :
        <label id="result2" value="" />
      </hlayout>
    </vlayout>
  </hlayout>
</zk>