Styles

Styles are used to decorate the area surrounding Component and to customize the contents of component. Each style may have optional focused variant that is used automatically when Component flagged as FOCUSABLE is focused.

It is important to ensure that the total area consumed by margin, border and padding are equal in normal style and focused variant. Within the consumed area the dimensions of margin, border and padding may change as long as the total areas remains equal. Graphical glithes may occur if this constraint is violated.

Diagram below illustrates the marginal, border and padding. Top, right, bottom and left dimensions are individually adjustable. It is not required to have any of them, and by default there is no margin, border and padding for style. Style may also specify background which is used to fill the padding and component area.

Style can also carry up to four fonts, colors, images and arguments. They are used to customize the contents of components.

  margin-top  
margin-
left
  border-top  
border-
left
  padding-top  
padding-
left 		Component area padding-
right
  padding-bottom  
border-
right
  border-bottom  
margin-
right
  margin-bottom  

Format

Styles are written with CSS-like notation. If name of style contains reserved word (e.g. background) it can be escaped with dot. 

  
    menu {
      width: 100%;
      align: left bottom;
      background: solid #163458;
      border: 7 5 0 5;
      border-type: image "/menu.png";
      padding: 0 2 5 2;
    }

    menu.item {
      padding: 2 10 2 10;
      font: proportional medium bold;
      color: white;
      image: "/menu2.png";
      label-icon-orientation: right;

      // Focused variant inherits all
      // the properties 
      focused {
        background: grid9 "/menuitem.png" 3 3 3 3;
      }
    }   
    
    .background
    {
      background: solid blue;
    }

Dimension

Dimension are used to specify padding, border, margin and some Component specific dimesions. Following formats are available:

Colors

Following color formats are supported:

Images

Images reference the bitmap resources specified on widget.xml file.

Alignment

Alignment may be specified on certain locations.

Font

Font is combination of face, size, and style:

Width, height and alignment

Components can take the width and/or height specified on style provided that no code-level preferred width/height has been set. If width/height is specified zero it is considered unlocked and each Component will attempt to determine optiomal size. Relative (percentual) dimensions may be used. Alignment control is Component specific, see documentation of different components too see how it's treated.

Marginal

Border

Border type

border-type: none;
No border is drawn.
border-type: rectangle <color>;
Border is drawn with solid color.
border-type: rectangle <top-color> <right-color> <bottom-color> <left-color> ;
Border is drawn like classic beweled button.
border-type: image <image> ;
Given image is split into 9 regions according to border dimensions, as suggested by diagram, and the regions are used when filling up the border area.
1 2 3
4 5 6
7 8 9
Regions 1, 3, 7 and 9 are used to fill corners of border area.
Regions 2, 8 are used to horizontally fill the upper and lower border areas, regions are repeated/clipped as needed.
Regions 4, 6 are used to vertically to fill the left and right borders areas, regions are repeated/clipped as needed.
Region 5 is ignored.

Padding

Background

background: none;
No background is drawn.
background: solid <color>;
Background is drawn with solid color.
background: hgradient <left-color> <right-color> ;
Background is drawn as horizontal gradient.
background: vgradient <top-color> <bottom-color> ;
Background is drawn as vertical gradient.
background: image <image> ( transparent | <color> ) <alignment> ( repeat-x, repeat-y | no-repeat) ;
Background is drawn using given image. Image is aligned to given position on target area and repeated as specified. Remaining area is either left transparent or filled with specified color.
background: grid8 <image> transparent <top-dim> <right-dim> <bottom-dim> <left-dim> ;
Given image is split into 9 regions by given dimensions and drawn like image border. Padding and component areas area not drawn.
background: grid8 <image> automatic <top-dim> <right-dim> <bottom-dim> <left-dim> ;
Given image is split into 9 regions by given dimensions and drawn like image border. Padding and component areas are filled with color picked from first (top left) pixel of region 5.
background: grid8 <image> <color> <top-dim> <right-dim> <bottom-dim> <left-dim> ;
Given image is split into 9 regions by given dimensions and drawn like image border. Padding and component areas are filled with given color.
background: grid9 <image> <top-dim> <right-dim> <bottom-dim> <left-dim> ;
Given image is split into 9 regions by given dimensions and drawn like image border. Padding and component areas are filled using the region 5 of image, repeating and clipping as needed.

Colors

Component specific customization. See individual component for description. Note that there is overlap between color slots, style compiler will issue warning if it detects conflict.

Images

Component specific customization. See individual component for description.

Fonts

Component specific customization. See individual component for description.

Arguments

Component specific customization. See individual component for description. Note that there is overlap between argument slots, style compiler will issue warning if it detects conflict.

Default style

Empty style contains following properties: 

    margin: 0 0 0 0;
    border: 0 0 0 0;
    border-type: none;
    padding: 0 0 0 0;
    background: none;
    font-1: proportional medium plain;
    font-2: proportional medium plain;
    font-3: proportional medium plain;
    font-4: proportional medium plain;
    color-1: black;
    color-2: black;
    color-3: black;
    color-4: black;
    argument-1: 0;
    argument-2: 0;
    argument-3: 0;
    argument-4: 0;
    width: 0;
    height: 0;
    align: top left;