Author: lou
Date: 2007-10-31 05:14:10 -0700 (Wed, 31 Oct 2007)
New Revision: 7055
Modified:
openlaszlo/trunk/docs/src/developers/classes-powerprogramming.dbk
openlaszlo/trunk/docs/src/developers/programs/class-inheritance-$25.lzx
openlaszlo/trunk/docs/src/developers/programs/class-inheritance-$26.lzx
openlaszlo/trunk/docs/src/developers/programs/class-inheritance-$27.lzx
openlaszlo/trunk/docs/src/developers/programs/class-inheritance-$29.lzx
Log:
Change 20071031-lou-0 by [EMAIL PROTECTED] on 2007-10-31 08:00:09 AST
in /Users/lou/src/svn/openlaszlo/trunk
for http://svn.openlaszlo.org/openlaszlo/trunk
Summary: examples in class inheritance chapter report errors during build
Bugs Fixed: LPP-5001
Technical Reviewer: (pending)
QA Reviewer: (pending)
Doc Reviewer: John Sundman
Details:
change
defaultplacement="'red'"
to
defaultplacement="red"
in these files
class-inheritance-$25.lzx
class-inheritance-$26.lzx
class-inheritance-$27.lzx
class-inheritance-$29.lzx
Remove from classes-powerprogramming.dbk commented out code that the build
ignored
Tests:
Modified: openlaszlo/trunk/docs/src/developers/classes-powerprogramming.dbk
===================================================================
--- openlaszlo/trunk/docs/src/developers/classes-powerprogramming.dbk
2007-10-31 12:12:33 UTC (rev 7054)
+++ openlaszlo/trunk/docs/src/developers/classes-powerprogramming.dbk
2007-10-31 12:14:10 UTC (rev 7055)
@@ -54,48 +54,8 @@
<textobject><textdata
fileref="programs/class-inheritance-$1.lzx"/></textobject>
</programlisting>
</example>
-<?example role="live-example"><title>Inheritance chain</title><programlisting
role="lzx-embednew"><filename>class-inheritance-$1.lzx</filename><parameter/><code>
-<canvas debug="true" height="125">
- <debug x="80" y="5" width="170" height="112"/>
+<!-- remove this and other commented out code which the build ignores. IORIO
31 oct 2007 -->
- <class name="top">
- <attribute name="myfoo" value="bar" type="string"/>
- </class>
-
- <class name="middle" extends="top">
- <method name="doit">
- Debug.write("myfoo is " + this.myfoo);
- </method>
- </class>
-
- <class name="bottom" extends="middle">
- <button text="clickme" onclick="parent.doit()"/>
- </class>
-
- <bottom/>
-</canvas>
-</code></programlisting><programlisting>
-<canvas debug="true" height="125">
- <debug x="80" y="5" width="170" height="112"/>
-
- <class name="top">
- <attribute name="myfoo" value="bar" type="string"/>
- </class>
-
- <class name="middle" extends="top">
- <method name="doit">
- Debug.write("myfoo is " + this.myfoo);
- </method>
- </class>
-
- <class name="bottom" extends="middle">
- <button text="clickme" onclick="parent.doit()"/>
- </class>
-
- <bottom/>
-</canvas>
-</programlisting><?lzx-edit programs/class-inheritance-$1.lzx></example?>
-
<para>Class definitions can include default values for attributes. For
example, a class that <emphasis role="i">extends</emphasis> view can have
default
<indexterm><primary>width</primary></indexterm><sgmltag
class="attribute">width</sgmltag> and
<indexterm><primary>height</primary></indexterm><sgmltag
class="attribute">height</sgmltag>
attributes:</para>
@@ -138,50 +98,8 @@
<textobject><textdata
fileref="programs/class-inheritance-$3.lzx"/></textobject>
</programlisting>
</example>
-<?example role="live-example"><title>Inheriting
Properties</title><programlisting
role="lzx-embednew"><filename>class-inheritance-$3.lzx</filename><parameter/><code>
-<canvas height="100">
- <!-- create a simplelayout so embedded views are laid out -->
- <!-- on top of each other. -->
- <class name="class1" layout="class: simplelayout; spacing: 2">
- <attribute name="label" value="class1 label" type="string"/>
- <text>from class1</text>
- <button text="${classroot.label}"/>
- </class>
- <!-- overrides class1's label; inherits text and button -->
- <class name="class2" extends="class1" label="class2 label">
- <text>from class2</text>
- </class>
- <!-- inherit class1's text and button; inherit class2's text -->
- <class name="class3" extends="class2">
- <text>from class3</text>
- </class>
- <class3/>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="100">
- <!-- create a simplelayout so embedded views are laid out -->
- <!-- on top of each other. -->
- <class name="class1" layout="class: simplelayout; spacing: 2">
- <attribute name="label" value="class1 label" type="string"/>
- <text>from class1</text>
- <button text="${classroot.label}"/>
- </class>
-
- <!-- overrides class1's label; inherits text and button -->
- <class name="class2" extends="class1" label="class2 label">
- <text>from class2</text>
- </class>
-
- <!-- inherit class1's text and button; inherit class2's text -->
- <class name="class3" extends="class2">
- <text>from class3</text>
- </class>
- <class3/>
-</canvas>
-</programlisting><?lzx-edit programs/class-inheritance-$3.lzx></example?>
-
<para>You can use the <literal>super</literal> keyword to invoke a superclass's
method. The <literal>super</literal> keyword is useful in instances where you
want to
extend the superclass's method without rewriting the same logic. A
@@ -194,47 +112,6 @@
<textobject><textdata
fileref="programs/class-inheritance-$4.lzx"/></textobject>
</programlisting>
</example>
-<?example role="live-example"><title>The super keyword</title><programlisting
role="lzx-embednew"><filename>class-inheritance-$4.lzx</filename><parameter/><code>
-<canvas debug="true" height="140">
- <debug x="60"/>
-
- <class name="foo">
- <method name="talk">
- Debug.write("hello");
- </method>
- <button text="click" onclick="parent.talk()"/>
- </class>
-
- <class name="bar" extends="foo">
- <method name="talk">
- super.talk();
- Debug.write("goodbye");
- </method>
- </class>
-
- <bar/>
-</canvas>
-</code></programlisting><programlisting>
-<canvas debug="true" height="140">
- <debug x="60"/>
-
- <class name="foo">
- <method name="talk">
- Debug.write("hello");
- </method>
- <button text="click" onclick="parent.talk()"/>
- </class>
-
- <class name="bar" extends="foo">
- <method name="talk">
- super.talk();
- Debug.write("goodbye");
- </method>
- </class>
-
- <bar/>
-</canvas>
-</programlisting><?lzx-edit programs/class-inheritance-$4.lzx></example?>
<para/><section><title>Handlers cannot be overridden</title>
<para>
In order to override the behavior of an event handler, you would have the
handler call a method, and then override the method in the subclass or
instance. For example, let's say that you wanted to write a handler for the
<literal>onclick</literal> event that you could override in an instance. In
your class definition, you would use this syntax:</para>
@@ -277,57 +154,6 @@
<textobject><textdata
fileref="programs/class-inheritance-$6.lzx"/></textobject>
</programlisting>
</example>
-<?example role="live-example"><title>Classroot example</title><programlisting
role="lzx-embednew"><filename>class-inheritance-$6.lzx</filename><parameter/><code>
-<canvas debug="true" height="160">
- <debug x="155" y="10"/>
-
- <!-- class deep -->
- <class name="deep">
- <attribute name="mytext" value="hello, world" type="string"/>
-
- <view bgcolor="red" width="150" height="150">
- <view bgcolor="green" width="75%" height="75%">
- <button text="clickme" width="75%" height="75%">
- <!-- classroot is a convenient way to access mytext -->
- <handler name="onclick">
- Debug.write("classroot.mytext: " + classroot.mytext);
- Debug.write("parent.parent.parent.mytext: " +
- parent.parent.parent.mytext);
- </handler>
- </button>
- </view>
- </view>
- </class>
-
- <!-- instance of class deep -->
- <deep/>
-</canvas>
-</code></programlisting><programlisting>
-<canvas debug="true" height="160">
- <debug x="155" y="10"/>
-
- <!-- class deep -->
- <class name="deep">
- <attribute name="mytext" value="hello, world" type="string"/>
-
- <view bgcolor="red" width="150" height="150">
- <view bgcolor="green" width="75%" height="75%">
- <button text="clickme" width="75%" height="75%">
- <!-- classroot is a convenient way to access mytext -->
- <handler name="onclick">
- Debug.write("classroot.mytext: " + classroot.mytext);
- Debug.write("parent.parent.parent.mytext: " +
- parent.parent.parent.mytext);
- </handler>
- </button>
- </view>
- </view>
- </class>
-
- <!-- instance of class deep -->
- <deep/>
-</canvas>
-</programlisting><?lzx-edit programs/class-inheritance-$6.lzx></example?>
<para>Be careful when using <literal>classroot</literal> from the root of the
class. If there is no surrounding class, <literal>classroot</literal> will
@@ -343,71 +169,6 @@
<textobject><textdata
fileref="programs/class-inheritance-$7.lzx"/></textobject>
</programlisting>
</example>
-<?example role="live-example"><title>Referring to outer class's root using
classroot</title><programlisting
role="lzx-embednew"><filename>class-inheritance-$7.lzx</filename><parameter/><code>
-<canvas debug="true" height="200">
- <debug height="175"/>
-
- <class name="foo">
- <method name="doit">
- Debug.write("foo: this is [" + this + "]");
- Debug.write("foo: classroot is [" + classroot + "]");
- Debug.write("foo: classroot.classroot is [" + classroot.classroot + "]");
- </method>
- </class>
-
- <!-- boo contains a foo -->
- <class name="boo">
- <foo name="myfoo"/>
- </class>
-
- <!-- goo contains a boo -->
- <class name="goo">
- <boo name="myboo"/>
- <handler name="oninit">
- myboo.myfoo.doit();
- Debug.write("-----");
- Debug.write("goo: this is [" + this + "]");
- // warning will be displayed -- there is no classroot
- Debug.write("goo: classroot is [" + classroot + "]");
- </handler>
- </class>
-
- <!-- Make an instance of goo -->
- <goo name="mygoo"/>
-</canvas>
-</code></programlisting><programlisting>
-<canvas debug="true" height="200">
- <debug height="175"/>
-
- <class name="foo">
- <method name="doit">
- Debug.write("foo: this is [" + this + "]");
- Debug.write("foo: classroot is [" + classroot + "]");
- Debug.write("foo: classroot.classroot is [" + classroot.classroot + "]");
- </method>
- </class>
-
- <!-- boo contains a foo -->
- <class name="boo">
- <foo name="myfoo"/>
- </class>
-
- <!-- goo contains a boo -->
- <class name="goo">
- <boo name="myboo"/>
- <handler name="oninit">
- myboo.myfoo.doit();
- Debug.write("-----");
- Debug.write("goo: this is [" + this + "]");
- // warning will be displayed -- there is no classroot
- Debug.write("goo: classroot is [" + classroot + "]");
- </handler>
- </class>
-
- <!-- Make an instance of goo -->
- <goo name="mygoo"/>
-</canvas>
-</programlisting><?lzx-edit programs/class-inheritance-$7.lzx></example?>
<para>
At the risk of belaboring the topic, here's one more example that demonstrates
that top level instances of a class have no defined classroot. Notice that even
though "bar" is a child of "foo", it does not have a defined classroot, because
it is a toplevel instance of the bar class. </para>
@@ -417,66 +178,6 @@
<textobject><textdata
fileref="programs/class-inheritance-$8.lzx"/></textobject>
</programlisting>
</example>
-<?example role="live-example"><title>classroots and toplevel
instances</title><programlisting
role="lzx-embednew"><filename>class-inheritance-$8.lzx</filename><parameter/><code>
-<canvas debug="true">
-<class name="myclass" height="40" bgcolor="blue">
- <attribute name="button_label" type="text" value="button"/>
- <handler name="onclick">
- this.handleclick()
- </handler>
-
- <method name="handleclick">
- Debug.write("this = " + this + "and classroot is" + classroot);
- </method>
- <button name="b1" height="30" text="${parent.button_label}"
-onclick="Debug.write('classroot of this button is: ' + classroot);
parent.handleclick()" />
-</class>
-
-<class name="another_class" extends="myclass"/>
-
-<!-- foo and bar views are top-level instances, so their classroots are
null.
-== The buttons are children of the foo and bar views, respectively, so ==
-== their classroots are defined. -->
-
-<myclass id="foo">
- <another_class id="bar" bgcolor="red" button_label ="another button"
y="25">
- <method name="handleclick">
- Debug.write("this = " + this + "and classroot is " + classroot);
- </method>
- </another_class>
-</myclass>
-</canvas>
-</code></programlisting><programlisting>
-<canvas debug="true">
-<class name="myclass" height="40" bgcolor="blue">
- <attribute name="button_label" type="text" value="button"/>
- <handler name="onclick">
- this.handleclick()
- </handler>
-
- <method name="handleclick">
- Debug.write("this = " + this + "and classroot is" + classroot);
- </method>
- <button name="b1" height="30" text="${parent.button_label}"
-onclick="Debug.write('classroot of this button is: ' + classroot);
parent.handleclick()" />
-</class>
-
-<class name="another_class" extends="myclass"/>
-
-<!-- foo and bar views are top-level instances, so their classroots are
null.
-== The buttons are children of the foo and bar views, respectively, so ==
-== their classroots are defined. -->
-
-<myclass id="foo">
- <another_class id="bar" bgcolor="red" button_label ="another button"
y="25">
- <method name="handleclick">
- Debug.write("this = " + this + "and classroot is " + classroot);
- </method>
- </another_class>
-</myclass>
-</canvas>
-</programlisting><?lzx-edit programs/class-inheritance-$8.lzx></example?>
-
<para/><section><title>Classroot not available in <state></title>
<para>
The <indexterm><primary>state</primary></indexterm><sgmltag
class="element"><state></sgmltag><remark role="fixme">[unknown
tag]</remark>
@@ -523,21 +224,6 @@
<textobject><textdata
fileref="programs/class-inheritance-$10.lzx"/></textobject>
</programlisting>
</example>
-<?example role="live-example"><title>Extending text
classes</title><programlisting
role="lzx-embednew"><filename>class-inheritance-$10.lzx</filename><parameter/><code>
-<canvas height="50" layout="axis: y">
- <class name="mytext" extends="text"/>
- <class name="myinputtext" extends="inputtext"/>
- <myinputtext>plain text</myinputtext>
- <mytext><i>styled</i> text</mytext>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="50" layout="axis: y">
- <class name="mytext" extends="text"/>
- <class name="myinputtext" extends="inputtext"/>
- <myinputtext>plain text</myinputtext>
- <mytext><i>styled</i> text</mytext>
-</canvas>
-</programlisting><?lzx-edit programs/class-inheritance-$10.lzx></example?>
<para>A user-defined class can also handle text content by defining an
attribute named <indexterm><primary>text</primary></indexterm><sgmltag
class="attribute">text</sgmltag> with a value of
@@ -592,36 +278,6 @@
</programlisting>
</example>
-<?example role="live-example"><title>Text type: html</title><programlisting
role="lzx-embednew"><filename>class-inheritance-$12.lzx</filename><parameter/><code>
-<canvas height="50">
- <class name="htmlText">
- <attribute name="text" type="html"/>
- <text resize="true" text="${parent.text}"/>
- </class>
-
- <simplelayout/>
- <htmlText>
- <b>bold</b> text declared here with
- <a
href="http://www.openlaszlo.org"><i>anchor</i></a>
- </htmlText>
- <htmlText text="&lt;b&gt;bold&lt;/b&gt; text set
here"/>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="50">
- <class name="htmlText">
- <attribute name="text" type="html"/>
- <text resize="true" text="${parent.text}"/>
- </class>
-
- <simplelayout/>
- <htmlText>
- <b>bold</b> text declared here with
- <a
href="http://www.openlaszlo.org"><i>anchor</i></a>
- </htmlText>
- <htmlText text="&lt;b&gt;bold&lt;/b&gt; text set
here"/>
-</canvas>
-</programlisting><?lzx-edit programs/class-inheritance-$12.lzx></example?>
-
<para>Note that XHTML markup within a class that is declared with
<literal>type="text"</literal>, instead of <literal>type="html"</literal>, is
invalid:</para>
@@ -672,49 +328,7 @@
</programlisting>
</example>
-<?example role="live-example"><title>Inheriting fonts</title><programlisting
role="lzx-embednew"><filename>class-inheritance-$16.lzx</filename><parameter/><code>
-<canvas height="50">
- <font src="helmetr.ttf" name="Helvetica"/>
- <font src="helmetb.ttf" name="Helvetica" style="bold"/>
-
- <class name="foo">
- <!-- view overrides inherited fontstyle to plain -->
- <view fontstyle="plain" bgcolor="yellow">
- <!-- text overrides inherited fontsize to 12 -->
- <text fontsize="12">hello</text>
- </view>
- </class>
-
- <class name="bar" extends="foo" layout="axis: y">
- <text>goodbye</text>
- </class>
-
- <bar font="Helvetica" fontstyle="bold" fontsize="12"/>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="50">
- <font src="helmetr.ttf" name="Helvetica"/>
- <font src="helmetb.ttf" name="Helvetica" style="bold"/>
-
- <class name="foo">
- <!-- view overrides inherited fontstyle to plain -->
- <view fontstyle="plain" bgcolor="yellow">
- <!-- text overrides inherited fontsize to 12 -->
- <text fontsize="12">hello</text>
- </view>
- </class>
-
- <class name="bar" extends="foo" layout="axis: y">
- <text>goodbye</text>
- </class>
-
- <bar font="Helvetica" fontstyle="bold" fontsize="12"/>
-</canvas>
-</programlisting><?lzx-edit programs/class-inheritance-$16.lzx></example?>
-
-
-
<para/></section><section
id="class-inheritance.instantiating_through_script"><title>Instantiating
classes through script</title>
<para>In general, <glossterm>instantiation</glossterm> of objects happen using
tags. For
@@ -763,44 +377,7 @@
</programlisting>
</example>
-<?example role="live-example"><title>Script
instantiation</title><programlisting
role="lzx-embednew"><filename>class-inheritance-$17.lzx</filename><parameter/><code>
-<canvas height="120">
- <class name="mybox">
- <view bgcolor="${parent.bgcolor}" width="50" height="50"/>
- </class>
-
- <view name="redbox" bgcolor="red" width="100" height="100"/>
-
- <!-- Create new mybox with cyan bgcolor and place it in canvas.redbox.
-->
- <button x="110" text="add cyan"
- onclick="if (canvas.redbox['cyan'] == null)
- new mybox(canvas.redbox, { name: 'cyan', bgcolor:
0x00ffff })"/>
- <!-- Remove cyan view from redbox. -->
- <button x="110" y="30" text="remove cyan"
- onclick="if (canvas.redbox['cyan'] != null)
canvas.redbox.cyan.destroy()"/>
-
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="120">
- <class name="mybox">
- <view bgcolor="${parent.bgcolor}" width="50" height="50"/>
- </class>
-
- <view name="redbox" bgcolor="red" width="100" height="100"/>
-
- <!-- Create new mybox with cyan bgcolor and place it in canvas.redbox.
-->
- <button x="110" text="add cyan"
- onclick="if (canvas.redbox['cyan'] == null)
- new mybox(canvas.redbox, { name: 'cyan', bgcolor:
0x00ffff })"/>
-
- <!-- Remove cyan view from redbox. -->
- <button x="110" y="30" text="remove cyan"
- onclick="if (canvas.redbox['cyan'] != null)
canvas.redbox.cyan.destroy()"/>
-
-</canvas>
-</programlisting><?lzx-edit programs/class-inheritance-$17.lzx></example?>
-
<para/><section id="class-inheritance.procedural_and_replicated"><title>Be
careful of mixing replication and classes declared procedurally</title>
<para>
Views that you create procedurally are not the same as "clones" created by
data replication. In fact, data replication overrides procedurally created
views. For example:
@@ -868,45 +445,6 @@
<textobject><textdata
fileref="programs/class-inheritance-$19.lzx"/></textobject>
</programlisting>
</example>
-<?example role="live-example"><title>Inheriting views</title><programlisting
role="lzx-embednew"><filename>class-inheritance-$19.lzx</filename><parameter/><code>
-<canvas debug="true">
- <debug y="215" width="435"/>
-
- <class name="one">
- <view name="r" bgcolor="red" width="200" height="200"/>
- </class>
-
- <class name="two" extends="one">
- <view name="g" bgcolor="green" width="100" height="100"/>
- </class>
-
- <class name="three" extends="two">
- <view name="t" bgcolor="teal" width="50" height="50"/>
- <view name="y" bgcolor="yellow" width="25" height="25"/>
- </class>
-
- <three id="mysubclass" oninit="Debug.write('subviews: ' +
this.subviews)"/>
-</canvas>
-</code></programlisting><programlisting>
-<canvas debug="true">
- <debug y="215" width="435"/>
-
- <class name="one">
- <view name="r" bgcolor="red" width="200" height="200"/>
- </class>
-
- <class name="two" extends="one">
- <view name="g" bgcolor="green" width="100" height="100"/>
- </class>
-
- <class name="three" extends="two">
- <view name="t" bgcolor="teal" width="50" height="50"/>
- <view name="y" bgcolor="yellow" width="25" height="25"/>
- </class>
-
- <three id="mysubclass" oninit="Debug.write('subviews: ' +
this.subviews)"/>
-</canvas>
-</programlisting><?lzx-edit programs/class-inheritance-$19.lzx></example?>
<para>Views declared in an instance of a class will be placed in the
top-level of the class unless otherwise declared with the
@@ -922,29 +460,6 @@
<textobject><textdata
fileref="programs/class-inheritance-$20.lzx"/></textobject>
</programlisting>
</example>
-<?example role="live-example"><title>Inherited view
order</title><programlisting
role="lzx-embednew"><filename>class-inheritance-$20.lzx</filename><parameter/><code>
-<canvas debug="true" height="250">
- <debug y="115" width="330"/>
- <class name="foo">
- <view name="r" bgcolor="red" width="100" height="100"/>
- </class>
-
- <foo name="myfoo" oninit="Debug.write('subviews: ' + this.subviews)">
- <view name="y" bgcolor="yellow" width="50" height="50"/>
- </foo>
-</canvas>
-</code></programlisting><programlisting>
-<canvas debug="true" height="250">
- <debug y="115" width="330"/>
- <class name="foo">
- <view name="r" bgcolor="red" width="100" height="100"/>
- </class>
-
- <foo name="myfoo" oninit="Debug.write('subviews: ' + this.subviews)">
- <view name="y" bgcolor="yellow" width="50" height="50"/>
- </foo>
-</canvas>
-</programlisting><?lzx-edit programs/class-inheritance-$20.lzx></example?>
<para>Notice how view <varname>y</varname> follows view
<varname>r</varname> in its subviews array. If a
@@ -960,37 +475,7 @@
<textobject><textdata
fileref="programs/class-inheritance-$21.lzx"/></textobject>
</programlisting>
</example>
-<?example role="live-example"><title>Inherited view order with
simplelayout</title><programlisting
role="lzx-embednew"><filename>class-inheritance-$21.lzx</filename><parameter/><code>
-<canvas debug="true" height="250">
- <debug x="75" y="115" width="330"/>
-
- <class name="foo">
- <view name="r" bgcolor="red" width="100" height="100"/>
- </class>
-
- <foo name="myfoo" oninit="Debug.write('subviews: ' + this.subviews)">
- <simplelayout/>
- <view name="y" bgcolor="yellow" width="50" height="50"/>
- </foo>
-</canvas>
-</code></programlisting><programlisting>
-<canvas debug="true" height="250">
- <debug x="75" y="115" width="330"/>
-
- <class name="foo">
- <view name="r" bgcolor="red" width="100" height="100"/>
- </class>
-
- <foo name="myfoo" oninit="Debug.write('subviews: ' + this.subviews)">
- <simplelayout/>
- <view name="y" bgcolor="yellow" width="50" height="50"/>
- </foo>
-</canvas>
-</programlisting><?lzx-edit programs/class-inheritance-$21.lzx></example?>
-
-
-
<para/></section><section><title>Placement</title>
<para>The internal structure of a class is generally not visible to its
@@ -1004,35 +489,6 @@
<textobject><textdata
fileref="programs/class-inheritance-$22.lzx"/></textobject>
</programlisting>
</example>
-<?example role="live-example"><title>Undesired
placement</title><programlisting
role="lzx-embednew"><filename>class-inheritance-$22.lzx</filename><parameter/><code>
-<canvas height="50">
- <class name="myframe" extends="view">
- <attribute name="bgcolor" value="red"/>
- <view x="5" y="5" width="${parent.width-10}"
- height="${parent.height-10}"
- bgcolor="#FFFFCC"/>
- </class>
-
- <!-- make an instance of myframe with text inside it-->
- <myframe width="220" height="20">
- <text>This is some text</text>
- </myframe>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="50">
- <class name="myframe" extends="view">
- <attribute name="bgcolor" value="red"/>
- <view x="5" y="5" width="${parent.width-10}"
- height="${parent.height-10}"
- bgcolor="#FFFFCC"/>
- </class>
-
- <!-- make an instance of myframe with text inside it-->
- <myframe width="220" height="20">
- <text>This is some text</text>
- </myframe>
-</canvas>
-</programlisting><?lzx-edit programs/class-inheritance-$22.lzx></example?>
<para>This behavior can be changed using the
<indexterm><primary>defaultplacement</primary></indexterm><sgmltag
class="attribute">defaultplacement</sgmltag> attribute or the
@@ -1054,43 +510,6 @@
<textobject><textdata
fileref="programs/class-inheritance-$23.lzx"/></textobject>
</programlisting>
</example>
-<?example role="live-example"><title>Placing a child in desired
subview</title><programlisting
role="lzx-embednew"><filename>class-inheritance-$23.lzx</filename><parameter/><code>
-<canvas height="50">
- <class name="myframe" extends="view">
- <attribute name="bgcolor" value="red"/>
-
- <!-- child views of class instances will be placed in the first view
- called insideview -->
- <attribute name="defaultplacement" value="insideview" type="string"/>
-
- <view x="5" y="5" width="${parent.width-10}" name="insideview"
- height="${parent.height-10}"
- bgcolor="#FFFFCC"/>
- </class>
- <!-- make an instance of myframe with text inside it-->
- <myframe width="220" height="50">
- <text>This is some text</text>
- </myframe>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="50">
- <class name="myframe" extends="view">
- <attribute name="bgcolor" value="red"/>
-
- <!-- child views of class instances will be placed in the first view
- called insideview -->
- <attribute name="defaultplacement" value="insideview" type="string"/>
-
- <view x="5" y="5" width="${parent.width-10}" name="insideview"
- height="${parent.height-10}"
- bgcolor="#FFFFCC"/>
- </class>
- <!-- make an instance of myframe with text inside it-->
- <myframe width="220" height="50">
- <text>This is some text</text>
- </myframe>
-</canvas>
-</programlisting><?lzx-edit programs/class-inheritance-$23.lzx></example?>
<para>Elements declared in a class are not considered for placement, but
children in
subclasses or class instances will be.</para>
@@ -1102,76 +521,7 @@
</programlisting>
</example>
-<?example role="live-example"><title>Defaultplacement</title><programlisting
role="lzx-embednew"><filename>class-inheritance-$24.lzx</filename><parameter/><code>
-<canvas height="150">
- <class name="myframe" extends="view">
- <attribute name="bgcolor" value="red"/>
- <attribute name="defaultplacement" value="'insideview'"/>
-
- <view x="5" y="5" width="${parent.width-10}" name="insideview"
- height="${parent.height-10}"
- bgcolor="#FFFFCC"/>
-
- <!-- this view is not affected by defaultplacement -->
- <!-- because it's declared in the class. -->
- <view x="5" y="${parent.height}" name="anotherview"
- width="${parent.width-10}" height="10"
- bgcolor="blue"/>
- </class>
-
- <class name="subframe" extends="myframe">
- <!-- the layout and text will be placed in insideview of myframe -->
- <simplelayout axis="y"/>
- <text bgcolor="teal">subframe text</text>
- </class>
-
-
- <myframe width="220" height="50">
- <!-- this will be placed in insideview -->
- <text>This is some text</text>
- </myframe>
-
- <subframe width="220" height="50" y="70">
- <text bgcolor="green">More subframe text</text>
- </subframe>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="150">
- <class name="myframe" extends="view">
- <attribute name="bgcolor" value="red"/>
-
- <attribute name="defaultplacement" value="'insideview'"/>
-
- <view x="5" y="5" width="${parent.width-10}" name="insideview"
- height="${parent.height-10}"
- bgcolor="#FFFFCC"/>
-
- <!-- this view is not affected by defaultplacement -->
- <!-- because it's declared in the class. -->
- <view x="5" y="${parent.height}" name="anotherview"
- width="${parent.width-10}" height="10"
- bgcolor="blue"/>
- </class>
-
- <class name="subframe" extends="myframe">
- <!-- the layout and text will be placed in insideview of myframe -->
- <simplelayout axis="y"/>
- <text bgcolor="teal">subframe text</text>
- </class>
-
-
- <myframe width="220" height="50">
- <!-- this will be placed in insideview -->
- <text>This is some text</text>
- </myframe>
-
- <subframe width="220" height="50" y="70">
- <text bgcolor="green">More subframe text</text>
- </subframe>
-</canvas>
-</programlisting><?lzx-edit programs/class-inheritance-$24.lzx></example?>
-
<para/><section><title>Placing layouts</title>
<para>A layout declared as an attribute will be considered for
@@ -1194,51 +544,9 @@
<textobject><textdata
fileref="programs/class-inheritance-$25.lzx"/></textobject>
</programlisting>
</example>
-<?example role="live-example"><title>Layout placement</title><programlisting
role="lzx-embednew"><filename>class-inheritance-$25.lzx</filename><parameter/><code>
-<canvas>
- <!-- the layout attribute will be placed in the red view -->
- <class name="myplacement" defaultplacement="'red'" layout="axis: x;
spacing: 5">
- <!-- this layout element applies to views inside of class -->
- <simplelayout spacing="10"/>
- <view name="red" bgcolor="red" width="150" height="150"/>
- <view name="yellow" bgcolor="yellow" width="150" height="150"/>
- </class>
- <myplacement>
- <!-- placement overrides defaultplacement -->
- <view name="blue" bgcolor="blue" width="50" height="50"
placement="yellow"/>
- <!-- green and teal will be placed in red -->
- <view name="green" width="50" height="50" bgcolor="green"/>
- <view name="teal" width="50" height="50" bgcolor="teal"/>
- </myplacement>
-</canvas>
-</code></programlisting><programlisting>
-<canvas>
- <!-- the layout attribute will be placed in the red view -->
- <class name="myplacement" defaultplacement="'red'" layout="axis: x;
spacing: 5">
- <!-- this layout element applies to views inside of class -->
- <simplelayout spacing="10"/>
- <view name="red" bgcolor="red" width="150" height="150"/>
- <view name="yellow" bgcolor="yellow" width="150" height="150"/>
- </class>
-
- <myplacement>
- <!-- placement overrides defaultplacement -->
- <view name="blue" bgcolor="blue" width="50" height="50"
placement="yellow"/>
-
- <!-- green and teal will be placed in red -->
- <view name="green" width="50" height="50" bgcolor="green"/>
- <view name="teal" width="50" height="50" bgcolor="teal"/>
- </myplacement>
-
-</canvas>
-</programlisting><?lzx-edit programs/class-inheritance-$25.lzx></example?>
-
-
-
-
<para/></section><section><title>ImmediateParent</title>
<para>A child placed using
<indexterm><primary>defaultplacement</primary></indexterm><sgmltag
class="attribute">defaultplacement</sgmltag> or
@@ -1260,46 +568,6 @@
</programlisting>
</example>
-<?example role="live-example"><title>Parent vs.
immediateparent</title><programlisting
role="lzx-embednew"><filename>class-inheritance-$26.lzx</filename><parameter/><code>
-<canvas debug="true" height="200">
- <debug x="155"/>
-
- <class name="container" defaultplacement="'red'">
- <view name="red" bgcolor="red" width="150" height="150"/>
- </class>
-
- <!-- yellow's parent is top and its immediateparent -->
- <!-- is red, since that's where it's actually placed. -->
- <container name="top">
- <view name="yellow" bgcolor="yellow" width="50" height="50">
- <handler name="oninit">
- Debug.write('parent: ', this.parent);
- Debug.write('immediateparent: ', this.immediateparent);
- </handler>
- </view>
- </container>
-</canvas>
-</code></programlisting><programlisting>
-<canvas debug="true" height="200">
- <debug x="155"/>
-
- <class name="container" defaultplacement="'red'">
- <view name="red" bgcolor="red" width="150" height="150"/>
- </class>
-
- <!-- yellow's parent is top and its immediateparent -->
- <!-- is red, since that's where it's actually placed. -->
- <container name="top">
- <view name="yellow" bgcolor="yellow" width="50" height="50">
- <handler name="oninit">
- Debug.write('parent: ', this.parent);
- Debug.write('immediateparent: ', this.immediateparent);
- </handler>
- </view>
- </container>
-</canvas>
-</programlisting><?lzx-edit programs/class-inheritance-$26.lzx></example?>
-
<para/></section><section><title>Obtaining a reference to the defaultPlacement
node</title>
<para>There may be instances a class needs a reference to the default placement
@@ -1312,73 +580,7 @@
</programlisting>
</example>
-<?example role="live-example"><title>Obtaining a reference to the
defaultPlacement node</title><programlisting
role="lzx-embednew"><filename>class-inheritance-$27.lzx</filename><parameter/><code>
-<canvas debug="true" height="200">
- <debug x="155"/>
- <class name="container" defaultplacement="'red'">
- <attribute name="contentview" value="null" type="expression"/>
-
- <method name="init">
- super.init();
-
- // get a reference to the content node
- if ( this.contentview == null ) {
- if ( this.defaultplacement != null ){
- this.contentview = this.searchSubnodes( "name" ,
this.defaultplacement );
- } else {
- this.contentview = this;
- }
- }
-
- Debug.write("content view", this.contentview);
- </method>
-
- <view name="green" bgcolor="green" width="100" height="100">
- <view name="yellow" bgcolor="yellow" width="50%" height="50%">
- <view name="red" bgcolor="red" width="50%" height="50%"/>
- </view>
- </view>
- </class>
-
- <container name="top"/>
-</canvas>
-</code></programlisting><programlisting>
-<canvas debug="true" height="200">
- <debug x="155"/>
-
- <class name="container" defaultplacement="'red'">
- <attribute name="contentview" value="null" type="expression"/>
-
- <method name="init">
- super.init();
-
- // get a reference to the content node
- if ( this.contentview == null ) {
- if ( this.defaultplacement != null ){
- this.contentview = this.searchSubnodes( "name" ,
this.defaultplacement );
- } else {
- this.contentview = this;
- }
- }
-
- Debug.write("content view", this.contentview);
- </method>
-
- <view name="green" bgcolor="green" width="100" height="100">
- <view name="yellow" bgcolor="yellow" width="50%" height="50%">
- <view name="red" bgcolor="red" width="50%" height="50%"/>
- </view>
- </view>
- </class>
-
- <container name="top"/>
-</canvas>
-</programlisting><?lzx-edit programs/class-inheritance-$27.lzx></example?>
-
-
-
-
<para/></section><section><title>Overriding placement behavior using
<indexterm><primary><literal>determinePlacement()</literal></primary></indexterm><methodname>determinePlacement()</methodname></title>
<para>A node calls its
<indexterm><primary><literal>determinePlacement()</literal></primary></indexterm><methodname>determinePlacement()</methodname>
method to
@@ -1425,64 +627,10 @@
</programlisting>
</example>
-<?example role="live-example"><title>Overriding
determinePlacement</title><programlisting
role="lzx-embednew"><filename>class-inheritance-$29.lzx</filename><parameter/><code>
-<canvas debug="true" height="200">
- <debug x="155"/>
- <class name="container" defaultplacement="'red'">
- <!-- setting subnode's parent to be the same as immediateparent -->
- <method name="determinePlacement" args="subnode, place, args">
- var p = super.determinePlacement(subnode, place, args);
- subnode.parent = p;
- return p;
- </method>
- <view name="blue" bgcolor="blue" width="100" height="100">
- <view name="red" bgcolor="red" width="150" height="150"/>
- </view>
- </class>
- <container name="top">
- <view name="yellow" bgcolor="yellow" width="50" height="50">
- <handler name="oninit">
- Debug.write('parent: ', this.parent);
- Debug.write('immediateparent: ', this.immediateparent);
- </handler>
- </view>
- </container>
-</canvas>
-</code></programlisting><programlisting>
-<canvas debug="true" height="200">
- <debug x="155"/>
- <class name="container" defaultplacement="'red'">
- <!-- setting subnode's parent to be the same as immediateparent -->
- <method name="determinePlacement" args="subnode, place, args">
- var p = super.determinePlacement(subnode, place, args);
- subnode.parent = p;
- return p;
- </method>
-
- <view name="blue" bgcolor="blue" width="100" height="100">
- <view name="red" bgcolor="red" width="150" height="150"/>
- </view>
- </class>
-
- <container name="top">
- <view name="yellow" bgcolor="yellow" width="50" height="50">
- <handler name="oninit">
- Debug.write('parent: ', this.parent);
- Debug.write('immediateparent: ', this.immediateparent);
- </handler>
- </view>
- </container>
-</canvas>
-</programlisting><?lzx-edit programs/class-inheritance-$29.lzx></example?>
-
-
-
-
-
<para/></section></section><section><title>Construction and
initialization</title>
<para>When writing complex classes, a deep understanding of how classes
@@ -1516,70 +664,6 @@
<textobject><textdata
fileref="programs/class-inheritance-$30.lzx"/></textobject>
</programlisting>
</example>
-<?example role="live-example"><title>Construction and
initialization</title><programlisting
role="lzx-embednew"><filename>class-inheritance-$30.lzx</filename><parameter/><code>
-<canvas debug="true" height="180">
- <debug height="160"/>
-
- <class name="container">
- <!-- Don't forget to call super.construct(parent,args)!! -->
- <method name="construct" args="parent,args">
- Debug.write("container construct", parent, args);
- super.construct(parent, args);
- </method>
-
- <!-- The onconstruct event -->
- <handler name="onconstruct" args="v">
- Debug.write("container onconstruct", v);
- </handler>
-
- <method name="init">
- Debug.write("container init");
- </method>
-
- <handler name="oninit">
- Debug.write("container oninit");
- </handler>
- </class>
-
- <container>
- <view name="outside" oninit="Debug.write('outside oninit')">
- <view name="inside" oninit="Debug.write('inside oninit')"/>
- </view>
- </container>
-</canvas>
-</code></programlisting><programlisting>
-<canvas debug="true" height="180">
- <debug height="160"/>
-
- <class name="container">
- <!-- Don't forget to call super.construct(parent,args)!! -->
- <method name="construct" args="parent,args">
- Debug.write("container construct", parent, args);
- super.construct(parent, args);
- </method>
-
- <!-- The onconstruct event -->
- <handler name="onconstruct" args="v">
- Debug.write("container onconstruct", v);
- </handler>
-
- <method name="init">
- Debug.write("container init");
- </method>
-
- <handler name="oninit">
- Debug.write("container oninit");
- </handler>
- </class>
-
- <container>
- <view name="outside" oninit="Debug.write('outside oninit')">
- <view name="inside" oninit="Debug.write('inside oninit')"/>
- </view>
- </container>
-</canvas>
-</programlisting><?lzx-edit programs/class-inheritance-$30.lzx></example?>
-
<para>Following instantiation (i.e., after the <indexterm><primary>onconstruct
event</primary></indexterm><literal>onconstruct</literal>
is sent) and if there are child nodes, the
<indexterm><primary><literal>createChildren()</literal></primary></indexterm><methodname>createChildren()</methodname>
method is called. This method takes an
@@ -1596,56 +680,7 @@
<textobject><textdata
fileref="programs/class-inheritance-$31.lzx"/></textobject>
</programlisting>
</example>
-<?example role="live-example"><title>createChildren()</title><programlisting
role="lzx-embednew"><filename>class-inheritance-$31.lzx</filename><parameter/><code>
-<canvas debug="true" height="180">
- <debug height="160"/>
- <class name="container">
- <handler name="onconstruct" args="v">
- Debug.write("container onconstruct", v);
- </handler>
-
- <method name="createChildren" args="c">
- Debug.write("container createChildren", c);
- Debug.write(" c[0].name:", c[0].name);
- Debug.write(" c[0].attrs:", c[0].attrs);
- Debug.write(" c[0].children:", c[0].children);
- super.createChildren(c);
- </method>
- </class>
-
- <container>
- <view name="outside">
- <view name="inside"/>
- </view>
- </container>
-</canvas>
-</code></programlisting><programlisting>
-<canvas debug="true" height="180">
- <debug height="160"/>
-
- <class name="container">
- <handler name="onconstruct" args="v">
- Debug.write("container onconstruct", v);
- </handler>
-
- <method name="createChildren" args="c">
- Debug.write("container createChildren", c);
- Debug.write(" c[0].name:", c[0].name);
- Debug.write(" c[0].attrs:", c[0].attrs);
- Debug.write(" c[0].children:", c[0].children);
- super.createChildren(c);
- </method>
- </class>
-
- <container>
- <view name="outside">
- <view name="inside"/>
- </view>
- </container>
-</canvas>
-</programlisting><?lzx-edit programs/class-inheritance-$31.lzx></example?>
-
<para>In summary, you can expect the basic timing order of method and event
calls to look
like:</para>
Modified:
openlaszlo/trunk/docs/src/developers/programs/class-inheritance-$25.lzx
===================================================================
--- openlaszlo/trunk/docs/src/developers/programs/class-inheritance-$25.lzx
2007-10-31 12:12:33 UTC (rev 7054)
+++ openlaszlo/trunk/docs/src/developers/programs/class-inheritance-$25.lzx
2007-10-31 12:14:10 UTC (rev 7055)
@@ -1,7 +1,7 @@
<canvas>
<!-- the layout attribute will be placed in the red view -->
- <class name="myplacement" defaultplacement="'red'" layout="axis: x; spacing:
5">
+ <class name="myplacement" defaultplacement="red" layout="axis: x; spacing:
5">
<!-- this layout element applies to views inside of class -->
<simplelayout spacing="10"/>
<view name="red" bgcolor="red" width="150" height="150"/>
Modified:
openlaszlo/trunk/docs/src/developers/programs/class-inheritance-$26.lzx
===================================================================
--- openlaszlo/trunk/docs/src/developers/programs/class-inheritance-$26.lzx
2007-10-31 12:12:33 UTC (rev 7054)
+++ openlaszlo/trunk/docs/src/developers/programs/class-inheritance-$26.lzx
2007-10-31 12:14:10 UTC (rev 7055)
@@ -2,7 +2,7 @@
<canvas debug="true" height="200">
<debug x="155"/>
- <class name="container" defaultplacement="'red'">
+ <class name="container" defaultplacement="red">
<view name="red" bgcolor="red" width="150" height="150"/>
</class>
Modified:
openlaszlo/trunk/docs/src/developers/programs/class-inheritance-$27.lzx
===================================================================
--- openlaszlo/trunk/docs/src/developers/programs/class-inheritance-$27.lzx
2007-10-31 12:12:33 UTC (rev 7054)
+++ openlaszlo/trunk/docs/src/developers/programs/class-inheritance-$27.lzx
2007-10-31 12:14:10 UTC (rev 7055)
@@ -2,7 +2,7 @@
<canvas debug="true" height="200">
<debug x="155"/>
- <class name="container" defaultplacement="'red'">
+ <class name="container" defaultplacement="red">
<attribute name="contentview" value="null" type="expression"/>
<method name="init">
Modified:
openlaszlo/trunk/docs/src/developers/programs/class-inheritance-$29.lzx
===================================================================
--- openlaszlo/trunk/docs/src/developers/programs/class-inheritance-$29.lzx
2007-10-31 12:12:33 UTC (rev 7054)
+++ openlaszlo/trunk/docs/src/developers/programs/class-inheritance-$29.lzx
2007-10-31 12:14:10 UTC (rev 7055)
@@ -2,7 +2,7 @@
<canvas debug="true" height="200">
<debug x="155"/>
- <class name="container" defaultplacement="'red'">
+ <class name="container" defaultplacement="red">
<!-- setting subnode's parent to be the same as immediateparent -->
<method name="determinePlacement" args="subnode, place, args">
var p = super.determinePlacement(subnode, place, args);
_______________________________________________
Laszlo-checkins mailing list
[email protected]
http://www.openlaszlo.org/mailman/listinfo/laszlo-checkins
