usefulfor.com/ruby

Menu and status bar are two elements that you expect to find in most applications out there. Menu bars are rich elements that consists of menu items and actions. Each action consists of a text and optionally a shortcut and an icon.

First things first, we are going to create a small application with just a menu bar and a status bar:

#require Qt4 bindings for ruby
require 'Qt4'

class MenuWindow < Qt::MainWindow
end

if $0 == __FILE__
a = Qt::Application.new(ARGV)
w = MenuWindow.new
w.show
a.exec
end

Now that we have our main window we can start adding widgets. We begin with the menu bar and two top level menu items. We will override the default constructor of MenuWindow:

def initialize
super

# create the menu bar
@menubar = Qt::MenuBar.new(self)
@menubar.setObjectName('menubar')

# create the top level menu items
@menuFile = Qt::Menu.new(@menubar)
@menuFile.setObjectName('menuFile')
@menuFile.setTitle('File')
@menuHelp = Qt::Menu.new(@menubar)
@menuHelp.setObjectName('menuHelp')
@menuHelp.setTitle('&Help')

# add the top level menu items to the menu bar
@menubar.addAction(@menuFile.menuAction())
@menubar.addAction(@menuHelp.menuAction())

# attach the bar to the window
self.setMenuBar(@menubar)
end

The only difference between these two elements is the ampersand (&) symbol in their title. For those new to GUI development and ampersand in the title of a menu will be painted as an underscore of the letter that follows. When the user presses the special combination Alt+H the Help menu will be highlighted. No special combination is associated to the File menu.

The next step is to add some actions for out menus. We are trying to have the following structure:

• File
  • Open
  • (separator)
  • Exit
• Help
  • About

Which can be accomplished by adding the following code to the constructor above:

# create menu actions
@actionOpen = Qt::Action.new(self)
@actionOpen.setObjectName('actionOpen')
@actionOpen.setText('Open')

@actionExit = Qt::Action.new(self)
@actionExit.setObjectName('actionExit')
@actionExit.setText('Exit')

@actionAbout = Qt::Action.new(self)
@actionAbout.setObjectName('actionAbout')
@actionAbout.setText('About')

# attach actions to top level menu items
@menuFile.addAction(@actionOpen)
@menuFile.addSeparator()
@menuFile.addAction(@actionExit)

@menuHelp.addAction(@actionAbout)

The results of the code can be seen in the following capture:-

There are three different properties that you may be interested in changing on a given menu action:

• The shortcut is a special combination of keys that when pressed effectively send the activated() signal of an action.
• The status bar message is the message that will be displayed in the status bar when the user hovers the pointer over the action.
• The icon that will be displayed on the left of the action’s text.

In order to show how the status bar message behaves we need to create and attach a status bar to our application. This can be done by adding the following code to the constructor of our main window:

# create and attach the status bar
@statusbar = Qt::StatusBar.new(self)
@statusbar.setObjectName('statusbar')
self.setStatusBar(@statusbar)

So now we can add a short message that will be displayed in the status bar to our actions, for example: @actionOpen.setStatusTip('Open a new file').

Almost as easy is to add a shortcut combination: @actionExit.setShortcut('Ctrl+X').

A combination of the two at work can be seen in the following capture:-

The most tricky of the three is the icon property. Resources (as images) in Qt can be loaded in three different ways:

• At run time
• By using a resource file
• Or by loading one of the built-in resources

The easiest way of adding an icon to an action is by loading the resource at run time: @actionOpen.setIcon(Qt::Icon.new('icons/fileopen.png')). This will try to load the given image from the file system at runtime.

If you do not want to distribute icons as separate files you can group them in Qt resource file. A resource file (usually with .qrc extension) is an XML file containing resource descriptions. You can see an example here:

icons/help.png

This file needs to be compiled, we will cover that in a second, but provided that you have the file compiled, to use a resource of the file you just need something like this:

#require the compiled resources file
require 'resources'
[...]
# inside the constructor
@actionAbout.setIcon(Qt::Icon.new(':/icons/help.png'))
[...]

Notice the colon (:) before the path in the method call. A path is constructed by appending the prefix (/) to the file name of the resource (icons/help.png). Also note that before compiling the resources file you need a subdirectory called icons and a file named help.png inside it in order to produce the desired output.

In order to compile a .qrc file you will need the standard tool rbrcc whose syntax is as follows:

rbrcc resources.qrc -o resources.rb

That command will try to find all the referenced resources in the .qrc file and compile and compress them into the .rb file.
The third way to assign an icon to an action is by using one of the standard pixmaps built-in the Qt library. If you want to use one of these default resources, the code you need is the following: @actionExit.setIcon(self.style().standardIcon(PixmapCode)) where PixmapCode is defined in the QStyle class. Some of the values that can be used are listed below:

• QStyle::SP_DesktopIcon
• QStyle::SP_TrashIcon
• QStyle::SP_ComputerIcon
• QStyle::SP_TitleBarCloseButton
• QStyle::SP_FileIcon

I have left a tar file containing all the files required for this example. The three icon loading techniques shown above are used in the example. And remember that you will need to compile the .qrc file before running it.