Inheritance allows you to create custom classes from other predefined classes. The advantage is that much of the logic doesn't have to be rewritten every time you want to create a class that does something similar, but in a slightly different way.

A subclass is a class derived from another class. The class from which it is derived is referred to as its superclass. A subclass is said to inherit methods and attributes from its superclass. Visual elements of a superclass, such as <view> , are also inherited by each subclass. In LZX, you use the extends attribute to the <class> tag to create subclasses.

<class name="myclass" extends="mysuperclass">
   ...
</class>

Any class that is that you create without using the extends attribute is assumed to be a subclass of <view>. All methods and properties from <view> are inherited by the subclass. These two declarations are equivalent:

<class name="myclass"/>
<class name="myclass" extends="view"/>

You can only extend one class per class declaration, though the inheritance chain can be arbitrarily deep. Multiple inheritance is not supported; that is to say you cannot create a new class that extends more than one existing classes. Methods, handlers, attributes, and views inside a class are inherited down through each level.

Example 33.1. Inheritance chain

<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>

Class definitions can include default values for attributes. For example, a class that extends view can have default width and height attributes:

<class name="myClass" width="50" height="50"/> 
<myClass/> 
<myClass width="100"/> 

	Defines a class and tag named myClass
	Creates an instance of myClass with height and width of 50
	Creates an instance of myClass with height 50 and width 100

A subclass can override, that is, provide a different implementation from, a superclass method, but not for a handler. The overriding method can specify a different set of arguments from the superclass's method. For example, if your superclass's method has two arguments such as method(arg1, arg2), you can choose to have a third argument for your subclass such as method(arg1, arg2, arg3).

LZX does not support overloading methods. That means that you cannot have different methods, within one class, that have the same name. The runtime only "cares about" the name of the calling method. You will receive a compilation warning if you define two or more methods with the same name in a class definition.

You can, however, have more than one handler for an event, as described in Chapter 29, Methods, Events, Handlers, and Attributes

You can modify inherited attributes by defining a new value using the <attribute> tag or by declaring it as an attribute in the <class> declaration itself.

Example 33.2. Inheriting Properties

<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>

You can use the super keyword to invoke a superclass's method. The super keyword is useful in instances where you want to extend the superclass's method without rewriting the same logic. A method can only use super to call the method that it overrides. That is, a subclass's myfunc() can only call super.myfunc(), super.myotherfunc().

Example 33.3. The super keyword

<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>

    <handler name="onclick" method="handleClick">

     <method name="handleClick">
         super.handleClick();
         Debug.write('new click');
     </method>

The classroot property is a convenient short-hand that refers to the root node of a class instance. It's often used by a deeply nested view or method that needs access to something near the root of the class. Though you can equivalently use parent, parent.parent, parent.parent.parent, etc. (depending on how deep the view that contains the reference is nested), using classroot is usually more readable.

Example 33.4. Classroot example

<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>

Be careful when using classroot from the root of the class. If there is no surrounding class, classroot will be undefined. Use the this keyword in code attached to the root of the class. On the other hand, if an instance of a class appears inside another class, the classroot for the instance will be the root of the surrounding class. Use this feature as a short-cut to refer to the root of outer classes.

Example 33.5. Referring to outer class's root using classroot

<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>

At the risk of belaboring the topic, here's one more example that demostrates 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.

Example 33.6. classroots and toplevel instances

<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>

<class name="redState" extends="state" />

The <text> and <inputtext> tags are unique among the built in classes in that they can hold textual content:

<canvas height="50" layout="y">
  <inputtext>plain text</inputtext>
  <text><i>styled</i> text</text>
</canvas>

The text may contain character text, as well as certain XHTML markup tags. The inputtext tag may contain character text.

Classes that extend the text and inputtext classes may contain XHTML and plain text, respectively. The text content is available as the text attribute of such a class.

Example 33.7. Extending text classes

<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>

A user-defined class can also handle text content by defining an attribute named text with a value of text (for plain text) or html (for XHTML text), like <attribute name="text" type="text">. There is another text type available called string which allows you set a text string as an attribute, but does not allow text content.

Consider these two classes, where the first is defined using type="string" and the second with type="text":

<class name="stringText">
  <attribute name="text" type="string"/>
</class>

<class name="textText">
  <attribute name="text" type="text"/>
</class>

Both classes can be used with a text attribute:

<stringText text="some text"/>
<textText text="some text"/>

Only textText can be used with text content. The use of stringText below is invalid, and will produce a compilation warning.

<stringText>some text</stringText> <!-- This is invalid -->
<textText>some text</textText>     <!-- This is valid -->

Using the html type declares that the class can accept html text content, or set through the text attribute. The text may contain XHTML tags such as <b> and <a> , as in the following program:

Example 33.8. Text type: html

<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>

Note that XHTML markup within a class that is declared with type="text", instead of type="html", is invalid:

<textText>some text</textText> <!-- valid -->
<textText>some <i>fancy</i> text</textText> <!-- invalid -->
<htmlText>some text</htmlText> <!-- valid -->
<htmlText>some <i>fancy</i> text</htmlText> <!-- valid -->

Any text content with a class that is declared without a text attribute whose type is text or html is invalid:

<class name="noText"/>
<noText>some text</noText> <!-- invalid -->
<noText>some <i>fancy</i> text</noText> <!-- invalid -->

The attribute name must be text. It is an error to use text and html as the type of any other attribute:

<class name="invalidClass">
 <attribute name="label" type="text"/> <!-- invalid -->
</class>

Classes and views enclosed in classes inherit their font and font properties (such as fontstyle and fontsize) from their superclass. Also, any class instance will inherit its font from its enclosing view. A font can be overridden at any point in a view hierarchy and any subview from there on will inherit that font.

Example 33.9. Inheriting fonts

<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>

In general, instantiation of objects happen using tags. For instance, assuming <class name="myclass"> is declared, you can create an instance of that class by writing <myclass/>. However, there may be times when you will need to instantiate an object using script. The script instantiation syntax for classes looks like:

var myobject = new myclass(parent, attributes, children, instcall)

where:

All these parameters are optional. Not setting any of these arguments (e.g., new myclass()) is equivalent to new myclass(null, null, null, 0).

The following example shows you how to instantiate a new object through script and add it to another view.

Example 33.10. Script instantiation

<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>

All classes are defined in the global namespace. If you wanted to instantiate a class dynamically, you can write new global[classString](...). Using the previous example, mybox can be instantiated like new global['mybox'](canvas.redbox, { bgcolor: 0x00ffff }).

7.1. Mapping Class and Tag Names

Be aware that names for tag classes are not the same as their JavaScript counterpart; rather, the JavaScript name is lz.[tagname]. For example, to access a <view> in script, you would use lz.view. Thus, to instantiate a view through script, you would write new lz.view(...) (not new view(...)).

	Note
	In earlier versions of OpenLaszlo, there was an idosyncratic mapping between class names and tag names, and classes in the LFC were handled differently than user devfined classes. For example, the tagname <view> mapped to JavaScript class LzView. With OpenLaszlo 4.0, the lz.[tagname] mapping is universal, and the old mappings are deprecated.