Lotus BeanMachine Reference Guide

The Composer


The Composer displays the spatial layout of the parts of an applet. Selecting Preview Mode from the View pulldown shows only the visible parts and reduces the applet canvas to the minimum required size so you can get a better feel of how the applet will actually look when it runs.

Selecting Parts
There are three methods by which you can select parts. The first is simple selection, which occurs when you click on a part. The part will display a solid selection border. If the part you selected is resizable, you'll also see draggable sizing handles.

The second method is multiple selection. To select multiple parts, click on a part, hold down the Shift key and select another part. The first part you selected is referred to as the anchor part and it will display solid black selection handles. The other parts will have hollow selection handles. If the parts you select are not resizable parts, you'll see a dark blue selection border for the anchor part and light blue selection borders for all other selected parts.

You can also use the Selected Part drop-down list on the main toolbar to select a part. This is especially handy if you're trying to find a particular part by name, or if the part you want to select is hidden from view.

Positioning Parts
Since applets are viewed through many different browsers and on many different kinds of displays, BeanMachine helps you adjust the layout of parts in the applet canvas by using either positional, border, or flowed layout styles. You choose the layout you want by setting the layout property of the applet canvas.

Positional layout allows you to keep the parts at the precise x and y position where you arranged them in WYSIWYG fashion. Border layout arranges the parts at the compass points: north, south, east, west, and/or center. Flowed layout arranges the parts left-to-right, top-to-bottom. When you set the layout property of the applet canvas to either Border or Flowed, the layout area displays drop guides to indicate where you are able to drop new parts.

Border layout is especially useful when you are designing an applet in which you want to divide the applet canvas into distinct sections. For example, you can use the north and south positions for a header and footer respectively.

Flowed layout is useful when you are designing an applet in which you want all the parts of your applet to be aligned vertically or horizontally. For example, if you are creating a navigation bar for a web page from a series of similarly shaped rollover buttons. Flowed layout also ensures that regardless of the size of the browser's window, your applet will not be clipped since when the end of the window is reached, the parts automatically flow to fill the necessary space.

The best way to learn about the different layout styles in BeanMachine is to experiment with each to determine which is best for your applet.

You can also use the rulers on the Composer to position parts relative to each other. The large hash marks represents units of 50 pixels and the smaller hash marks represent units of 10 pixels each.

For exact placement, select the part you want to move and use the cursor keys on the keyboard to nudge your parts 1 pixel at a time.

Sizing Parts
There are two ways to set the size of media in the Composer. You can either set the size of the media yourself, or have BeanMachine do it for you automatically. When a visual part is first dropped onto the Composer, its size is set to the default size as defined for that particular part. For example, if you click once to drop an image part onto the applet canvas, BeanMachine displays a small box for the image that is 50 pixels wide by 50 pixels high. When media is then loaded into the part, the size of the part adjusts automatically to match the size of the loaded media. If your picture is 100 by 100 pixels, the image part will expand to 100 x 100 pixels. This automatic adjustment of size is referred to as "preferred size." To set a part's size to preferred at anytime, select the part and then select Preferred Size from the Layout pulldown or click the Preferred button in the size and position property dialog of the Properties tab.

You can also set the size of media manually by first dropping the part and then modifying its height and width in the size and position property in the Properties tab of the Details window. You can also drop the part onto applet canvas and, while holding the mouse button down, drag the part to size it manually.

Directly Editing Parts
With BeanMachine, you can directly edit the text of parts on the applet canvas. For example, with a button selected, click on it again and a text cursor appears so you can modify the label or message. When you are directly editing the text in this way, a click of the right mouse button will produce a pop-up with full clipboard functionality (cut, copy paste, etc).