14、高级菜单管理与对话框使用指南

高级菜单管理与对话框使用指南

1. 菜单的重要性

在图形用户界面（GUI）应用程序中，设计良好的菜单是一项重要功能，却常常被低估其作用。对于新用户而言，菜单通常是他们接触应用程序的第一站，它就像一个学习和探索工具，能让用户快速了解应用的功能。而对于不常使用该应用的用户来说，菜单则能帮助他们回忆起如何使用一些不太常用的功能。

2. 添加下拉菜单的基本步骤

在应用程序中添加下拉菜单，可按以下步骤操作：
1. 构建一个 FXMenuBar 小部件，将其作为主窗口的子部件。
2. 为主窗口拥有的每个下拉菜单构建一个或多个 FXMenuPane 小部件。例如，为“文件”菜单和“编辑”菜单分别创建一个菜单窗格。
3. 构建一个 FXMenuTitle 小部件，作为菜单栏的子部件，以建立菜单栏和菜单窗格之间的链接。
4. 向菜单窗格中添加一个或多个 FXMenuCommand 小部件，每个小部件代表用户可以执行的一个操作。使用 connect() 方法将一段 Ruby 代码与每个菜单命令关联起来。

以下是一个简单示例：

# 假设 self 是主窗口
menu_bar = FXMenuBar.new(self)
file_menu_pane = FXMenuPane.new(self)
file_new_command = FXMenuCommand.new(file_menu_pane, "New")
file_open_command = FXMenuCommand.new(file_menu_pane, "Open...")
file_save_command = FXMenuCommand.new(file_menu_pane, "Save")
file_save_as_command = FXMenuCommand.new(file_menu_pane, "Save As...")
file_menu_title = FXMenuTitle.new(menu_bar, "File", :popupMenu => file_menu_pane)

3. 创建级联和滚动菜单

• 级联菜单 ：级联菜单是嵌套在其他菜单窗格中的菜单窗格。例如，在已有的“文件”菜单中添加“导出”子菜单，步骤如下：
  1. 为“导出”子菜单构建新的菜单窗格。
  2. 向新菜单窗格中添加菜单命令。
  3. 在“文件”菜单窗格中添加 FXMenuCascade 小部件，将其与“导出”菜单窗格关联起来。

示例代码如下：

# 假设 menu_bar 是菜单栏，self 是主窗口
export_menu_pane = FXMenuPane.new(self)
export_gif_command = FXMenuCommand.new(export_menu_pane, "Export as GIF")
export_jpeg_command = FXMenuCommand.new(export_menu_pane, "Export as JPEG")
export_png_command = FXMenuCommand.new(export_menu_pane, "Export as PNG")
export_tiff_command = FXMenuCommand.new(export_menu_pane, "Export as TIFF")
export_cascade = FXMenuCascade.new(file_menu_pane, "Export", :popupMenu => export_menu_pane)

需要注意的是，虽然可以进一步嵌套级联菜单，但应避免过度嵌套，因为深度嵌套的菜单使用起来非常困难。

• 滚动菜单 ：当菜单中有大量信息需要显示时，滚动菜单窗格是一个不错的选择。 FXScrollPane 是 FXMenuPane 的子类，可用于替代非滚动菜单窗格。创建滚动菜单窗格的步骤如下：
  1. 使用 FXScrollPane.new 方法创建滚动菜单窗格，指定主窗口和可见菜单项的数量。
  2. 向滚动菜单窗格中添加菜单命令。
  3. 创建 FXMenuTitle 小部件，将其与滚动菜单窗格关联起来。

示例代码如下：

# 假设 menu_bar 是菜单栏，self 是主窗口，$state_names 是一个包含州名的数组
states_menu_pane = FXScrollPane.new(self, 8)
$state_names.each do |state_name|
  FXMenuCommand.new(states_menu_pane, state_name)
end
states_menu_title = FXMenuTitle.new(menu_bar, "States", :popupMenu => states_menu_pane)

滚动菜单窗格在菜单项是通过编程方式生成且不确定菜单项数量时特别有用，但使用时也应谨慎，因为它对用户来说可能不太容易操作。

4. 在菜单中添加分隔符、单选按钮和复选按钮

• 分隔符 ：使用 FXMenuSeparator 小部件可以在菜单窗格中创建一个视觉分隔线，用于区分相关命令组。示例代码如下：

FXMenuSeparator.new(menu_pane)

• 单选按钮 ：使用 FXMenuRadio 小部件可以在菜单中添加单选按钮。为确保单选按钮的选择相互排斥，应将每个单选按钮与同一个 FXDataTarget 关联起来。示例代码如下：

