File: examples/4gl/ex_expandableContainer.xml

<?xml version="1.0" encoding="UTF-8" ?>
<application id="ex_expandableContainer">

  <container type="simpleContainer" height="100">
    <zone>
      <element type="htmlElement"><![CDATA[
The expandableContainer example. Control the zones by code:
]]></element>
      <element type="buttonElement">Hide zone 1
        <event type="click">
          <code><![CDATA[
function()
{
  $C('sc').hideZone('zone1');
}
]]></code>
        </event>
      </element>
      <element type="buttonElement">Show zone 1
        <event type="click">
          <code><![CDATA[
function()
{
  $C('sc').showZone('zone1');
}
]]></code>
        </event>
      </element>
    </zone>
  </container>


  <container id="sc" type="expandableContainer" classname="container1">
    <zone id="zone1" classname="zone1" title="&lt;u&gt;F&lt;/u&gt;irst zone:" shortcut="alt+f">
      <element type="htmlElement"><![CDATA[
This is the first zone of the Container. You will note that the main container have a 5 pixels padding in the class, so the zone is placed into the working area.<br />
The WAJAF <b>will respect</b> any CSS directive you may create on the contruction of the elements.<br />
  ]]></element>
    </zone>

    <zone id="zone2" classname="zone2" title="Second zone">
      <element type="htmlElement"><![CDATA[
This is the second zone of the Container. This zone have a 5 pixels margin, so the zone line appears to be 10 pixels from the container border.<br />
The WAJAF <b>will respect</b> any CSS directive you may create on the contruction of the elements.<br />
  ]]></element>
    </zone>

    <zone id="zone3" classname="zone3" title="third zone">
      <element type="htmlElement"><![CDATA[
This is the third zone of the Container. This zone have a 10 pixels margin and 5 pixels padding, so the zone line appears to be 15 pixels from the container border.<br />
The WAJAF <b>will respect</b> any CSS directive you may create on the contruction of the elements.<br />
  ]]></element>
    </zone>
  </container>

</application>