原文: http://zetcode.com/gui/rubygtk/menustoolbars/

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

GUI 应用中的常见部分是菜单栏。 菜单栏由称为菜单的对象组成。 顶层菜单在菜单栏上带有其标签。 菜单具有菜单项-在应用内部执行特定操作的命令。 菜单也可以具有子菜单,这些子菜单具有自己的菜单项。

简单的菜单栏

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

  1. #!/usr/bin/ruby
  2. '''
  3. ZetCode Ruby GTK tutorial
  4. This example creates a simple menubar.
  5. Author: Jan Bodnar
  6. Website: www.zetcode.com
  7. Last modified: May 2014
  8. '''
  9. require 'gtk3'
  10. class RubyApp < Gtk::Window
  11. def initialize
  12. super
  13. init_ui
  14. end
  15. def init_ui
  16. override_background_color :normal,
  17. Gdk::RGBA.new(0.2, 0.2, 0.2, 1)
  18. mb = Gtk::MenuBar.new
  19. filemenu = Gtk::Menu.new
  20. filem = Gtk::MenuItem.new "File"
  21. filem.set_submenu filemenu
  22. exit = Gtk::MenuItem.new "Exit"
  23. exit.signal_connect "activate" do
  24. Gtk.main_quit
  25. end
  26. filemenu.append exit
  27. mb.append filem
  28. vbox = Gtk::Box.new :vertical, 2
  29. vbox.pack_start mb, :expand => false,
  30. :fill => false, :padding => 0
  31. add vbox
  32. set_title "Simple menubar"
  33. signal_connect "destroy" do
  34. Gtk.main_quit
  35. end
  36. set_default_size 300, 200
  37. set_window_position :center
  38. show_all
  39. end
  40. end
  41. Gtk.init
  42. window = RubyApp.new
  43. Gtk.main

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

  1. mb = Gtk::MenuBar.new

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

  1. filemenu = Gtk::Menu.new
  2. filem = Gtk::MenuItem.new "File"
  3. filem.set_submenu filemenu

创建包含一个Gtk::Menu的顶层Gtk::MenuItem

  1. exit = Gtk::MenuItem.new "Exit"
  2. exit.signal_connect "activate" do
  3. Gtk.main_quit
  4. end
  5. filemenu.append exit

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

  1. mb.append filem

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

  1. vbox = Gtk::VBox.new false, 2
  2. vbox.pack_start mb, false, false, 0

我们将菜单栏放入垂直框中。

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

图:简单菜单

子菜单

下面的示例演示如何创建子菜单。

  1. #!/usr/bin/ruby
  2. '''
  3. ZetCode Ruby GTK tutorial
  4. This example shows a submenu.
  5. Author: Jan Bodnar
  6. Website: www.zetcode.com
  7. Last modified: May 2014
  8. '''
  9. require 'gtk3'
  10. class RubyApp < Gtk::Window
  11. def initialize
  12. super
  13. init_ui
  14. end
  15. def init_ui
  16. override_background_color :normal,
  17. Gdk::RGBA.new(0.2, 0.2, 0.2, 1)
  18. mb = Gtk::MenuBar.new
  19. filemenu = Gtk::Menu.new
  20. filem = Gtk::MenuItem.new "File"
  21. filem.set_submenu filemenu
  22. mb.append filem
  23. imenu = Gtk::Menu.new
  24. importm = Gtk::MenuItem.new "Import"
  25. importm.set_submenu imenu
  26. inews = Gtk::MenuItem.new "Import news feed..."
  27. ibookmarks = Gtk::MenuItem.new "Import bookmarks..."
  28. imail = Gtk::MenuItem.new "Import mail..."
  29. imenu.append inews
  30. imenu.append ibookmarks
  31. imenu.append imail
  32. filemenu.append importm
  33. exit = Gtk::MenuItem.new "Exit"
  34. exit.signal_connect "activate" do
  35. Gtk.main_quit
  36. end
  37. filemenu.append exit
  38. vbox = Gtk::Box.new :vertical, 2
  39. vbox.pack_start mb, :expand => false,
  40. :fill => false, :padding => 0
  41. add vbox
  42. set_title "Submenu"
  43. signal_connect "destroy" do
  44. Gtk.main_quit
  45. end
  46. set_default_size 350, 250
  47. set_window_position :center
  48. show_all
  49. end
  50. end
  51. Gtk.init
  52. window = RubyApp.new
  53. Gtk.main

子菜单是另一个菜单中的菜单。

  1. imenu = Gtk::Menu.new

子菜单是Gtk::Menu

  1. importm = Gtk::MenuItem.new "Import"
  2. importm.set_submenu imenu
  3. ...
  4. filemenu.append importm

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

  1. inews = Gtk::MenuItem.new "Import news feed..."
  2. ibookmarks = Gtk::MenuItem.new "Import bookmarks..."
  3. imail = Gtk::MenuItem.new "Import mail..."
  4. imenu.append inews
  5. imenu.append ibookmarks
  6. imenu.append imail

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

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

