Form Editor: Component Editor

Overview

The Component Editor Panel provides you with an JavaBean-like editor for components. To enable the panel, select the target component from the Form Component Hierarchy Panel. This panel controls the initial state of components when the form object is created. The components can be modified by your code after they are initialized, such as populating text fields with information from a database or beans. Additionally, you will frequently change a component's state in response to a user interaction.

The Component Editor Panel is divided into two pages, accessible through the Properties and Events tabs located above this panel. (Figure 1) The two pages are discussed in detail below.

Component Properties Page

The Component Property Page follows the familiar and proven model of JavaBean editors. It is divided into to columns. In each row, the left column contains a property name and the right column contains the component's initial value for that property. (Figure 2) Except for the first three properties, the properties are arranged in alphabetical order. If a value is blank, it means that the component's default value will be used.

Sticky Values
You may need to hit the [Enter] or [Return] key after changing a property's value for your change to be recognized.

Code Generation Properties

The first two properties, Field Identifier and Field Visibility, require special attention. These properties do not impact the initial state of the component, but rather control EchoStudio's code generation for the component. The Field Identifier property defines the component's Java variable name. You can use any valid Java variable name here, but no two components within the form can share the same ID. The Field Visibility property directs EchoStudio to make the component a private instance variable, accessible from other methods within the form, or a method variable which will be Hidden from the form's methods.

Do not confuse the Field Identifier and Field Visibility "pseudo-properties" with the the Component class's JavaBean properties named identifier and visible. The former are code generation directives for EchoStudio. The latter are true properties that alter the state of the component.

Style Property

The Style property allows a developer to set the component's visual characteristics using an Echo Style.

Echo styles are created using the Style Editor, which is described in the Style Editor Guide.

To set a style, click in the property's value column and click the ... button. The developer will be presented with a window containing a tree of the styles applicable to the type of component being edited. The tree is grouped by StyleSheet. Selecting a style and clicking OK applies the style to the current component.

Component Events Page

The Component Events Page lists the events spawned by the highlighted component and allows you to quickly assign listeners to the events. (Figure 3) The events are grouped by their type, which is the Event's subclass in Java. For each event type, the methods defined in the Event's listener interface are enumerated. In the left column is the name of a method in the listener interface. In the right column you can specify a delegate method in the form class to call be called when that event is triggered.

Entering Delegate Methods
On some operating systems you may need to clickin the left column (on the listener method name) and hit the [Tab] key to move the focus into the right column before Eclipse will allow you to enter the delegate method's name.

Behind the scenes, EchoStudio will create a bridge from the listener interface to the method you designate in the form's class. If the method does not exist, EchoStudio will create it for you and mark it with a //TODO comment so that it appears in your list of tasks to complete.

Most components only spawn a couple of events, which are usually not of interest to application developers. However, some components are action producers: they spawn ActionEvents. These components are the foundation of Echo's event-driven user interface architecture. Assigning a listener to a component's ActionEvent will cause your application to be notified when the user performs the corresponding action. For buttons, the action is triggered by clicking; for selections, the action is changing the selection; and for text entry, the action is pressing the [Enter] key while the field has focus.