Many display characteristics of a widget
depend on whether
you include styles.
The rules are as follows:
- You can reference a style
class that is stored in a cascading
style sheet (CSS):
- Every Rich UI application accesses the styles
from the CSS file
that resides in a Rich UI system project; the project name is com.ibm.egl.rui.
To access that CSS file, expand the WebContent folder and css subfolder.
Leave this file untouched; updating it is likely to cause a maintenance
problem over time.
- You can override and supplement the provided
styles by maintaining
your own CSS file. You make that file available to the Rich UI handler
part in either of two ways:
- You can set the cssFile part
property,
which accepts a path that is relative to the WebContent directory.
This
code is an example setting:
Handler ButtonTest Type RUIHandler
{ children = [ui], cssFile = "buttontest/coolblue.css" }
This
code shows an example CSS file:
.EglRuiGridTable
{ border: 3px solid black; }
.EglRuiGridHeader
{ color:yellow;
background-color:red; }
.EglRuiGridCell
{ color:black;
background-color:aqua; }
If both the cssFile and includeFile properties
are specified, the CSS content that is referenced by the cssFile property
takes precedence.
- You can set the includeFile part
property,
which also accepts a path that is relative to the WebContent directory.
This
code is an example setting:
Handler ButtonTest Type RUIHandler
{ children = [ui], includeFile = "buttontest/coolblue.css" }
For
details about this option, see "Rich UI handler part."
- Each widget type that is provided in Rich UI names a
style class
for inclusion in the CSS. The class name has the following pattern,
where WidgetTypeName is the widget-type name, such as TextArea:
EglRuiWidgetTypeName
The
purpose of this convention is to let a Web designer establish the
styles for each type of widget so that you can achieve consistency
across applications.
Some widgets reference additional class
names:
- The grid widget includes children that reference these
style classes:
EglRuiGridTable, for setting the border style of the grid as a whole;
EglRuiGridHeader, for setting characteristics of header cells; and
EglRuiGridCell, for setting characteristics of body cells.
- If
a textField widget is read only; the widget references the
EglRuiTextFieldReadOnly style class
- If a passwordTextField
widget is read only, the widget references
the EglRuiPasswordTextFieldReadOnly style class
You
can see the additional class names in the source for
a given widget. If you use the Firefox browser, you can use Firebug
to inspect the styling of a displayed widget.
- You can
override a style class by setting the class widget
property:
loginBox Box { numColumns=2, class="NormalBoxStyle" };
This
example shows the related content in the CSS file:
.NormalBoxStyle
{ color:black;
background-color:aqua; }
All of the styles in the specified class are in
effect in the widget. These styles are inherited in every enclosed
widget, except when a widget overrides a style, which is described
in this topic.
- You can specify a style or a set of styles
in the style property.
Here is an example, which includes (in the property value) the syntax
that is used in CSS files:
loginBox Box
{ numColumns=2,
style="background-color:lightgreen;border-style:solid;" };
All
of the CSS styles are available if you use the
style property.
However, for most purposes you can assign values to individual style-related
properties. The following declaration is equivalent to the previous
one and does not involve CSS syntax:
loginBox Box
{ columns=2,
backgroundColor="lightgreen",
borderStyle="solid" };
The EGL style-related
properties:
- background
- backgroundColor
- borderStyle or one of the following
subsets: borderLeftStyle, borderRightStyle, borderTopStyle, borderBottomStyle
- borderWidth or one of the following
subsets: borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidth
- color
- cursor
- font
- fontSize
- fontWeight
- height
- margin or one of the following subsets: marginLeft, marginRight, marginTop, marginBottom
- opacity
- padding or
one of the following subsets: paddingLeft, paddingRight, paddingTop, paddingBottom
- pixelHeight
- pixelWidth
- position
- visibility
- width
Except for background, backgroundColor, borderStyle, cursor, font,
and visibility (each of which takes a value
of type STRING), each property takes a value of type INT and uses
pixel as the unit of measure.
- The styles that are in effect
for a given widget are the sum of
the styles that are specified in class and style specifications. In
most cases, a style that is applied to a widget overrides the same
styles that are inherited from enclosing widgets, and the last style
that is specified in a list of widget properties overrides an equivalent
style, if any, that was specified earlier in the list.
- When
you define a widget, if you use both the style property
or an equivalent property to specify a given style and the class property
to reference a class that includes the same style, the value in the style property
takes precedence, in most cases.
If you do not specify
styles, the default settings of the browser
determine the style characteristics, such as the line widths, the
spacing between widgets, and the text font.
Best
practice for styles
Rich UI projects
are likely to be most successful if your company divides the responsibility
for two tasks—laying out the user interface, as handled by an EGL
developer, and creating the interface look and feel, as handled by
a Web designer. To make this division of labor possible, use external
style sheets. You can rely on a default class name, such as EglRuiTextField.
Alternatively, you can assign your own class name by assigning a value
to the class property for a given widget.
Removal of all children from the document body
Consider
the following statement:
document.body.removeChildren();
The
effect of using this statement is twofold:
- All children widgets
are removed from the Web page
- Access to the external style
sheet, if any, is removed
To remove children from
the document body without removing
access to the external style sheet, remove specific children, as in
the following statement:
document.body.removeChild(myBox);
Sources of additional information
For
information about Rich UI, see the "CSS Basic" section of that Web
site. You might also use the site search.
For a complete description
of cascading style sheets, see CSS: The Definitive Guide by
Meyer (O'Reilly Media, Inc., November 2006).