图:子菜单

图像菜单

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

  1. #!/usr/bin/ruby
  2. '''
  3. ZetCode Ruby GTK tutorial
  4. This example shows a menu with
  5. images, accelerators and a separator.
  6. Author: Jan Bodnar
  7. Website: www.zetcode.com
  8. Last modified: May 2014
  9. '''
  10. require 'gtk3'
  11. class RubyApp < Gtk::Window
  12. def initialize
  13. super
  14. init_ui
  15. end
  16. def init_ui
  17. override_background_color :normal,
  18. Gdk::RGBA.new(0.2, 0.2, 0.2, 1)
  19. mb = Gtk::MenuBar.new
  20. filemenu = Gtk::Menu.new
  21. filem = Gtk::MenuItem.new "File"
  22. filem.set_submenu filemenu
  23. agr = Gtk::AccelGroup.new
  24. add_accel_group agr
  25. newi = Gtk::ImageMenuItem.new :stock_id => Gtk::Stock::NEW,
  26. :accel_group => agr
  27. key, mod = Gtk::Accelerator.parse "N"
  28. newi.add_accelerator "activate", agr, key,
  29. mod, Gtk::AccelFlags::VISIBLE
  30. filemenu.append newi
  31. openm = Gtk::ImageMenuItem.new :stock_id => Gtk::Stock::OPEN,
  32. :accel_group => agr
  33. key, mod = Gtk::Accelerator.parse "O"
  34. openm.add_accelerator "activate", agr, key,
  35. mod, Gtk::AccelFlags::VISIBLE
  36. filemenu.append openm
  37. sep = Gtk::SeparatorMenuItem.new
  38. filemenu.append sep
  39. exit = Gtk::ImageMenuItem.new :stock_id => Gtk::Stock::QUIT,
  40. :accel_group => agr
  41. key, mod = Gtk::Accelerator.parse "Q"
  42. exit.add_accelerator "activate", agr, key,
  43. mod, :visible
  44. exit.signal_connect "activate" do
  45. Gtk.main_quit
  46. end
  47. filemenu.append exit
  48. mb.append filem
  49. vbox = Gtk::Box.new :vertical, 2
  50. vbox.pack_start mb, :expand => false, :fill => false,
  51. :padding => 0
  52. add vbox
  53. set_title "Image menu"
  54. signal_connect "destroy" do
  55. Gtk.main_quit
  56. end
  57. set_default_size 300, 200
  58. set_window_position :center
  59. show_all
  60. end
  61. end
  62. Gtk.init
  63. window = RubyApp.new
  64. Gtk.main

我们的示例显示了具有三个菜单项的顶级菜单项。 每个菜单项都有一个图像和一个加速器。 退出菜单项的加速器处于活动状态。

  1. agr = Gtk::AccelGroup.new
  2. add_accel_group agr

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

  1. newi = Gtk::ImageMenuItem.new :stock_id => Gtk::Stock::NEW,
  2. :accel_group => agr
  3. key, mod = Gtk::Accelerator.parse "N"
  4. newi.add_accelerator "activate", agr, key,
  5. mod, Gtk::AccelFlags::VISIBLE
  6. filemenu.append newi

创建了Gtk::ImageMenuItem。 图片来自图片库。 我们还创建了 Ctrl + N 加速器。

  1. sep = Gtk::SeparatorMenuItem.new
  2. filemenu.append sep

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

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

图:图像 menu

简单的工具栏

菜单将我们可以在应用中使用的命令分组。 使用工具栏可以快速访问最常用的命令。 接下来,我们创建一个简单的工具栏。

  1. #!/usr/bin/ruby
  2. '''
  3. ZetCode Ruby GTK tutorial
  4. This example creates a simple toolbar.
  5. Author: Jan Bodnar
  6. Website: www.zetcode.com
  7. Last modified: May 2014
  8. '''
  9. require 'gtk3'
  10. class RubyApp < Gtk::Window
  11. def initialize
  12. super
  13. init_ui
  14. end
  15. def init_ui
  16. toolbar = Gtk::Toolbar.new
  17. toolbar.set_toolbar_style Gtk::Toolbar::Style::ICONS
  18. newtb = Gtk::ToolButton.new :stock_id => Gtk::Stock::NEW
  19. opentb = Gtk::ToolButton.new :stock_id => Gtk::Stock::OPEN
  20. savetb = Gtk::ToolButton.new :stock_id => Gtk::Stock::SAVE
  21. sep = Gtk::SeparatorToolItem.new
  22. quittb = Gtk::ToolButton.new :stock_id => Gtk::Stock::QUIT
  23. toolbar.insert newtb, 0
  24. toolbar.insert opentb, 1
  25. toolbar.insert savetb, 2
  26. toolbar.insert sep, 3
  27. toolbar.insert quittb, 4
  28. quittb.signal_connect "clicked" do
  29. Gtk.main_quit
  30. end
  31. vbox = Gtk::Box.new :vertical, 2
  32. vbox.pack_start toolbar, :expand => false,
  33. :fill => false, :padding => 0
  34. add vbox
  35. set_title "Toolbar"
  36. signal_connect "destroy" do
  37. Gtk.main_quit
  38. end
  39. set_default_size 300, 200
  40. set_window_position :center
  41. show_all
  42. end
  43. end
  44. Gtk.init
  45. window = RubyApp.new
  46. Gtk.main

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

  1. toolbar = Gtk::Toolbar.new

