Style Editor: Design Context

Introduction

The Design Context is the default interface presented by the Style Editor. This is the primary means of developing styles.

Design Context Layout

There are three regions of interest in the Design Context. (Figure 1) On the left is the Toolbox which contains buttons for each of the core components within Echo. On the top is the Command Bar that has buttons for adding and removing styles. The rest of the screen contains the Style List which enumerates the styles within the style sheet and details their properties.

Toolbox

The fastest way to add a style to the sheet is by using the Toolbox. It contains buttons for all of the core Echo components. (Figure 2) Clicking on a button will create a style for that type of component, automatically naming it to include the type's class name.

Buttons marked with an "A" denote abstract component types. Styles tied to abstract component types can be applied to any of the concrete types extending the abstract component type. For example, a style for the TextComponent abstract type could be applied to TextField and PasswordField components.

Command Bar

The Command Bar contains buttons to add and remove styles from the current style sheet. (Figure 3)

Using the New Style button to create a style will present the developer with the New Style window. (Figure 4) On the left of the window is a tree containing all of the Echo component types in the project's classpath, including components from third-party libraries and components created by the developer. Developers must select a component type on the left and, optionally, provide a name for the new style on the right. Clicking OK will generate the new style and add it to the sheet's style list.

When a style is selected in the Style List, the developer may click the Remove Style button to remove the style. This permanently deletes the style.

Style List

The Style List displays the sheet's styles in alphametical order. Each row contains a Style Property Editor with the name of the style on the left and the compressed list of properties for which the developer has provided values on the right.

When a style is selected, the row's background is highlighted at the property editor list on right expands to include all of the style's properties. The available properties are determined by the type of component to which the style is tied. The properties are listed in alphabetical order. Editing a style property's value is identical to editing a component property's value in the Form Editor. To edit a value, click in the right column beside the property's name.

To the right of the style's name is a drop-down action menu. This menu can be used to rename the style or remove it entirely.