In this tutorial we will discuss the wxRuby FlexGridSizer Layout Sizer.

The BoxSizer is one of the sizers in wxRuby designed to help with the layout management of widgets in the window. The FlexGridSizer inherits from GridSizer, so it’s mostly the same. The difference is with the ability to modify rows and columns into "Growable" rows and columns which can change their size.

In this example we’ll build a simple Form using the wxRuby FlexGridSizer.

First, we create a BoxSizer to act as a wrapper around the FlexGridSizer. The idea is to use the BoxSizer to create some padding between the widgets in the FlexGridSizer and the edges of the window. (Try it both ways, with and without the wrapper).

wrapper = Wx::VBoxSizer.new

Next we create a FlexGridSizer, by passing in four arguments. The first two are for the number of rows and columns respectively. The last two parameters are for the vertical and horizontal gap (padding) between the rows and columns.

sizer = Wx::FlexGridSizer.new(3, 2, 5, 5)

It’s now time to add widgets. For the TextCtrl widgets, we pass in the Wx::EXPAND parameter so that it expands.

    [[Wx::StaticText.new(@panel, label: 'Username')],
     [Wx::TextCtrl.new(@panel), 0, Wx::EXPAND],
     [Wx::StaticText.new(@panel, label: 'Password')],
     [Wx::TextCtrl.new(@panel), 0, Wx::EXPAND],
     [Wx::StaticText.new(@panel, label: 'Address')],
     [Wx::TextCtrl.new(@panel, style: Wx::TE_MULTILINE|Wx::TE_NO_VSCROLL), 0, Wx::EXPAND]
].each { |args| sizer.add(*args) }

It’s also essential (in this case), we specify that the third row (second index), and second column (first index) should be growable. This allows them to expand beyond their default size. The second parameter is the proportion with which they grow.

Passing in 1 into both allows them both to grow equally. Passing in 1 and 2, would cause one to grow twice as much as the other.

sizer.add_growable_row(2, 1)
sizer.add_growable_col(1, 1)

Finally we add the FlexGridSizer object we made into the BoxSizer, along with some borders for padding purposes. Lastly, we set the BoxSizer to the Panel.

wrapper.add(sizer, Wx::SizerFlags.new(1).expand.border(Wx::ALL, 15))
@panel.sizer = wrapper

The complete code and output is as follows.

require 'wx'

class MyWindow < Wx::Frame
  def initialize(title)
    super(nil, title: title)
    @panel = Wx::Panel.new(self)

    wrapper = Wx::HBoxSizer.new

    sizer = Wx::FlexGridSizer.new(3, 2, 5, 5)

    [[Wx::StaticText.new(@panel, label: 'Username')],
     [Wx::TextCtrl.new(@panel), 0, Wx::EXPAND],
     [Wx::StaticText.new(@panel, label: 'Password')],
     [Wx::TextCtrl.new(@panel), 0, Wx::EXPAND],
     [Wx::StaticText.new(@panel, label: 'Address')],
     [Wx::TextCtrl.new(@panel, style: Wx::TE_MULTILINE|Wx::TE_NO_VSCROLL), 0, Wx::EXPAND]
    ].each { |args| sizer.add(*args) }

    sizer.add_growable_row(2, 1)
    sizer.add_growable_col(1, 1)

    wrapper.add(sizer, Wx::SizerFlags.new(1).expand.border(Wx::ALL, 15))
    @panel.sizer = wrapper

    centre
  end
end

Wx::App.run do
  window = MyWindow.new("wxRuby FlexGridSizer Guide")
  window.show
end

The output:

There are many other Sizers in wxRuby that you can use instead of FlexGridSizer. In fact, the best layouts are often the result of combining several different types of Sizers. This can be done by simply nesting them into each other. There is no limitation to this ability.

• BoxSizer
• StaticBoxSizer (a variant of BoxSizer)
• WrapSizer (another variant of BoxSizer)
• GridSizer
• GridBagSizer (a variant of FlexGridSizer)

You can learn more about these sizers by reading the guide on layout managers in wxRuby.