Attributes

Attributes can be an element of a tag or a property of a JavaSctipt class. Attributes are declared and set in tags, but they can also be set and read in script. Not all attributes can be set in script, similarly not all attributes can be in tags. Attributes are characterized based on this behaviour into five categories. See below for more information on the various categories.

Example 1. Setting an attribute value in the tag header

<canvas height="20">
  <view width="20" height="20" bgcolor="red"/>
</canvas>

An alternative (although more verbose) way to set the attribute is using the <attribute> tag as a child of the tag whose attribute is being set:

Example 2. Using the attribute element to set an attribute value

<canvas height="20">
  <view>
    <attribute name="width" type="number" value="20"/>
    <attribute name="height" type="number" value="20"/>
    <attribute name="bgcolor" type="color" value="red"/>
  </view>
</canvas>

This second example is actually the same as saying <view width="20" height="20" bgcolor="red"/>. The <attribute> tag becomes useful when writing classes as well as when performing complicated constraints of existing attributes.

Example 3. Using dot syntax to retrieve an attribute value

<canvas height="20">
  <view name="myView" width="20" height="20" bgcolor="red"/>

  <script>
    var myAttributeValue = myView.x;
    // myAttributeValue now has the value 20
  </script>
</canvas>

Additionally attributes can be read using the getAttribute method. This is unnecessary most of the time, but can be useful for retrieving the value of an arbitrary attribute, whose name is represented by a string.

Example 4. Using getAttribute to retrieve an attribute value

<canvas height="20">
  <view name="myView" width="20" height="20" bgcolor="red"/>

  <script>
    var myAttributeName = "x";
    var myAttributeValue = myView.getAttribute(myAttributeName);
    // myAttributeValue now has the value 20
  </script>
</canvas>

All attributes that are settable in script (see below) can be set using the setAttribute method:

Example 5. Using setAttribute to set an attribute value

<canvas height="20">
  <view width="20" height="20" bgcolor="red"
      oninit="this.setAttribute('width', 50);"/>
</canvas>

For more infomation see the reference page for Attribute. The Classes tutorial describes how to use attributes to define a class.

Attributes (with setter)

Built-in attributes which have setters may be modified at runtime and used in constraint expressions. When setAttribute is called, the appropriate setter will be called automatically. The value of an attribute can be retrieved through script using dot syntax, (e.g. myView.opacity).

Example 6. Using setAttribute to update a constraint

<canvas height="20">
  <view id="myView" onclick="setAttribute('opacity', 1.5 - this.opacity)" bgcolor="red">
    <text text="${'My opacity is ' + myView.opacity + '.  Click to change it.'}"/>
  </view>
</canvas>

Most setters follow the naming convention "set" + "attribute name". For example, the x attribute for a view has the setX() method defined in the LzView API. You can use these methods as a convenience, instead of setAttribute. They are documented with the other class methods.

Attributes (without setter)

Some attributes are usable in a tag, but do not have a predefined setter method. Instead they use the default setter method (setAttribute) to set their values at run-time. Typically they are custom attributes that have been declared in components using the <attribute> tag. Therefore they can be declared and set in tags too.

Example 7. An attribute without a setter method

<canvas>
    <window title="My Window" onclick="this.setAttribute('title', 'Hello World');"/>
</canvas>

Event Handler Attributes

Event Handler attributes are instructions for what to perform when a particular event happens. They always contain script, and cannot be changed at run-time (i.e. from script). Their values cannot (and do not need to) be retrieved from script.

Final Attributes

Final attributes are declared and set in the tag, but cannot be changed in using script. Good examples of final attributes are name and id. They can be read from script using dot syntax (e.g. myView.name).

Read Only Attributes (Fields)

Read Only attributes, sometimes called "Fields", are only available through the element's API. Since they are read-only, they cannot be set in a <tag>. Their values can be retrieved using dot syntax (e.g. myView.subviews).

Copyright © 2002-2005 Laszlo Systems, Inc. All Rights Reserved. Unauthorized use, duplication or distribution is strictly prohibited. This is the proprietary information of Laszlo Systems, Inc. Use is subject to license terms.

An introduction to Attributes

Attributes (with setter)

Attributes (without setter)

Event Handler Attributes

Final Attributes

Read Only Attributes (Fields)