Back to Contents

Presentation Styles

Summary:

• Introduction
• Syntax
• Usage
  • Defining a Style
  • Pseudo selectors
  • Using a specific style
  • Combining styles
  • Style attribute inheritance
  • Styles in the AUI tree
  • Loading Presentation Styles
  • Example of 4st file
• Element Types
• Colors
• Using Fonts
• Font Families
• Font Sizes
• Style Attributes Reference
  • Common Style Attributes
  • Window Style Attributes
  • MDI Container Style Attributes
  • Table Style Attributes
  • ComboBox Style Attributes
  • DateEdit Style Attributes
  • Label Style Attributes
  • ProgressBar Style Attributes
  • RadioGroup Style Attributes
  • TextEdit Style Attributes

See also: Dynamic User Interface.

Introduction

Presentation Styles allow you to define a set of decoration properties to be used in graphical objects. Presentation Styles are provided to centralize attributes related to the appearance of user interface elements.

Typical presentation attributes define font properties and foreground and background colors. Some presentation attributes will be specific to a given class of widgets (like the first day of week in a DATEEDIT).

Presentation Styles are defined in a resource file having an extension of 4st,  which must be distributed with other runtime files.

Syntax

where style-identifier can be:

{ *
| element-type
| .style-name
| element-type.style-name }

Notes:

1. element-type defines the type of the graphical object (for example, Window).
2. style-name is the name of a specific style referenced by graphical objects using the style attribute.
3. attribute-name defines the name of the attribute.
4. attribute-value defines the value to be assigned to attribute-name.

Usage

Presentation Styles centralize the attributes related to the decoration of the elements of the user interface. Styles are applied implicitly by using global styles, or explicitly by naming a specific style in the style attribute of the element.

Defining a style

 In the definition of a style, the 'name' attribute is used as a selector to apply style attributes to graphical elements.

You can define a style as global or specific:

• A style identified by a star (*) is a global style that is automatically applied to all elements:

01 <Style name="*" >

• A style identified by an element-type is a global style that is automatically applied to all objects of this type:

01 <Style name="Window" >
02 <Style name="Edit" >
03 <Style name="ComboBox" >

• A style identified by a style-name is a specific style that can be applied to any element types using that style: 

01 <Style name=".important" >
02 <Style name=".smallfont" >

• A style identified by an element-type followed by a dot and a style-name is a specific style that will only be applied to elements of the given type: 

01 <Style name="Window.main" >
02 <Style name="Edit.mandatory" >

Priority: When different styles can be applied to an element, the following priority, from the most precise to the most generic, is used to determine the correct style  :

1. element-type.style-name
2. .style-name
3. element-type
4. *

For instance, to find the style which will be applied to an Edit having the style attribute set to 'mandatory', the following styles will be analyzed:

1. Edit.mandatory
2. .mandatory
3. Edit
4. *

Pseudo selectors

You can define a pseudo selector to make your style apply only when some conditions are fulfilled. You must precede it with a colon. You can also combine the  pseudo selectors. If you do so, the style will be applied if all pseudo selector conditions are fulfilled.

01 <Style name="Table:even:input" >
02 <Style name="Edit:focus" >
03 <Style name="Edit.important:focus" >

Pseudo selectors have different priorities, and the style with the most important pseudo selector will be used when several styles match.

Pseudo selectors also define the priority of your styles;: a more generic style will be used if the pseudo-selector has higher priority.

For instance: you want all important edits to have red text, but you want the current field to be displayed in blue:

01 <Style name="Edit.important" >
02 <Style name=":focus" >

Style ":focus" may be more generic than Edit.important; it will be used for the focused item, as the pseudo selector is more precise.

Using a specific style

To apply a specific style, set the style-name in the style attribute of the node representing the graphical element in the Abstract User Interface tree.

There are different ways to set the style attribute of a element:

• In the ATTRIBUTES clause of instructions such as OPEN WINDOW.
• As a form element attribute, in the Form Specification File.
• Dynamically by a program, using the DOM API or a built-in class method like setElementStyle().

For example,  to define a style in a form file for a input field:

01 EDIT f001 = customer.fname, STYLE = "info";

Combining styles

You can combine several styles by using the space character as a separator in the style attribute:

01 EDIT f001 = customer.fname, STYLE = "info highlight mandatory";

When several styles are combined, the same presentation attribute might be defined by different styles. In this case, the first style listed that defines the attribute takes precedence over the other styles.

For example, if the textColor presentation attribute is defined as follows by the styles info, highlight and mandatory:

• info style does not define textColor.
• highlight style defines textColor as blue.
• mandatory style defines textColor as red.

Then the widgets having a style set to "info highlight mandatory" have textColor of blue.

Style Attribute Inheritance

A style attribute may be inherited by the descendants of a given node in the Abstract User Interface tree. For example, when using a style defining a fontFamily in a GROUPBOX container, you would expect that all the children in that groupbox would have the same font. However, some style attributes should not be inherited, such as backgroundImage.

Style inheritance is implicitly defined based on the attribute. The following sections contain tables with descriptions of style attributes, including the implicit inheritance for each attribute.

Presentation Styles in the Abstract User Interface tree

Presentation Styles are defined in the Abstract User Interface tree, under the UserInterface node, in a StyleList node following the syntax described above. The StyleList node holds a list of Style nodes that define a set of attribute values. Attribute values are defined in StyleAttribute nodes, with a name and a value attribute.

Loading Presentation Styles

Presentation Styles can be defined in an XML file that has the 4st extension. By default, the runtime system searches for a file named "default.4st" in the current directory. If this file does not exist, it searches in the directories defined in the DBPATH environment variable. If the file was not found using DBPATH, standard Genero presentation styles are loaded from "FGLDIR/lib/default.4st" file.

