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 Value |
Description |
CenterHorizontal |
Flow horizontally using the space equally |
CenterVertical |
Flow horizontally using the space equally |
Down |
Flow down |
Left |
Flow to the left |
None |
Do not flow |
Right |
Flow to the right |
Up |
Flow 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