Visual User Interface Design with Eclipse

7.3.2. Setting Component Properties

The property setting sub-panel of the control panel allows setting component properties. The panel has two tabs: Layout and Properties, where the latter defines the various basic properties.

Basic Properties

The top section of the property panel, shown in Figure 7.3, “Basic Component Properties”, allows setting basic component properties. The panel also includes properties such as field properties for field components.

Figure 7.3. Basic Component Properties

The properties are as follows:

Name

The name of the component, which is used for the reference to the component, so it must obey Java notation for variable names.

Style Name

A space-separated list of CSS style class names for the component. See Chapter 8, Themes for information on component styles in themes.

Caption

The caption of a component is usually displayed above the component. Some components, such as Button, display the caption inside the component. For Label text, you should set the value of the label instead of the caption, which should be left empty.

216	Setting Component Properties

Visual User Interface Design with Eclipse

Description (tooltip)

The description is usually displayed as a tooltip when the mouse pointer hovers over the component for a while. Some components, such as Form have their own way of displaying the description.

Icon

The icon of a component is usually displayed above the component, left of the caption. Some components, such as Button, display the icon inside the component.

Formatting type

Some components allow different formatting types, such as Label, which allow formatting either as Text, XHTML, Preformatted, and Raw.

Value

The component value. The value type and how it is displayed by the component varies between different component types and each value type has its own editor. The editor opens by clicking on the ... button.

Most of the basic component properties are defined in the Component interface; see Section 5.2.1, “Component Interface” for further details.

Layout Properties

The size of a component is determined by its width and height, which you can give in the two edit boxes in the control panel. You can use any unit specifiers for components, as described in Section 5.3.9, “Sizing Components”. Emptying a size box will make the size "automatic", which means setting the size as undefined. In the generated code, the undefined value will be expressed as "-1px".

Setting width of "100px" and auto (undefined or empty) height would result in the following generated settings for a button:

// myButton

myButton = new Button();

...

myButton.setHeight("-1px"); myButton.setWidth("100px");

...

Figure 7.4, “Layout Properties” shows the control panel area for the size and position.

Setting Component Properties

217