Back to Contents

Presentation Styles

Summary:

• Introduction
• Syntax
• Usage
  • Defining a Style
  • Using a specific style
  • Style attribute inheritance
  • Styles in the AUI tree
  • Styles in XML files
  • Example of 4st file
• Element Types
• Colors
• Using Fonts
• Font Families
• Font Sizes
• Style Attributes Reference
  • Common Style Attributes
  • Window Style Attributes
  • Table Style Attributes
  • ComboBox and Radio Style Attributes
  • TextEdit

See also: Dynamic User Interface.

Introduction

Presentation Styles allow you to define a set of attributes to be used in graphical objects.

Presentation Styles are provided to centralize attributes related to the decoration of user interface elements. The elements can automatically get decoration attributes implicitly with global styles, or explicitly by naming a specific style in the style attribute of the element.

Syntax

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 are provided to centralize attributes related to the decoration of user interface elements. The elements can automatically get decoration attributes implicitly with global styles or explicitly by naming a specific style in the style attribute of the element.

Defining a style

You can define a style as global or specific. Global styles are applied implicitly, while specific styles are applied to elements having a style-name in the style attribute. In the definition of a style, the 'name' attribute is used as a selector to apply style attributes to graphical elements.

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

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 built-in class methods

A typical use is defining the style in form files; for example, for a input field:

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

By using the space character as a separator, you can combine several styles:

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

Style Attribute Inheritance

A style attribute may be inherited by the descendents 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 have the same font. However, some style attributes should not be inherited, such as backgroundImage.

Style inheritance is implicitly defined according to 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.

Presentation Styles in XML files

Presentation Styles can be defined in an XML file that has the "4st" extension. By default, the runtime system searches the current directory for a file named "default.4st". If this file does not exist, it searches the directories defined in the DBPATH environment variable. If the file was not found using DBPATH, standard window styles are loaded from the "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 do not apply to all types of nodes that the Abstract User Interface can hold. 

The following table lists the supported element types that can use a style:

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 should use only the fontWeight/fontStyle/fontSize properties . A known font family should be added to the configuration only if the client can't determine a proper default font family for the desired platform  When using font sizes you should use the abstract sizes 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 two 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 a number of points ( 1pt = 1/72 inches ).
3. xx defines a relative size in 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" />

Common Style Attributes

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

Window Style Attributes

The following table shows the presentation attributes for Windows:

Attribute	Inh.	Description
windowType	No	Defines the basic type of the window. Values can be "normal" or "modal". Normal windows are displayed as typical application windows. Modal windows are displayed at the top of all other windows, typically used for temporary dialogs. Default is "normal".
windowState	No	Defines the initial state of a window. Values can be "normal" or "maximized". Default is "normal".
windowOptionClose	No	Defines if the window can be closed with a system menu option or window header button. Values can be "yes", "no" or "auto". When the value is "auto", the option is enabled according to the window type. Default is "auto". Warning: This attribute may have a different behavior in accordance with the front end operating system. For example, when no system menu is used, it may not be possible to have this option enabled.
windowOptionMinimize	No	Defines if the window can be minimized with a system menu option or window header button. Values can be "yes", "no" or "auto". When the value is "auto", the option is enabled according to the window type. Default is "auto". Warning: This attribute may have a different behavior in accordance with the front end operating system. For example, when no system menu is used, it may not be possible to have this option enabled.
windowOptionMaximize	No	Defines if the window can be maximized with a system menu option or window header button. Values can be "yes", "no" or "auto". When the value is "auto", the option is enabled according to the window type. Default is "auto". Warning: This attribute may have a different behavior in accordance with the front end operating system. For example, when no system menu is used, it may not be possible to have this option enabled.
windowSystemMenu	No	Defines if the window shows a system menu. Values can be "yes", "no" or "auto". When the value is "auto", the system menu is enabled according to the window type. Default is "auto".
sizable	No	Defines if the window can be resized by the user. Values can be "yes", "no" or "auto". When the value is "auto", the window becomes resizable if the content of the first displayed form has resizable elements; for example, when using a form with a TABLE container or an TEXTEDIT with STRETCH attribute. Warning: When the value is "auto", the window becomes resizable based on the first form used in the window; the content of further forms is ignored. Default is "yes".
position	No	Indicates the initial position of the window. Values can be "default", "field", "center" or "center2". When "default", the windows are displayed according to the window manager rules. With "center", the window is displayed in the center of the screen. With "center2", the window is displayed in the center of the current window. Default is "default".
border	No	Defines the border type of the window. Values can be "normal", "frame", "tool" or "none". When the value is "normal", the border is standard, with a normal window header with a caption; when "frame", only a frame appears, typically without a window header; when "tool", a small window header is used; when "none", the window has no border. Default is "normal".
forceDefaultSettings	No	Indicates if the window content must be initialized with the saved positions and sizes. By default, windows are re-opened at the position and with the size they had when they were closed. You can force the use of the initial settings with this attribute. This applies also to column position and width in tables. Default is "0".
actionPanelPosition	No	Defines the position of the action button frame (OK/Cancel).  Values can be "none", "top", "left", "bottom" or "right". Default is "right".
actionPanelButtonSize	No	Defines the width of buttons. Values can be "normal", "shrink", "tiny", "small", "medium", "large" or "huge". When the values are "normal" or "shrink", buttons are sized according to the text or image; "shrink" uses the minimum size needed to display the content of the button. Default is "normal".
actionPanelButtonSpace	No	Defines the space between buttons. Values can be "none", "tiny", "small", "medium", "large" or "huge". Default is "medium".
ringMenuPosition	No	Defines the position of the ring menu frame (MENU).  Values can be "none", "top", "left", "bottom" or "right". Default is "right".
ringMenuButtonSize	No	Defines the width of buttons. Values can be "normal", "shrink", "tiny", "small", "medium", "large" or "huge". When the values are "normal" or "shrink", buttons are sized according to the text or image; "shrink" uses the minimum size needed to display the content of the button. Default is "normal".
ringMenuButtonSpace	No	Defines the space between buttons. Values can be "none", "tiny", "small", "medium", "large" or "huge". Default is "medium".
toolBarPosition	No	Indicates the position of the toolbar, when a toolbar is defined. Values can be "none", "top", "left", "bottom" or "right". Default is "top".
startMenuPosition	No	Indicates the position of the startmenu, when one is defined. Values can be "none", "tree", "menu" or "poptree". When the value is "tree", the startmenu is displayed as a treeview always visible on the right side of the window; when "menu", the startmenu is displayed as a pull-down menu, always visible at the top of the window; when "poptree", the startmenu is displayed as a treeview in a popup window that you can open with a short-cut (see startMenuShortcut).   Default is "none".
startMenuSize	No	Defines the size of the startmenu, when one is defined and the position is defined as "tree" or "poptree". The values can be "tiny", "small", "medium", "large" or "huge". Default is "medium".
startMenuShortcut	No	Defines the shortcut key to open a startmenu, when the position is defined as "poptree". Default is "control-shift-F12".
statusBarType	No	Defines the type of status bar the window will display: default lines1 lines2 lines3 lines4 lines5 lines6 panels1 panels2 panels3 panels4 panels5 none Default is "default".

Table Style Attributes

The following table shows the presentation attributes for Tables:

ComboBox and RadioGroup Style Attributes

The following table shows the presentation attributes for ComboBox and Radiogroup:

TextEdit Style Attributes

The following table shows the presentation attributes for TextEdit: