4.12 Styles

Chapter 4 Presentation Layer Modeling
	4.12 Styles

Styles can be used to enrich the presentation model generically. Styles define properties which are set to elements of the presentation model for which a style should be applied. To define on which model elements a style will be applied one can define a selector for a style. The concept of styles in openXMA is similar to styles in CSS but there are some differences.

Example:

style MyStyle select label {
    background-color: yellow
    foreground-color: red
}

In this example a style named 'MyStyle' is defined. This style defines the background color and the foreground color and will be applied to all model elements of the type 'label'.

4.12.1 Defining styles

Styles are defined in the presentation model. Therefore styles are placed into '*.pml' files. It is supported to append styles in a presentation model file which contains already a component or they can be put into a separate presentation model file.

Best practice: Styles which are intended to be shared between more components should be placed into a separate presentation model file. To make styles available for a component the namespace of the presentation model containing the styles have to be imported (like it is done for other model elements).

4.12.2 Applying styles

To apply a style to a model element and its children set the 'style'-property of the model element.

Example:

vpanel personPanel style=MyStyle {
    label "First name" & text firstName
    label "Last name" & text lastName    
}

In this example the style 'MyStyle' is set for the model element 'personPanel'. This causes that the property of the style are applied to the element 'personPanel' and its children when any of these model elements matches the selector. Because the selector in this case is 'label' the properties are applied to the labels ('First name' and 'Last name').


4.11 Layout		4.13 Extending and customizing a page