原文： http://zetcode.com/gui/javascriptgtktutorial/menustoolbars/

在 JavaScript GTK 编程教程的这一部分中，我们将使用菜单和工具栏。

菜单栏是 GUI 应用中最常见的部分之一。 它是位于各个菜单中的一组命令。 在控制台应用中，您必须记住所有这些神秘命令，在这里，我们将大多数命令分组为逻辑部分。 这些公认的标准可进一步减少学习新应用的时间。

简单菜单

在第一个示例中，我们将创建一个带有一个文件菜单的菜单栏。 该菜单将只有一个菜单项。 通过选择项目，应用退出。

  1. #!/usr/bin/seed
  3. /*
  4. ZetCode JavaScript GTK tutorial
  6. This example shows a simple menu.
  8. author: Jan Bodnar
  9. website: www.zetcode.com
  10. last modified: July 2011
  11. */
  13. Gtk = imports.gi.Gtk;
  14. Gdk = imports.gi.Gdk;
  16. Gtk.init(null, null);
  18. Example = new GType({
  19.     parent: Gtk.Window.type,
  20.     name: "Example",
  21.     init: function ()
  22.     {
  24.         init_ui(this);
  26.         function init_ui(w) {
  28.             w.signal.hide.connect(Gtk.main_quit);
  29.             w.set_default_size(250, 200);
  30.             w.set_title("Simple menu");
  31.             w.set_position(Gtk.WindowPosition.CENTER);
  33.             w.modify_bg(Gtk.StateType.NORMAL, 
  34.                         new Gdk.Color({red:6400, green:6400, blue:6440}));
  36.             var mb = new Gtk.MenuBar();
  38.             var filemenu = new Gtk.Menu();
  39.             var filem = new Gtk.MenuItem.with_label("File");
  40.             filem.set_submenu(filemenu);
  42.             var exitmu = new Gtk.MenuItem.with_label("Exit");
  43.             exitmu.signal.activate.connect(Gtk.main_quit);              
  44.             filemenu.append(exitmu);
  46.             mb.append(filem);
  48.             vbox = new Gtk.VBox.c_new(false, 2);
  49.             vbox.pack_start(mb, false, false, 0);
  51.             w.add(vbox);
  52.             w.show_all();                     
  53.         }
  54.     }       
  55. });
  57. var window = new Example();
  58. Gtk.main();

这是一个最小的菜单栏功能示例。

  1. var mb = new Gtk.MenuBar();

MenuBar小部件已创建。 这是菜单的容器。

  1. var filemenu = new Gtk.Menu();
  2. var filem = new Gtk.MenuItem.with_label("File");
  3. filem.set_submenu(filemenu);

创建顶层MenuItem。

  1. var exitmu = new Gtk.MenuItem.with_label("Exit");
  2. exitmu.signal.activate.connect(Gtk.main_quit);              
  3. filemenu.append(exitmu);

将创建出口MenuItem，并将其附加到文件MenuItem中。

  1. mb.append(filem);

顶级MenuItem被附加到MenuBar小部件。

  1. vbox = new Gtk.VBox.c_new(false, 2);
  2. vbox.pack_start(mb, false, false, 0);

与其他工具包不同，我们必须自己照顾菜单栏的布局管理。 我们将菜单栏放入垂直框中。

JavaScript GTK 中的菜单和工具栏 - 图1

图：简单菜单

子菜单

