Menus & toolbars in JavaScript GTK
In this part of the JavaScript GTK programming tutorial, we will work with menus & toolbars.
A menubar is one of the most common parts of the GUI application. It is a group of commands located in various menus. While in console applications you have to remember all those arcane commands, here we have most of the commands grouped into logical parts. These are accepted standards that further reduce the amount of time spending to learn a new application.
Simple menu
In our first example, we will create a menubar with one file menu. The menu will have only one menu item. By selecting the item the application quits.
#!/usr/bin/seed /* ZetCode JavaScript GTK tutorial This example shows a simple menu. author: Jan Bodnar website: www.zetcode.com last modified: July 2011 */ Gtk = imports.gi.Gtk; Gdk = imports.gi.Gdk; Gtk.init(null, null); Example = new GType({ parent: Gtk.Window.type, name: "Example", init: function () { init_ui(this); function init_ui(w) { w.signal.hide.connect(Gtk.main_quit); w.set_default_size(250, 200); w.set_title("Simple menu"); w.set_position(Gtk.WindowPosition.CENTER); w.modify_bg(Gtk.StateType.NORMAL, new Gdk.Color({red:6400, green:6400, blue:6440})); var mb = new Gtk.MenuBar(); var filemenu = new Gtk.Menu(); var filem = new Gtk.MenuItem.with_label("File"); filem.set_submenu(filemenu); var exitmu = new Gtk.MenuItem.with_label("Exit"); exitmu.signal.activate.connect(Gtk.main_quit); filemenu.append(exitmu); mb.append(filem); vbox = new Gtk.VBox.c_new(false, 2); vbox.pack_start(mb, false, false, 0); w.add(vbox); w.show_all(); } } }); var window = new Example(); Gtk.main();
This is a small example with minimal menubar functionality.
var mb = new Gtk.MenuBar();
MenuBar
widget is created. This is a container
for the menus.
var filemenu = new Gtk.Menu(); var filem = new Gtk.MenuItem.with_label("File"); filem.set_submenu(filemenu);
Toplevel MenuItem
is created.
var exitmu = new Gtk.MenuItem.with_label("Exit"); exitmu.signal.activate.connect(Gtk.main_quit); filemenu.append(exitmu);
Exit MenuItem
is created and appended to the
File MenuItem
.
mb.append(filem);
Toplevel MenuItem
is appended to the MenuBar
widget.
vbox = new Gtk.VBox.c_new(false, 2); vbox.pack_start(mb, false, false, 0);
Unlike in other toolkits, we have to take care of the layout management of the menubar ourselves. We put the menubar into the vertical box.

Submenu
Our final example demonstrates how to create a submenu. A submenu is a menu inside another menu.
#!/usr/bin/seed /* ZetCode JavaScript GTK tutorial This example shows a submenu. author: Jan Bodnar website: www.zetcode.com last modified: July 2011 */ Gtk = imports.gi.Gtk; Gdk = imports.gi.Gdk; Gtk.init(null, null); Example = new GType({ parent: Gtk.Window.type, name: "Example", init: function () { init_ui(this); function init_ui(w) { w.signal.hide.connect(Gtk.main_quit); w.set_default_size(250, 200); w.set_title("Submenu"); w.set_position(Gtk.WindowPosition.CENTER); w.modify_bg(Gtk.StateType.NORMAL, new Gdk.Color({red:6400, green:6400, blue:6440})); var mb = new Gtk.MenuBar(); var filemenu = new Gtk.Menu(); var filem = new Gtk.MenuItem.with_label("File"); filem.set_submenu(filemenu); mb.append(filem); var imenu = new Gtk.Menu(); var importm = new Gtk.MenuItem.with_label("Import"); importm.set_submenu(imenu); var inews = new Gtk.MenuItem.with_label("Import news feed..."); var ibookmarks = new Gtk.MenuItem.with_label("Import bookmarks..."); var imail = new Gtk.MenuItem.with_label("Import mail..."); imenu.append(inews); imenu.append(ibookmarks); imenu.append(imail); filemenu.append(importm); var emi = new Gtk.MenuItem.with_label("Exit"); emi.signal.activate.connect(Gtk.main_quit); filemenu.append(emi); var vbox = new Gtk.VBox.c_new(false, 2); vbox.pack_start(mb, false, false, 0); w.add(vbox); w.show_all(); } } }); var window = new Example(); Gtk.main();
In this example, we create a submenu.
var imenu = new Gtk.Menu();
A submenu is a Menu
.
var importm = new Gtk.MenuItem.with_label("Import"); importm.set_submenu(imenu);
It is a submenu of a menu item, which belogs to toplevel file menu.
var inews = new Gtk.MenuItem.with_label("Import news feed..."); var ibookmarks = new Gtk.MenuItem.with_label("Import bookmarks..."); var imail = new Gtk.MenuItem.with_label("Import mail..."); imenu.append(inews); imenu.append(ibookmarks); imenu.append(imail);
Submenus have their own menu items.

