In accordance with most modern web application frameworks DataFlex does not support the use of absolute coordinate positioning of controls. Instead the underlying positioning system is “flow layout”, which simply positions controls as they occur, from left to right and top to bottom.
The order of control objects in your view determines the position of the control in the layout.
Two additional layout mechanisms are supported that help you to manage the flow: panels and columns.
cWebPanel objects can be used to divide the layout of your view or dialog into regions: top, bottom, left, right and center. Set the peRegion property to determine which region a web panel will occupy.
The following image illustrates a web view that is divided into Top, Bottom, Left, Right and center panels. Each panel then contains a single cWebLabel control.
The source code required to create this view is presented below…
Object oPanelView is a cWebView
Set psCaption to "Multi Panel View"
Set piHeight to 300
Set piWidth to 300
Object oTopPanel is a cWebPanel
Set peRegion to prTop
Set psBackgroundColor to "Blue"
Object oTopLabel is a cWebLabel
Set psCaption to "Top"
Set psBackgroundColor to "#AAAAFF"
Set peAlign to alignCenter
End_Object
End_Object
Object oCenterPanel is a cWebPanel
Set psBackgroundColor to "Orange"
Object oCenterLabel is a cWebLabel
Set psCaption to "Center"
Set psBackgroundColor to "#FFDDAA"
Set peAlign to alignCenter
Set pbFillHeight to True
End_Object
End_Object
Object oLeftPanel is a cWebPanel
Set peRegion to prLeft
Set psBackgroundColor to "#4343FB"
Set piWidth to 60
Object oLeftLabel is a cWebLabel
Set psCaption to "Left"
Set psBackgroundColor to "#AAAAFF"
Set peAlign to alignCenter
Set pbFillHeight to True
End_Object
End_Object
Object oRightPanel is a cWebPanel
Set peRegion to prRight
Set psBackgroundColor to "#4343FB"
Set piWidth to 60
Object oRightLabel is a cWebLabel
Set psCaption to "Right"
Set psBackgroundColor to "#AAAAFF"
Set peAlign to alignCenter
Set pbFillHeight to True
End_Object
End_Object
Object oBottomPanel is a cWebPanel
Set peRegion to prBottom
Set psBackgroundColor to "Blue"
Object oBottomLabel is a cWebLabel
Set psCaption to "Bottom"
Set psBackgroundColor to "#AAAAFF"
Set peAlign to alignCenter
End_Object
End_Object
End_Object
Set the piHeight property to set the height (in pixels) of top and bottom panels.
Set the piWidth property to set the width (in pixels) of left and right panels.
Set the pbResizable property to True for left, right, top or bottom panels to enable a “splitter” bar that allows the height of top and bottom panels or the width of left and right panels to be resized at run time.
Panel objects can contain one or more control objects (such as cWebButton or cWebForm). The controls are contained within the panels and each panel organizes its controls into a separate flow layout.
There are some simple rules that must be followed when using panels…
cWebPanel objects cannot be siblings of web control objects such as cWebButton or cWebForm. Place web controls inside your cWebPanel objects.
Each sibling cWebPanel must belong to a different region. For example a cWebView cannot have two top panels or two bottom panels as direct child objects.
Each set of sibling cWebPanel objects must contain one (and only one) center panel (i.e. peRegion = prCenter). This is to ensure that the panels can correctly divide and occupy all of the space provided by their parent container. Top, bottom, left and right panels are optional.
A more complex panel layout can be achieved by dividing panels into sub-panels. This is achieved by declaring a set of cWebPanel objects inside an existing panel.
The following image illustrates the previous web view where the right panel has been subdivided into right-top, right-center, and right-bottom.
The source code required to modify the right panel from the previous example is presented below…
Object oRightPanel is a cWebPanel
Set peRegion to prRight
Set piWidth to 60
Object oRightTopPanel is a cWebPanel
Set peRegion to prTop
Set psBackgroundColor to "Red"
Object oRTLabel is a cWebLabel
Set psBackgroundColor to "#FFAAAA"
Set psCaption to "RT"
Set peAlign to alignCenter
End_Object
End_Object
Object oRightCenterPanel is a cWebPanel
Set psBackgroundColor to "Red"
Object oRCLabel is a cWebLabel
Set psBackgroundColor to "#FFAAAA"
Set psCaption to "RC"
Set peAlign to alignCenter
Set pbFillHeight to True
End_Object
End_Object
Object oRightBottomPanel is a cWebPanel
Set peRegion to prBottom
Set psBackgroundColor to "Red"
Object oRBLabel is a cWebLabel
Set psBackgroundColor to "#FFAAAA"
Set psCaption to "RB"
Set peAlign to alignCenter
End_Object
End_Object
End_Object
The rules which apply when dividing a view into panels also apply when dividing a panel into sub-panels.
There is no technical limit to how many layers of sub-panel you can create, however more than two levels of sub-panel division is probably of little practical use.
To regulate the size and flow-positioning of controls, a view (or panel) can be divided into any number of equal-width columns. Each child control will be positioned in its designated column and the control’s width will occupy one or more column widths.
Columns provide a fast and simple way to vertically align controls and to ensure that control widths line up evenly to fixed positions.
The following image illustrates a view where the horizontal position and widths of cWebForm controls fit into a view’s column layout.
Set the piColumnCount property of the cWebView or cWebPanel object to determine how many columns it is divided into.
The fewer columns you have, the easier and faster it is to reorganize the layout of controls. The more columns you have, the more choice you will have over position and size of each control. We have found that 10 columns or so for a panel that is around 700 pixels wide is a good choice.
When you divide a view or panel into too many columns then the column layout acts more like an absolute positioning system, at least for the width and horizontal position of each control.
Set piColumnIndex to determine which column the control occupies. Column numbering starts at 0. By default each control’s piColumnIndex is set to zero which means it will occupy the left-most layout column of its parent View (or panel).
Set piColumnSpan to determine the width of a control (and its label) as expressed by the number of layout columns that it spans. By default most control’s piColumnSpan is set to zero which means that it spans all available columns.
The source code required to build the column layout shown in the previous image appears below…
Object oColumnLayout is a cWebView
Set piWidth to 600
Set psCaption to "Column Layout View"
Set piColumnCount to 3
Object oWebForm1 is a cWebForm
Set piColumnSpan to 1
Set psLabel to "Web Form 1:"
Set piLabelOffset to 90
End_Object
Object oWebForm2 is a cWebForm
Set piColumnSpan to 1
Set piColumnIndex to 1
Set psLabel to "Web Form 2:"
Set piLabelOffset to 90
End_Object
Object oWebForm3 is a cWebForm
Set piColumnSpan to 1
Set piColumnIndex to 2
Set psLabel to "Web Form 3:"
Set piLabelOffset to 90
End_Object
Object oWebForm4 is a cWebForm
Set piColumnSpan to 1
Set psLabel to "Web Form 4:"
Set piLabelOffset to 90
End_Object
Object oWebForm5 is a cWebForm
Set piColumnSpan to 2
Set piColumnIndex to 1
Set psLabel to "Web Form 5:"
Set piLabelOffset to 90
End_Object
Object oWebForm6 is a cWebForm
Set piColumnSpan to 3
Set psLabel to "Web Form 6:"
Set piLabelOffset to 90
End_Object
End_Object
In the above example the controls are arranged into three vertical columns. The cWebView object sets a piColumnCount of 3. The controls are either piColumnIndex of 0, 1 or 2 and piColumnSpan is set to 1, 2 or 3.
An alternative could be to set the piColumnCount to 9 instead of three, then multiply each piColumnCount and piColumnIndex value in the above code by 3. This would produce an identical result but with the added flexibility of allowing a finer adjustment if you wanted to modify the layout later.
Realize that for controls which include a label (e.g cWebForm) the width of the control includes the width occupied by its label. The piLabelOffset property allows you to adjust the amount of space that is occupied by a control’s label (in pixels). Set piLabelOffset < 120 to reduce the label width, or > 120 to increase the label width.
The Studio’s Web View wizard provides a column layout tool that will help you to set the initial layout of your selected objects. The preview button allows you to review the layout visually. This is a good tool to learn the relationship between the piColumnCount, piColumnIndex, piColumnSpan and piLabelOffset properties.
There are some simple rules that govern how piColumnIndex and piColumnSpan are interpreted in a set of multiple controls…
The piColumnIndex of a control cannot exceed the number of columns in the parent view or panel. Remember that piColumnIndex is 0-based so if the view’s piColumnCount = 9 then the control’s piColumnIndex must be between 0 and 8.
If you declare two consecutive control objects (e.g. two cWebForm objects) both with the same piColumnIndex value, then they will both occupy the same column. Flow-layout rules then determine that one control will be positioned above the other. This is determined by the order the objects are declared in your code.
If you want two consecutive control objects to occupy the same row in the layout then set the piColumnIndex of the second object to a value >= the first object’s piColumnIndex + piColumnSpan. For example review oWebForm1, oWebForm2 and oWebForm3 in the above example.
When you display a web view (or dialog) in the Studio’s WebApp Previewer and select one of the web view’s web object in the Code Explorer, you can see the column index and column span occupied by that object.
The following image illustrates part of the Order Entry view in the previewer where the “Zip” cWebForm is selected and highlights its column index and column span.
Previous Topic: Web Application Flow
Next Topic: Managing Web Control Visibility