我们的最后一个示例演示了如何创建子菜单。 子菜单是另一个菜单中的菜单。

  1. #!/usr/bin/seed
  3. /*
  4. ZetCode JavaScript GTK tutorial
  6. This example shows a submenu.
  8. author: Jan Bodnar
  9. website: www.zetcode.com
  10. last modified: July 2011
  11. */
  13. Gtk = imports.gi.Gtk;
  14. Gdk = imports.gi.Gdk;
  16. Gtk.init(null, null);
  18. Example = new GType({
  19.     parent: Gtk.Window.type,
  20.     name: "Example",
  21.     init: function ()
  22.     {
  24.         init_ui(this);
  26.         function init_ui(w) {
  28.             w.signal.hide.connect(Gtk.main_quit);
  29.             w.set_default_size(250, 200);
  30.             w.set_title("Submenu");
  31.             w.set_position(Gtk.WindowPosition.CENTER);
  33.             w.modify_bg(Gtk.StateType.NORMAL, 
  34.                           new Gdk.Color({red:6400, green:6400, blue:6440}));
  36.             var mb = new Gtk.MenuBar();
  38.             var filemenu = new Gtk.Menu();
  39.             var filem = new Gtk.MenuItem.with_label("File");
  40.             filem.set_submenu(filemenu);
  42.             mb.append(filem);
  44.             var imenu = new Gtk.Menu();
  46.             var importm = new Gtk.MenuItem.with_label("Import");
  47.             importm.set_submenu(imenu);
  49.             var inews = new Gtk.MenuItem.with_label("Import news feed...");
  50.             var ibookmarks = new Gtk.MenuItem.with_label("Import bookmarks...");
  51.             var imail = new Gtk.MenuItem.with_label("Import mail...");
  53.             imenu.append(inews);
  54.             imenu.append(ibookmarks);
  55.             imenu.append(imail);
  57.             filemenu.append(importm);
  59.             var emi = new Gtk.MenuItem.with_label("Exit");
  60.             emi.signal.activate.connect(Gtk.main_quit);
  62.             filemenu.append(emi);
  64.             var vbox = new Gtk.VBox.c_new(false, 2);
  65.             vbox.pack_start(mb, false, false, 0);
  67.             w.add(vbox);
  68.             w.show_all();
  69.         }
  70.     }   
  72. });
  74. var window = new Example();
  75. Gtk.main();

在此示例中，我们创建一个子菜单。

  1. var imenu = new Gtk.Menu();

子菜单是Menu。

  1. var importm = new Gtk.MenuItem.with_label("Import");
  2. importm.set_submenu(imenu);

它是菜单项的子菜单，它会登录到顶级文件菜单。

  1. var inews = new Gtk.MenuItem.with_label("Import news feed...");
  2. var ibookmarks = new Gtk.MenuItem.with_label("Import bookmarks...");
  3. var imail = new Gtk.MenuItem.with_label("Import mail...");
  5. imenu.append(inews);
  6. imenu.append(ibookmarks);
  7. imenu.append(imail);

子菜单有其自己的菜单项。

JavaScript GTK 中的菜单和工具栏 - 图2

图：子菜单

图像菜单

在下一个示例中，我们将进一步探索菜单。 我们将图像和加速器添加到我们的菜单项中。 加速器是用于激活菜单项的键盘快捷键。

  1. #!/usr/bin/seed
  3. /*
  4. ZetCode JavaScript GTK tutorial
  6. In this example, we explore image menu
  7. items, a separator, accelerators.
  9. author: Jan Bodnar
  10. website: www.zetcode.com
  11. last modified: July 2011
  12. */
  14. Gtk = imports.gi.Gtk;
  15. Gdk = imports.gi.Gdk;
  17. Gtk.init(null, null);
  19. Example = new GType({
  20.     parent: Gtk.Window.type,
  21.     name: "Example",
  22.     init: function ()
  23.     {
  25.         init_ui(this);
  27.         function init_ui(w) {
  29.             w.signal.hide.connect(Gtk.main_quit);
  30.             w.set_default_size(250, 200);
  31.             w.set_title("Image menu");
  32.             w.set_position(Gtk.WindowPosition.CENTER);
  34.             w.modify_bg(Gtk.StateType.NORMAL, 
  35.                 new Gdk.Color({red:6400, green:6400, blue:6440}));
  37.             var mb = new Gtk.MenuBar();
  39.             var filemenu = new Gtk.Menu();
  40.             var filem = new Gtk.MenuItem.with_label("File");
  41.             filem.set_submenu(filemenu);
  43.             var agr = new Gtk.AccelGroup();
  44.             w.add_accel_group(agr);
  46.             var newi = new Gtk.ImageMenuItem.from_stock(Gtk.STOCK_NEW, agr);
  47.             newi.signal.activate.connect(function() {print("new")});
  48.             filemenu.append(newi);
  50.             var openm = new Gtk.ImageMenuItem.from_stock(Gtk.STOCK_OPEN, agr);
  51.             filemenu.append(openm);
  53.             var sep = new Gtk.SeparatorMenuItem();
  54.             filemenu.append(sep);
  56.             var exitmu = new Gtk.ImageMenuItem.from_stock(Gtk.STOCK_QUIT, agr);       
  58.             exitmu.signal.activate.connect(Gtk.main_quit);
  59.             filemenu.append(exitmu);
  61.             mb.append(filem);
  63.             var vbox = new Gtk.VBox.c_new(false, 2);
  64.             vbox.pack_start(mb, false, false, 0);                
  66.             w.add(vbox);
  67.             w.show_all(); 
  68.         }
  69.     }       
  70. });
  72. var window = new Example();
  73. Gtk.main();

