Duilib教程－HelloDuilib及DuiDesigner的简单使用

1、HelloDuilib

1. 首先理解DUILIB显示的一个基本流程，以下图：

 

 

在Duilib中，WindowImplBase 这个类表明了图中 “CWndClass”。

因此咱们须要作的是：

1）生成一个XML。

2）生成一个WindowImplBase对象。

3）加载XML。

4）显示窗口。

可是编写的时候，WindowImplBase已经帮咱们作了许多工做，咱们只须要指定XML路径，它就可以帮助咱们自动加载，很是方便。

可是通常我不喜欢先编写XML，我喜欢先写MAIN函数，再编写占位函数，再一个个地实现占位函数。因此咱们进入下一个步骤。

 

2. 创建工程。

1）若是是第一次使用DUILIB的话，你要把DUILIB加入到VS2008的环境变量中，个人Duilib保存在I:\GitHub\Duilib，设置的路径为：

包含路径：I:\GitHub\Duilib

源路径：I:\GitHub\Duilib

库路径：I:\GitHub\lib

以下图：

 

 

最后还要设置一下系统的环境变量为：I:\GitHub\Duilib\Bin，右键“个人电脑”->“属性”->“高级系统设置”，若是是XP的话，可能稍有不一样，弹出的操做以下图：

 

 

2）新建一个WIN32工程，以下图：

 

而后一直“下一步”。

 

在HelloDuilib.cpp中，只保留下列代码，其他全删除。

#include "stdafx.h"
#include "HelloDuilib.h"

int APIENTRY _tWinMain(HINSTANCE hInstance,
                     HINSTANCE hPrevInstance,
                     LPTSTR    lpCmdLine,
                     int       nCmdShow)

{
}

 

在stdafx.h中加入如下代码：

#include <ObjBase.h>
#include <Duilib/UIlib.h>

using namespace DuiLib;

#ifdef _DEBUG
#pragma comment (lib, "duilib_ud.lib")
#else
#pragma comment (lib, "duilib_u.lib")
#endif

而后编译一下，若是编译没有问题，就进入下一步，固然你得先编译DUILIB源码，编译unicode_debug和unicode_release两个版本。固然，所有版本都编译更佳。

 

3）新建一个从 WindowImplBase继承的类 CHelloDuilibWnd，而后将它的头文件的代码修改以下：

class CHelloDuilibWnd :
public WindowImplBase
{
public:
CHelloDuilibWnd(void);
~CHelloDuilibWnd(void);

protected:
virtual CDuiString GetSkinFolder() { return _T ("skin"); };
virtual CDuiString GetSkinFile()  { return _T ("HelloDuilib.xml"); };
virtual LPCTSTR GetWindowClassName(void) const { return _T ("HelloDuilib_Wnd"); };
};

 

说明：

GetSkinFolder () 须要返回 皮肤XML 所在的文件夹

GetSkinFile () 须要返回 皮肤 XML 的文件名（也能够包含路径）

GetWindowClassName () 须要返回这个窗口的类名，这个类名用于 RegisterClass.

 

4）返回去编写 WinMain 函数，以下：

#include "stdafx.h"
#include "HelloDuilibWnd.h"
#include "HelloDuilib.h"

int APIENTRY _tWinMain(HINSTANCE hInstance,
                     HINSTANCE hPrevInstance,
                     LPTSTR    lpCmdLine,
                     int       nCmdShow)

{
CPaintManagerUI::SetInstance(hInstance);// 加载XML的时候，须要使用该句柄去定位EXE的路径，才能加载XML的路径

CHelloDuilibWnd* wnd = new CHelloDuilibWnd; // 生成对象
wnd->Create(NULL, NULL, UI_WNDSTYLE_DIALOG, 0); // 建立DLG窗口
wnd->CenterWindow(); // 窗口居中
wnd->ShowWindow(); // 显示
CPaintManagerUI::MessageLoop(); // 消息循环

delete wnd; // 删除对象

return 0;
}

 

3.咱们再去建立皮肤XML。

首先，你得编译 DuiDesigner 这个工程，使用 DuiDesigner.sln 解决方案进行编译。在 bin中能够找到生成的 DuiDesigner.exe。打开，而后新建一个名为 HelloDuilib 的文件，该名称即为 CHelloDuilibWnd：：GetSkinFile（）返回的名称。

 

接下来，添加一个 VerticalLayout（点击下图中的1，再点击中间窗口位置，不是使用拖动的方式），而后选中这个VerticalLayout，再在最右边的属性栏中设置它的背景颜色。再在上面添加一个 Label 控件，将其Text修改成 “HelloDuilib”。

 

 

固然，你还能够添加按钮、EDIT等控件，还能够试验 BkColor2, BorderSize, BorderColor等属性。而后按 “CTRL+T”进行测试，个人测试结果以下：

 

按ESC便可退出测试，与VS的对话框测试同样的快捷键。

 

4.到 HelloDuilib 工程的生成目录下新一个文件夹“skin”，将生成的XML放到这个skin文件夹中，点击运行。

 

 

便可看到结果。

固然，你会发现你退不了程序，缘由是使用了

CPaintManagerUI::MessageLoop(); // 消息循环

跳出该循环，必须使用 PostQuitMessage (0); 函数。

固然你可使用：

Wnd->ShowModal () 用模态对话框代替非模态对话框显示

 

wnd->ShowWindow(); // 显示

CPaintManagerUI::MessageLoop(); // 消息循环

 

2、DuiDesigner的使用。

 

如上图，主要分为六大模块。

1为皮肤设计窗口，在上面添加控件规划你的皮肤。

2为WND窗口，请单击1与2，看属性栏变化。

3为控件添加窗口

4为属性设置窗口

5为窗口测试及控件对齐窗口

6为已添加控件层次查看窗口，固然它有三个TAB，只有控件层次才最有用。

 

在编写XML的时候，必定注意：

DUILIB XML必定要有一个底层 Layout！！！

不能直接在 WND上添加控件！

 

说明，这个工具可能会有诸多BUG，属性更改失效、时不时崩溃等，不过我遇到崩溃的状况比较少，新手可能会遇到较多，但不要抱怨，毕竟有这样一个工具已是十分难能难得了。

 

可能你已经看了属性栏中有诸多属性，你能够试着添加图片，修改颜色，修改边框等查看一下，而后你也能够看一下WND的属性，CAPION究竟是什么，MINMAXINFO又是什么。

 

这一节最后，我可能会要求你作一些额外的工做：

1.请尝试除 UI_WNDSTYLE_DIALOG 外的其它窗口建立方式，查看有什么不同。

2.XML是怎样加载的？

3.尝试添加按钮，并设置图片。

 

本节到此结束。

附带 HelloDuilib.zip