嘉兴网站排名优化报价,培训行业门户网站建设,如何在家里做网站,个人网站能 做淘客吗MVC模式#xff0c;是天底下编写GUI程序最为经典、实效的一种软件架构模式。当一个人学完菜单栏、开始学习工具栏时#xff0c;就是他的一生中#xff0c;最适合开始认识 MVC 模式的好时机之一。这节将安排您学习#xff1a; Model-View-Controller 模式如何创建工具栏以及… MVC模式是天底下编写GUI程序最为经典、实效的一种软件架构模式。当一个人学完菜单栏、开始学习工具栏时就是他的一生中最适合开始认识 MVC 模式的好时机之一。这节将安排您学习 Model-View-Controller 模式如何创建工具栏以及如何于其上创建普通、多选、单选工具按钮控件之间如何通过“空闲”事件实现状态统一 0. 课堂视频
建议先看视频再看文本教程。最后到 d2school 课堂做本课的学习强化练习。 GUI07-学工具栏懂 MVC 1. 才不是题外话MVC
MVC模式是天底下编写GUI程序最为经典、实效的一种软件架构模式。当一个人学完菜单栏、开始学习工具栏时就是他的一生中最适合开始认识 MVC 模式的好时机之一。
MVC 是 “Model-View-Controller” 的简写
Model / 模型可认为就是我们在代码中定义的各种业务数据View / 视图业务数据的展现形式一种模型数据往往有多种展现形式Controller / 控制器 用户通过控制器以可定制的方式获取数据模式及指定形式展现视图。
程序员开发软件时将代码按照 Model-View-Controller 加以分离能让软件代码
逻辑意图更清晰耦合更低更可维护 MVC 比较适用于中大型软件代码的组织我们前几节课所写的程序看似简单但其实 GUI软件没有小项目是底层的库比如 wxWidgets默默地做出大量支持包括 MVC 架构。 以前面课堂写的小例程为例我们在窗体上鼠标位置下显示鼠标所在的坐标值并且允许用户做如下控制
是否显示坐标值或仅显示一行提示文字文字以蓝或红哪种颜色显示。
则至少有两个数据模型
编号ModelM1表达坐标的两个整数x, yM2表达用户选中颜色的菜单项ID
以及这两个数据至少四种组合态的展现形式
编号View 数据视图V1蓝色 显示坐标V2红色 显示坐标V3蓝色 不显示坐标仅显示提示V4红色 不显示坐标仅显示提示
以下是实际运行时显示的 V2 状态界面截图 正如本课视频所讲到View 并不仅仅包含业务数据的展现用于实现和用户交互的 GUI 界面控制比如我们已学的菜单、工具栏、状态栏等界面控件也是 View 的组成。它们也会有和业务数据紧密关联的状态比如菜单或工具图标的多选或单选状态。
以上归纳了 Model 和 View那 Controller是什么呢是控制流程。在我们所写的程序中程序接收用户的输入鼠标点击等然后调用相应的事件函数在事件函数中修改 Model 数据最后引发视图刷新包括业务视图刷新和人机交互界面中控件状态的改变这整个过程即为 Controller。
初接触时对 MVC 的三个最常见的误解为 误解一以为 View的展现内容只能给人看。正解一个程序的输出可以是另一个程序的输入此时可视为后者是前者的“用户”同理同一个程序的控制也可能是来自另一个程序的输入。正因为 Views 不一定真实的人所以在服务端程序中特别是多层网络架构的软件系统中MVC 的应用也广泛可见 误解二以为人机交互过程中界面控件就是 Controller 。正解Controller 是接受用户不一定是人见上的输入然后引发即动作的发起者Model 被修改并最终体现到 View 变化的每一个完整过程。 误解三以为只有业务数据的展现是 Views。正解凡是需要展现给用户看的内容基本都是 View包括控件的状态。
2. 创建图标
在 Windows 系统下应用程序工具栏按钮所需要的图标需要使用 ICON 类型的图标在 wxWidgets中对应到 wxIcon 类。
2.1 从文件直接创建
可在程序运行时通过读取指定路径相对或绝对读取指定的图标文件以构造出一个wxIcon对象示例代码
wxIcon myIcon wxIcon(wxT(路径/图标文件.ico), wxBITMAP_TYPE_ICO, 16, 16);注意创建所得是普通的栈对象非堆对象。
入参1图标的磁盘位置包括路径和文件名可使用绝对或相对路径入参2图标文件的类型注意是 wxBITMAP_TYPE_ICO而非 wxBITMAP_TYPE_ICON入参34:两个整数图标的长、宽像素。
在程序运行时读取外部文件以创建图标或其它资源——
好处可随时更换图标——不少应用程序支持 “换肤”对于工具栏按钮来说这是一种简便可行的方法坏处程序无法单独运行。比如你想把程序发给你的朋友就得同时附上这些图标文件并需确保路径正确。
2.2 从程序嵌入资源中创建
Windows 支持将一些资源嵌入到可执行文件.exe“体内”从而实现可执行文件可独立运行。
Code::Blocks 向导生成的 wxWidgets 项目中已经自带 resource.rc 的文件打开它默认内容为
aaaa ICON wx/msw/std.ico
#include wx/msw/wx.rc默认包含的 wxWidgets 程序图标。其中aaaa 为资源的名字ICON 为资源类型此处为图标最后一列 “wx/msw/std.ico” 为图标在磁盘上的路径和名字仅编译时需用到运行时不再需要此路径。
假设我们已经在当前项目下创建名为 icons 的子目录并于其下准备好 about.ico、show_info.ico、blue_txt.ico、red_txt.ico、quit.ico 等图标则可将 resouce.rc 内容修改成
aaaa ICON wx/msw/std.icoabout ICON icons/about.ico
blue_txt ICON icons/blue_txt.ico
red_txt ICON icons/red_txt.ico
quit ICON icons/quit.ico
show_info ICON icons/show_info.ico#include wx/msw/wx.rc这样在编译后相关图标资源就会内嵌在编译生成的可执行文件中并可通过 wxIcon 的另一个构造函数读出并且成图标对象
wxIcon icon wxIcon(wxT(资源名), wxBITMAP_TYPE_ICO_RESOURCE, 16, 16);比如创建 quit 图标
wxIcon iconQuit wxIcon(wxT(quit), wxBITMAP_TYPE_ICO_RESOURCE, 16, 16);本文后续代码均从内嵌资源创建图标。
3. 工具栏与工具栏按钮
3.1 创建工具栏
wxFrame::CreateToolBar() 用于创建一个空白的工具栏该方法返回一个 wxToolBar * 指针。
示例代码
wxToolBar* tb this-CreateToolBar(); // 创建工具栏以上代码中的 this 工具栏所属的框架窗口它也将负责该工具栏的生命周期在框架窗口关闭前将自释放上面创建工具栏堆对象。 以下各种工具栏按钮都需要由工具栏wxToolBar对象来创建。
3.2 普通工具按钮
使用工具栏对象创建一个普通工具栏按钮方法名为 “AddTool()”示例代码
// 准备图标 (从内嵌资源中读取)
wxIcon iconQuit wxIcon(wxT(quit), wxBITMAP_TYPE_ICO_RESOURCE, 16, 16);// 创建带图标的普通工具按钮
tb-AddTool(idMenuQuit, _(Quit), iconQuit, _(Quit the Application));入参1工具按钮要执行的命令对应的ID通常来自已经创建的菜单项所绑定的事件ID。比如本例的 idMenuQuit 为 “Quit” 菜单项的ID该命令用于退出整个应用程序入参2工具按钮的标签默认状态下并不显示复杂情况下可设置为在图标底部或右侧显示按钮的名字入参3前面创建的图标对象并非指针入参4鼠标在该工具按钮上浮动时出现的提示。
也可将构造图标对象和创建工具按钮合成一步
tb-AddTool(idMenuQuit, _(Quit), wxIcon(wxT(quit), wxBITMAP_TYPE_ICO_RESOURCE, 16, 16) _(Quit the Application));实际还需要第三步但当连续为同一个工具栏创建多个工具按钮时仅需在最后调用一次
tb-Realize(); // 真实展现最后调用只需一次仅在调用该方法后工具栏才真正地将新创建的各工具按钮展现出来。
3.3 复选工具按钮
使用方法为AddCheckTool()示例代码
//复选工具按钮是否显示鼠标坐标
tb-AddCheckTool(idMenuShowMotionInfo, _(Show Info),wxIcon(wxT(show_info), wxBITMAP_TYPE_ICO_RESOURCE, 16, 16),wxNullBitmap, // 按钮变灰时显示的图标由程序自动生成_(Show motion info or no)); // 提示第四个入参用于指定该复选按钮在不可用disabled状态下如何展现除非你确实想为之提供一种特别的样子否则可如代码所示指定使用代表空图片的对象 wxNullBitmap系统将自动以 “灰度” 方式生成该状态的展现样式。
因为方法名已经是 “AddCheckTool ()”故无需像普通的 “AddTool ()” 那样再由入参指定按钮的类型下面用于创建单选工具按钮的方法也是如此。
3.4 单选工具按钮
使用方法为AddRadioTool()示例代码
//单选工具按钮两个选择使用蓝色文本或使用红色文本
tb-AddRadioTool(idMenuBlueText, _(Blue Text),wxIcon(wxT(blue_txt), wxBITMAP_TYPE_ICO_RESOURCE, 16, 16),wxNullBitmap, // 按钮变灰时显示的图标由程序自动生成_(Set text blue)); // 提示tb-AddRadioTool(idMenuRedText, _(Red Text),wxIcon(wxT(red_txt), wxBITMAP_TYPE_ICO_RESOURCE, 16, 16),wxNullBitmap,_(Set text red));和复选按钮不同单独一个单选按钮没有意义通常需要接连创建一组让用户从多个中选择一个即为单选之意。
同一工具栏上如有多组单选按钮除了可考虑使用分隔见下面小节在视觉上加以分组之外并不需要再额外在逻辑上分组因为工具按钮通常对应到菜单项而对菜单项我们已经作了逻辑分组详见 《第5节 玩转主菜单》。
3.5 分隔线
tb-AddSeparator(); // 分隔线3.6 连续代码
以下是在示例项目中 wxToolBarFrame 构造函数尾部创建工具栏及相应按钮、分隔线的代码片段 // 工具栏wxToolBar* tb this-CreateToolBar(); // 创建工具栏wxIcon iconQuit wxIcon(wxT(quit), wxBITMAP_TYPE_ICO_RESOURCE, 16, 16);tb-AddTool(idMenuQuit, _(Quit), iconQuit, _(Quit the Application));tb-AddSeparator(); // 分隔线//复选工具按钮是否显示鼠标坐标tb-AddCheckTool(idMenuShowMotionInfo, _(Show Info),wxIcon(wxT(show_info), wxBITMAP_TYPE_ICO_RESOURCE, 16, 16),wxNullBitmap, // 按钮变灰时显示的图标由程序自动生成_(Show motion info or no)); // 提示tb-AddSeparator(); // 分隔线// 单选工具按钮两个tb-AddRadioTool(idMenuBlueText, _(Blue Text),wxIcon(wxT(blue_txt), wxBITMAP_TYPE_ICO_RESOURCE, 16, 16),wxNullBitmap,_(Set text blue));tb-AddRadioTool(idMenuRedText, _(Red Text),wxIcon(wxT(red_txt), wxBITMAP_TYPE_ICO_RESOURCE, 16, 16),wxNullBitmap,_(Set text red));tb-Realize(); // 真实展现最后调用只需一次4. 控件状态同步
为了使用方便GUI 程序往往允许用户从不同控件入口发起操作在本例用户通过菜单栏或工具栏都可以修改文字的颜色。窗体上输出的文字归属 View但是菜单项或工具按钮的显示状态也归于 View 范畴它们的选中状态必须保持同步。
举例用户选中 “变帅” 菜单项则 工具栏上 “变帅” 按钮也需要在操作后变成“被按下”的状态反过来也一样用户按下 “变帅” 按钮则同名的菜单项之前必须打上勾。这还是复选控件如果是单选控件则需要的维护一组控件的状态会更加啰嗦容易出错。
因此无论是大家比较熟悉的 Windows 或 苹果的 GUI 系统还是 Linux 下的各种 GUI 桌面系统或者是新兴的智能手机 Android 系统或者是为浏览器前端开发提供支持各种前端库基本都会提供一套机制来辅助程序员实现界面组件的状态同步。
GUI 程序有一个共同点它不可能很忙。有人说我打开 Word然后以平均每分钟 120 个汉字接近 500 次按键的速度打字这 Word 肯定忙坏了呀 不是的这点输入对现在的计算机和程序来说真是一点压力没有程序仍然能在你的指法间隙间“挤出”一大把无所事事的时间不信你可以打开 Windows 任务管理器看看你要能以怎样的打字速度让 CPU 占用率提高 0.1%。
程序这么闲自然就可以利用起来闲着也是闲着不如打打孩子——不是不如去检查一下有哪个控件状态不对我们好把它纠正过来。
这种空闲事件在很多 GUI 系统比如 Windows 或 Android中称为 “Idle-Event” 对应的事件处理器称为 “Idle-Handler”。我们正在学习的 wxWidgets 又将它细分出一个 “wxUpdateUIEvent”即专门用来处理用户界面UI的控件状态更新Update的事件。对应的绑定事件函数的宏为“EVT_UPDATE_UI”。
以用户可以切换坐标是否显示这一功能为例按照 MVC 的划分原则我们首先需要有的 Model 数据是
a) 坐标数据 x,y 之前课堂已经添加了b) 是否显示之前课堂没有添加因此本课需为框架窗口类加上该成员数据取名 showMotionInfo一个 bool 值。
接着当用户依赖某个操作路径菜单或工具按钮发起切换操作时作为一个GUI开发框架wxWidget将配合作为一个 GUI 操作系统的 Windows共同帮我们完成复杂的 Controller 过程视频里说的那些“线”最终调用到我们写的事件响应函数该函数修改作为 Model 数据之一的 showMotionInfo。如何知道将它修改成 true 或 false 呢也就是说如何知道用户当前操作是选中或是取消选中呢仍然得感谢 wxWidgets 和其下的操作系统它已经将该信息放在事件数据中的 “IsCheck()” 方法里了。
接受用户输入修改 Model 数据showMotionInfo的示例代码
// 1 绑定到菜单上
EVT_MENU(idMenuShowMotionInfo, HelloToolBarFrame::OnShowMotionInfo)...// 2 在事件响应函数中修改 Model状态信息在事件中
void HelloToolBarFrame::OnShowMotionInfo(wxCommandEvent event)
{this-showMotionInfo event.IsChecked(); // 修改 model
}接下来程序在某个时刻发现自己很闲于是它去开始检查并纠正哪个“孩子”控件状态不对——但是它自己并不知道也不记录具体哪个控件所应该处于正确状态是什么——谁知道当然只有作为程序员的我们知道所以程序会自动触发 UpdateUIEvent 事件让我们在这个事件里去告诉它某个“孩子”现在的正确状态应该是在睡觉……如果有十个不同ID的控件需要更新状态程序会触发十次这样的事件。
以 “idMenuShowMotionInfo” 为例空闲的程序想知道绑定该ID的菜单项和工具图标当前应该处于什么状态时它会触发以下的事件函数被调用
// 3 绑定控件ID
EVT_UPDATE_UI(idMenuShowMotionInfo, HelloToolBarFrame::OnUpdateShowMotionInfo)...// 4 在事件中由程序员告诉程序当前控件的正确状态是否选中
void HelloToolBarFrame::OnUpdateShowMotionInfo(wxUpdateUIEvent event)
{event.Check(this-showMotionInfo); // 有没有选中
}请对比代码中的 3 和 4从 “SET/写” 和 “GET/读” 的角度加以理解。 以上讲的是控件的复选状态它的状态就是 “选中” 或 “没选中”对比之下单选状态稍显复杂。因为单选状态的控件通常成组出现至少两个对应的详细状态应该是“选中哪一个了”。再次感谢所有 GUI 库当它们在触发控件的 “UpdateEvent” 时会带上这个控件的 ID因此我们只需检查它是不是我们记录的用户选中的那个控件ID即可。
比如颜色选择有两项蓝或红当用户做出选择我们就用 Model 数据selectedColorId 记录下来
// 5 绑定控件ID同一组单选控件需要全部绑定到同一个事件函数
EVT_UPDATE_UI(idMenuBlueText, HelloToolBarFrame::OnUpdateTextColor)
EVT_UPDATE_UI(idMenuRedText, HelloToolBarFrame::OnUpdateTextColor)...// 6 记录用户选的是哪个ID
void HelloToolBarFrame::OnTextColorSelected(wxCommandEvent event)
{selectedColorId event.GetId();
}对应的当程序因为闲着也是闲着又要 “打孩子” 时我们是这样告诉它哪个 “孩子” 需要被选中哪个 “孩子” 不需要
// 7 同样需要绑定一组单选控件的ID
EVT_UPDATE_UI(idMenuBlueText, HelloToolBarFrame::OnUpdateTextColor)
EVT_UPDATE_UI(idMenuRedText, HelloToolBarFrame::OnUpdateTextColor)...// 8 在事件中由程序员告诉程序它来“问”的控件是不是被选中的那个
void HelloToolBarFrame::OnUpdateTextColor(wxUpdateUIEvent event)
{event.Check(event.GetId() this-selectedColorId);
}5 Model 数据
最后汇总一下本例程用到的 Model 数据
int xPos, yPos;int selectedColorId idMenuBlueText;bool showMotionInfo false; 其中前两项是在之前的课堂定义的。
