Designer

The Form Designer allows you to design your visual interfaces by dragging and dropping components from the Tool Palette. It provides a visual representation of your form and works along with the Object Inspector to show properties/events of the selected component(s).

When a component is selected in the form designer, the HTML and JavaScript code for the component is shown on the Tag Panel. If the component has not been generated yet, a message is shown on the tag panel to inform the user. If multiple components are selected, another message is shown.

If a component is removed, all the linked components will be updated to remove the links. After a component is moved/resized, layout managers are invoked to allow them reorganize components.

A component cannot be placed outside the bounds of its parent. When two components overlap, a red mark is shown at the top left of both.

Components can have layers to specify which components are shown and to create stack based interfaces. For a component to be shown, it must not only be visible, but the Layer property must match with the ActiveLayer property of its parent. The Form Designer updates this property (Layer) when a component is placed inside another. If a component has layers, right clicking on the component shows a popup menu so you can select the active layer.

The Form Designer allows you to place components inside each other as long the parent component has the csAcceptsControl style set.

Double clicking on a component, generates its default event, in this order:

• OnClick
• OnChanged
• OnChange
• OnCreate
• The first event for the component

A Hint is provided when passing the mouse over a component. Moving a component or resizing it shows information about the operation such as the class and name of the component and the coordinates where it is located.

Modifying the elements in the form designer also modify the unit behind it. If you change the name property for a component, the field is also changed on the code unit.

A key stroke should moves the focus to the Object Inspector for typing. After you have finished modifying the current value, pressing Enter returns focus to the form designer.

Right clicking on a component, shows popup a menu with several options. If the component has a component editor assigned, right clicking provides their options, called Verbs. Clicking on any of the component editor verbs, executes the action. There is also an option on that menu to refresh selected components.