viewvisibility.lzx

<canvas width="100%">
  <dataset name="mydata">
    <element>#1</element>
  </dataset>

  <class name="light">
    <!-- Attributes passed down to bulb -->
    <attribute name="bulbColor" type="color"/>
    <attribute name="bulbVisibility" type="string"/>
    <attribute name="bulbXpath" type="string"/>

    <simplelayout axis="x" spacing="5"/>
    <!-- Button to explore visibility settings -->
    <button onclick="parent.toggleVisibility()">Toggle Visibility</button>
    <!-- Display to show data/visibility/visible -->
    <text name="display" font="Monaco, Courier, fixed"/>
    <method name="updateDisplay">
      display.format('data: %-4#w + visibility: %-11#w -> visible: %-7#w', bulb.data, bulb.visibility, bulb.visible);
    </method>
    <!-- "bulb" that will be visible or not according to data binding and visibility settings -->
    <text name="bulb" width="20" height="20" bgcolor="${classroot.bulbColor}" visibility="${classroot.bulbVisibility}" datapath="${classroot.bulbXpath}" oninit="classroot.updateDisplay()" ondata="classroot.updateDisplay()"/>
    <!-- Method to rotate through visibility choices -->
    <method name="toggleVisibility">
      switch (bulb.visibility) {
        case 'visible':
          bulb.setAttribute('visibility', 'collapse');
          break;
        case 'collapse':
          bulb.setAttribute('visibility', 'hidden');
          break;
        case 'hidden':
          bulb.setAttribute('visibility', 'visible');
          break;
      }
      updateDisplay();
    </method>
  </class>

  <!-- Demo that shows three different visibility settings for the same xpath -->
  <class name="demo" bgcolor="gray90">
    <simplelayout axis="y" spacing="2"/>
    <attribute name="lightXpath" type="string"/>
    <light bulbColor="red" bulbVisibility="hidden" bulbXpath="${classroot.lightXpath}"/>
    <light bulbColor="yellow" bulbVisibility="collapse" bulbXpath="${classroot.lightXpath}"/>
    <light bulbColor="green" bulbVisibility="visible" bulbXpath="${classroot.lightXpath}"/>
  </class>

  <simplelayout axis="y" spacing="7"/>
  <!-- Demo that shows three xpaths only the first of which matches (and hence has data) -->
  <demo lightXpath="mydata:/element[1]/text()"/>
  <demo lightXpath="mydata:/element[2]/text()"/>
  <demo lightXpath="mydata:/element[3]/text()"/>

  <!-- Button to add data so second and third xpaths above will get data -->
  <attribute name="next" value="2"/>
  <button onclick="if (canvas.next < 4) {mydata.getPointer().addNode('element', '#' + canvas.next++)}">
    Add Data
  </button>
  <button onclick="if (canvas.next > 1) {var p = mydata.getPointer(); p.setXPath('element[' + --canvas.next + ']'); p.deleteNode();}">
    Remove Data
  </button>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2008, 2009 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->