@size = FXDataTarget.new(1)
size_pane = FXMenuPane.new(self)
FXMenuRadio.new(size_pane, "Small", :target => @size, :selector => FXDataTarget::ID_OPTION)
FXMenuRadio.new(size_pane, "Medium", :target => @size, :selector => FXDataTarget::ID_OPTION+1)
FXMenuRadio.new(size_pane, "Large", :target => @size, :selector => FXDataTarget::ID_OPTION+2)
FXMenuRadio.new(size_pane, "Jumbo", :target => @size, :selector => FXDataTarget::ID_OPTION+3)
size_menu_title = FXMenuTitle.new(menu_bar, "Size", :popupMenu => size_pane)
@size.connect(SEL_COMMAND) do
  # @size.value 保存着所选大小的索引
end

• 复选按钮 ：使用 FXMenuCheck 小部件可以在菜单中添加复选按钮。示例代码如下：

@fit_to_screen = FXDataTarget.new(false)
FXMenuCheck.new(size_pane, "Fit Contents to Screen", :target => @fit_to_screen, :selector => FXDataTarget::ID_VALUE)

5. 添加工具栏到应用程序

FXToolBar 小部件可视为另一种布局管理器，常用于填充带有图标的按钮，以提供对常用功能的快速访问。添加工具栏的步骤如下：
1. 创建 FXToolBar 小部件，设置布局选项，如 PACK_UNIFORM_WIDTH 以确保按钮宽度一致。
2. 向工具栏中添加 FXButton 小部件，设置按钮的标签、图标和提示信息。

示例代码如下：

# 假设 top_dock_site 是停靠站点，tool_bar_shell 是工具栏外壳，new_icon、open_icon、save_icon、save_as_icon 是图标
tool_bar = FXToolBar.new(top_dock_site, tool_bar_shell, :opts => PACK_UNIFORM_WIDTH|FRAME_RAISED|LAYOUT_FILL_X)
new_button = FXButton.new(tool_bar, "\tNew\tCreate new document.", :icon => new_icon)
open_button = FXButton.new(tool_bar, "\tOpen\tOpen document file.", :icon => open_icon)
save_button = FXButton.new(tool_bar, "\tSave\tSave document.", :icon => save_icon)
save_as_button = FXButton.new(tool_bar, "\tSave As\tSave document to another file.", :icon => save_as_icon)

需要注意的是，按钮标签字符串中的制表符用于分隔按钮标签、工具提示消息和状态栏帮助消息。如果标签字符串以制表符开头，则按钮表面将只显示图标。

6. 创建浮动菜单栏和工具栏

FXRuby 支持创建浮动的菜单栏和工具栏，用户可以将它们从“停靠点”拖离，重新定位到屏幕的其他位置，甚至可以重新附着到主窗口的其他位置。创建浮动工具栏的步骤如下：
1. 构建 FXToolBarShell 小部件，作为工具栏浮动时的容器。
2. 构建一个或多个停靠站点，为工具栏提供返回主窗口的位置。
3. 构建 FXToolBar 小部件，指定初始停靠站点和外壳。
4. 向工具栏中添加 FXToolBarGrip 小部件，作为用户拖动工具栏的手柄。

示例代码如下：

# 假设 self 是主窗口
tool_bar_shell = FXToolBarShell.new(self)
top_dock_site = FXDockSite.new(self, :opts => LAYOUT_FILL_X|LAYOUT_SIDE_TOP)
bottom_dock_site = FXDockSite.new(self, :opts => LAYOUT_FILL_X|LAYOUT_SIDE_BOTTOM)
tool_bar = FXToolBar.new(top_dock_site, tool_bar_shell, :opts => PACK_UNIFORM_WIDTH|FRAME_RAISED|LAYOUT_FILL_X)
FXToolBarGrip.new(tool_bar, :target => tool_bar, :selector => FXToolBar::ID_TOOLBARGRIP, :opts => TOOLBARGRIP_DOUBLE)

7. 使用对话框选择文件和目录

• 文件对话框（ FXFileDialog ） ： FXFileDialog 是最常用的标准对话框之一，可用于让用户选择现有文件或输入要写入的文件名。使用步骤如下：
  1. 创建 FXFileDialog 实例，设置对话框标题。
  2. 初始化 patternList 数组，指定可用的文件过滤器。
  3. 设置 selectMode ，指定文件选择模式（如选择单个文件或多个文件）。
  4. 调用 execute() 方法显示对话框，等待用户操作。
  5. 根据 execute() 方法的返回值判断用户是否点击了“确定”按钮，并获取所选文件的路径。

