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

Example 48. Simple Style Example

<canvas height="60">
          <greenstyle name="mystyle" isdefault="true"/>
          <checkbox>Tell me more</checkbox>
          <button>Submit</button>
          <simplelayout spacing="10" inset="10"/>
        </canvas>

Flash

HTML5

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.

Example 49. 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>

Flash

HTML5

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