You can overwrite the default search by loading a specific Presentation Style file with the ui.Interface.loadStyles() method. This method accepts an absolute path with the 4st extension, or a simple file name without the 4st extension. If you give a simple file name, for example "mystyles", the runtime system searches for the "mystyles.4st" file in the current directory. If the file does not exist, it searches in the directories defined in the DBPATH environment variable.

Warnings:

1. All styles must be defined in a unique file; you cannot combine several 4st files.

Example of 4st file

01 <StyleList>
02 <Style name="*" >
03  <StyleAttribute name="fontFamily" value="serif" />
04 </Style>
05 <Style name=".important" >
06  <StyleAttribute name="textColor" value="#ff0000" />
07 </Style>
08 <Style name="Window" >
09  <StyleAttribute name="toolBarPosition" value="top" />
10  <StyleAttribute name="statusBarType" value="default" />
11 </Style>
12 <Style name="Window.dialog" >
13  <StyleAttribute name="toolBarPosition" value="none" />
14  <StyleAttribute name="statusBarType" value="node" />
15 </Style>
16 </StyleList>

Element Types

Styles may apply to any graphical elements of the user interface, such as the following:

The name of the element when used in a style file is case-sensitive (CheckBox, not checkbox).

Colors

This section describes how to specify a value for style attributes defining colors, such as textColor.

Syntax:

{ generic-color | #rrggbb }

Notes:

1. generic-color is any of the predefined colors supported by the language.
2. #rrggbb is a numerical color defined by a red/green/blue specification.

Usage:

The language defines a set of generic colors, interpreted by the front end according to the graphical capability of the workstation.

You can also specify a generic system color:

You can also specify a color with the RGB notation, starting with a # dash character.

Each value of the RGB color specification must be provided in hexadecimal, in the range [00-FF].

Examples:

<StyleAttribute name="textColor" value="blue" />
<StyleAttribute name="textColor" value="#00FF45" />

Using Fonts

A desktop application should follow the current desktop settings. The front-end program (GDC, GJC, HTML browser) tries to determine the default font for the desktop, and also offers a global font chooser to let the end-user define which font best matches his expectations.

In most cases it is not possible to know what a potential end-user might expect regarding the font family. Therefore, the configuration should avoid using explicit font families and use only the fontWeight/fontStyle/fontSize properties. Only if the client can't determine a proper default font family for the desired platform should a known font family be added to the configuration.

Use abstract font sizes such as medium, large, small, or sizes relative to the user-chosen font (em units), rather than absolute point values. In an HTML browser you can choose two fonts (proportional/fixed), and a well-designed document should not use more than 2 fonts. This is also valid for applications.

Font Families

This section describes the possible values of the fontFamily style attribute.

Syntax:

font-family [,...]

Notes:

1. font-family defines a generic font family or a specific font family.
2. You can specify a comma-separated list of fonts.

Usage:

The language defines a set of generic font families, interpreted by the front end according to the graphical capability of the workstation:

Any other name is interpreted as a specific font family, which identifies a local font supported by the front-end. Usually, it is one of the fonts installed on the workstation operating system. See front-end documentation for a list of supported local fonts.

Any font name containing white-spaces must be quoted, with single quotes.

You can specify a comma-separated list of font families.

Examples:

<StyleAttribute name="fontFamily" value="sans-serif" />
<StyleAttribute name="fontFamily" value="'Courier New'" />
<StyleAttribute name="fontFamily" value="'Times New Roman',Times,serif" />

Font Sizes

This section describes the possible values of the fontSize style attribute.

Syntax:

{ generic-size | nnpt | xxem }

Notes:

1. generic-size is one of the generic sizes such as 'small' or 'xx-large'.
2. nn defines an absolute size in number of points ( 1pt = 1/72 inches ).
3. xx defines an relative size in the size units of the client ( 1em = as large as the font chosen in the client )

Usage:

The language defines a set of generic font sizes, interpreted by the front end according to the graphical capability of the workstation.

xx-small, x-small, small, medium, large, x-large, xx-large.

You can also specify an absolute font size, by giving a numeric value followed by the units (pt):

Examples:

<StyleAttribute name="fontSize" value="medium" />
<StyleAttribute name="fontSize" value="xx-large" />
<StyleAttribute name="fontSize" value="12pt" />
<StyleAttribute name="fontSize" value="1em" />

Style Attributes Reference

A Style attribute may be a common attribute that can be applied to any graphical element. Other Style attributes apply only to a specific graphical element (see below).

Common Style Attributes

The style attributes described in this section apply to any graphical elements, such as windows, layout containers, or form items.

EDIT name: FORMONLY.name, COLOR=blue;

Window Style Attributes

The following table shows the presentation attributes for Windows:

Status bar types:

The next table shows all possible status bar types you can set with the statusBarType attribute for Windows:

Value	Screenshot
default
lines1
lines2
lines3
lines4
lines5
lines6
panels1
panels2
panels3
panels4
panels5
panels6
panels7
none

StartMenu:

The following Window style attributes modify how the window will manage StartMenus.

MDI Container Style Attributes

The following table shows the presentation attributes for the MDI container:

Table Style Attributes

The following table shows the presentation attributes for Tables:

ComboBox Style Attributes

The following table shows the presentation attributes for ComboBox:

DateEdit Style Attributes

The following table shows the presentation attributes for DateEdit:

Label Style Attributes

The following table shows the presentation attributes for Label:

ProgressBar Style Attributes

The following table shows the presentation attributes for ProgressBar:

RadioGroup Style Attributes

The following table shows the presentation attributes for Radiogroup:

TextEdit Style Attributes

The following table shows the presentation attributes for TextEdit: