1. Technology
Send to a Friend via Email
You can opt-out at any time. Please refer to our privacy policy for contact information.

Arranging Widgets in WxRuby

Postioning Widgets in WxRuby Applications


WxRuby provides two ways to arrange widgets in your applications: by using absolute positioning or by using layout managers called sizers.

When using absolute positioning, you must define the size, position and shape of each widget individually and manually. Arranging your widgets this way is a bad idea for a number of reasons:

  • Resizing the window is impossible, since your widgets cannot grow or change position.
  • Adding widgets is difficult, many changes will need to be made.
  • Making changes such as changing the default font size will need to change the size of your widgets, but won't be able to.
  • Working out the size and position of every widget is not easy and is error-prone, which can lead to overlapping or hidden widgets.

Generally, absolute positioning is not directly used by the programmer. Instead, there are layout managers called sizers that will decide on the size and position of your widgets. When any of the conditions above change (resize window, change font size, etc), the sizers will take care of it and your application will continue to look as intended.

There are several sizers to choose from, but they're all variations on two types: the box and the grid. Boxes arrange widgets in vertical or horizontal stacks. These boxes can be combined with any other box or grid sizers to create any layout needed. The grid sizers align widgets on a grid. While this can be done using the box sizers, grid sizers are more convenient when you have grids of widgets, such as the buttons on a calculator or phone.

The box sizer is a very simple class to understand. There's a single class, Wx::BoxSizer. Its constructor takes a single parameters, either Wx::HORIZONTAL or Wx::VERTICAL. As a convenience, there are also Wx::HBoxSizer and Wx::VBoxSizer classes that are equivalent to the base class with the horizontal or vertical arguments.

Widgets are created as normal and packed inside the box sizer using one of three methods.

  • add - Append a widget, sizer or spacer to the box. If the box is horizontal, it will add to the right side of the sizer or, if vertical, to the bottom.
  • insert - Add a widget, sizer or spacer to the box at any point. This can be used to add widgets between widgets already in the sizer.
  • prepend - Add a widget, sizer or spacer to the beginning of the box. This is the opposite of add, and will add widgets to the left of horizontal boxes and to the top of vertical boxes.

Once you're finished adding widgets to the box, you have to call set_sizer on the window that's going to contain the box. The widgets are orphaned unless you do this.

In the following example, a vertical box is used to display three buttons arranged vertically. You could easily change the Wx::VERTICAL parameter to Wx::HORIZONTAL to see the buttons arranged horizontally.

 #!/usr/bin/env ruby
 require 'rubygems'
 require 'wx'
 class AppFrame < Wx::Frame
   def initialize(title)
     super( nil, :title => title )
     # The vbox object will stack widgets
     # vertically, top to bottom
     vbox = Wx::BoxSizer.new( Wx::VERTICAL )
     # Make 3 buttons, add them all to the vbox
     (1..3).each do|i|
       button = Wx::Button.new(
         "Button #{i}"
       vbox.add( button )
     # Set the window's sizer to the vbox
     set_sizer( vbox )
     # Make the application window the same size
     # as the sizer
     vbox.set_size_hints( self )
 class MyApp < Wx::App
   def on_init
     @frame = AppFrame.new("Sizer test")
 app = MyApp.new
  1. About.com
  2. Technology
  3. Ruby
  4. Graphical User Interfaces
  5. WxRuby
  6. Arranging Widgets in WxRuby--Using WxRuby Layout Managers

©2014 About.com. All rights reserved.