示例代码如下：

# 假设 self 是主窗口，open_jpeg_file 是打开 JPEG 文件的方法
dialog = FXFileDialog.new(self, "Open JPEG File")
dialog.patternList = [
  "All Files (*)",
  "JPEG Files (*.jpg, *.jpeg)"
]
dialog.selectMode = SELECTFILE_EXISTING
if dialog.execute != 0
  open_jpeg_file(dialog.filename)
end

如果需要选择多个文件，可以将 selectMode 设置为 SELECTFILE_MULTIPLE ：

dialog = FXFileDialog.new(self, "Open JPEG File(s)")
dialog.patternList = [
  "All Files (*)",
  "JPEG Files (*.jpg, *.jpeg)"
]
dialog.selectMode = SELECTFILE_MULTIPLE
if dialog.execute != 0
  dialog.filenames.each do |filename|
    open_jpeg_file(filename)
  end
end

• 目录对话框（ FXDirDialog ） ：当需要用户选择单个目录时， FXDirDialog 是一个更好的选择。使用步骤如下：
  1. 创建 FXDirDialog 实例，设置对话框标题。
  2. 初始化 directory 属性，指定对话框显示的初始目录。
  3. 调用 execute() 方法显示对话框，等待用户操作。
  4. 根据 execute() 方法的返回值判断用户是否点击了“确定”按钮，并获取所选目录的路径。

示例代码如下：

# 假设 self 是主窗口，open_directory 是打开目录的方法
dialog = FXDirDialog.new(self, "Choose Directory")
dialog.directory = "/Users/lyle"
if dialog.execute != 0
  open_directory(dialog.directory)
end

如果不初始化 directory 属性，对话框将默认显示当前工作目录。

操作步骤总结

操作	步骤
添加下拉菜单	1. 构建 FXMenuBar ；2. 构建 FXMenuPane ；3. 构建 FXMenuTitle ；4. 添加 FXMenuCommand 并关联代码
创建级联菜单	1. 构建新的 FXMenuPane ；2. 添加菜单命令；3. 添加 FXMenuCascade 关联菜单窗格
创建滚动菜单	1. 使用 FXScrollPane 创建菜单窗格；2. 添加菜单命令；3. 关联 FXMenuTitle
添加分隔符、单选按钮、复选按钮	分别使用 FXMenuSeparator 、 FXMenuRadio 、 FXMenuCheck 小部件，并关联 FXDataTarget
添加工具栏	1. 创建 FXToolBar 并设置布局；2. 添加 FXButton 并设置标签、图标和提示信息
创建浮动工具栏	1. 构建 FXToolBarShell ；2. 构建停靠站点；3. 构建 FXToolBar ；4. 添加 FXToolBarGrip
使用文件对话框	1. 创建 FXFileDialog ；2. 设置 patternList 和 selectMode ；3. 调用 execute() 并处理结果
使用目录对话框	1. 创建 FXDirDialog ；2. 设置 directory 属性；3. 调用 execute() 并处理结果

流程图

graph TD;
    A[开始] --> B[添加下拉菜单];
    B --> C{是否需要级联或滚动菜单};
    C -- 是 --> D[创建级联或滚动菜单];
    C -- 否 --> E[添加分隔符、单选按钮、复选按钮];
    E --> F{是否需要工具栏};
    F -- 是 --> G[添加工具栏];
    F -- 否 --> H{是否需要浮动工具栏};
    G --> H;
    H -- 是 --> I[创建浮动工具栏];
    H -- 否 --> J{是否需要选择文件或目录};
    I --> J;
    J -- 是 --> K[使用文件或目录对话框];
    J -- 否 --> L[结束];
    D --> E;
    K --> L;

通过以上步骤和示例代码，你可以在 FXRuby 应用程序中实现高级菜单管理和对话框功能，为用户提供更好的交互体验。

高级菜单管理与对话框使用指南

8. 对话框的作用和特点

对话框是一种特殊的顶级窗口，与主窗口类似，它可以“漂浮”在桌面上，作为其他小部件的容器。对话框通常包含标题栏、菜单栏、状态栏等元素，用于调整大小或关闭窗口。然而，与主程序不同的是，对话框通常是临时性的，只在用户与之交互时显示在屏幕上，并且在应用程序中扮演次要的支持角色。

9. 自定义对话框的创建

