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

See also

All Component Classes

Technical Reference

LANSA Version 15, April 2020