I recently had to write an application at work that needed to display a visual representation of database tables and list the fields contained within those tables. I also needed some method of indicating that a field in one table should be linked to a field in another table. After playing with various ideas, TMILFieldList was born.
This component is unique in a couple of aspects. First, the visual appearance of the component is that of a Windows form. It has a 3D beveled border and a colored "caption bar" with the caption text. Second, if the
Moveable property is set to True, the user can drag the component at run-time by clicking on the "caption bar". Finally, if the
Sizable property is set to true, if the user moves the mouse cursor over the edges of the component at run-time, the cursor will change to one of the eight resize cursors. If the user then presses the left mouse button and drags, the component will resize.
To meet the applications requirements, the "caption bar" was created to allow the component to display the database table that it was representing. In addition, the remainder of the component contains a TListBox that displays the names of the fields contained in the database table.
The final requirement was the ability to visually set a link between tables. To accomplish this, if the user clicks on an item in the TListBox (field name) and drags it to an item in the TListBox of another TMILFieldList component on the form, the
OnLink event for the destination component will be fired.
OnLink indicates the source and destination TMILFieldList components invovled in the drag and drop procedure. The application can then use the
Items and
ItemIndex properties of the components to determine which field was selected in each "table".
In addition to the properties mentioned, there are also properties to specify the color and font to use when painting the "caption bar" when it is Active and when it is not Active. Also, the TListBox that contains the list of field names may contain more items than are visible within the size of the component. In this case, the ScrollBars property will come in handy. Based on the desired functionality, either the Horizontal, Vertical, Both or None of the scroll bars can be displayed.
Return to the top