Table Layout Item - Flow Property

Position a control relative to another control

Member of Table Layout Item (PRIM_TBLO.Item)

Data Type - Enumeration

Details

The Flow property defines the position of a control relative to other controls with the same layout attributes.
 
The controls must all have the same Row, Column and alignment and Flow.
 
The control with the lowest DisplayPosition will start the sequence.
 
Control Sizing is not affected by flow with the result that a control will size exactly as it would if its position had not been changed.
 
A cell can have many sets of control using different flows.

Allowed Values

Enum ValueDescription
CenterHorizontalFlow horizontally using the space equally
CenterVerticalFlow horizontally using the space equally
DownFlow down
LeftFlow to the left
NoneDo not flow
RightFlow to the right
UpFlow up

Example

This example demonstrates the basic premise behind Flow.
 
The input fields are aligned TopLeft and Flow down the page, while the two buttons are aligned TopRight and flow to the left.
 
Some of the input fields are sized to fit width.

Begin_Com Role(*EXTENDS #PRIM_WEB) Height(457) Width(809) Layoutmanager(#TableLayout1)
 
   Define_Com Class(#PRIM_VS.Style) Name(#Style) Backgroundbrush(#Brush)
   Define_Com Class(#PRIM_VS.SolidBrush) Name(#Brush) Color(Theme200)
 
   Define_Com Class(#PRIM_VS.Style) Name(#Style1) Fontsize(24) Backgroundbrush(#Brush1) Foregroundbrush(#Brush2)
   Define_Com Class(#PRIM_VS.SolidBrush) Name(#Brush2) Color(Theme50)
   Define_Com Class(#PRIM_VS.SolidBrush) Name(#Brush1) Color(Theme600)
 
   Define_Com Class(#PRIM_TBLO) Name(#TableLayout1)
   Define_Com Class(#PRIM_TBLO.Column) Name(#Column1) Displayposition(1) Parent(#TableLayout1) Width(270) Units(Pixels)
   Define_Com Class(#PRIM_TBLO.Column) Name(#Column2) Displayposition(2) Parent(#TableLayout1)
   Define_Com Class(#PRIM_TBLO.Column) Name(#Column3) Displayposition(3) Parent(#TableLayout1) Width(270) Units(Pixels)
   Define_Com Class(#PRIM_TBLO.Row) Name(#Row1) Displayposition(1) Parent(#TableLayout1) Height(86) Units(Pixels)
   Define_Com Class(#PRIM_TBLO.Row) Name(#Row2) Displayposition(2) Parent(#TableLayout1) Height(231) Units(Pixels)
   Define_Com Class(#PRIM_TBLO.Row) Name(#Row3) Displayposition(3) Parent(#TableLayout1) Height(0.52)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem1) Alignment(TopLeft) Column(#Column2) Flow(Down) Manage(#Label1) Parent(#TableLayout1) Row(#Row1)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem2) Alignment(TopLeft) Column(#Column2) Flow(Down) Manage(#EMPNO) Parent(#TableLayout1) Row(#Row2) Sizing(None) Margintop(4) Marginleft(4)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem3) Column(#Column2) Manage(#SURNAME) Parent(#TableLayout1) Row(#Row2) Sizing(FitToWidth) Flow(Down) Alignment(TopLeft) Margintop(4) Marginleft(4)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem4) Column(#Column2) Manage(#GIVENAME) Parent(#TableLayout1) Row(#Row2) Sizing(FitToWidth) Flow(Down) Alignment(TopLeft) Margintop(4) Marginleft(4)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem5) Column(#Column2) Manage(#ADDRESS1) Parent(#TableLayout1) Row(#Row2) Sizing(FitToWidth) Flow(Down) Alignment(TopLeft) Margintop(4) Marginleft(4)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem6) Column(#Column2) Manage(#ADDRESS2) Parent(#TableLayout1) Row(#Row2) Sizing(FitToWidth) Flow(Down) Alignment(TopLeft) Margintop(4) Marginleft(4)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem7) Column(#Column2) Manage(#ADDRESS3) Parent(#TableLayout1) Row(#Row2) Sizing(FitToWidth) Flow(Down) Alignment(TopLeft) Margintop(4) Marginleft(4)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem8) Column(#Column2) Manage(#POSTCODE) Parent(#TableLayout1) Row(#Row2) Sizing(None) Flow(Down) Alignment(TopLeft) Margintop(4) Marginleft(4)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem9) Column(#Column2) Manage(#PHONEHME) Parent(#TableLayout1) Row(#Row2) Sizing(None) Flow(Down) Alignment(TopLeft) Margintop(4) Marginleft(4)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem10) Column(#Column2) Manage(#PHONEBUS) Parent(#TableLayout1) Row(#Row2) Sizing(None) Flow(Down) Alignment(TopLeft) Margintop(4) Marginleft(4)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem11) Alignment(TopRight) Column(#Column2) Flow(Left) Manage(#Button1) Parent(#TableLayout1) Row(#Row3) Sizing(None) Marginright(4) Margintop(4)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem12) Alignment(TopRight) Column(#Column2) Flow(Left) Manage(#Button2) Parent(#TableLayout1) Row(#Row3) Sizing(None) Marginright(4) Margintop(4)
 
   Define_Com Class(#PRIM_LABL) Name(#Label1) Caption('Employee Details') Displayposition(1) Ellipses(Word) Height(86) Left(270) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(0) Verticalalignment(Center) Width(269) Style(#Style1)
   Define_Com Class(#EMPNO.Visual) Name(#EMPNO) Componentversion(1) Displayposition(2) Height(21) Parent(#COM_OWNER) Tabposition(2) Top(90) Usepicklist(False) Width(251) Left(274)
   Define_Com Class(#SURNAME.Visual) Name(#SURNAME) Displayposition(3) Parent(#COM_OWNER) Tabposition(3) Top(115) Left(274) Width(265)
   Define_Com Class(#GIVENAME.Visual) Name(#GIVENAME) Displayposition(4) Parent(#COM_OWNER) Tabposition(4) Top(140) Left(274) Width(265)
   Define_Com Class(#ADDRESS1.Visual) Name(#ADDRESS1) Displayposition(5) Parent(#COM_OWNER) Tabposition(5) Top(165) Left(274) Width(265)
   Define_Com Class(#ADDRESS2.Visual) Name(#ADDRESS2) Componentversion(1) Displayposition(6) Height(21) Parent(#COM_OWNER) Tabposition(6) Top(190) Usepicklist(False) Width(265) Left(274)
   Define_Com Class(#ADDRESS3.Visual) Name(#ADDRESS3) Componentversion(1) Displayposition(7) Height(21) Parent(#COM_OWNER) Tabposition(7) Top(215) Usepicklist(False) Width(265) Left(274)
   Define_Com Class(#POSTCODE.Visual) Name(#POSTCODE) Componentversion(1) Displayposition(8) Height(21) Parent(#COM_OWNER) Tabposition(8) Top(240) Usepicklist(False) Width(266) Left(274)
   Define_Com Class(#PHONEHME.Visual) Name(#PHONEHME) Componentversion(1) Displayposition(9) Height(21) Parent(#COM_OWNER) Tabposition(9) Top(265) Usepicklist(False) Width(394) Left(274)
   Define_Com Class(#PHONEBUS.Visual) Name(#PHONEBUS) Componentversion(1) Displayposition(10) Height(21) Parent(#COM_OWNER) Tabposition(10) Top(290) Usepicklist(False) Width(394) Left(274)
   Define_Com Class(#PRIM_PHBN) Name(#Button1) Caption('Cancel') Displayposition(11) Left(455) Parent(#COM_OWNER) Tabposition(11) Top(321)
   Define_Com Class(#PRIM_PHBN) Name(#Button2) Caption('Save') Displayposition(12) Left(371) Parent(#COM_OWNER) Tabposition(12) Top(321)
 
End_Com

Example

This second example shows how different sets of contorls can have different layout positions, flows and margins.

Begin_Com Role(*EXTENDS #PRIM_WEB) Height(457) Width(809) Layoutmanager(#TableLayout1)
 
   Define_Com Class(#PRIM_VS.Style) Name(#Style) Backgroundbrush(#Brush2)
   Define_Com Class(#PRIM_VS.SolidBrush) Name(#Brush2) Color(Theme200)
 
   Define_Com Class(#PRIM_TBLO) Name(#TableLayout1)
   Define_Com Class(#PRIM_TBLO.Column) Name(#Column1) Displayposition(1) Parent(#TableLayout1) Width(0.57)
   Define_Com Class(#PRIM_TBLO.Column) Name(#Column2) Displayposition(2) Parent(#TableLayout1) Width(1.9)
   Define_Com Class(#PRIM_TBLO.Column) Name(#Column3) Displayposition(3) Parent(#TableLayout1) Width(0.53)
   Define_Com Class(#PRIM_TBLO.Row) Name(#Row1) Displayposition(1) Parent(#TableLayout1) Height(0.56)
   Define_Com Class(#PRIM_TBLO.Row) Name(#Row2) Displayposition(2) Parent(#TableLayout1) Height(1.92)
   Define_Com Class(#PRIM_TBLO.Row) Name(#Row3) Displayposition(3) Parent(#TableLayout1) Height(0.52)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem1) Alignment(TopLeft) Column(#Column2) Flow(Right) Manage(#Button1) Parent(#TableLayout1) Row(#Row2) Sizing(None) Margintop(2) Marginleft(2) Marginright(2)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem2) Alignment(TopLeft) Column(#Column2) Flow(Right) Manage(#Button2) Parent(#TableLayout1) Row(#Row2) Sizing(None) Margintop(8) Marginleft(2) Marginright(2)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem3) Alignment(TopLeft) Column(#Column2) Flow(Right) Manage(#Button3) Parent(#TableLayout1) Row(#Row2) Sizing(None) Margintop(2) Marginleft(2)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem4) Alignment(TopRight) Column(#Column2) Flow(Down) Manage(#Button4) Parent(#TableLayout1) Row(#Row2) Sizing(None) Margintop(2) Marginright(2) Marginbottom(2)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem5) Alignment(TopRight) Column(#Column2) Flow(Down) Manage(#Button5) Parent(#TableLayout1) Row(#Row2) Sizing(None) Margintop(2) Marginright(15) Marginbottom(2)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem6) Alignment(TopRight) Column(#Column2) Flow(Down) Manage(#Button6) Parent(#TableLayout1) Row(#Row2) Sizing(None) Margintop(2) Marginright(2) Marginbottom(2)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem7) Alignment(BottomRight) Column(#Column2) Flow(Left) Manage(#Button7) Parent(#TableLayout1) Row(#Row2) Sizing(None) Marginleft(2) Marginright(2) Marginbottom(2)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem8) Alignment(BottomRight) Column(#Column2) Flow(Left) Manage(#Button8) Parent(#TableLayout1) Row(#Row2) Sizing(None) Marginleft(2) Marginright(2) Marginbottom(45)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem9) Alignment(BottomRight) Column(#Column2) Flow(Left) Manage(#Button9) Parent(#TableLayout1) Row(#Row2) Sizing(None) Marginleft(2) Marginright(2) Marginbottom(2)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem10) Alignment(BottomLeft) Column(#Column2) Flow(Up) Manage(#Button10) Parent(#TableLayout1) Row(#Row2) Sizing(None) Margintop(2) Marginleft(2) Marginbottom(2)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem11) Alignment(BottomLeft) Column(#Column2) Flow(Up) Manage(#Button11) Parent(#TableLayout1) Row(#Row2) Sizing(None) Margintop(2) Marginleft(2) Marginbottom(2)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem12) Alignment(BottomLeft) Column(#Column2) Flow(Up) Manage(#Button12) Parent(#TableLayout1) Row(#Row2) Sizing(None) Margintop(2) Marginleft(10) Marginbottom(2)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem16) Column(#Column2) Manage(#Panel1) Parent(#TableLayout1) Row(#Row2) Margintop(-4) Marginbottom(-4) Marginleft(-4) Marginright(-4)
 
   Define_Com Class(#PRIM_PHBN) Name(#Button1) Caption('Button1') Displayposition(1) Left(156) Parent(#COM_OWNER) Tabposition(1) Top(88)
   Define_Com Class(#PRIM_PHBN) Name(#Button2) Caption('Button2') Displayposition(2) Left(240) Parent(#COM_OWNER) Tabposition(11) Top(94) Height(35) Width(104)
   Define_Com Class(#PRIM_PHBN) Name(#Button3) Caption('Button3') Displayposition(3) Left(348) Parent(#COM_OWNER) Tabposition(12) Top(88)
   Define_Com Class(#PRIM_PHBN) Name(#Button4) Caption('Button4') Displayposition(4) Left(585) Parent(#COM_OWNER) Tabposition(10) Top(88)
   Define_Com Class(#PRIM_PHBN) Name(#Button5) Caption('Button5') Displayposition(5) Left(515) Parent(#COM_OWNER) Tabposition(9) Top(117) Width(137)
   Define_Com Class(#PRIM_PHBN) Name(#Button6) Caption('Button6') Displayposition(6) Left(585) Parent(#COM_OWNER) Tabposition(8) Top(146) Height(43)
   Define_Com Class(#PRIM_PHBN) Name(#Button7) Caption('Button7') Displayposition(7) Left(585) Parent(#COM_OWNER) Tabposition(7) Top(351)
   Define_Com Class(#PRIM_PHBN) Name(#Button8) Caption('Button8') Displayposition(8) Left(501) Parent(#COM_OWNER) Tabposition(6) Top(264) Height(69)
   Define_Com Class(#PRIM_PHBN) Name(#Button9) Caption('Button9') Displayposition(9) Left(417) Parent(#COM_OWNER) Tabposition(5) Top(351)
   Define_Com Class(#PRIM_PHBN) Name(#Button10) Caption('Button10') Displayposition(10) Left(156) Parent(#COM_OWNER) Tabposition(4) Top(351)
   Define_Com Class(#PRIM_PHBN) Name(#Button11) Caption('Button11') Displayposition(11) Left(156) Parent(#COM_OWNER) Tabposition(3) Top(280) Height(67) Width(125)
   Define_Com Class(#PRIM_PHBN) Name(#Button12) Caption('Button12') Displayposition(12) Left(164) Parent(#COM_OWNER) Tabposition(2) Top(251) Width(149)
   Define_Com Class(#PRIM_PANL) Name(#Panel1) Displayposition(13) Left(150) Parent(#COM_OWNER) Tabposition(13) Tabstop(False) Top(82) Height(300) Width(521) Style(#Style)
 
End_Com

See also

All Component Classes

Technical Reference

Febuary 18 V14SP2