Synopsis
- LZX: style
- JavaScript: style
- Type: Class
- Access: public
- Topic: Components.Base Components
- Declared in: lps/components/base/style.lzx
Description
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".
Example 35. Simple Style Example
<canvas height="60" width="200" >
<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 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.
Example 36. Using Multiple Styles
<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.
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
contains style attributes which are applied to components to modify their look