ExpressLayout Control: An Introduction
Purpose of this Article
This white paper provides detailed introductory information on the ExpressLayout Control. It is suitable as:
- a guide to prospective customers.
- a tutorial to help customers get the most out of the control.
Whichever category fits you, I would suggest that you read the entire paper, as the Layout Control's power and elegance may not be apparent with only a cursory review.
Although I make reference and use our other products within the examples, no previous experience with them is necessary.
Contents
Introduction
Two famous quotes:
- The world will never need more than five computers (Thomas Watson, IBM).
- 640K memory is more than will ever be needed (Bill Gates, Microsoft).
Neither of these guys allowed for the increasing sophistication of today's end-user. Gone are the days of users accepting output in the rigid form originally provided by the mainframe programmer. Today's audience expects to display their data every which way. Developer Express products have always majored on ease of providing runtime customization options. Examples include the ExpressQuantumGrid - with its grouping, sorting & filtering features - and the runtime column customization available with several of our products, which provides additional runtime end user control. Recently, our ExpressInspector product was enhanced to provide the option of a multiple column display, thus improving use of screen real-estate. The ExpressLayout Control takes this type of functionality to the next level by providing presentation control over a form and as such, has presented me with a real challenge to describe properly in this paper. By far the best way to understand this control is to play with it, since so much of it is visual, drag/drop functionality. The first problem I had was providing a top level one-liner to describe the essence of the control, but all the following are true:
- A GroupBox with full runtime customization
- A multi-styled Panel supporting nested internal panels
- A Container with full internal docking facilities
- A Runtime Form Designer
The basic concept is quite simple. You place your controls within a Layout Control and also use them as 'groups' to replace TGroupBox or other similar container controls. This then provides design and runtime movement or removal of group or item capability similar to the way in which you can dock windows in the Delphi IDE - it is really very, very cool. Thus, by linking your grids, page controls and other controls to Layout Control Items where the latter are within appropriate Groups (yes, groups can be nested), you are able to provide extremely sophisticated layouts which the user can manipulate as desired at runtime. Now developers do not need to think about pixels and absolute positioning, as ExpressLayout Control will do all this for you using Microsoft standards. You are freed to think about layout in logical terms.
Basic Concepts
The ExpressLayout Control product contains two components:
- TdxLayoutControl
- TdxLayoutLookAndFeelList
TdxLayoutLookAndFeelList manages a collection of styles for use by the main TdxLayoutControl component, as discussed later in Style Support (Look & Feel) In order to understand the TdxLayoutControl component, perhaps it is simplest to think of it as a TGroupBox on steroids. The following screenshot compares the result of dropping a set of three TEdit controls into a TGroupBox compared with a TdxLayoutControl: 
The Object TreeView highlights the initial difference in using these controls. The TdxLayoutControl contains a TdxLayoutGroup sub-component which, in turn, contains three TdxLayoutItems. As we also have three TEdits, it is logical to assume that each TdxLayoutItem is related to a TEdit. Selecting dxLayoutControlItem1. Examining the Object Inspector confirms this: 
The screenshot above tells us where the 'labels' to the left of the TEdits within the TdxLayoutControl are coming from - the TdxLayoutItem.Caption property. At this point, I decided to try and make the two container controls look the same. Setting the three TdxLayoutItem.ShowCaption properties to False removed the 'labels'. Placing a border around the TdxLayoutControl was nearly as easy and achieved by modifying the highlighted properties in the screenshot below: 
Once I had reduced the overall size of the TdxLayoutControl, I had a form now showing: 
LayoutDirection is an important property of the TdxLayoutGroup. I experimented by changing its value from ldVertical to ldHorizontal: 
As you might guess from the grab handles above, I also had to resize the control to remove the scrollbars which appeared. It is now time to introduce a very important concept, that of modes. The TdxLayoutControl operates in one of three modes:
- Normal
- Design (within the IDE only)
- Customizing
One thing to note straight away: when invoked, the Design and Customizing modes display a 'modal' form. I put modal in quotes because the invoking form is actually still accessible, but in a special way similar to how the IDE operates on forms, e.g. controls may be dragged around The Customization mode is available at design time (see 'Customize' option in the left screenshot below) and at runtime and so I describe this later - see Runtime Customization which follows later in this paper. So far, everything which I have shown you has been in normal mode. Design mode is invoked by right-clicking on the control and selecting 'Designer' from the context menu: While the designer is visible, you are able to use drag/drop to re-position items within the TdxLayoutControl or even hide them. You can drag an item from the Designer or from within the control itself, but the results are the same (the Designer and TdxLayoutControl are synchronized): 
The Edit4 control is 'hatched' to indicate that it is linked to the selected TdxLayoutItem and that it takes part in current drag and drop operations. If the item were dropped at the position shown above, Edit5 and Edit6 would change places. Depending on where you drag the item - though there are all kinds of re-arrangement possibilities. Study this next example carefully. It shows the form before and after moving Edit6:
Cool! Earlier, however, I made reference to the TdxLayoutGroup's LayoutDirection property, which can be set to ldVertical or ldHorizontal - i.e. all contained items are laid out in one of these two directions. So how is the above effect achieved? Take a look at the new state of the Object TreeView and the Designer: Herein lies the true brilliance of this product. A hidden group (with horizontal orientation) has been created behind the scenes. If I now drag Edit6 back to its original position, everything would look as before and the hidden group would be deleted automatically. Note how Edit5 has expanded to the new width required. Tip: set the MaxWidth and/or MinWidth Constraints property values in order to override this behavior. The following screenshots show other re-arrangements available via drag/drop (in before/after pairs): 
You will see that I added a group and a button in order to increase the number of display variations available. Nesting of groups is possible and drag/drop can be of a group (at any level) or of individual items. Often though, several items (i.e. window controls) always belong together and you can cater for this by placing them in a group and setting the group's Locked property. Now let us turn our attention back to the Designer window: 
I have made some other changes so that you can see the various states of groups and items displayed. dxLayoutControlGroup1 is shown as hidden. This means that it is a group which exists solely to display items (and/or groups) in a different orientation from its parent. Contrast this with dxLayoutControlGroup4, which is an invisible group. A group has this status when first created via the 'Add Group' button or when it has been dragged off the form in order to hide it. An item is shown as invisible if it has been dragged off the form or the same has happened to its parent group (or one of its ancestors). Checking 'Show Hidden Groups Bounds' can be useful when many groups exist and Delphi 6/7's Object TreeView can be invaluable too. As I explained earlier, the concept of normal and customizing modes applies at runtime also and this is now discussed in the following section, but you may wish to skip this for now and have a go at Tutorial - Getting Started first.
|