Echo Web Framework

Echo Styles provide a mechanism for a developer to rapidly apply stylistic and look&feel information to user interface components. A Style object contains a table of stylistic properties for a particular Component. The properties may be applied to an instance of a component by passing the Style as a parameter to a Component's applyStyle() method.

Styles are provided as a convenience for the developer, in order to reduce the amount of code that must be written by automating a routine task. For example, suppose a screen will display several TextFields, each having a blue background, white foreground, and a thin cyan border. If the screen were to be written without using styles, these properties would have to be manually set on each and every component, as shown in Figure 1.

TextField tf1 = new TextField();
tf1.setBackground(Color.BLUE);
tf1.setForeground(Color.WHITE);
tf1.setBorderColor(Color.CYAN);
tf1.setBorderStyle(TextComponent.BORDER_SOLID);
tf1.setBorderSize(1);

TextField tf2 = new TextField();
tf2.setBackground(Color.BLUE);
tf2.setForeground(Color.WHITE);
tf2.setBorderColor(Color.CYAN);
tf2.setBorderStyle(TextComponent.BORDER_SOLID);
tf2.setBorderSize(1);

TextField tf3 = new TextField();
:
:

Figure 1: Setting style properties on components the hard way.

As can be seen, creating code as shown in Figure 1 could be a most unpleasant experience in cases where lots of text fields were required. It is true that the above code would be much more efficiently written using a "factory method", but such a solution is moot in comparison to using Styles.

To make use of styles, the developer first creates an instance of a Style class and configures it to contain stylistic information for a particular component. Components which support styles will provide constants for the names of various style properties.

public static final Style TEXT_FIELD_STYLE;
static {
    Style style = new Style();
    style.setAttribute(TextComponent.STYLE_FOREGROUND,
            Color.WHITE);
    style.setAttribute(TextComponent.STYLE_BACKGROUND,
            Color.BLUE);
    style.setAttribute(TextComponent.STYLE_BORDER_COLOR,
            Color.CYAN);
    style.setAttribute(TextComponent.STYLE_BORDER_STYLE,
            TextComponent.BORDER_SOLID);
    style.setAttribute(TextComponent.STYLE_BORDER_SIZE, 1);
    style.setImmutable();
    TEXT_FIELD_STYLE = style;
}

Figure 2: Creating a Style.

You may have noticed that the style in Figure 2 has been created as a public static final constant of the class. It often makes sense to group style information into a single static class from which styles may be retrieved. This practice also enables a developer to change style information globally from a single place.

Once the style class has been created, its properties may be applied to a component by invoking the applyStyle() as shown in Figure 3.

TextField tf1 = new TextField();
tf1.applyStyle(TEXT_FIELD_STYLE);

TextField tf2 = new TextField();
tf2.applyStyle(TEXT_FIELD_STYLE);

TextField tf3 = new TextField();
:
:

Figure 3: Setting style properties on components using a Style.