Author: jsundman
Date: 2007-05-17 09:35:04 -0700 (Thu, 17 May 2007)
New Revision: 5068
Modified:
openlaszlo/branches/legals/docs/src/developers/views.dbk
Log:
updating views chapter to new example format
Modified: openlaszlo/branches/legals/docs/src/developers/views.dbk
===================================================================
--- openlaszlo/branches/legals/docs/src/developers/views.dbk 2007-05-17
16:04:25 UTC (rev 5067)
+++ openlaszlo/branches/legals/docs/src/developers/views.dbk 2007-05-17
16:35:04 UTC (rev 5068)
@@ -27,8 +27,13 @@
an audio file.
</para>
-
-<example role="live-example"><title>simple view</title><programlisting
role="lzx-embednew"><filename>views-$1.lzx</filename><parameter/><code>
+<example role="live-example">
+ <title>Simple view</title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="views-$1.lzx"/></textobject>
+ </programlisting>
+</example>
+<?example role="live-example"><title>simple view</title><programlisting
role="lzx-embednew"><filename>views-$1.lzx</filename><parameter/><code>
<canvas height="50" width="500">
<view width="50" height="50" bgcolor="red"/>
</canvas>
@@ -36,9 +41,16 @@
<canvas height="50" width="500">
<view width="50" height="50" bgcolor="red"/>
</canvas>
-</programlisting><?lzx-edit programs/views-$1.lzx?></example>
+</programlisting><?lzx-edit programs/views-$1.lzx></example?>
-<example role="live-example"><title>invisible view</title><programlisting
role="lzx-embednew"><filename>views-$2.lzx</filename><parameter/><code>
+
+<example role="live-example">
+ <title>Invisible view</title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="views-$2.lzx"/></textobject>
+ </programlisting>
+</example>
+<?example role="live-example"><title>invisible view</title><programlisting
role="lzx-embednew"><filename>views-$2.lzx</filename><parameter/><code>
<canvas height="50">
<view height="20" width="20" clickable="true"/>
</canvas>
@@ -46,13 +58,20 @@
<canvas height="50">
<view height="20" width="20" clickable="true"/>
</canvas>
-</programlisting><?lzx-edit programs/views-$2.lzx?></example>
+</programlisting><?lzx-edit programs/views-$2.lzx></example?>
<para>The following example shows that the view, although invisible, is
indeed present. To see that this is so, click in the upper left
corner, and then elsewhere on the canvas.</para>
-<example role="live-example"><title>clicking on invisible
view</title><programlisting
role="lzx-embednew"><filename>views-$3.lzx</filename><parameter/><code>
+
+<example role="live-example">
+ <title>Clicking on invisible view</title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="views-$3.lzx"/></textobject>
+ </programlisting>
+</example>
+<?example role="live-example"><title>clicking on invisible
view</title><programlisting
role="lzx-embednew"><filename>views-$3.lzx</filename><parameter/><code>
<canvas height="160" debug="true">
<debug y="30"/>
<view height="20" width="20" onclick="Debug.write('howdy')"/>
@@ -62,14 +81,20 @@
<debug y="30"/>
<view height="20" width="20" onclick="Debug.write('howdy')"/>
</canvas>
-</programlisting><?lzx-edit programs/views-$3.lzx?></example>
+</programlisting><?lzx-edit programs/views-$3.lzx></example?>
<para/></section><section><title>view visibility</title>
<para>A view is only visible if it has a color or an image assigned to it, and
if the height and width are greater than zero.
For example, the following code displays only two images even though four
views are defined. The second and third views exist but
they are completely transparent. The second has no color assigned to it and
the third has zero height. They still, however, affect the
arrangement of the other two views. </para>
-<example role="live-example"><title>invisible views affect
placement</title><programlisting
role="lzx-embednew"><filename>views-$4.lzx</filename><parameter/><code>
+<example role="live-example">
+ <title>Invisible views affect placement</title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="views-$4.lzx"/></textobject>
+ </programlisting>
+</example>
+<?example role="live-example"><title>invisible views affect
placement</title><programlisting
role="lzx-embednew"><filename>views-$4.lzx</filename><parameter/><code>
<canvas height="60" width="500">
<view width="50" height="50" bgcolor="red"/>
<view width="50" height="50"/>
@@ -85,7 +110,8 @@
<view resource="../images/logo.png"/> <co id="N10061"/>
<simplelayout axis="x" spacing="5"/>
</canvas>
-</programlisting><?lzx-edit
programs/views-$4.lzx?></example><calloutlist><callout arearefs="N10058">This
view is a red square.</callout><callout arearefs="N1005B">This view has no
visual representation because it has no color, but it still exists and
displaces other views.</callout><callout arearefs="N1005E">This view has no
visual representation because it has no width, but it still
exists.</callout><callout arearefs="N10061">This view displays the jpg
image.</callout></calloutlist>
+</programlisting><?lzx-edit programs/views-$4.lzx></example?>
+<calloutlist><callout arearefs="N10058">This view is a red
square.</callout><callout arearefs="N1005B">This view has no visual
representation because it has no color, but it still exists and displaces other
views.</callout><callout arearefs="N1005E">This view has no visual
representation because it has no width, but it still exists.</callout><callout
arearefs="N10061">This view displays the jpg image.</callout></calloutlist>
<para/></section><section><title>Z Axis</title>
@@ -96,7 +122,14 @@
<indexterm><primary><literal>bringToFront()</literal>
method</primary></indexterm><methodname>bringToFront()</methodname> and
<indexterm><primary><literal>sendToBack()</literal>
method</primary></indexterm><methodname>sendToBack()</methodname>
methods:</para>
-<example role="live-example"><title>Simple Layout</title><programlisting
role="lzx-embednew"><filename>views-$5.lzx</filename><parameter/><code>
+
+<example role="live-example">
+ <title>Simple layout</title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="views-$5.lzx"/></textobject>
+ </programlisting>
+</example>
+<?example role="live-example"><title>Simple Layout</title><programlisting
role="lzx-embednew"><filename>views-$5.lzx</filename><parameter/><code>
<canvas height="100">
<view bgcolor="red" width="50" height="50"
onclick="this.bringToFront()"/>
@@ -112,13 +145,19 @@
<view bgcolor="green" width="50" height="50" x="40" y="40"
onclick="this.sendToBack()"/>
</canvas>
-</programlisting><?lzx-edit programs/views-$5.lzx?></example>
+</programlisting><?lzx-edit programs/views-$5.lzx></example?>
<para>
There are also methods such as
<indexterm><primary><literal>sendBehind()</literal>
method</primary></indexterm><methodname>sendBehind()</methodname> and
<indexterm><primary><literal>sendInFrontOf()</literal>
method</primary></indexterm><methodname>sendInFrontOf()</methodname>, that
allow you to move a view in the z-axis more precisely, relative to a specified
view:
</para>
-<example role="live-example"><title>fixme5</title><programlisting
role="lzx-embednew"><filename>views-$6.lzx</filename><parameter/><code>
+<example role="live-example">
+ <title>Moving views along z axis</title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="views-$6.lzx"/></textobject>
+ </programlisting>
+</example>
+<?example role="live-example"><title>fixme5</title><programlisting
role="lzx-embednew"><filename>views-$6.lzx</filename><parameter/><code>
<canvas height="100">
<view bgcolor="red" id="red" width="50" height="50"
onclick="this.sendInFrontOf(blue)"/>
@@ -136,13 +175,19 @@
<view bgcolor="green" id="green" width="50" height="50" x="40" y="40"
onclick="this.sendBehind(red)"/>
</canvas>
-</programlisting><?lzx-edit programs/views-$6.lzx?></example>
+</programlisting><?lzx-edit programs/views-$6.lzx></example?>
<para/></section><section><title>Nesting views within views</title>
<para>Views can also be contained within other views, allowing you to create
complex visual elements. Each <glossterm>parent view</glossterm> can have
any number of children, and each <glossterm>child view</glossterm> is
positioned relative
to the top-left corner of its parent, as shown here:</para>
-<example role="live-example"><title>view containing other
views</title><programlisting
role="lzx-embednew"><filename>views-$7.lzx</filename><parameter/><code>
+<example role="live-example">
+ <title>Views containing other views</title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="views-$7.lzx"/></textobject>
+ </programlisting>
+</example>
+<?example role="live-example"><title>view containing other
views</title><programlisting
role="lzx-embednew"><filename>views-$7.lzx</filename><parameter/><code>
<canvas height="200" width="500">
<view bgcolor="red" x="50" y="50" width="100" height="100">
<view bgcolor="blue" width="50" height="50"/>
@@ -160,7 +205,7 @@
</view>
</view>
</canvas>
-</programlisting><?lzx-edit programs/views-$7.lzx?></example>
+</programlisting><?lzx-edit programs/views-$7.lzx></example?>
<para>
Each child view has one and only one parent view. The relationship between
parent and child views is examined below
and in later chapters.
@@ -174,7 +219,13 @@
the boundary of its parent. If clipping is desired, however, then
the attribute <literal>clip="true"</literal> can be added to the parent:</para>
-<example role="live-example"><title>using the clip
attribute</title><programlisting
role="lzx-embednew"><filename>views-$8.lzx</filename><parameter/><code>
+<example role="live-example">
+ <title>Using the "clip" attribute</title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="views-$8.lzx"/></textobject>
+ </programlisting>
+</example>
+<?example role="live-example"><title>using the clip
attribute</title><programlisting
role="lzx-embednew"><filename>views-$8.lzx</filename><parameter/><code>
<canvas height="150" width="500">
<view bgcolor="red" x="50" y="50" width="100" height="100" clip="true">
<view bgcolor="blue" width="50" height="50"/>
@@ -192,7 +243,7 @@
</view>
</view>
</canvas>
-</programlisting><?lzx-edit programs/views-$8.lzx?></example>
+</programlisting><?lzx-edit programs/views-$8.lzx></example?>
<para>As stated above, views don't need to display an image or color to
affect other views. These types of views are referred to as "blank
@@ -201,7 +252,14 @@
shows what happens when <literal>bgcolor="red"</literal> is removed from the
outermost view.</para>
-<example role="live-example"><title>blank view</title><programlisting
role="lzx-embednew"><filename>views-$9.lzx</filename><parameter/><code>
+<example role="live-example">
+ <title>blank view</title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="views-$9.lzx"/></textobject>
+ </programlisting>
+</example>
+
+<?example role="live-example"><title>blank view</title><programlisting
role="lzx-embednew"><filename>views-$9.lzx</filename><parameter/><code>
<canvas height="200" width="500">
<view x="50" y="50" width="100" height="100">
<view bgcolor="blue" width="50" height="50"/>
@@ -219,7 +277,7 @@
</view>
</view>
</canvas>
-</programlisting><?lzx-edit programs/views-$9.lzx?></example>
+</programlisting><?lzx-edit programs/views-$9.lzx></example?>
<para/></section><section><title>views, constraints and layouts</title>
<para>The fact that a view can be assigned different dimensions than the
bounding box of its subviews is taken advantage of by other
@@ -247,7 +305,13 @@
comes up in countless situations.
</para>
-<example role="live-example"><title>layouts and bounding box of
subviews</title><programlisting
role="lzx-embednew"><filename>views-$10.lzx</filename><parameter/><code>
+<example role="live-example">
+ <title>Layouts and bounding box of subviews</title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="views-$10.lzx"/></textobject>
+ </programlisting>
+</example>
+<?example role="live-example"><title>layouts and bounding box of
subviews</title><programlisting
role="lzx-embednew"><filename>views-$10.lzx</filename><parameter/><code>
<canvas height="100" width="500">
<view bgcolor="red" width="200" height="30">
<view bgcolor="blue" width="30" height="30"/>
@@ -277,7 +341,7 @@
<stableborderlayout axis="x"/>
</view>
</canvas>
-</programlisting><?lzx-edit programs/views-$10.lzx?></example>
+</programlisting><?lzx-edit programs/views-$10.lzx></example?>
<para/></section></section><section><title>The View Coordinate system</title>
@@ -303,7 +367,13 @@
x and y coordinates of the view relative to a view other than its
parent. For example, consider the case below:</para>
-<example role="live-example"><title>relative positions</title><programlisting
role="lzx-embednew"><filename>views-$11.lzx</filename><parameter/><code>
+<example role="live-example">
+ <title>Relative positions</title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="views-$11.lzx"/></textobject>
+ </programlisting>
+</example>
+<?example role="live-example"><title>relative positions</title><programlisting
role="lzx-embednew"><filename>views-$11.lzx</filename><parameter/><code>
<canvas height="350" debug="true">
<debug y="60" />
<view name="parentView" x="10" bgcolor="blue" height="40" width="40"
@@ -321,7 +391,7 @@
oninit="Debug.write('childview x is', x)"/>
</view>
</canvas>
-</programlisting><?lzx-edit programs/views-$11.lzx?></example>
+</programlisting><?lzx-edit programs/views-$11.lzx></example?>
<para><varname>childView</varname>'s <indexterm><primary>x
attribute</primary></indexterm><sgmltag class="attribute">x</sgmltag> value is
<literal>35</literal>, but its <indexterm><primary>x
attribute</primary></indexterm><sgmltag class="attribute">x</sgmltag> value
<emphasis role="i">relative to
@@ -362,7 +432,14 @@
<para>
In the case above, the yellow view will resize as its contents resize and
move. If a dimension had been set at any point then that axis would not resize.
This is an important consideration if a nested view is to be moved while the
application is running (e.g. if it is dragged by the user). The size of its
parent will adjust as necessary:
</para>
-<example role="live-example"><title>Resizing View</title><programlisting
role="lzx-embednew"><filename>views-$13.lzx</filename><parameter/><code>
+
+<example role="live-example">
+ <title>Resizing view</title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="views-$13.lzx"/></textobject>
+ </programlisting>
+</example>
+<?example role="live-example"><title>Resizing View</title><programlisting
role="lzx-embednew"><filename>views-$13.lzx</filename><parameter/><code>
<canvas height="100">
<class name="dragBox" onmousedown="dragger.apply()"
onmouseup="dragger.remove()" clickable="true"
@@ -386,7 +463,7 @@
<dragBox x="30" y="10"/>
</view>
</canvas>
-</programlisting><?lzx-edit programs/views-$13.lzx?></example>
+</programlisting><?lzx-edit programs/views-$13.lzx></example?>
<para>To get around this problem (in the example of a view that is
dragged), there are two solutions:</para>
@@ -458,7 +535,14 @@
As you click on the red rectangle, it shrinks, along with the text inside. But
the font size does not change.
The text is smaller relative to the canvas and to the computer screen, but not
to its parent view.</para>
-<example role="live-example"><title>Simple scaling wtih
text</title><programlisting
role="lzx-embednew"><filename>views-$14.lzx</filename><parameter/><code>
+<example role="live-example">
+ <title>Simple scaling with text</title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="views-$14.lzx"/></textobject>
+ </programlisting>
+</example>
+
+<?example role="live-example"><title>Simple scaling wtih
text</title><programlisting
role="lzx-embednew"><filename>views-$14.lzx</filename><parameter/><code>
<canvas width="700" height="100">
<font src="helmetb.ttf" name="helmet"/>
<view stretches="both" height="100" bgcolor="red"
@@ -482,11 +566,18 @@
</text>
</view>
</canvas>
-</programlisting><?lzx-edit programs/views-$14.lzx?></example>
+</programlisting><?lzx-edit programs/views-$14.lzx></example?>
<para>
Here we have modified the example to further illustrate the same point.
Notice how the width of the green view, as reported by the
debugger, does not change, even as the view visibly shrinks.</para>
-<example role="live-example"><title>Simple scaling with text and colored
view</title><programlisting
role="lzx-embednew"><filename>views-$15.lzx</filename><parameter/><code>
+
+<example role="live-example">
+ <title>Simple scaling with text and colored view</title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="views-$15.lzx"/></textobject>
+ </programlisting>
+</example>
+<?example role="live-example"><title>Simple scaling with text and colored
view</title><programlisting
role="lzx-embednew"><filename>views-$15.lzx</filename><parameter/><code>
<canvas width="700" height="300" debug="true">
<debug y="120"/>
<font src="helmetb.ttf" name="helmet"/>
@@ -516,7 +607,7 @@
</text>
</view>
</canvas>
-</programlisting><?lzx-edit programs/views-$15.lzx?></example>
+</programlisting><?lzx-edit programs/views-$15.lzx></example?>
<para/></section><section><title>Offsets</title>
<para>
@@ -529,7 +620,13 @@
position of its registration point within the view's parent coordinate system.
Here is a simple app that
demonstrates this. See below for an explanation of what's going on in this
program.
</para>
-<example role="live-example"><title>Offsets and registration
point</title><programlisting
role="lzx-embednew"><filename>views-$16.lzx</filename><parameter/><code>
+<example role="live-example">
+ <title>Offsets and registration point</title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="views-$16.lzx"/></textobject>
+ </programlisting>
+</example>
+<?example role="live-example"><title>Offsets and registration
point</title><programlisting
role="lzx-embednew"><filename>views-$16.lzx</filename><parameter/><code>
<canvas height="250">
<view x="100" y="100"
bgcolor="yellow" xoffset="20" yoffset="20"
@@ -567,7 +664,7 @@
</animatorgroup>
</view>
</canvas>
-</programlisting><?lzx-edit programs/views-$16.lzx?></example>
+</programlisting><?lzx-edit programs/views-$16.lzx></example?>
<para>
The reason that the intersection point does not move is that the parent view
(in this case the canvas) is
placing the colored view at that point, and that point does not change. it is
only the <literal>xoffset</literal> and <literal>yoffset</literal>
@@ -580,7 +677,13 @@
</para>
-<example role="live-example"><title>Simple Offsets</title><programlisting
role="lzx-embednew"><filename>views-$17.lzx</filename><parameter/><code>
+<example role="live-example">
+ <title>Simple offsets</title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="views-$17.lzx"/></textobject>
+ </programlisting>
+</example>
+<?example role="live-example"><title>Simple Offsets</title><programlisting
role="lzx-embednew"><filename>views-$17.lzx</filename><parameter/><code>
<canvas height="100">
<view x="60" y="60" height="40" width="40" bgcolor="red"
onclick="this.rotate.doStart()">
@@ -606,7 +709,7 @@
relative="true"/>
</view>
</canvas>
-</programlisting><?lzx-edit programs/views-$17.lzx?></example>
+</programlisting><?lzx-edit programs/views-$17.lzx></example?>
<para>Offsets allow the view to be placed
relative to the point (<indexterm><primary>xoffset
attribute</primary></indexterm><sgmltag class="attribute">xoffset</sgmltag>,
@@ -635,7 +738,14 @@
<para>
You can position views using absolute x and y coordinates, and the view will
be positioned relative to its parent's origin:
</para>
-<example role="live-example"><title>absolute
positioning</title><programlisting
role="lzx-embednew"><filename>views-$18.lzx</filename><parameter/><code>
+
+<example role="live-example">
+ <title>Absolute positioning</title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="views-$18.lzx"/></textobject>
+ </programlisting>
+</example>
+<?example role="live-example"><title>absolute
positioning</title><programlisting
role="lzx-embednew"><filename>views-$18.lzx</filename><parameter/><code>
<canvas>
<view bgcolor="yellow" width="300" height="300" x="15" y="20">
<view bgcolor="red" width="20" height="20" x="25" y="75"/>
@@ -655,7 +765,7 @@
<view bgcolor="green" width="20" height="20" x="<emphasis
role="b">50</emphasis>" y="<emphasis role="b">50</emphasis>"/>
</view>
</canvas>
-</programlisting><?lzx-edit programs/views-$18.lzx?></example>
+</programlisting><?lzx-edit programs/views-$18.lzx></example?>
<para/></section><section><title>Declarative positioning of views using
constraints</title>
@@ -664,7 +774,14 @@
You can also use constraints to position views. In the example below, the red
view's position is set absolutely,
the blue view's x and y positions are constrained to a function of the red
view's coordinates.
</para>
-<example role="live-example"><title>Using constraints to position
views</title><programlisting
role="lzx-embednew"><filename>views-$19.lzx</filename><parameter/><code>
+
+<example role="live-example">
+ <title>Using constraintes to position views</title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="views-$19.lzx"/></textobject>
+ </programlisting>
+</example>
+<?example role="live-example"><title>Using constraints to position
views</title><programlisting
role="lzx-embednew"><filename>views-$19.lzx</filename><parameter/><code>
<canvas>
<view bgcolor="yellow" width="300" height="300">
<attribute name="someXValue" type="number" value="50"/>
@@ -694,7 +811,7 @@
x="<emphasis role="b">${parent.someXValue}</emphasis>"
y="<emphasis role="b">${this.x}</emphasis>"/>
</view>
</canvas>
-</programlisting><?lzx-edit programs/views-$19.lzx?></example>
+</programlisting><?lzx-edit programs/views-$19.lzx></example?>
<para>
In the example above,
</para>
@@ -710,7 +827,14 @@
The x and y values can be set to negative values. In the example below,
clicking on the square causes successive views
to appear and to move left or right. The parent square (teal color) expands
to contain the blue and black squares,
but not to contain the red and silver squares, which have negative x and y
values.</para>
-<example role="live-example"><title>Positive and negative
offsets</title><programlisting
role="lzx-embednew"><filename>views-$20.lzx</filename><parameter/><code>
+
+<example role="live-example">
+ <title>Positive and negative offsets</title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="views-$20.lzx"/></textobject>
+ </programlisting>
+</example>
+<?example role="live-example"><title>Positive and negative
offsets</title><programlisting
role="lzx-embednew"><filename>views-$20.lzx</filename><parameter/><code>
<canvas height="250" bgcolor="gray">
<view x="100" y="100" bgcolor="teal">
<view bgcolor="red" width="20" height="20"
@@ -736,12 +860,19 @@
onclick="this.animate('x' , 50 , 1000, true)"/>
</view>
</canvas>
-</programlisting><?lzx-edit programs/views-$20.lzx?></example>
+</programlisting><?lzx-edit programs/views-$20.lzx></example?>
<para/></section></section><section><title>View Hierarchy</title>
<para>Each view has a position in the <emphasis role="i">view
hierarchy</emphasis>, that is, the tree structure of objects in which each view
has
a parent, and, optionally, children and/or sibling views. In simple cases such
as the following the relationship of
parents and children is obvious from their position in the code.</para>
-<example role="live-example"><title>simple view
hierarchy</title><programlisting
role="lzx-embednew"><filename>views-$21.lzx</filename><parameter/><code>
+
+<example role="live-example">
+ <title>Simple view hierarchy</title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="views-$21.lzx"/></textobject>
+ </programlisting>
+</example>
+<?example role="live-example"><title>simple view
hierarchy</title><programlisting
role="lzx-embednew"><filename>views-$21.lzx</filename><parameter/><code>
<canvas height="100">
<view height="100" width="100" name="grandparent" bgcolor="red">
<view height="50" width="50" name="parent" bgcolor="green">
@@ -757,7 +888,7 @@
</view>
</view>
</canvas>
-</programlisting><?lzx-edit programs/views-$21.lzx?></example>
+</programlisting><?lzx-edit programs/views-$21.lzx></example?>
<para>However, things are usually more complicated, especially when views are
created within classes. Views can be created or destroyed at runtime, and
moreover a single
line of code can cause the creation of an arbitrary number of views. In many
cases there are, in effect, two hierarchies-
@@ -770,7 +901,14 @@
<para/><section><title>Children and Parents</title>
-<example role="live-example"><title>Parent and Immediate
Parent</title><programlisting
role="lzx-embednew"><filename>views-$22.lzx</filename><parameter/><code>
+<example role="live-example">
+ <title>Parent and immediateparent </title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="views-$22.lzx"/></textobject>
+ </programlisting>
+</example>
+
+<?example role="live-example"><title>Parent and Immediate
Parent</title><programlisting
role="lzx-embednew"><filename>views-$22.lzx</filename><parameter/><code>
<canvas height="100">
<class name="mywindow"
onmousedown="dragger.apply()" onmouseup="dragger.remove()"
@@ -808,7 +946,8 @@
<text>hello</text>
</mywindow>
</canvas>
-</programlisting><?lzx-edit
programs/views-$22.lzx?></example><calloutlist><callout
arearefs="N102AC">default placement view: instance or subclass children go
here</callout></calloutlist>
+</programlisting><?lzx-edit programs/views-$22.lzx></example?>
+<calloutlist><callout arearefs="N102AC">default placement view: instance or
subclass children go here</callout></calloutlist>
<para>The view that contains the text <literal>hello</literal> has a
<indexterm><primary>parent attribute</primary></indexterm><sgmltag
class="attribute">parent</sgmltag> of <varname>w</varname> and an
@@ -826,7 +965,14 @@
The visual hierarchy corresponds to the hierarchy as rendered.</para>
<para>Given this class definition:</para>
-<example role="live-example"><title>Simple placement</title><programlisting
role="lzx-embednew"><filename>views-$23.lzx</filename><parameter/><code>
+
+<example role="live-example">
+ <title>Simple placement</title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="views-$23.lzx"/></textobject>
+ </programlisting>
+</example>
+<?example role="live-example"><title>Simple placement</title><programlisting
role="lzx-embednew"><filename>views-$23.lzx</filename><parameter/><code>
<canvas height="60">
<class name="myclass">
<simplelayout/>
@@ -850,7 +996,7 @@
<myclass><text
placement="content">content2</text></myclass>
<simplelayout axis="y"/>
</canvas>
-</programlisting><?lzx-edit programs/views-$23.lzx?></example>
+</programlisting><?lzx-edit programs/views-$23.lzx></example?>
<para>this source fragment:</para>
@@ -973,4 +1119,4 @@
-<para/></section></chapter>
\ No newline at end of file
+<para/></section></chapter>
_______________________________________________
Laszlo-checkins mailing list
[email protected]
http://www.openlaszlo.org/mailman/listinfo/laszlo-checkins
