FlowLayout Plugin for Xojo |
|
FlowLayout Control
The FlowLayout plugin helps you create a user interface design where horizontal layout of the controls is sensitive for localisation as well as platform differences.
The control comes with open source subclasses of Xojo Label, Xojo Checkbox and Xojo PushButton, which can be hooked into the FlowLayout. Even if there are just those three controls then any control can be hooked to the FlowLayout, it is just a matter of if the control should be auto-sizeable or not. For example then a TextField by nature should not scale so no subclass of that needed. A label autoscales depending on localisation or platform while a TextField would only move to make space for a bigger label, which is why no subclass is needed for the TextField.
This version of the control is for use on old style Xojo Window class.
RectControl
FlowLayout
control FlowLayout
Properties
Enabled (Inherited) | Determines if the control should be enabled when the owning window is opened. |
GrowMode | Lets you set if controls should grow to right or to left. (0 = Left, 1 = right) |
Height (Inherited) | The height (in points) of the control. |
Left (Inherited) | The left side of the control in local coordinates (relative to the window) |
Top (Inherited) | The top of the control in local coordinates (relative to the window). |
Visible (Inherited) | Determines whether the control is visible when its owning window is opened. The default is True: the control is visible. |
Width (Inherited) | The width (in points) of the control. |
Methods
Events
ConstructContextualMenu (Inherited) | This event is called when it is appropriate to display a contextual menu for the control. |
ContextualMenuItemSelected (Inherited) | Fires when a contextual menuitem selectedItem was selected but the MenuItemSelected event and the MenuHandler for the MenuItem did not handle the menu selection. |
DragEnter (Inherited) | Fires when the passed DragItem enters the RectControl. |
DragExit (Inherited) | Fires when the passed DragItem exits the RectControl. |
DragOver (Inherited) | Fires when the DragItem is over the RectControl. |
DropObject (Inherited) | The item represented by Obj has been dropped on the control. |
KeyDown (Inherited) | The user has pressed the Key passed while the control has the focus. |
KeyUp (Inherited) | Fires when the passed Key is released in the control that has the focus. |
MouseDrag (Inherited) | The mouse button was pressed inside the control and moved (dragged) at the location local to the control passed in to x, y. The user has moved the mouse inside the control while the mouse button is held down. This event handler receives parameters that indicate where the mouse is in coordinates local to the control. |
MouseEnter (Inherited) | The mouse has entered the area of the control. |
MouseExit (Inherited) | The mouse has left the area of the control. |
MouseMove (Inherited) | The mouse has moved within the control to the coordinates passed. The coordinates are local to the control, not to the window. |
MouseUp (Inherited) | The mouse button was released. Use the x and y parameters to determine if the mouse button was released within the control's boundaries. |
MouseWheel (Inherited) | The mouse wheel has been moved. |
Constants
Version = 4.5 | |
Remarks
Example 1
When we localise this for example to Icelandic then normally the result would be something like this:
Notice how there was not enough space for the translation of ZipWhen using the flow layout then this is no longer a problem, the user interface adjusts it self:
Example 2
When we localise this for example to Icelandic then normally the result would be something like this:
When using the flow layout then this is no longer a problem, the user interface adjusts it self:
In same way the FlowLayout can help you ease the pain of platform differences when dealing with user interface that is sensitive to horizontal space. For example the space the text would have taken on Linux systems almost certainly would not be the same, but the FlowLayout handles that.
This user interface here bellow has three logical groups of controls that affect each other horizontally, therefore there are three FlowLayout controls controlling this user interface. The picture bellow has highlighted the three logical groups.

The FlowLayout that has the buttons has the GrowMode property set to Right, which means that if the buttons need to grow in other language or on other platform then they will make use of the space to the right.
The other two flow layouts above have the GrowMode property set to Left.
Supported Platforms:
macOS Intel 32 bitmacOS Intel 64 bitmacOS Apple SiliconWindows 32 bitWindows 64 bitWindows ARM 64 bitLinux 32 bitLinux 64 bitLinux ARM 32 bitLinux ARM 64 bit