Image menu
In the next example, we will further explore the menus. We will add images and accelerators to our menu items. Accelerators are keyboard shortcuts for activating menu items.
#!/usr/bin/seed /* ZetCode JavaScript GTK tutorial In this example, we explore image menu items, a separator, accelerators. author: Jan Bodnar website: www.zetcode.com last modified: July 2011 */ Gtk = imports.gi.Gtk; Gdk = imports.gi.Gdk; Gtk.init(null, null); Example = new GType({ parent: Gtk.Window.type, name: "Example", init: function () { init_ui(this); function init_ui(w) { w.signal.hide.connect(Gtk.main_quit); w.set_default_size(250, 200); w.set_title("Image menu"); w.set_position(Gtk.WindowPosition.CENTER); w.modify_bg(Gtk.StateType.NORMAL, new Gdk.Color({red:6400, green:6400, blue:6440})); var mb = new Gtk.MenuBar(); var filemenu = new Gtk.Menu(); var filem = new Gtk.MenuItem.with_label("File"); filem.set_submenu(filemenu); var agr = new Gtk.AccelGroup(); w.add_accel_group(agr); var newi = new Gtk.ImageMenuItem.from_stock(Gtk.STOCK_NEW, agr); newi.signal.activate.connect(function() {print("new")}); filemenu.append(newi); var openm = new Gtk.ImageMenuItem.from_stock(Gtk.STOCK_OPEN, agr); filemenu.append(openm); var sep = new Gtk.SeparatorMenuItem(); filemenu.append(sep); var exitmu = new Gtk.ImageMenuItem.from_stock(Gtk.STOCK_QUIT, agr); exitmu.signal.activate.connect(Gtk.main_quit); filemenu.append(exitmu); mb.append(filem); var vbox = new Gtk.VBox.c_new(false, 2); vbox.pack_start(mb, false, false, 0); w.add(vbox); w.show_all(); } } }); var window = new Example(); Gtk.main();
Our example shows a toplevel menu item with three sublevel menu items. Each of the menu items has an image and an accelerator. The accelerator for the quit menu item quits the application. The accelerator for the new menu item prints 'new' to the console.
var agr = new Gtk.AccelGroup(); w.add_accel_group(agr);
To work with accelerators, we create a global AccelGroup
object. It will be used later.
var newi = new Gtk.ImageMenuItem.from_stock(Gtk.STOCK_NEW, agr); newi.signal.activate.connect(function() {print("new")}); filemenu.append(newi);
ImageMenuItem
is created. The image comes from the stock
of images. The Ctrl+N accelerator is automatically created. We
plug an anonymous method to the menu item. It will print a message
to the console.
var sep = new Gtk.SeparatorMenuItem(); filemenu.append(sep);
These lines create a separator. It is used to put menu items into logical groups.

Menus group commands that we can use in application. Toolbars provide a quick access to the most frequently used commands.
Simple toolbar
Next we create a simple toolbar. A toolbar provides a quick access to the most frequently used functionality of an application.
#!/usr/bin/seed /* ZetCode JavaScript GTK tutorial In this example, we create a simple toolbar. author: Jan Bodnar website: www.zetcode.com last modified: July 2011 */ Gtk = imports.gi.Gtk; Gtk.init(null, null); Example = new GType({ parent: Gtk.Window.type, name: "Example", init: function () { init_ui(this); function init_ui(w) { w.signal.hide.connect(Gtk.main_quit); w.set_default_size(250, 200); w.set_title("Toolbar"); w.set_position(Gtk.WindowPosition.CENTER); var toolbar = new Gtk.Toolbar(); toolbar.set_style(Gtk.ToolbarStyle.ICONS); var newtb = new Gtk.ToolButton.from_stock(Gtk.STOCK_NEW); var opentb = new Gtk.ToolButton.from_stock(Gtk.STOCK_OPEN); var savetb = new Gtk.ToolButton.from_stock(Gtk.STOCK_SAVE); var sep = new Gtk.SeparatorToolItem(); var quittb = new Gtk.ToolButton.from_stock(Gtk.STOCK_QUIT); toolbar.insert(newtb, 0); toolbar.insert(opentb, 1); toolbar.insert(savetb, 2); toolbar.insert(sep, 3); toolbar.insert(quittb, 4); quittb.signal.clicked.connect(Gtk.main_quit); var vbox = new Gtk.VBox.c_new(false, 2); vbox.pack_start(toolbar, false, false, 0); w.add(vbox); w.show_all(); } } }); var window = new Example(); Gtk.main();
The example shows a toolbar and four tool buttons.
var toolbar = new Gtk.Toolbar();
A Toolbar
widget is created.
toolbar.set_style(Gtk.ToolbarStyle.ICONS);
On toolbar, we show only icons. No text.
var newtb = new Gtk.ToolButton.from_stock(Gtk.STOCK_NEW);
A ToolButton
with an image from stock is created.
The image comes from the built-in stock of images.
var sep = new Gtk.SeparatorToolItem();
This is a separator. It can be used to put toolbar buttons into logical groups.
toolbar.insert(newtb, 0); toolbar.insert(opentb, 1); ...
Toolbar buttons are inserted into the toolbar widget. The first parameter
of the insert()
method is the tool button. The second is the
position on the toolbar.

In this chapter of the JavaScript GTK tutorial, we showed, how to work with menus & toolbars.