FlowLayout Xojo and Real Studio Plugin

FlowLayout Control

The FlowLayout plugin helps you create a user interface design where horizontal layout of the controls is sensitive for localization as well as platform differences.

The control comes with open source subclasses of Xojo or Real Studio Label, Xojo or Real Studio Checkbox and Xojo or Real Studio 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-sizable or not. For example then a TextField by nature should not scale so no subclass of that needed. A label autoscales depending on localization 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.

RectControl
   FlowLayout

control FlowLayout

Properties

GrowModeLets you set if controls should grow to right or to left. (0 = Left, 1 = right)

Methods

AddControlAdds a control to the layout
ApplyLayoutApplies the layout
RemoveControlRemoves a control from the layout.

Remarks

Example 1


When we localize 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 Zip

When using the flow layout then this is no longer a problem, the user interface adjusts it self:



Example 2


When we localize 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 X Carbon
  • MacOS X Cocoa
  • Win32 - Windows
  • Linux x86

    Unsupported Platforms: