可视化程序设计(4) - 第一个图形窗口程序

0.准备工作-CodeLite设置

        要设置的内容有系统path，CodeLite环境变量，编译器等。

        0.1 增加两个path

我的电脑-属性-高级系统设置-环境变量：

双击打开新窗口，点新建两个路径（D:\CppPrograming\CodeLite\MinGW\bin和D:\CppPrograming\CodeLite\wxWidgets-3.2.8\lib\gcc_dll）。

        0.2 CodeLite环境变量

CodeLiteDir=C:\CppPrograming\CodeLite
WXCFG=gcc_dll\mswud
WXWIN=$(CodeLiteDir)\wxWidgets-3.2.8

        0.3编译器设置

点+号新增，选中目录D:\CppPrograming\CodeLite\MinGW\bin，等自动填充完毕后，根据上图修改即可。还有一个编译选项，用于解决中文显示不正确问题，如下图：

-g -fexec-charset=GBK -finput-charset=UTF-8

上述设置要注意空格和全角/半角问题，设置错误会影响后面的程序编译或运行。

        0.4 Plugins(插件）设置

        最常用的是两个插件，界面设计器和代码补全。点击菜单Plugins->Manage Plugins，选择LanguageServerPlugin和wxCrafter。

1.新建workspace

首次使用CodeLite,建立一个workspace。后面的项目都可以放在这个workspace里面。

2.wxWidgets 应用

main.cpp

#include "MainDialog.hpp"
#include <wx/app.h>
#include <wx/event.h>
#include <wx/image.h>// Define the MainApp
class MainApp : public wxApp
{
public:MainApp() {}virtual ~MainApp() {}virtual bool OnInit(){// Add the common image handlerswxImage::AddHandler(new wxPNGHandler);wxImage::AddHandler(new wxJPEGHandler);MainDialog mainDialog{ nullptr };mainDialog.ShowModal();return false;}
};DECLARE_APP(MainApp)
IMPLEMENT_APP(MainApp)

还有其它的程序文件，都是CodeLite的wxCrafter自动生成的。我们先编译和运行程序，然后再看其中我们需要了解的地方。运行结果如下：

3.进一步了解

3.1 和hello world的不同

hello world 是console程序，入口是函数是main; 本程序是GUI(Graphic User Interface)图形程序，Windows操作系统入口函数是WinMain()。

3.2 C++和C的不同

C是结构化的，C++是面向对象的。C++向下兼容C。

3.3 图形界面设计

用程序写出来，用工具画出来（可视化设计）。

4. wxCrafter设计界面

双击wxCrafter，打开设计界面。

增加一个按钮（button)，一个输入框（TextCtrl)。并生成按钮点击事件响应代码。先保存，再生成代码（Generate Code)。

然后回到程序设计界面，打开文件MainDialog.cpp，生成了函数

void MainDialog::OnButton21ButtonClicked(wxCommandEvent& event)，这个就是我们写按钮事件各应的地方。比如，当点击MyButton时，显示”欢迎"。代码如下：

void MainDialog::OnButton21ButtonClicked(wxCommandEvent& event)
{m_textCtrl22->WriteText("欢迎");
}

编译运行。