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.

Simple menu
Figure: Simple menu

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.

Submenu
Figure: Submenu

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.

Image menu
Figure: Image menu

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.

Toolbar
Figure: Toolbar

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