Icon Using the Control Interface Editor

The control interface editor is used for creating new control interfaces or editing existing control interfaces. It has the following layout:

Image

The unit of measure used by the interface designer is the pixel, and the resolution is always assumed to be 96 pixels per inch.

By default, the interface designer shows a grid to aid with component placement and alignment, and the grid guides (dots) are spaced apart at 8 pixel intervals. Please see the Modifying Environment Options topic for more information on modifying the interface designer grid properties.

Information If you haven't already, please make sure to read the Control Interfaces topic before proceeding. It explains the structure of control interface and many of the control interface concepts that are used in the control interface editor.

Specifying the Interface Class Name
Use the Interface Class Name combo box to select an existing control class name for a control included in the component library, or type in a new interface class name. The interface class name normally corresponds to an existing control class name, but does not always do so. However, as discussed in the Control Interfaces topic, the specified interface class name should correspond to a value returned by the protected TControl GetInterfaceClassName method for one or more controls in the component library.

Information If the interface class name does not correspond to any interface class names used by any controls in the component library, then the interface will effectively be ignored by the component library.

Adding a New Interface State
Control interfaces consist of one or more interface states. The default state is, by convention, named "Normal" and defined as the first interface state in the list of interface states.

Use the following steps to add a new interface state to the control interface:
  • Click on the Add State toolbar button:

    Image


  • The New Interface State dialog will now appear:

    Image


  • In this dialog, specify the name of the interface state that you wish to create in the first edit control.

    Optionally, next, select an existing interface state to copy by using the combo box provided.


  • Click on the OK button. A new interface state with the specified name will now appear in the list of defined interface states, and this interface state will be the selected interface state. If you copied an existing interface state, then the copied interface elements will appear in the middle element designer. If you did not copy an existing interface state, then a default "Base" element will appear in the element designer.
Removing an Existing Interface State
Use the following steps to remove an existing interface state from the control interface:
  • Click on the Remove State toolbar button:

    Image


  • A dialog similar to the following will now appear:

    Image

    The name of the specifed interface state will reflect the interface state being removed. Click Yes to remove the selected interface state, or No to cancel the removal of the interface state.
Moving an Interface State
You can use drag and drop operations with the mouse to move an interface state to a different position in the list of defined interface states. Simply click on the desired interface state with the left mouse button, hold the left mouse button down, and drag the interface state to the desired new position.

Element Inspector
The element inspector is located on the right-hand side of the control interface editor, and allows you to modify the properties of the currently-selected element in the element designer. It consists of an element selection combo box and a list of the properties of an element:

Image

To modify any property of an element, click on the desired property value, and type in the new value. If applicable, the property may have a special property editor in the form of a drop-down list or dialog that is accessible using a button to the right of the property value. Double-clicking on the property value will also automatically launch the applicable property editor.

You can get context-sensitive help on any property in the element inspector by clicking on the desired property and hitting the F1 key. For more information on using the help browser, please see the Accessing Help topic.

Adding a New Element to an Interface State
Control interface states consist of one or more interface elements. The default element is, by convention, named "Base" and defined as the base container element for the interface state.

Use the following steps to add a new element to an interface state:
  • Click on the Add Element toolbar button:

    Image


  • Click on the client area of an element in the element designer. The client area of an element is the area inside of the borders for the element.
Selecting an Element
To select a single element in the element designer, click on the desired element with the left mouse button. To select more than one element, hold down the Shift key while clicking on the desired elements with the left mouse button. Selecting multiple elements is desirable when one wants to resize or align multiple elements at the same time to ensure that their placement or size is uniform, or when one wants to copy and paste a group of elements.

Information Any time you hover the mouse over any element, tooltip information will be displayed about the element, including the name and position/size.

You can also use the mouse to directly select a group of elements using a lasso:
  • If the group of elements are placed on the base element itself, then you can click and hold down the left mouse button to begin the selection. Then, while keeping the left mouse button down, move the mouse to lasso the desired element(s).


  • If the group of elements are placed on a child element, then you can click and hold down the left mouse button, while also pressing the Ctrl key, to begin the selection. Then, while keeping the left mouse button and Ctrl key down, move the mouse to lasso the desired element(s).
Resizing an Element
Once an element has been placed on the active element's client area, you will see that the element will have designer handles on all four sides and corners of the element:

Image

These designer handles can be used to change the origin and size of an element. To accomplish this, click on a designer handle with the left mouse button, hold the left mouse button down, and drag the designer handle in the desired direction. You can also use the keyboard to resize an element by holding down the Shift key while using the up, down, right, and left arrow keys to resize the element on a pixel-by-pixel basis.

Information Certain elements may have constraints on how tall/wide they can be. In such cases, attempts to resize the element will result in the element size not exceeding the specified constraints. Also, you cannot use the left mouse button to resize elements when multiple elements are selected. In such cases, you can only use the keyboard to do so (Shift+Arrow Keys).

Moving an Element
To move an element, click on the element with the left mouse button, hold the mouse button down, and drag the element to the desired location. You can also use the keyboard to move an element by holding down the Ctrl key while using the up, down, right, and left arrow keys to move the element on a pixel-by-pixel basis. Both of these techniques also work when multiple elements are selected.

Element Layout and Alignment
The layout toolbar on the element designer can be used to adjust the alignment and layering (send to back/bring to front) of elements:

Image

Each layout toolbar button has tooltip help that explains the purpose of the button.

Deleting an Element
To delete an element, select the desired element in the element designer and hit the Delete key or click on the Remove Element toolbar button:

Image

This will also work when multiple elements are selected.

Warning Undo functionality is currently not available for the element designer, so any modifications or deletions of elements cannot be undone. Please be careful when deleting elements to ensure that one does not lose a lot of hard work. If you do accidentally delete an element, you can fix the issue by simply closing the interface without saving the modifications, and then re-opening the interface. However, this depends upon how much other work has been done to the interface since the last save point, so it is wise to save your modifications on a regular basis.
Image