除了使用 FXRuby 提供的标准对话框外，还可以创建自定义对话框来处理应用程序的特定设置或其他功能。创建自定义对话框的一般步骤如下：
1. 创建一个新的顶级窗口，继承自 FXDialogBox 类。
2. 在对话框中添加所需的小部件，如标签、文本框、按钮等。
3. 设置小部件的布局和属性。
4. 处理对话框的事件，如按钮点击事件。

以下是一个简单的自定义对话框示例：

require 'fox16'

include Fox

class CustomDialog < FXDialogBox
  def initialize(owner)
    super(owner, "Custom Dialog", DECOR_ALL)

    # 创建垂直布局管理器
    vbox = FXVerticalFrame.new(self, LAYOUT_FILL_X|LAYOUT_FILL_Y)

    # 添加标签
    label = FXLabel.new(vbox, "Please enter your name:")

    # 添加文本框
    text_field = FXTextField.new(vbox, 20)

    # 添加按钮
    button_frame = FXHorizontalFrame.new(vbox, LAYOUT_FILL_X)
    ok_button = FXButton.new(button_frame, "OK", nil, self, ID_ACCEPT)
    cancel_button = FXButton.new(button_frame, "Cancel", nil, self, ID_CANCEL)
  end
end

# 在主窗口中使用自定义对话框
class MainWindow < FXMainWindow
  def initialize(app)
    super(app, "Main Window", nil, nil, DECOR_ALL)

    # 创建按钮
    button = FXButton.new(self, "Open Custom Dialog", nil) do |btn|
      btn.connect(SEL_COMMAND) do
        dialog = CustomDialog.new(self)
        if dialog.execute != 0
          # 处理对话框返回结果
        end
      end
    end
  end

  def create
    super
    show(PLACEMENT_SCREEN)
  end
end

# 创建应用程序实例
app = FXApp.new("CustomDialogExample", "CustomDialogExample")
main_window = MainWindow.new(app)
app.create
app.run

10. 对话框的事件处理

在对话框中，通常需要处理各种事件，如按钮点击事件、文本框输入事件等。可以使用 connect() 方法来连接事件和处理代码。以下是一个处理按钮点击事件的示例：

button = FXButton.new(dialog, "OK", nil) do |btn|
  btn.connect(SEL_COMMAND) do
    # 处理按钮点击事件
    dialog.handle(self, MKUINT(ID_ACCEPT, SEL_COMMAND))
  end
end

11. 对话框的布局管理

对话框的布局管理与主窗口类似，可以使用各种布局管理器来安排小部件的位置和大小。常见的布局管理器包括 FXVerticalFrame 、 FXHorizontalFrame 、 FXMatrix 等。以下是一个使用 FXVerticalFrame 布局管理器的示例：

vbox = FXVerticalFrame.new(dialog, LAYOUT_FILL_X|LAYOUT_FILL_Y)
label = FXLabel.new(vbox, "Please enter your name:")
text_field = FXTextField.new(vbox, 20)
button_frame = FXHorizontalFrame.new(vbox, LAYOUT_FILL_X)
ok_button = FXButton.new(button_frame, "OK", nil, dialog, ID_ACCEPT)
cancel_button = FXButton.new(button_frame, "Cancel", nil, dialog, ID_CANCEL)

12. 对话框的样式和装饰

可以通过设置对话框的样式和装饰来改变其外观。常见的样式和装饰选项包括 DECOR_ALL 、 DECOR_BORDER 、 DECOR_TITLE 等。以下是一个设置对话框样式的示例：

dialog = FXDialogBox.new(owner, "Custom Dialog", DECOR_ALL)

对话框使用注意事项

注意事项	说明
临时性	对话框通常是临时性的，只在用户与之交互时显示
次要角色	在应用程序中扮演次要的支持角色
布局管理	使用布局管理器安排小部件的位置和大小
事件处理	使用 connect() 方法处理各种事件
样式装饰	通过设置样式和装饰改变对话框的外观

流程图

graph TD;
    A[开始] --> B[创建自定义对话框];
    B --> C[添加小部件];
    C --> D[设置布局和属性];
    D --> E[处理事件];
    E --> F[显示对话框];
    F --> G{用户操作};
    G -- 确定 --> H[处理结果];
    G -- 取消 --> I[关闭对话框];
    H --> J[结束];
    I --> J;

通过以上内容，我们详细介绍了 FXRuby 中对话框的使用方法，包括标准对话框和自定义对话框的创建、事件处理、布局管理等。合理使用对话框可以为应用程序提供更好的用户交互体验，满足不同的功能需求。在实际开发中，可以根据具体情况选择合适的对话框类型，并灵活运用各种技巧来实现所需的功能。