Layout on an Instant
Abstract
This article illustrates how the ExpressLayout Control allows you to easily compose complete Windows forms, that are customizable at runtime by end-users. This article contains the following sections:
Introduction
Layout development. Two words that have a great impact on the development of Windows applications and definitely on their appearance. What do these words mean? Normally they describe a tool in the form of a 'form' that addresses the needs of end-users as they expect. Let's consider layout development from the developer's and end-user's points of view. From the developer's point of view, a form represents a minimal set of controls that allow end-users to interact with their data and appears as a 'user interface'. Normally, these controls are grouped logically so as to enable end-users to easily navigate through the form's contents. To make this possible, a developer has to play the role of both a creator and designer when building a Windows form. The roles that are played are all synergies of the successful form's design. Though this is not too tedious a programming task since the form has to have both adequate visual and functional aspects to provide sufficient information to an end-user. From the end-user's point of view, a form has to let them interact with the data in the most effective way possible. The fact is that each and every end-user has their own expectations as to the way in which way the data should be displayed. So, no matter how much effort developers put into creating the form's layout, they can't satisfy everybody. This encourages the developer to provide layout customization abilities to end-users at run time, which in the long term saves a lot of frustration and effort for both the developer and end-users. This suggests having a control which allows both developers and end-users to easily customize Windows forms intuitively and effectively. These are all the features of the ExpressLayout Control, which provides you with all the tools you will need to customize the layout at design time and also provide the means for end-users to customize the layout at runtime. At the heart of the ExpressLayout Control is a basic but very powerful concept - Every control is associated with a layout 'item' which displays the control and manages its position within a 'group' - the equivalent of container controls such as the TPanel or TGroupBox - which in turn can be nested within another group. This automatically gives your applications unique design-time and runtime layout customization capabilities via a docking system similar to the Delphi/C++ Builder IDE.
Experience at Design Time
The ExpressLayout Control provides unparalleled abilities for a developer to create highly evolved and complex user interfaces in a straightforward and flexible manner, virtually on-the-fly as the design process is performed via an intuitive docking system. This greatly helps developers at design time when working on a complex layout since the position of the controls, their size and tab order are automatically determined. Also, the default behavior and settings very much help a developer to create a basic look for a form's layout in seconds. The ExpressLayout Control has plenty of options which can be used to customize the form's layout so that it will really deserve its place in an application.
Getting Started
In order to demonstrate all that was described above, let's consider a common task that needs to be accomplished. Suppose we want to make a form which will be used to enter and display information about contacts. We want to have several logical sections in the form (Personal Information, Addresses, Phones) and also see an image of the person who the details belong to. Imagine a logical section as a group of items that are relevant to the section. In other words think of a 'logical section' as a 'layout group'. That's it, and then we'll start creating the form by adding layout groups but first we need to drop the ExpressLayout Control onto the form and make it occupy the client (window) area entirely as shown in the following image. 
Adding the Groups
In order to add groups to the ExpressLayout Control, switch to Design mode by right-clicking on the control and selecting 'Designer' from the popup menu. This will open the ExpressLayout Control Designer window.
Design mode is used to arrange items and groups (their common name is 'elements'), manipulate (create and delete), navigate and set the properties of the elements within the ExpressLayout Control. This mode allows multiple layout elements to be selected within a form (using Shift keys). While in Design mode, add three groups by clicking the 'Add Group' button. Each button click invokes the 'New Group' dialog which prompts you to enter a new group caption. Do this for each group and enter a caption appropriate to the logical section it corresponds to, i.e. 'Personal Information', 'Addresses', 'Phones'.
The order in which groups are created has no effect on a form's layout since all the newly created groups and items (also called the 'available' elements) are actually invisible until a developer places them on a form. The ExpressLayout Control Designer displays such items in the same manner as they are shown in its Legend. Once the groups are created, it's time to adjust their layout. Here the ExpressLayout Control takes over, only a single manipulation with the mouse on each group is required. Start dragging the 'Personal Information' group to set its new position within the ExpressLayout Control. This results in a representation of the dragged element being displayed by the mouse pointer and its approximate location if dropped relative to the element that is currently under the mouse cursor. These representation greatly simplify the development process. 
Each group (the ExpressLayout Control is also associated with the hidden 'root group' which is a parent for all the elements) has the LayoutDirection property which controls the manner in which its immediate child elements (those at the first nesting level) are arranged within it, by default this is vertical. Whenever an element is added to a group in a position other than that specified by the group's LayoutDirection property, an auxiliary hidden group will be created for the original elements automatically. This is done so as to preserve the group's original layout direction, as can be seen in the image below which shows how the 'Phones' group was added.
Note also that the height of the 'Addresses' group is adjusted automatically according to the current layout. This demonstrates the ability of the ExpressLayout Control to stretch or align elements horizontally and vertically within their parent groups, which is controlled via the elements' AlignHorz and AlignVert properties, respectively. It's also possible to manually specify whether an element should occupy as much of its parent group's client width or height as possible, or if the element should be centered within its parent group or aligned to a specific edge (top, bottom, left or right) of the parent group - whichever best suits your needs. Nevertheless, however the elements are arranged within a form, the ExpressLayout Control does its best to adjust the appropriate properties to ensure that the form maintains a consistent look and feel. In the above example this results in the vertical alignment setting of the 'Addresses' group being adjusted automatically (the AlignVert property value is set to avClient) so that the group completely occupies the parent group’s client height. Note that in this case the parent group is actually the root group since the 'Addresses' group is nested inside it.
At this point we have only the bare structure of a form, but this will serve as the base on which we can arrange the controls.
Populating the Groups
First, we need to populate the 'Personal Information' group with the following controls, that address the corresponding data elements such as the full name (the first and last name), suffix and job title for the contact and company name: the 'Full Name' edit control, the 'Suffix', 'Job Title' and 'Company' combo boxes, respectively. Click the Close button to exit from Design mode (as it's not necessary to be in design mode to add controls to the form). Adding a new control to a specific group within the ExpressLayout Control is done in a similar manner as for a form. All you need to do is to select the required control in the component palette and then drop it at the desired position in the group as shown in the image below. 
The ExpressLayout Control automatically creates a layout item for the control which is being added to the form and associates it with the control. However, you can do this manually in Design mode by clicking the 'Add Item' button and assigning the control to the newly created item via the item's Control property to complete the association. Linking an item with a control lets you manage the position of the control within the parent group via the associated item's properties and also allows the control to have a caption which can be displayed adjacent to it, thus freeing you from having to add a label control next to it as you would normally have to do. To name a control (specify a caption for it) you need to assign the associated layout item's Caption property and set the ShowCaption property to True. For your convenience, the ExpressLayout Control initializes the item which is associated with a control to show its caption only when the control does not have a Caption property (for instance, the items linked to check box controls do not initially show captions in contrast to edit controls). The resulting form with the controls placed and appropriately named is shown in the image below. 
The Object TreeView clearly indicates that the layout items were created. The same information can be obtained from the ExpressLayout Control Designer window. Here is the look of the form and its internals so far.
As you can see the controls in the 'Personal Information' group are arranged vertically in accordance with the group's layout direction, which is vertical by default. Let's position the controls horizontally in pairs - the 'Full Name' and 'Suffix' controls in the first pair and the 'Job Title' and 'Company' combo boxes in the other one. This is a simple task since moving both an item (and its associated control) and a group to a specific position within the ExpressLayout Control can be done by drag and drop. For the items that are set to display their captions in a form, all you need to do is to drag them by their captions to the desired positions. Let's rearrange the controls in our example form as shown below. 
It's worth mentioning that you're able to select the elements in a form in various ways. The elements that are set to display their captions in a form can be selected by clicking the captions. Any group (including hidden groups) can also be selected by clicking the area between its immediate child elements. Both the ExpressLayout Control Designer window and the Object TreeView window provide the same universal approach to selecting elements (also multiple elements using Shift keys) in a form. However, we recommend using the former as it has several advantages when navigating and managing elements. Now, we've got a general look for the 'Personal Information' group but it still needs to be fine-tuned. For example, we want the controls to fit this group perfectly, so that it appears to be a solid information block. So far the ExpressLayout Control has done all the work to keep all the elements arranged within the form using the default property values that can be applied in the context of the current arrangement. The default behavior has been adequate up to this point. Any additional adjustments to the layout have to be made through the elements as the true customization abilities lie in their properties. First, let's take a look at the form in Design mode. As you can see in the following screenshot, the recent layout changes have resulted in two new auxiliary hidden groups being created.
The purpose of each of these groups is to enclose each pair of the items that we decided to position horizontally and to preserve the vertical arrangement of the elements within the 'Personal Information' group as specified by the group's LayoutDirection property. As shown in the above screenshot, the only elements inside the 'Personal Information' group are the newly created auxiliary groups which assume the same default values for their AlignHorz and AlignVert properties as the items within this group had before they were repositioned. Meanwhile, the groups' LayoutDirection properties are set to ldHorizontal to horizontally arrange the items being dragged to new positions. Each rearrangement of elements within the ExpressLayout Control implies automatic actions similar to the ones described above and it's that simple and transparent! Note also that the auxiliary groups are destroyed automatically if they aren't needed to maintain the current layout, so you don't have to worry about disposing of them. We need to adjust the alignment of the items within the auxiliary groups. In order to fit the items perfectly to the group which stretches horizontally, select all these items via the Object TreeView or by clicking their captions and setting their AlignHorz properties to ahClient. This will distribute the space occupied by the parent group evenly between the items. You still can freely specify the
exact size (in pixels) of a control. For instance, let's fix the width of the 'Suffix' combo box control to a specific value (say, 50) enough to show its values in most cases, by setting the control's Width property to 50. Since we do not want the 'Suffix' combo box control to change its width within the parent group, its associated
item's AlignHorz property should be set to the default value, ahLeft. Note that you can access the properties of the control associated with an item via the item's Control property. This is very useful in Design mode as selecting a control in this mode results in the associated item being selected. The following screenshot displays the resulting form. 
Now let us populate the 'Phones' group with several edit controls that will display the various phone numbers and an additional memo control which is used for notes and additional details. Add the controls in a manner similar to the one you used to populate the 'Personal Information' group. The following screenshot displays the resulting form with the controls appropriately named and positioned on it. 
To deal with a situation in which the 'Notes' memo control needs to have its height increased (so it shows as many details as possible) set the AlignVert property to avClient to occupy the 'Phones' group client height as shown in the image below.
The 'Addresses' group is the last layout group still empty. Within this group we would like to see three addresses (Business, Home and Other) for a contact. Let's add three memo controls and set the captions of their associated items. Since these memo controls are the only controls in the 'Addresses' group and as much of their contents needs to be displayed as is possible, we'll make them occupy the entire parent group's client height by setting the AlignVert property of the associated items to avClient, as we did for the 'Notes' memo control earlier on, as shown in the image below.
To increase the horizontal area of each address, let's position their item captions above the corresponding controls. All we need to do is to set the CaptionOptions.Layout property to clTop for their associated items.
This works well and now we are going to add an image to the form. In order to display an image for a contact, let's add the Image control and check box control which will determine whether the image should actually be shown in the form. It's a good idea to put these controls in the same group. You may be wondering why we didn't create this group at the start? This was done deliberately in order to illustrate the fact that the order in which you manage and layout controls in a form neither affects the development process in a radical way nor does it require you to manually keep the layout intact. Surprisingly, all we have to do is to add a group, two controls and then arrange these controls within the group, the rest is up to the ExpressLayout Control! Let's start by adding a new group in Design mode and naming it accordingly (say, 'Image') in a similar manner to what was done earlier. To specify that the 'Image' group has to occupy the maximum space available (as the image's size might require this), we set the group's AlignHorz property to ahClient. The AlignVert property has an appropriate value already and its set automatically at the group's creation. While in Design mode, drag the newly created group to the form as shown in the image below. 
Note that the 'Phones' group and its contents have been automatically resized so as to provide sufficient space for the group being inserted, so you don't need to do this manually. While dragging the 'Image' group, you may have noticed (and it's clearly seen in the above image) the markings (in the form of black rectangles) that indicate the approximate location and size the group will obtain if it's dropped at this moment. The first marking (the mouse pointer is outside the 'Phones' group) corresponds to the 'Image' group's position below all the visible groups in the form and the group's width is increased to match the root group's client width. The last marking (the mouse pointer is inside the 'Phones' group, at its right edge) specifies the 'Image' group's position adjacent to the right edge of the 'Phones' group at which it resides a moment later. Once the 'Image' group is positioned within the form, we can leave Design mode by clicking the Close button to add the Image and check box controls to the group. Since the item associated with the check box control is automatically set to hide its caption and the item associated with the Image control has an empty string assigned to its Caption property initially you need to enter Design mode to arrange these items within the form. While in Design mode, let's position these items within the 'Image' group, assign the check box control's Caption property, center the corresponding item horizontally and align it vertically to the bottom of the 'Image' group by setting the item's properties as shown in the following image.
Let's assume that we don't need to display either the 'Image' group's caption or its border, thus making the controls appear separated from any group but still vertically aligned. In order to do this, we need to hide the 'Image' group by setting its ShowBorder property to False. This prevents the group from being displayed in the form, except for its contents.
That's it! As we expected, adding the 'Image' group didn't require any manual rearrangements of either the groups or controls within the form. We were able to just concentrate on adding the group and its contents.
|