Style

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 1. 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 2. 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.

<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

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.

Attributes
Name	Usage	Type (Tag)	Type (JS)	Default	Category
basecolor	Tag & JS	color	Number		setter
	used for colorizing a component, components will typically use varying shades of this color. Default: offwhite

bgcolor	Tag & JS	color	Number		setter
	used for colorizing the backgrounds of content areas, such as the background in tabslider's content, and window's content default: white

bordercolor	Tag & JS	color	Number		setter
	used to color the frame of a component for those that have a visual border. Default: gray40 (a medium dark gray)

bordersize	Tag & JS	expression	any		setter
	the line width used in those components that have a visual border, default: 1

canvascolor	Tag & JS	color	Number		setter
	canvas color, default: null (will use whatever is specified as the canvas bgcolor, default: white)

disabledcolor	Tag & JS	color	Number		setter
	used when an item is disabled default: gray30

hilitecolor	Tag & JS	color	Number		setter
	used when the background color changes to highlight an item, such as when mouse is over a menu item default: iceblue3

isdefault	Tag & JS	expression	any	false	setter
	if true, this style is the default style for components

isstyle	Tag & JS	expression	any	true	readonly
	this is a style object

menuitembgcolor	Tag & JS	expression	any		setter
	background color for menu items, defaults to the 'textfieldcolor'

selectedcolor	Tag & JS	color	Number		setter
	used when an item is selected, such as in a list default: iceblue4

textcolor	Tag & JS	color	Number		setter
	color for text, default: black

textdisabledcolor	Tag & JS	color	Number		setter
	used as the text color when a component is disabled default: gray60

textfieldcolor	Tag & JS	color	Number		setter
	background color for text areas, default: white

texthilitecolor	Tag & JS	color	Number		setter
	used as the text color with 'hilitecolor' to highlight an item, such as when mouse is over a menu item default: iceblue1

textselectedcolor	Tag & JS	color	Number		setter
	used as the text color with 'selectedcolor' to color the selected item default: iceblue1

extend()
style.extend(args)
returns a new style object which is based on this one with only specified attributes modified param dictionary args: the attributes for the new style
Parameters
Name	Type	Desc
args		None

<style>

Methods