SWF only: The features described in this section only work in applications compiled to SWF. They do not work in applications compiled to other runtimes.
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 will use
whitestyle. To specify a different default style,
define a style with isdefault="true".
<canvas height="60">
<greenstyle name="mystyle" isdefault="true"/>
<checkbox>Tell me more</checkbox>
<button>Submit</button>
<simplelayout spacing="10" inset="10"/>
</canvas>
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 lz.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.
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.
<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>
You may define your own style by declaring values for various style
attributes described in the attribute reference below. For example,
the following style uses the default values for most style attributes,
but provides custom values for the basecolor
(overall shade of the components) and the
textcolor.
<style name="customstyle" basecolor="0xddddff" textcolor="blue"/>
Further reading
You can see the definitions of the pre-defined styles
in: lps/components/base/defaultstyles.lzx
Named colors are defined in: lps/components/base/colors.lzx