Gtk::Toolbar小部件已创建。

  1. toolbar.set_toolbar_style Gtk::Toolbar::Style::ICONS

在工具栏上,我们仅显示图标。

  1. newtb = Gtk::ToolButton.new :stock_id => Gtk::Stock::NEW

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

  1. sep = Gtk::SeparatorToolItem.new

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

  1. toolbar.insert newtb, 0
  2. toolbar.insert opentb, 1
  3. ...

工具栏按钮插入到工具栏小部件中。

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

图:工具栏

撤销重做

以下示例演示了如何停用工具栏上的工具栏按钮。 这是 GUI 编程中的常见做法,例如保存按钮。 如果我们将文档的所有更改都保存到磁盘上,则在大多数文本编辑器中,“保存”按钮将被停用。 这样,应用会向用户指示所有更改都已保存。

  1. #!/usr/bin/ruby
  2. '''
  3. ZetCode Ruby GTK tutorial
  4. This example shows how to
  5. activate/deactivate a Gtk::ToolButton.
  6. Author: Jan Bodnar
  7. Website: www.zetcode.com
  8. Last modified: May 2014
  9. '''
  10. require 'gtk3'
  11. class RubyApp < Gtk::Window
  12. def initialize
  13. super
  14. @count = 2
  15. init_ui
  16. end
  17. def init_ui
  18. toolbar = Gtk::Toolbar.new
  19. toolbar.set_toolbar_style Gtk::Toolbar::Style::ICONS
  20. @undo = Gtk::ToolButton.new :stock_id => Gtk::Stock::UNDO
  21. @redo = Gtk::ToolButton.new :stock_id => Gtk::Stock::REDO
  22. sep = Gtk::SeparatorToolItem.new
  23. quit = Gtk::ToolButton.new :stock_id => Gtk::Stock::QUIT
  24. toolbar.insert @undo, 0
  25. toolbar.insert @redo, 1
  26. toolbar.insert sep, 2
  27. toolbar.insert quit, 3
  28. @undo.signal_connect "clicked" do
  29. on_undo
  30. end
  31. @redo.signal_connect "clicked" do
  32. on_redo
  33. end
  34. quit.signal_connect "clicked" do
  35. Gtk.main_quit
  36. end
  37. vbox = Gtk::Box.new :vertical, 2
  38. vbox.pack_start toolbar, :expand => false,
  39. :fill => false, :padding => 0
  40. self.add vbox
  41. set_default_size 300, 200
  42. set_window_position :center
  43. show_all
  44. set_title "Undo redo"
  45. signal_connect "destroy" do
  46. Gtk.main_quit
  47. end
  48. end
  49. def on_undo
  50. @count = @count - 1
  51. if @count <= 0
  52. @undo.set_sensitive false
  53. @redo.set_sensitive true
  54. end
  55. end
  56. def on_redo
  57. @count = @count + 1
  58. if @count >= 5
  59. @redo.set_sensitive false
  60. @undo.set_sensitive true
  61. end
  62. end
  63. end
  64. Gtk.init
  65. window = RubyApp.new
  66. Gtk.main

我们的示例从 GTK 库存资源创建撤消和重做按钮。 单击几下后,每个按钮均被停用。 按钮显示为灰色。

  1. @count = 2

@count变量决定激活或停用哪个按钮。

  1. @undo = Gtk::ToolButton.new :stock_id => Gtk::Stock::UNDO
  2. @redo = Gtk::ToolButton.new :stock_id => Gtk::Stock::REDO

我们有两个工具按钮:撤消和重做工具按钮。 图像来自库存资源。

  1. @undo.signal_connect "clicked" do
  2. on_undo
  3. end

单击撤消按钮,我们触发on_undo方法。

  1. if @count <= 0
  2. @undo.set_sensitive false
  3. @redo.set_sensitive true
  4. end

要激活或停用小部件,我们使用set_sensitive方法

Ruby GTK 中的菜单和工具栏 - 图5

图:撤销和重做

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