我们的示例显示了具有三个子菜单项的顶级菜单项。 每个菜单项都有一个图像和一个加速器。 退出菜单项的加速器退出应用。 新菜单项的加速器将"new"打印到控制台。

  1. var agr = new Gtk.AccelGroup();
  2. w.add_accel_group(agr);

要使用加速器，我们创建一个全局AccelGroup对象。 稍后将使用。

  1. var newi = new Gtk.ImageMenuItem.from_stock(Gtk.STOCK_NEW, agr);
  2. newi.signal.activate.connect(function() {print("new")});
  3. filemenu.append(newi);

ImageMenuItem已创建。 图片来自图片库。 自动创建 Ctrl + N 加速器。 我们将匿名方法插入菜单项。 它将消息打印到控制台。

  1. var sep = new Gtk.SeparatorMenuItem();
  2. filemenu.append(sep);

这些行创建一个分隔符。 它用于将菜单项放入逻辑组。

JavaScript GTK 中的菜单和工具栏 - 图3

图：图像 menu

菜单将我们可以在应用中使用的命令分组。 使用工具栏可以快速访问最常用的命令。

简单的工具栏

接下来，我们创建一个简单的工具栏。 工具栏提供对应用最常用功能的快速访问。

  1. #!/usr/bin/seed
  3. /*
  4. ZetCode JavaScript GTK tutorial
  6. In this example, we create a simple
  7. toolbar.
  9. author: Jan Bodnar
  10. website: www.zetcode.com
  11. last modified: July 2011
  12. */
  14. Gtk = imports.gi.Gtk;
  16. Gtk.init(null, null);
  18. Example = new GType({
  19.     parent: Gtk.Window.type,
  20.     name: "Example",
  21.     init: function ()
  22.     {
  24.         init_ui(this);
  26.         function init_ui(w) {
  28.             w.signal.hide.connect(Gtk.main_quit);
  29.             w.set_default_size(250, 200);
  30.             w.set_title("Toolbar");
  31.             w.set_position(Gtk.WindowPosition.CENTER);
  33.             var toolbar = new Gtk.Toolbar();
  34.             toolbar.set_style(Gtk.ToolbarStyle.ICONS);
  36.             var newtb = new Gtk.ToolButton.from_stock(Gtk.STOCK_NEW);
  37.             var opentb = new Gtk.ToolButton.from_stock(Gtk.STOCK_OPEN);
  38.             var savetb = new Gtk.ToolButton.from_stock(Gtk.STOCK_SAVE);
  39.             var sep = new Gtk.SeparatorToolItem();
  40.             var quittb = new Gtk.ToolButton.from_stock(Gtk.STOCK_QUIT);
  42.             toolbar.insert(newtb, 0);
  43.             toolbar.insert(opentb, 1);
  44.             toolbar.insert(savetb, 2);
  45.             toolbar.insert(sep, 3);
  46.             toolbar.insert(quittb, 4);
  48.             quittb.signal.clicked.connect(Gtk.main_quit);
  50.             var vbox = new Gtk.VBox.c_new(false, 2);
  51.             vbox.pack_start(toolbar, false, false, 0);
  53.             w.add(vbox);
  54.             w.show_all(); 
  55.         }
  56.     }   
  58. });
  60. var window = new Example();
  61. Gtk.main();

该示例显示了一个工具栏和四个工具按钮。

  1. var toolbar = new Gtk.Toolbar();

Toolbar小部件已创建。

  1. toolbar.set_style(Gtk.ToolbarStyle.ICONS);

在工具栏上，我们仅显示图标。 没有文字。

  1. var newtb = new Gtk.ToolButton.from_stock(Gtk.STOCK_NEW);

创建带有库存图像的ToolButton。 该图像来自图像的内置库存。

  1. var sep = new Gtk.SeparatorToolItem();

这是一个分隔符。 它可用于将工具栏按钮放入逻辑组。

  1. toolbar.insert(newtb, 0);
  2. toolbar.insert(opentb, 1);
  3. ...

工具栏按钮插入到工具栏小部件中。 insert()方法的第一个参数是工具按钮。 第二个是工具栏上的位置。

JavaScript GTK 中的菜单和工具栏 - 图4

图：工具栏

在 JavaScript GTK 教程的这一章中，我们展示了如何使用菜单和工具栏。