跳到主要内容

构建一个典型的CAx应用窗口

我们将典型的CAx应用窗口抽象为MainWindow控件。该控件提供了一个标准的主窗口框架，支持菜单栏、工具栏、状态栏、停靠窗口（Dock Widgets）以及中心窗口（Central Widget）的布局和管理。

该教程是对WUI Framework库的MainWindow控件的详细介绍，包括其结构、功能及使用方法。

创建MainWindow​

MainWindow是用于创建主窗口的控件，继承自Widget。它是一个高度模块化的窗口类，适用于需要复杂布局和功能的应用程序。

主要特点

  • 提供标准的窗口布局，包括菜单栏、工具栏、状态栏和中心窗口。
  • 支持停靠窗口（Dock Window），允许用户自定义窗口布局。
  • 适合构建功能复杂、需要多区域布局的应用程序。

运行下面的代码，可以初始化一个主窗口，它默认包含了空的菜单栏、中心窗口和状态栏，后续开发者可以向这些区域中添加业务控件。

import { Button, TreeWidget, TreeNode, TextEdit, TableWidget, Splitter, Orientation, Widget } from 'wui.basic';
import { MainWindow, EDockArea } from 'wui.framework';
import "./theme";

const mainWindow = new MainWindow();

菜单栏（Menu Bar）​

该区域提供了一个标准的菜单栏，用于放置应用程序的菜单项（如“文件”、“编辑”、“帮助”等）。

// menuBar
const menuBar = mainWindow.menuBar;
const fileMenu = menuBar.add('File');
fileMenu.width = 200;
fileMenu.addItem('New', '../../images/file_48.png').shortcutKey = 'Ctrl+N';
fileMenu.addItem('Open', '../../images/AppMenu-Open_32.png').shortcutKey = 'Ctrl+O';
fileMenu.addItem('Save', '../../images/AppMenu-Save_32.png').shortcutKey = 'Ctrl+S';
fileMenu.addItem('Save As', '../../images/AppMenu-SaveAs_32.png').shortcutKey = 'Ctrl+Shift+S';
fileMenu.addSeparator();
fileMenu.addItem('Exit', '../../images/App_Menu_Close.png').shortcutKey = 'Ctrl+Q';

工具栏（Tool Bar）​

工具栏用于放置常用工具按钮，通常位于窗口的顶部、底部或侧边，也可以被拖动使其悬浮。 设置方法：使用addToolBar()，可以指定它位于窗口的某个方位，或者不指定而默认在顶部。

// toolBar
const viewToolBar = mainWindow.addToolBar(EDockArea.Top);
new Button(viewToolBar, undefined, '../../images/view_from_back_32.png');
new Button(viewToolBar, undefined, '../../images/view_from_bottom_32.png');
new Button(viewToolBar, undefined, '../../images/view_from_front_32.png');
new Button(viewToolBar, undefined, '../../images/view_from_home_32.png');
new Button(viewToolBar, undefined, '../../images/view_from_left_32.png');
new Button(viewToolBar, undefined, '../../images/view_from_right_32.png');
new Button(viewToolBar, undefined, '../../images/view_from_top_32.png');

下面是添加两个tool bar在顶部的效果：

状态栏（Status Bar）​

该区域显示应用程序的状态信息（如提示信息、进度条等）。

中心窗口（Central Widget）​

该区域是主窗口的核心区域，用于放置主要的内容控件（如文本编辑器、绘图区域等）。

使用布局管理控件分割中心窗口​

MainWindow只能有一个中心控件（Central Widget），如果需要多个区域，可以使用布局管理器（如VBoxLayout、 Spliter）嵌套其他控件。

const treeWidget = new TreeWidget();
const tableWidget = new TableWidget();
const hSplitter = new Splitter(mainWindow.centralWidget);
hSplitter.add(treeWidget);
hSplitter.add(tableWidget);
hSplitter.setWidth(0, 250);
hSplitter.setWidth(1, 335);

MainWindow的优点​

  • 模块化设计： 提供标准化的主窗口结构，便于开发复杂的应用。
  • 灵活性： 支持动态调整布局（如Dock窗口的拖动、隐藏等）。
  • 易于扩展： 可以轻松添加或移除菜单项、工具栏按钮、停靠窗口等。