Style Editor: Overview

Introduction

Echo supports the ability to control an application's visual theme -- such as colors and fonts -- using StyleSheets. Echo's style sheets are conceptually similar to the Cascading Style Sheets (CSS) used by HTML authors, but Echo's style sheets are not used to control component layout and do not cascade. Echo provides a separate, more powerful, and more versatile mechanism to control screen layouts that capitalizes on Echo's object-oriented nature.

A StyleSheet can contain many Styles. A style is tied to a type of Echo component. For example, a developer may create a style for Labels and another style for TextAreas. The styles created using the Style Editor are immutable constants of the style sheet in which they are created. This makes them easy to use in a developer's own code when customizing forms.

Purpose

The EchoStudio Style Editor allows developers to create style sheets that can be applied to forms and components and create a consistant visual theme throughout an application. When style sheets are used to define the visual properties of components, the application's consistant appearance is easy to maintain.

Launching

There are three ways to access the Style Editor. To create a new StyleSheet and view it in the Style Editor, click the New Style Sheet button in the Project Overview (Figure 1). To open an existing style sheet with the Style Editor, you can either double-click the sheet's in the Project Overview (Figure 2) or you can open the corresponding .java file normally in the Eclipse Package Explorer.

Contexts

The Style Editor is divided into two contexts from which to review the style sheet being developed:

Design Context

The primary means by which you will develop style sheets.

Source Context

Displays the source code of the StyleSheet object being developed.

These contexts are accessible from the tabs at the bottom of the editor. (Figure 3)