In this tutorial we will explore how to create a simple toolbar in wxRuby. A toolbar is a useful menu-like control that appears on your Window with a bunch of icons which act as buttons. These icons are linked to methods, such as a Save icon triggering a #save method.

Overall the Wx::ToolBar is an important widget, which will add a lot of flavor and user-friendliness to your wxRuby app.

There are two ways of creating a ToolBar in wxRuby. You can either use the #create_tool_bar method on the frame or create the ToolBar using its constructor.

class Wx::ToolBar
  def initialize(parent, id, pos = Wx::DEFAULT_POSITION, size = Wx::DEFAULT_SIZE, style = Wx::TB_HORIZONTAL, name = Wx::TOOL_BAR_NAME_STR)
end

The first method is preferred as it helps shorten your code and looks simpler. We’ll be using this method later in our examples.

A list of available styles for the wxRuby Toolbar widget:

A list of useful methods for the wxRuby ToolBar:

A small example showing how to create a ToolBar, add in some icons and an image showing what it all looks like.

We’ve used the #create_tool_bar method to create a Toolbar, to which we add a few "Tools". We’ve added two simple tools using the #add_tool method.

require 'wx'

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

    @toolbar = create_tool_bar
 
    # Tool 1
    @toolbar.add_tool(Wx::ID_ANY, 'Open', Wx::Bitmap(:open))
 
    # Tool 2
    @toolbar.add_tool(Wx::ID_ANY, 'Save', Wx::Bitmap(:save))

    @toolbar.realize
    
    centre
  end
end

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

The output of the above code:

Note: To run this example you will need the bitmap files too. Download those here and here.

In this example we will add a Check tool in our ToolBar.

The #add_check_tool method is used the same way as #add_tool, but it adds some extra functionality. The Tool that is created behaves like a Wx::ToggleButton. When you click it once, it will be highlighted with a blue color and turn "on". Clicking it again will turn it off.

Remember to call the #realize method in the end, otherwise the tools will not show up on the ToolBar.

require 'wx'

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

    @toolbar = create_tool_bar
 
    # Tool 1
    @toolbar.add_tool(Wx::ID_ANY, 'Open', Wx::Bitmap(:open))
 
    # Tool 2
    @toolbar.add_tool(Wx::ID_ANY, 'Save', Wx::Bitmap(:save))

    # Tool 3
    @toolbar.add_check_tool(Wx::ID_ANY, 'Center', Wx::Bitmap(:center))
    
    @toolbar.realize
    
    centre
  end
end

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

The output, where we have selected the Center tool option:

Note: To run this example you will need the bitmap files too. Download those here, here and here.

In this example we will add a Control tool in our ToolBar.

The control widget must first be created (such as a Wx::ComboBox), and parented to the Toolbar. It can then be added to the ToolBar using the #add_cControl method.

require 'wx'

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

    @toolbar = create_tool_bar
 
    # Tool 1
    @toolbar.add_tool(Wx::ID_ANY, 'Open', Wx::Bitmap(:open))
 
    # Tool 2
    @toolbar.add_tool(Wx::ID_ANY, 'Save', Wx::Bitmap(:save))

    # Tool 3
    @toolbar.add_check_tool(Wx::ID_ANY, 'Center', Wx::Bitmap(:center))

    # Tool 4
    combo = Wx::ComboBox.new(@toolbar, choices: %w[Option1 Option2])
    @toolbar.add_control(combo)
    
    @toolbar.realize
    
    centre
  end
end

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

The output of the above code:

Note: To run this example you will need the bitmap files too. Download those here, here and here.