Table of Contents
OpenLaszlo components are high-level objects that implement common user-interface functions.
Sources for LZ components are here.
Earlier chapters have shown simple usage of components. This chapter describes various more advanced ways to use components, and contains summary descriptions of how to extend components and create new ones. (These topics are covered in greater depth in later chapters.)
All components have several attributes, such as background color and text color, to which you can assign different values to change the component's appearance. You can set individual values for a single component, and you can also set a "style" for a group.
There are several styles defined as classes (whitestyle, silverstyle, bluestyle, greenstyle, goldstyle, and purplestyle). You may create an instance of one of these, create a new style, or create an instance with one or more modified attributes.
Different styles may be used in different parts of an application, to highlight a single component or to distinguish a group of components. The style of a component applies to itself and any component within it.
Styles may be defined to establish a consistent "look" for a group of components. There are a number of pre-defined styles. If you don't declare a default style, the OpenLaszlo components use whitestyle. To specify a different default style, define a style with isdefault="true".
In the example below, section one and two of the tabslider and the checkboxes inside them appear gold. Section Three and the components inside it appear green.
Example 16.1. The <style> tag
<canvas height="250">
<goldstyle name="defaultstyle" isdefault="true"/>
<greenstyle name="specialstyle"/>
<tabslider id="ts1" x="50" y="20"
width="300" height="180">
<tabelement text="Section One" selected="true">
<checkbox>option one</checkbox>
</tabelement>
<tabelement text="Section Two">
<checkbox>option two</checkbox>
</tabelement>
<tabelement text="Section Three" style="$once{specialstyle}">
<radiogroup>
<radiobutton>Yes, I want to know more</radiobutton>
<radiobutton>No, I prefer to remain blissfully unaware</radiobutton>
<radiobutton>Please tell my neighbor, who may tell me</radiobutton>
</radiogroup>
<button align="right">Submit</button>
<simplelayout axis="y" spacing="10"/>
</tabelement>
</tabslider>
</canvas>
Many components, such as lists and combination, or "combo" boxes, are driven by data that is in XML format. For some components, you supply the data to the component "inline", that is, within the actual tag that defines an instance. For others, data comes from an associated dataset.
To see how these compare, inspect the reference pages for <combobox>
and <datacombobox>
. The choice of which to use depends on personal preference and the nature of the problem you're trying to solve. Data-backed
components such as <datacombobox> provide a nice separation between data and presentation and make it easier to consume data from external sources. Instance
components like <combobox> are conceptually simpler and often more convenient and easier to understand.
As you design more powerful applications you may find that the existing components do not meet your needs. In that situation you can build your own custom components. Designing your own components is a subject beyond the scope of this chapter, but here is a brief description of what's involved.
Implementing new components has two general aspects:
-
devising the component's behavior
-
devising its visual appearance.
To learn how to do this, first make sure that you understand classes and how to extend them, as explained in Chapter 28, Classes and Chapter 33, Extending Classes. Then read the Component Design Guide on extending components.
Designing the visual appearance of a new component requires a designer's eye and meticulous attention to detail—at the level of placement of individual pixels.
The role of the graphic designer on Laszlo projects is explained in the Designer's Guide. In addition, we recommend that you study the construction of the LZ components, as explained in Chapter 34, Designing Custom Components.
As explained above, sometimes you can create your own new component by subclassing, or extending an existing component. Here
the <alert>
class is extended to create a new component called "myalert". It is trivially different
from the default <alert>; its only difference is that it centers nicely over the survey box.
Example 16.2. extending a component
<class extends="alert" name="myalert" x="${Math.max(survey.width - this.width, 0)/2}" y="${Math.max(survey.height - this.height, 0)/3}">
</class>