Menus & toolbars
In this part of the Ruby Qt programming tutorial, we will work with menus and toolbar.
A menubar is one of the most visible parts of the GUI application. It is a group of commands located in various menus. While in console applications you had to remember all those arcane commands, here we have most of the commands grouped into logical parts. There are accepted standards that further reduce the amount of time spending to learn a new application. Menus group commands that we can use in an application. Toolbars provide a quick access to the most frequently used commands.
Simple menu
The first example will show a simple menu.
#!/usr/bin/ruby
# ZetCode Ruby Qt tutorial
#
# This program shows a simple
# menu. It has one action, which
# will terminate the program, when
# selected.
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009
require 'Qt'
class QtApp < Qt::MainWindow
def initialize
super
setWindowTitle "Simple menu"
init_ui
resize 250, 150
move 300, 300
show
end
def init_ui
quit = Qt::Action.new "&Quit", self
file = menuBar().addMenu "&File"
file.addAction quit
connect(quit, SIGNAL("triggered()"),
Qt::Application.instance, SLOT("quit()"))
end
end
app = Qt::Application.new ARGV
QtApp.new
app.exec
We have a menubar, a menu and an action. In order to work with menus, we must inherit from MainWindow widget.
quit = Qt::Action.new "&Quit", self
This code line creates a Action. Each Menu has one or more action objects. Note the ampersand (&) character. It creates a shortcut for the item. Alt + Q. It also underlines the Q character. The shortcut is active, when the file menu is dropped down.
file = menuBar().addMenu "&File" file.addAction quit
We create a Menu object. The ampersand character creates a shortcut. Alt + F. The consecutive shortcuts Alt + F, Alt + Q quit the application.
connect(quit, SIGNAL("triggered()"),
Qt::Application.instance, SLOT("quit()"))
When we select this option from the menu, the application quits.
Submenu
A submenu is a menu plugged into another menu object. The next example demonstrates this.
#!/usr/bin/ruby
# ZetCode Ruby Qt tutorial
#
# This program creates a
# submenu
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009
require 'Qt'
class QtApp < Qt::MainWindow
def initialize
super
setWindowTitle "Submenu"
init_ui
resize 280, 200
move 300, 300
show
end
def init_ui
quit = Qt::Action.new "&Quit", self
file = menuBar().addMenu "&File"
impm = Qt::Menu.new "Import"
seeds = Qt::Action.new "Import news feed...", self
marks = Qt::Action.new "Import bookmarks...", self
mail = Qt::Action.new "Import mail...", self
impm.addAction seeds
impm.addAction marks
impm.addAction mail
file.addMenu impm
file.addAction quit
connect(quit, SIGNAL("triggered()"),
Qt::Application.instance, SLOT("quit()"))
end
end
app = Qt::Application.new ARGV
QtApp.new
app.exec
In the example, we have three options in a submenu of a file menu.
file = menuBar().addMenu "&File" impm = Qt::Menu.new "Import"
We have two Menu objects. The file menu and the import menu.
seeds = Qt::Action.new "Import news feed...", self marks = Qt::Action.new "Import bookmarks...", self mail = Qt::Action.new "Import mail...", self
We create three action objects.
impm.addAction seeds impm.addAction marks impm.addAction mail
We add the action objects into the import menu.
file.addMenu impm
Finally, we add the import menu into the file menu.
Images, menus, separators
In the following example, we will further enhance our previous application. We will add icons to the menus, use shortcuts and a separator.
#!/usr/bin/ruby
# ZetCode Ruby Qt tutorial
#
# This program shows image
# menus, shortcuts and a separator
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009
require 'Qt'
class QtApp < Qt::MainWindow
def initialize
super
setWindowTitle "Image menu"
init_ui
resize 280, 200
move 300, 300
show
end
def init_ui
newpix = Qt::Icon.new "new.png"
openpix = Qt::Icon.new "open.png"
quitpix = Qt::Icon.new "exit.png"
newa = Qt::Action.new newpix, "&New", self
open = Qt::Action.new openpix, "&Open", self
quit = Qt::Action.new quitpix, "&Quit", self
quit.setShortcut "Ctrl+Q"
file = menuBar().addMenu "&File"
file.addAction newa
file.addAction open
file.addSeparator
file.addAction quit
connect(quit, SIGNAL("triggered()"),
Qt::Application.instance, SLOT("quit()"))
end
end
app = Qt::Application.new ARGV
QtApp.new
app.exec
In our example, we have one menu with three actions. Only the quit action will actually do something, if we select it. We also create a separator and a Ctrl + Q shortcut, which will terminate the application.
newpix = Qt::Icon.new "new.png" openpix = Qt::Icon.new "open.png" quitpix = Qt::Icon.new "exit.png"
These are png images, that we will use in the application.
newa = Qt::Action.new newpix, "&New", self open = Qt::Action.new openpix, "&Open", self quit = Qt::Action.new quitpix, "&Quit", self
Here we create three action objects. The first parameter is the Icon.
quit.setShortcut "Ctrl+Q"
This line creates a shortcut. By pressing this shortcut, we will run the quit action, which will quit the application.
file.addSeparator
We create a separator. The separator is a horizontal line, which enables us to group menu actions into some logical parts.
A toolbar
The ToolBar class provides a movable panel that contains a set of controls, which provide a quick access to the application actions.
#!/usr/bin/ruby
# ZetCode Ruby Qt tutorial
#
# This program creates a
# toolbar
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009
require 'Qt'
class QtApp < Qt::MainWindow
def initialize
super
setWindowTitle "Toolbar"
init_ui
resize 250, 150
move 300, 300
show
end
def init_ui
newpi = Qt::Icon.new "new2.png"
openpi = Qt::Icon.new "open2.png"
quitpi = Qt::Icon.new "exit2.png"
toolbar = addToolBar "main toolbar"
toolbar.addAction newpi, "New File"
toolbar.addAction openpi, "Open File"
toolbar.addSeparator
quit = toolbar.addAction quitpi, "Quit Application"
connect(quit, SIGNAL("triggered()"),
Qt::Application.instance, SLOT("quit()"))
end
end
app = Qt::Application.new ARGV
QtApp.new
app.exec
We create a toolbar with three action objects and one separator.
newpi = Qt::Icon.new "new2.png" openpi = Qt::Icon.new "open2.png" quitpi = Qt::Icon.new "exit2.png"
Toolbar action objects will display these icons.
toolbar = addToolBar "main toolbar"
The addToolBar method of the MainWindow creates a toolbar for the application. The text string gives a toolbar a name. This name is used to reference this toolbar, because there can be multiple toolbars in one application. If we right click on the window area, we can see a checkable option, which shows/hides the toolbar.
toolbar.addSeparator
We create a vertical separator.
connect(quit, SIGNAL("triggered()"),
Qt::Application.instance, SLOT("quit()"))
When we click on the quit action object, the application terminates.
Undo redo
The following example demonstrates, how we can deactivate toolbar buttons on the toolbar. It is a common practice in GUI programming. For example the save button. If we save all changes of our document to the disk, the save button is deactivated in most text editors. This way the application indicates to the user, that all changes are already saved.
#!/usr/bin/ruby
# ZetCode Ruby Qt tutorial
#
# This program disables/enables
# actions on a toolbar
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009
require 'Qt'
class QtApp < Qt::MainWindow
slots 'count()'
def initialize
super
setWindowTitle "Toolbar"
init_ui
resize 250, 150
move 300, 300
show
end
def init_ui
@count = 2
undoi = Qt::Icon.new "undo.png"
redoi = Qt::Icon.new "redo.png"
quitpi = Qt::Icon.new "quit.png"
toolbar = addToolBar "first toolbar"
@und = toolbar.addAction undoi, "Undo"
@red = toolbar.addAction redoi, "Redo"
connect @und, SIGNAL("triggered()"), self, SLOT("count()")
connect @red, SIGNAL("triggered()"), self, SLOT("count()")
toolbar.addSeparator
quit = toolbar.addAction quitpi, "Quit Application"
connect quit, SIGNAL("triggered()"),
Qt::Application.instance, SLOT("quit()")
end
def count
action = sender
if "Undo" == action.text
@count = @count - 1
else
@count = @count + 1
end
if @count <= 0
@und.setDisabled true
@red.setDisabled false
end
if @count >= 5
@und.setDisabled false
@red.setDisabled true
end
end
end
app = Qt::Application.new ARGV
QtApp.new
app.exec
In our example, we have three Action objects and a separator. After several clicks on the undo or redo buttons, they become deactivated. Visually, the buttons are grayed out.
@count = 2
The @count variable determines, which button is activated and deactivated.
connect @und, SIGNAL("triggered()"), self, SLOT("count()")
connect @red, SIGNAL("triggered()"), self, SLOT("count()")
Clicking on the toolbar button, the triggered signal is emitted. We connect this signal to the count method.
action = sender
Both toolbar buttons call the count method. We need to tell between them. This line determines, which action object actually emitted the signal.
if "Undo" == action.text
@count = @count - 1
else
@count = @count + 1
end
The undo toolbar button subtracts 1 from the count variable. The redo adds 1. Depending on the value of the count variable, we enable/disable the toolbar buttons.
if @count <= 0
@und.setDisabled true
@red.setDisabled false
end
The setDisabled method activates or deactivates the toolbar buttons.
In this part of the Ruby Qt tutorial, we mentioned the menus and toolbars.