[Laszlo-checkins] r12300 - openlaszlo/trunk/docs/src/developers/programs

[ptw@openlaszlo.org]

Author: ptw
Date: 2009-01-05 07:11:38 -0800 (Mon, 05 Jan 2009)
New Revision: 12300

Modified:
   openlaszlo/trunk/docs/src/developers/programs/viewvisibility.lzx
Log:
Change 20090105-ptw-J by ptw at dueling-banjos.home on 2009-01-05 09:13:26 EST
    in /Users/ptw/OpenLaszlo/trunk
    for http://svn.openlaszlo.org/openlaszlo/trunk

Summary: Tweak visibility example to be more legible

Bugs Fixed:
LPP-7554 dguide, Chapter 37. Data Access and Binding: Example 37.16. Visibility of datamapped views, broken

Technical Reviewer: lou at louiorio.com (pending)
QA Reviewer: justin at salasaga.org (pending)

Details:
    I tweaked this just a bit to lay out things a little more
    obviously.

Tests:
    visual inspection



Modified: openlaszlo/trunk/docs/src/developers/programs/viewvisibility.lzx
===================================================================
--- openlaszlo/trunk/docs/src/developers/programs/viewvisibility.lzx	2009-01-05 15:10:51 UTC (rev 12299)
+++ openlaszlo/trunk/docs/src/developers/programs/viewvisibility.lzx	2009-01-05 15:11:38 UTC (rev 12300)
@@ -1,67 +1,69 @@
 <canvas width="100%">
- <dataset name="mydata">
-   <element>data</element>
- </dataset>
+  <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" />
+  <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" />
-   <method name="updateDisplay">
-     display.format('data: %w + visibility: %w -> visible: %w', bulb.data, bulb.visibility, bulb.visible);
-   </method>
-   // "bulb" that will be visible or not according to data binding and visibility settings
-   <view name="bulb"
-         width="20" height="20"
-         bgcolor="${parent.bulbColor}"
-         visibility="${parent.bulbVisibility}"
-         datapath="${parent.bulbXpath}"
-         oninit="parent.updateDisplay()"
-         ondata="parent.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>
+    <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">
-   <simplelayout axis="y" spacing="2"/>
-   <attribute name="lightXpath" type="string" />
-   <light bulbColor="red" bulbVisibility="hidden" bulbXpath="${parent.lightXpath}" />
-   <light bulbColor="yellow" bulbVisibility="collapse" bulbXpath="${parent.lightXpath}" />
-   <light bulbColor="green" bulbVisibility="visible" bulbXpath="${parent.lightXpath}" />
- </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="5"/>
- // 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()" />
+  <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
- <button onclick="mydata.getPointer().addNode('element', 'newdata')">Add Data</button>
+  <!-- Button to add data so second and third xpaths above will get data -->
+  <attribute name="next" value="2" />
+  <button onclick="if (canvas.next &lt; 4) {mydata.getPointer().addNode('element', '#' + canvas.next++)}">
+    Add Data
+  </button>
+  <button onclick="if (canvas.next &gt; 1) {var p = mydata.getPointer(); p.setXPath('element[' + --canvas.next + ']'); p.deleteNode();}">
+    Remove Data
+  </button>
 </canvas>
+
 <!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
-* Copyright 2009 Laszlo Systems, Inc.  All Rights Reserved.                   *
+* Copyright 2008, 2009 Laszlo Systems, Inc.  All Rights Reserved.                   *
 * Use is subject to license terms.                                            *
 * X_LZ_COPYRIGHT_END ****************************************************** -->