Visual User Interface Design with Eclipse

Figure 7.4. Layout Properties

The generated code for the example would be:

// myButton

myButton = new Button(); myButton.setWidth("-1px"); myButton.setHeight("-1px"); myButton.setImmediate(true); myButton.setCaption("My Button"); mainLayout.addComponent(myButton,

"top:243.0px;left:152.0px;");

The position is given as a CSS position in the second parameter for addComponent(). The values "-1px" for width and height will make the button to be sized automatically to the minimum size required by the caption.

When editing the position of a component inside an AbsoluteLayout, the editor will display vertical and horizontal guides, which you can use to set the position of the component. See Section 7.3.3, “Editing an AbsoluteLayout” for more information about editing absolute layouts.

The ZIndex setting controls the "Z coordinate" of the components, that is, which component will overlay which when they overlap. Value -1 means automatic, in which case the components added to the layout later will be on top.

7.3.3. Editing an AbsoluteLayout

The visual editor has interactive support for the AbsoluteLayout component that allows positioning components exactly at specified coordinates.You can position the components using guides that control the position attributes, shown in the control panel on the right. The position values are measured in pixels from the corresponding edge; the vertical and horizontal rulers show the distances from the top and left edge.

Figure 7.5, “Positioning with AbsoluteLayout” shows three components, a Label, a Table, and a Button, inside an AbsoluteLayout.

218	Editing an AbsoluteLayout

Visual User Interface Design with Eclipse

Figure 7.5. Positioning with AbsoluteLayout

Position attributes that are empty are automatic and can be either zero (at the edge) or dynamic to make it shrink to fit the size of the component, depending on the component. Guides are shown also for the automatic position attributes and move automatically; in Figure 7.5, “Positioning with AbsoluteLayout” the right and bottom edges of the Button are automatic.

Moving an automatic guide manually makes the guide and the corresponding the position attribute non-automatic. To make a manually set attribute automatic, empty it in the control panel. Figure 7.6, “Manually positioned Label” shows a Label component with all the four edges set manually. Notice that if an automatic position is 0, the guide is at the edge of the ruler.

Figure 7.6. Manually positioned Label

Editing an AbsoluteLayout

219