标题
- 1、DuiLib入门程序1
- 1.1、DuiLib程序版本1
- 1.2、DuiLib程序版本2
- 1.3、DuiLib程序版本3,增加编写界面xml
- 1.4、DuiLib程序版本4,继续修改xml布局
- 1.5、DuiLib程序版本5,继续修改xml布局
- 5.6、DuiLib程序版本5,继续修改xml布局
- 2、DuiLib入门程序2,制作一个简单的界面
- 3、资源压缩打包
- 3.1、资源放在文件夹下
- 3.2、资源放在ZIP压缩包中
- 3.3、使用压缩包资源
- 4、响应事件
- 5、贴图描述
- 6、类html描述
- 7、动态换肤
1、DuiLib入门程序1
1.1、DuiLib程序版本1
// new_test_demo.cpp : 定义应用程序的入口点。
//
// Duilib使用设置部分
#include "stdafx.h"
#include "new_test_demo.h"
#include"UIlib.h"
using namespace DuiLib;
//窗口实例及消息响应部分
class CFrameWindowWnd : public CWindowWnd, public INotifyUI
{
public:
CFrameWindowWnd() { };
LPCTSTR GetWindowClassName() const { return _T("UIMainFrame"); };
UINT GetClassStyle() const { return UI_CLASSSTYLE_FRAME | CS_DBLCLKS; };
void OnFinalMessage(HWND /*hWnd*/) { delete this; };
void Notify(TNotifyUI& msg)
{
if (msg.sType == _T("click")) {
if (msg.pSender->GetName() == _T("closebtn")) {
Close();
}
}
}
//原生HandleMessage
LRESULT HandleMessage(UINT uMsg, WPARAM wParam, LPARAM lParam)
{
if (uMsg == WM_CREATE) {
m_pm.Init(m_hWnd);
CControlUI *pButton = new CButtonUI;
pButton->SetName(_T("closebtn"));
pButton->SetBkColor(0xFFFF0000);
m_pm.AttachDialog(pButton);
m_pm.AddNotifier(this);
return 0;
}
else if (uMsg == WM_DESTROY) {
::PostQuitMessage(0);
}
LRESULT lRes = 0;
if (m_pm.MessageHandler(uMsg, wParam, lParam, lRes)) return lRes;
return CWindowWnd::HandleMessage(uMsg, wParam, lParam);
}
}
// 程序入口及Duilib初始化部分
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE /*hPrevInstance*/, LPSTR /*lpCmdLine*/, int nCmdShow)
{
CPaintManagerUI::SetInstance(hInstance);
CPaintManagerUI::SetResourcePath(CPaintManagerUI::GetInstancePath());
CFrameWindowWnd* pFrame = new CFrameWindowWnd();
if (pFrame == NULL) return 0;
pFrame->Create(NULL, _T("测试"), UI_WNDSTYLE_FRAME, WS_EX_WINDOWEDGE);
pFrame->ShowWindow(true);
CPaintManagerUI::MessageLoop();
return 0;
}
可以看出,这个程序分三个部分:
-
Duilib使用设置部分,这个部分都是一些使用Duilib所需要的头文件和自动链接到相应的Duilib库,一般来说基本上不用改动。
-
窗口实例及消息响应部分,基本的窗口实现类和简单的消息响应,需要重点关注的是void Notify(TNotifyUI& msg)中的事件处理,这是Duilib程序最重要的部分。
-
程序入口及Duilib初始化部分,Duilib初始化和窗口创建。
编译这个程序,出现如下效果:
点击红色区域的任意位置,窗口会立即关闭。这样我们就完成了最简单的一个Duilib程序编写,虽然这个例子还不能展现Duilib的强大,但也算是麻雀虽小,肝胆俱全了。
1.2、DuiLib程序版本2
因为很多美观的界面都不使用系统的标题栏和边框这些非客户区绘制,我们也把这掉,修改CFrameWindowWnd:: HandleMessage为:
// new_test_demo.cpp : 定义应用程序的入口点。
//
// Duilib使用设置部分
#include "stdafx.h"
#include "new_test_demo.h"
#include"UIlib.h"
using namespace DuiLib;
//窗口实例及消息响应部分
class CFrameWindowWnd : public CWindowWnd, public INotifyUI
{
public:
CFrameWindowWnd() { };
LPCTSTR GetWindowClassName() const { return _T("UIMainFrame"); };
UINT GetClassStyle() const { return UI_CLASSSTYLE_FRAME | CS_DBLCLKS; };
void OnFinalMessage(HWND /*hWnd*/) { delete this; };
void Notify(TNotifyUI& msg)
{
if (msg.sType == _T("click")) {
if (msg.pSender->GetName() == _T("closebtn")) {
Close();
}
}
}
//去掉标题栏
LRESULT HandleMessage(UINT uMsg, WPARAM wParam, LPARAM lParam)
{
if (uMsg == WM_CREATE) {
m_pm.Init(m_hWnd);
CControlUI *pButton = new CButtonUI;
pButton->SetName(_T("closebtn"));
pButton->SetBkColor(0xFFFF0000);
m_pm.AttachDialog(pButton);
m_pm.AddNotifier(this);
return 0;
}
else if (uMsg == WM_DESTROY) {
::PostQuitMessage(0);
}
else if (uMsg == WM_NCACTIVATE) {
if (!::IsIconic(m_hWnd)) {
return (wParam == 0) ? TRUE : FALSE;
}
}
else if (uMsg == WM_NCCALCSIZE) {
return 0;
}
else if (uMsg == WM_NCPAINT) {
return 0;
}
LRESULT lRes = 0;
if (m_pm.MessageHandler(uMsg, wParam, lParam, lRes)) return lRes;
return CWindowWnd::HandleMessage(uMsg, wParam, lParam);
}
public:
CPaintManagerUI m_pm;
};
// 程序入口及Duilib初始化部分
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE /*hPrevInstance*/, LPSTR /*lpCmdLine*/, int nCmdShow)
{
CPaintManagerUI::SetInstance(hInstance);
CPaintManagerUI::SetResourcePath(CPaintManagerUI::GetInstancePath());
CFrameWindowWnd* pFrame = new CFrameWindowWnd();
if (pFrame == NULL) return 0;
pFrame->Create(NULL, _T("测试"), UI_WNDSTYLE_FRAME, WS_EX_WINDOWEDGE);
pFrame->ShowWindow(true);
CPaintManagerUI::MessageLoop();
return 0;
}
编译运行,我们得到如下效果:
1.3、DuiLib程序版本3,增加编写界面xml
为了使用xml进行界面布局,需要把前面的Duilib程序框架中的HandleMessage稍微改动一下:
// new_test_demo.cpp : 定义应用程序的入口点。
//
// Duilib使用设置部分
#include "stdafx.h"
#include "new_test_demo.h"
#include"UIlib.h"
using namespace DuiLib;
//窗口实例及消息响应部分
class CFrameWindowWnd : public CWindowWnd, public INotifyUI
{
public:
CFrameWindowWnd() { };
LPCTSTR GetWindowClassName() const { return _T("UIMainFrame"); };
UINT GetClassStyle() const { return UI_CLASSSTYLE_FRAME | CS_DBLCLKS; };
void OnFinalMessage(HWND /*hWnd*/) { delete this; };
void Notify(TNotifyUI& msg)
{
if (msg.sType == _T("click")) {
if (msg.pSender->GetName() == _T("closebtn")) {
Close();
}
}
}
//使用xml来布局文件
LRESULT HandleMessage(UINT uMsg, WPARAM wParam, LPARAM lParam)
{
if (uMsg == WM_CREATE) {
m_pm.Init(m_hWnd);
CDialogBuilder builder;
//与exe文件在同一个目录下
CControlUI* pRoot = builder.Create(_T("test.xml"), (UINT)0, NULL, &m_pm);
ASSERT(pRoot && "Failed to parse XML");
m_pm.AttachDialog(pRoot);
m_pm.AddNotifier(this);
return 0;
}
else if (uMsg == WM_DESTROY) {
::PostQuitMessage(0);
}
else if (uMsg == WM_NCACTIVATE) {
if (!::IsIconic(m_hWnd)) {
return (wParam == 0) ? TRUE : FALSE;
}
}
else if (uMsg == WM_NCCALCSIZE) {
return 0;
}
else if (uMsg == WM_NCPAINT) {
return 0;
}
LRESULT lRes = 0;
if (m_pm.MessageHandler(uMsg, wParam, lParam, lRes)) return lRes;
return CWindowWnd::HandleMessage(uMsg, wParam, lParam);
}
public:
CPaintManagerUI m_pm;
};
// 程序入口及Duilib初始化部分
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE /*hPrevInstance*/, LPSTR /*lpCmdLine*/, int nCmdShow)
{
CPaintManagerUI::SetInstance(hInstance);
CPaintManagerUI::SetResourcePath(CPaintManagerUI::GetInstancePath());
CFrameWindowWnd* pFrame = new CFrameWindowWnd();
if (pFrame == NULL) return 0;
pFrame->Create(NULL, _T("测试"), UI_WNDSTYLE_FRAME, WS_EX_WINDOWEDGE);
pFrame->ShowWindow(true);
CPaintManagerUI::MessageLoop();
return 0;
}
test.xml文件的位置在可执行程序**.exe**文件位置是一样的。
<?xml version="1.0" encoding="utf-8"?>
<Window mininfo="200,360" size=" 480,320 ">
<Font name="幼圆" size="16" default="true" />
<VerticalLayout bkcolor="#FFFF00FF">
<Button name="changeskinbtn" height="20" text="测试按钮" maxwidth="120" />
<RichEdit name="testrichedit" bordercolor="#FF0000" bordersize="0" borderround="18,18" inset="4,2,4,2" bkcolor="#A0F2F5FA" bkcolor2="#A0FF0000" bkcolor3="#A0F2F5FA" font="1" multiline="true" vscrollbar="true" autovscroll="true" enabled="true" rich="true" readonly="false" text="测试richedit">
</RichEdit>
<Edit name="testedit" text="测试编辑框" />
</VerticalLayout>
</Window>
把以上xml保存为test.xml,主要保存格式为utf-8(不要使用windows自带的记事本保存,可以使用ultraedit、editplus之类具备xml编辑能力的编辑器保存)。然后运行程序,可以看到如下效果:
1.4、DuiLib程序版本4,继续修改xml布局
好像还不是太难看,不过按钮好像看起来不大像按钮,那就给贴个图把,将一下这行加入到Window标签下:
<Default name="Button" value="normalimage="file='button_nor.bmp' corner='4,2,4,2' fade='200' hsl='true'" hotimage="file='button_over.bmp' corner='4,2,4,2' fade='200' hsl='true'" pushedimage="file='button_down.bmp' corner='4,2,4,2' fade='200' hsl='true' " " />
然后将button_nor.bmp、button_over.bmp、button_down.bmp(可在Duilib发行包中找到)放到exe目录下。
// new_test_demo.cpp : 定义应用程序的入口点。
//
// Duilib使用设置部分
#include "stdafx.h"
#include "new_test_demo.h"
#include"UIlib.h"
using namespace DuiLib;
//窗口实例及消息响应部分
class CFrameWindowWnd : public CWindowWnd, public INotifyUI
{
public:
CFrameWindowWnd() { };
LPCTSTR GetWindowClassName() const { return _T("UIMainFrame"); };
UINT GetClassStyle() const { return UI_CLASSSTYLE_FRAME | CS_DBLCLKS; };
void OnFinalMessage(HWND /*hWnd*/) { delete this; };
void Notify(TNotifyUI& msg)
{
if (msg.sType == _T("click")) {
if (msg.pSender->GetName() == _T("closebtn")) {
Close();
}
}
}
//使用xml来布局文件
LRESULT HandleMessage(UINT uMsg, WPARAM wParam, LPARAM lParam)
{
if (uMsg == WM_CREATE) {
m_pm.Init(m_hWnd);
CDialogBuilder builder;
//与exe文件在同一个目录下
CControlUI* pRoot = builder.Create(_T("test.xml"), (UINT)0, NULL, &m_pm);
ASSERT(pRoot && "Failed to parse XML");
m_pm.AttachDialog(pRoot);
m_pm.AddNotifier(this);
return 0;
}
else if (uMsg == WM_DESTROY) {
::PostQuitMessage(0);
}
else if (uMsg == WM_NCACTIVATE) {
if (!::IsIconic(m_hWnd)) {
return (wParam == 0) ? TRUE : FALSE;
}
}
else if (uMsg == WM_NCCALCSIZE) {
return 0;
}
else if (uMsg == WM_NCPAINT) {
return 0;
}
LRESULT lRes = 0;
if (m_pm.MessageHandler(uMsg, wParam, lParam, lRes)) return lRes;
return CWindowWnd::HandleMessage(uMsg, wParam, lParam);
}
public:
CPaintManagerUI m_pm;
};
// 程序入口及Duilib初始化部分
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE /*hPrevInstance*/, LPSTR /*lpCmdLine*/, int nCmdShow)
{
CPaintManagerUI::SetInstance(hInstance);
CPaintManagerUI::SetResourcePath(CPaintManagerUI::GetInstancePath());
CFrameWindowWnd* pFrame = new CFrameWindowWnd();
if (pFrame == NULL) return 0;
pFrame->Create(NULL, _T("测试"), UI_WNDSTYLE_FRAME, WS_EX_WINDOWEDGE);
pFrame->ShowWindow(true);
CPaintManagerUI::MessageLoop();
return 0;
}
更改后的xml文件:
<?xml version="1.0" encoding="utf-8"?>
<Window mininfo="200,360" size=" 480,320 ">
<Default name="Button" value="normalimage="file='button_nor.bmp' corner='4,2,4,2' fade='200' hsl='true'" hotimage="file='button_over.bmp' corner='4,2,4,2' fade='200' hsl='true'" pushedimage="file='button_down.bmp' corner='4,2,4,2' fade='200' hsl='true' " " />
<Font name="幼圆" size="16" default="true" />
<VerticalLayout bkcolor="#FFFF00FF">
<Button name="changeskinbtn" height="20" text="测试按钮" maxwidth="120" />
<RichEdit name="testrichedit" bordercolor="#FF0000" bordersize="0" borderround="18,18" inset="4,2,4,2" bkcolor="#A0F2F5FA" bkcolor2="#A0FF0000" bkcolor3="#A0F2F5FA" font="1" multiline="true" vscrollbar="true" autovscroll="true" enabled="true" rich="true" readonly="false" text="测试richedit">
</RichEdit>
<Edit name="testedit" text="测试编辑框" />
</VerticalLayout>
</Window>
运行程序,可以看到:
1.5、DuiLib程序版本5,继续修改xml布局
可以看到按钮的显示已经改变了,我们继续将Richedit换个背景,将Richedit的背景色改成bkcolor=“#FFF2F5FA” bkcolor2=“#FFA0A000” bkcolor3=“#FFF2F5FA”,我们得到下面的结果:
<?xml version="1.0" encoding="utf-8"?>
<Window mininfo="200,360" size=" 480,320 ">
<Default name="Button" value="normalimage="file='button_nor.bmp' corner='4,2,4,2' fade='200' hsl='true'" hotimage="file='button_over.bmp' corner='4,2,4,2' fade='200' hsl='true'" pushedimage="file='button_down.bmp' corner='4,2,4,2' fade='200' hsl='true' " " />
<Font name="幼圆" size="16" default="true" />
<VerticalLayout bkcolor="#FFFF00FF">
<Button name="changeskinbtn" height="20" text="测试按钮" maxwidth="120" />
<RichEdit name="testrichedit" bordercolor="#FF0000" bordersize="0" borderround="18,18" inset="4,2,4,2" bkcolor="#FFF2F5FA" bkcolor2="#FFA0A000" bkcolor3="#FFF2F5FA" font="1" multiline="true" vscrollbar="true" autovscroll="true" enabled="true" rich="true" readonly="false" text="测试richedit">
</RichEdit>
<Edit name="testedit" text="测试编辑框" />
</VerticalLayout>
</Window>
继续修改这个xml,我们通过设置xml中控件的属性,可以很简单的实现自由调整界面。
5.6、DuiLib程序版本5,继续修改xml布局
2、DuiLib入门程序2,制作一个简单的界面
在实现这个基本窗口之前,我们首先根据自己的习惯设置一下 DuiLib 编译后生成的文件路径和项目依赖的头文件目录。你不一定要按着我的修改,符合你自己的使用习惯即可。要修改的位置主要有一下几个。修改过程比较繁琐,主要还是因为 DuiLib 是从 VC6 升级上来的,很多属性需要删除和修改,也有些属性是 DuiLib 团队自己的目录结构风格,改与不改不影响使用。
- 常规->输出路径。
- 常规->中间目录(DLL 和 LIB 不能有冲突)。
- 常规->输出文件名(32 位和 64 位不一样,Debug 和 Release 也不同)。
- C/C+±>预编译头->预编译头输出文件。
- 连接器->常规 删除 DuiLib 项目原有的输出文件选项。
- 连接器->系统->子系统 设置子系统为窗口(负责构建过程中会有警告)。
- 连接器->高级->到入库 删除默认到入库。
- 常规->平台工具集 设置 EXE 的平台工具集与 DuiLib 一致为 VS2013(如果是 2017 需要改一些因新标准导致的编译错误)。
- VC++ 目录->包含目录 设置 EXE 依赖的头文件目录,如果使用静态库那么要设置附加库目录和附加库文件。
- C/C+±>代码生成->运行库 设置 EXE 项目的C/C++代码生成->运行库为 /MTd 和 /MT 与 DuiLib 保持一致否则链接时报错。
- 连接器->输入 设置 EXE 项目依赖项。
DuiLib 的具体结构这里我们先不说,目前我们仅需要了解,如何使用动态库或静态库来创建一个基于 DuiLib 的简单界面就可以了,然后再循序渐进的往深入去挖一挖。DuiLib 实现了一个窗口基类,我们自己的窗口只需要继承这个类,实现三个必须要实现的纯虚函数,然后设置一下窗口使用的配置文件、窗口配置文件的路径和窗口的名称就可以了。
- 继承 WindowImplBase 类(DuiLib 窗口管理的一个基类)。
- 实现 GetWindowClassName 接口(描述窗口唯一名称的方法)。
- 实现 GetSkinFile 接口(描述窗口样式的 xml 文件名称方法)。
- 实现 GetSkinFolder 接口(描述窗口样式文件路径的方法)
- 创建一个窗口描述配置文件(描述窗口的 xml 样式文件)。
根据上面的方法,我们把向导自动生成的项目代码删一删,修改 new_demo_test.cpp 文件,仅留下一个 main 函数,如下所示:
//duilib_tutorial.cpp: 定义应用程序的入口点。
//
#include "stdafx.h"
#include "duilib_tutorial.h"
int APIENTRY wWinMain(_In_ HINSTANCE hInstance,
_In_opt_ HINSTANCE hPrevInstance,
_In_ LPWSTR lpCmdLine,
_In_ int nCmdShow)
{
UNREFERENCED_PARAMETER(hPrevInstance);
UNREFERENCED_PARAMETER(lpCmdLine);
return 0;
}
打开 stdafx.h
添加 ATL 依赖(创建项目时选择了 ATL 支持,但是没有导入 ATL 的库文件,可能是 VS2017 的 Bug),再添加上 DuiLib 的统一入口头文件和引入整个命名空间(因为是做示例,大型项目不建议引入整个命名空间)。
// new_test_demo.cpp : 定义应用程序的入口点。
//
#include "stdafx.h"
#include "new_test_demo.h"
#include"UIlib.h"
using namespace DuiLib;
//duilib_tutorial.cpp: 定义应用程序的入口点。
//
int APIENTRY wWinMain(_In_ HINSTANCE hInstance,
_In_opt_ HINSTANCE hPrevInstance,
_In_ LPWSTR lpCmdLine,
_In_ int nCmdShow)
{
UNREFERENCED_PARAMETER(hPrevInstance);
UNREFERENCED_PARAMETER(lpCmdLine);
return 0;
}
然后我们在 new_demo_test.cpp 中创建一个自己的窗口,来继承 WindowImplBase,并实现继承父基类函数 GetSkinFolder
GetSkinFile
GetWindowClassName
三个接口,代码如下:
// new_test_demo.cpp : 定义应用程序的入口点。
//
#include "stdafx.h"
#include "new_test_demo.h"
#include"UIlib.h"
using namespace DuiLib;
//duilib_tutorial.cpp: 定义应用程序的入口点。
//
int APIENTRY wWinMain(_In_ HINSTANCE hInstance,
_In_opt_ HINSTANCE hPrevInstance,
_In_ LPWSTR lpCmdLine,
_In_ int nCmdShow)
{
UNREFERENCED_PARAMETER(hPrevInstance);
UNREFERENCED_PARAMETER(lpCmdLine);
return 0;
}
class MainWndFrame : public WindowImplBase
{
protected:
virtual CDuiString GetSkinFolder() override; // 获取皮肤文件的目录,如果有多层目录这里可以设置
virtual CDuiString GetSkinFile() override; // 设置皮肤文件名字
virtual LPCTSTR GetWindowClassName(void) const override; // 设置当前窗口的 class name
public:
static const LPCTSTR kClassName;
static const LPCTSTR kMainWndFrame;
};
DuiLib::CDuiString MainWndFrame::GetSkinFolder()
{
// GetInstancePath 接口返回默认的皮肤文件位置
// 在 main 函数中我们可以通过 SetResourcePath 来设置路径
return m_PaintManager.GetInstancePath();
}
DuiLib::CDuiString MainWndFrame::GetSkinFile()
{
// 成员变量定义的皮肤文件名
return kMainWndFrame;
}
LPCTSTR MainWndFrame::GetWindowClassName(void) const
{
// 成员变量定义的窗口 class name
return kClassName;
}
const LPCTSTR MainWndFrame::kClassName = _T("main_wnd_frame");
const LPCTSTR MainWndFrame::kMainWndFrame = _T("main_wnd_frame.xml");
仔细分析代码,我们可以看到我们指定了这个窗口的皮肤路径是默认路径(取决于我们如何设置,稍后就能看到),并指定了这个窗口的皮肤文件 main_wnd_frame.xml,最后还指定了一下窗口的类名。这样这个窗口就创建好了,我们还需要在main 函数中把这个窗口 new 出来,其次还需要创建一个 xml 文件来描述一下这个窗口的样子。先来写 main 函数。
// new_test_demo.cpp : 定义应用程序的入口点。
//
#include "stdafx.h"
#include "new_test_demo.h"
#include"UIlib.h"
using namespace DuiLib;
//duilib_tutorial.cpp: 定义应用程序的入口点。
//
class MainWndFrame : public WindowImplBase
{
protected:
virtual CDuiString GetSkinFolder() override; // 获取皮肤文件的目录,如果有多层目录这里可以设置
virtual CDuiString GetSkinFile() override; // 设置皮肤文件名字
virtual LPCTSTR GetWindowClassName(void) const override; // 设置当前窗口的 class name
public:
static const LPCTSTR kClassName;
static const LPCTSTR kMainWndFrame;
};
DuiLib::CDuiString MainWndFrame::GetSkinFolder()
{
// GetInstancePath 接口返回默认的皮肤文件位置
// 在 main 函数中我们可以通过 SetResourcePath 来设置路径
return m_PaintManager.GetInstancePath();
}
DuiLib::CDuiString MainWndFrame::GetSkinFile()
{
// 成员变量定义的皮肤文件名
return kMainWndFrame;
}
LPCTSTR MainWndFrame::GetWindowClassName(void) const
{
// 成员变量定义的窗口 class name
return kClassName;
}
const LPCTSTR MainWndFrame::kClassName = _T("main_wnd_frame");
const LPCTSTR MainWndFrame::kMainWndFrame = _T("main_wnd_frame.xml");
int APIENTRY wWinMain(_In_ HINSTANCE hInstance,
_In_opt_ HINSTANCE hPrevInstance,
_In_ LPWSTR lpCmdLine,
_In_ int nCmdShow)
{
UNREFERENCED_PARAMETER(hPrevInstance);
UNREFERENCED_PARAMETER(lpCmdLine);
// 设置窗口关联的实例
CPaintManagerUI::SetInstance(hInstance);
// 设置皮肤的默认路径
CPaintManagerUI::SetCurrentPath(CPaintManagerUI::GetInstancePath());
CPaintManagerUI::SetResourcePath(_T("theme"));
// 创建窗口
MainWndFrame* pMainWndFrame = new MainWndFrame;
pMainWndFrame->Create(nullptr, MainWndFrame::kClassName, UI_WNDSTYLE_DIALOG, 0);
pMainWndFrame->CenterWindow();
pMainWndFrame->ShowWindow();
CPaintManagerUI::MessageLoop();
if (nullptr != pMainWndFrame)
{
delete pMainWndFrame;
}
return 0;
}
通过 CPaintManagerUI
的一些静态设置了当前关联的窗口实例、皮肤文件的路径,接下来 new 了一个我们继承 WindowImplBase
所产生的窗口。调用 Create
方法创建了窗口,使用 CenterWindow
让窗口居中显示,再调用 ShowWindow
显示窗口。最后我们使用了 CPaintManagerUI
的 MessageLoop
启动消息循环的监听,保证程序不被退出。并且在退出前我们要 delete 掉 new 出来的窗口。这样创建窗口的过程就完事儿了,但是现在还是不能运行的,我们还需要完善一下这个窗口的 xml 文件。
代码中设置了皮肤文件路径是 EXE 目录下的 theme 文件夹,所以要在 EXE 生成的文件夹创建一个 theme 文件夹,把 main_wnd_frame.xml 放到这个里面。
把如下代码添加到 xml 文件中(先暂时不需要关注 xml 的内容,后面会详细的讲解):
<?xml version="1.0" encoding="UTF-8"?>
<Window size="640,480" caption="0,0,0,35">
<VerticalLayout>
<HorizontalLayout bkcolor="#FFFFFFFF"/>
<HorizontalLayout bkcolor="#FFFFFFFF">
<Button text="Hello DuiLib" bkcolor="#FF1296DB"/>
</HorizontalLayout>
<HorizontalLayout bkcolor="#FFFFFFFF"/>
</VerticalLayout>
</Window>
编译通过了,运行程序后窗口就显示出来了。如下所示:
但看起来这个窗口有点简陋,只有中间一个蓝条,没有标题栏、没有状态栏,也不能关闭。先不着急,在接下来的教程中一点点循序渐进的往界面中添加内容。
3、资源压缩打包
现在市面上有很多基于 DuiLib 开发的程序,又或者是从 DuiLib 基础上延伸出来所开发的程序。不同的程序有不同的打包资源的方式,主要有以下几种。
- 资源存放在文件夹中。
- 资源存放在 ZIP 压缩包中。
- 资源打包到 EXE 中。
- 使用 DLL 文件存放资源。
有的使用的就是执行程序目录下的文件夹,而有的使用的是一个压缩包(有可能加密),还有的就是一个单独的执行文件复制到任意位置运行同样可以有绚丽的界面。还有就是封装到一个 DLL 资源中,这种方式我也没有用到过,后面研究一下再做补充。第一种方式我们已经知道了,本章就介绍后面两种打包方式,一种是使用压缩包,一种是打包资源到执行文件中让一个文件横扫天下。
3.1、资源放在文件夹下
资源放在了theme文件下的main_wnd_frame.xml文件中。
3.2、资源放在ZIP压缩包中
main_wnd_frame.xml文件压缩成一个压缩包。然后将我们主题文件夹中的 main_wnd_frame.xml
打包成一个 ZIP 文件。这里要注意,压缩包中不要再包含一个 theme
文件夹了,直接把 main_wnd_frame.xml
放在最外层就可以了。
这样我们就可以一个 EXE + 一个 ZIP 压缩包的形式发布程序了。这是其中一种方法,比较简单,还有其他的方法来实现同样的功能,类似下面即将介绍的方法,由于 DuiLib 对于资源的处置代码实现还是稍微有点小乱的。大家在实现这两种方法时候最好去实地看一下代码才知道怎么使用最适合你。
使用压缩包的好处是资源被压缩到一个 ZIP 格式的包里面,可以减少一部分程序的体积,并且可以实现加密(本文不涉及)防止篡改,压缩包方式比较简单,修改 main 函数中将原来的代码:
CPaintManagerUI::SetResourcePath(_T("theme"));
替换为:
CPaintManagerUI::SetResourcePath(CPaintManagerUI::GetInstancePath());
CPaintManagerUI::SetResourceZip(_T("theme.zip"));
// new_test_demo.cpp : 定义应用程序的入口点。
//
#include "stdafx.h"
#include "new_test_demo.h"
#include"UIlib.h"
using namespace DuiLib;
//duilib_tutorial.cpp: 定义应用程序的入口点。
//
class MainWndFrame : public WindowImplBase
{
protected:
virtual CDuiString GetSkinFolder() override; // 获取皮肤文件的目录,如果有多层目录这里可以设置
virtual CDuiString GetSkinFile() override; // 设置皮肤文件名字
virtual LPCTSTR GetWindowClassName(void) const override; // 设置当前窗口的 class name
public:
static const LPCTSTR kClassName;
static const LPCTSTR kMainWndFrame;
};
DuiLib::CDuiString MainWndFrame::GetSkinFolder()
{
// GetInstancePath 接口返回默认的皮肤文件位置
// 在 main 函数中我们可以通过 SetResourcePath 来设置路径
return m_PaintManager.GetInstancePath();
}
DuiLib::CDuiString MainWndFrame::GetSkinFile()
{
// 成员变量定义的皮肤文件名
return kMainWndFrame;
}
LPCTSTR MainWndFrame::GetWindowClassName(void) const
{
// 成员变量定义的窗口 class name
return kClassName;
}
const LPCTSTR MainWndFrame::kClassName = _T("main_wnd_frame");
//theme文件下的xml文件
const LPCTSTR MainWndFrame::kMainWndFrame = _T("main_wnd_frame.xml");
int APIENTRY wWinMain(_In_ HINSTANCE hInstance,
_In_opt_ HINSTANCE hPrevInstance,
_In_ LPWSTR lpCmdLine,
_In_ int nCmdShow)
{
UNREFERENCED_PARAMETER(hPrevInstance);
UNREFERENCED_PARAMETER(lpCmdLine);
// 设置窗口关联的实例
CPaintManagerUI::SetInstance(hInstance);
// 设置皮肤的默认路径
CPaintManagerUI::SetCurrentPath(CPaintManagerUI::GetInstancePath());
//theme文件夹
//CPaintManagerUI::SetResourcePath(_T("theme"));
//theme压缩包
CPaintManagerUI::SetResourcePath(CPaintManagerUI::GetInstancePath());
CPaintManagerUI::SetResourceZip(_T("theme.zip"));
// 创建窗口
MainWndFrame* pMainWndFrame = new MainWndFrame;
pMainWndFrame->Create(nullptr, MainWndFrame::kClassName, UI_WNDSTYLE_DIALOG, 0);
pMainWndFrame->CenterWindow();
pMainWndFrame->ShowWindow();
CPaintManagerUI::MessageLoop();
if (nullptr != pMainWndFrame)
{
delete pMainWndFrame;
}
return 0;
}
这样我们就可以一个 EXE + 一个 ZIP 压缩包的形式发布程序了。这是其中一种方法,比较简单,还有其他的方法来实现同样的功能,类似下面即将介绍的方法,由于 DuiLib 对于资源的处置代码实现还是稍微有点小乱的。大家在实现这两种方法时候最好去实地看一下代码才知道怎么使用最适合你。
3.3、使用压缩包资源
与上面有什么区别呢?压缩包?资源?,其实就是把打包后的 ZIP 压缩包当作 VC 程序开发时的资源,一同打包到发布的 EXE 文件中。这样我们就仅需要发布一个 EXE 文件就可以了,而且对付一些小白还可以防止篡改资源文件。
首先删除掉 main 函数中刚才我们修改的两行代码:
CPaintManagerUI::SetResourcePath(CPaintManagerUI::GetInstancePath());
CPaintManagerUI::SetResourceZip(_T("theme.zip"));
随后我们要覆写基类的两个对资源处理的函数,这两个函数分别是 GetResourceType
和 GetResourceID
,前者是设置资源类型,有以下几种:
UILIB_FILE=1, // 来自磁盘文件
UILIB_ZIP, // 来自磁盘zip压缩包
UILIB_RESOURCE, // 来自资源
UILIB_ZIPRESOURCE, // 来自资源的zip压缩包
可以看到这里支持 4 种形式,包括我们之前提到的使用 ZIP 压缩包的方式,这次我们用覆写两个函数的方式来实现使用资源的 ZIP 压缩包形式。第二个函数 GetResourceID
就是我们要使用的资源 ID 了。首先我们要添加一个资源到项目中,资源的类型要固定为 ZIPRES
,为什么?因为代码中写死了。我们看一下使用资源 ZIP 压缩包的内部实现代码。
case UILIB_ZIPRESOURCE:
{
HRSRC hResource = ::FindResource(m_PaintManager.GetResourceDll(), GetResourceID(), _T("ZIPRES"));
if( hResource == NULL )
return 0L;
DWORD dwSize = 0;
HGLOBAL hGlobal = ::LoadResource(m_PaintManager.GetResourceDll(), hResource);
if( hGlobal == NULL )
{
#if defined(WIN32) && !defined(UNDER_CE)
::FreeResource(hResource);
#endif
return 0L;
}
dwSize = ::SizeofResource(m_PaintManager.GetResourceDll(), hResource);
if( dwSize == 0 )
return 0L;
m_lpResourceZIPBuffer = new BYTE[ dwSize ];
if (m_lpResourceZIPBuffer != NULL)
{
::CopyMemory(m_lpResourceZIPBuffer, (LPBYTE)::LockResource(hGlobal), dwSize);
}
#if defined(WIN32) && !defined(UNDER_CE)
::FreeResource(hResource);
#endif
m_PaintManager.SetResourceZip(m_lpResourceZIPBuffer, dwSize);
}
break;
实现方式就是查找名称为 ZIPRES
的资源,然后加载到内存中使用。那么我们动手开始添加吧。打开资源视图,在 EXE 的资源中右键->添加资源
然后点击 导入
按钮
在弹出的对话框中右下角选择所有文件,然后找到我们 EXE 目录下的 theme.zip
文件。然后确定,此时会让你输入资源的名称,这里我们按之前的约定输入 ZIPRES
,然后确定。
导入完成后的样子如下:
资源添加完毕了,我们得到了一个资源名为 IDR_ZIPRES1
的资源,此时我们开始覆写两个函数。如下所示:
// new_test_demo.cpp : 定义应用程序的入口点。
//
#include "stdafx.h"
#include "new_test_demo.h"
#include"UIlib.h"
using namespace DuiLib;
//duilib_tutorial.cpp: 定义应用程序的入口点。
//
class MainWndFrame : public WindowImplBase
{
protected:
virtual CDuiString GetSkinFolder() override; // 获取皮肤文件的目录,如果有多层目录这里可以设置
virtual CDuiString GetSkinFile() override; // 设置皮肤文件名字
virtual LPCTSTR GetWindowClassName(void) const override; // 设置当前窗口的 class name
virtual DuiLib::UILIB_RESOURCETYPE GetResourceType() const override;
virtual LPCTSTR GetResourceID() const override;
public:
static const LPCTSTR kClassName;
static const LPCTSTR kMainWndFrame;
};
DuiLib::CDuiString MainWndFrame::GetSkinFolder()
{
// GetInstancePath 接口返回默认的皮肤文件位置
// 在 main 函数中我们可以通过 SetResourcePath 来设置路径
return m_PaintManager.GetInstancePath();
}
DuiLib::CDuiString MainWndFrame::GetSkinFile()
{
// 成员变量定义的皮肤文件名
return kMainWndFrame;
}
LPCTSTR MainWndFrame::GetWindowClassName(void) const
{
// 成员变量定义的窗口 class name
return kClassName;
}
//theme压缩包资源
DuiLib::UILIB_RESOURCETYPE MainWndFrame::GetResourceType() const
{
return UILIB_ZIPRESOURCE;
}
LPCTSTR MainWndFrame::GetResourceID() const
{
return MAKEINTRESOURCE(IDR_ZIPRES1);
}
const LPCTSTR MainWndFrame::kClassName = _T("main_wnd_frame");
//theme文件下的xml文件
const LPCTSTR MainWndFrame::kMainWndFrame = _T("main_wnd_frame.xml");
int APIENTRY wWinMain(_In_ HINSTANCE hInstance,
_In_opt_ HINSTANCE hPrevInstance,
_In_ LPWSTR lpCmdLine,
_In_ int nCmdShow)
{
UNREFERENCED_PARAMETER(hPrevInstance);
UNREFERENCED_PARAMETER(lpCmdLine);
// 设置窗口关联的实例
CPaintManagerUI::SetInstance(hInstance);
// 设置皮肤的默认路径
CPaintManagerUI::SetCurrentPath(CPaintManagerUI::GetInstancePath());
//theme文件夹
//CPaintManagerUI::SetResourcePath(_T("theme"));
//theme压缩包
//CPaintManagerUI::SetResourcePath(CPaintManagerUI::GetInstancePath());
//CPaintManagerUI::SetResourceZip(_T("theme.zip"));
// 创建窗口
MainWndFrame* pMainWndFrame = new MainWndFrame;
pMainWndFrame->Create(nullptr, MainWndFrame::kClassName, UI_WNDSTYLE_DIALOG, 0);
pMainWndFrame->CenterWindow();
pMainWndFrame->ShowWindow();
CPaintManagerUI::MessageLoop();
if (nullptr != pMainWndFrame)
{
delete pMainWndFrame;
}
return 0;
}
此时编译一下程序,然后把编译后的 EXE 文件拿到一个空白文件夹,保证文件夹下没有你的资源文件,然后运行程序。同样程序也是可以运行的。并且如果我们用一些压缩软件打开我们的 EXE 文件**(比如 7z、好压、360压缩等)**你还可以看到我们的资源文件就在 EXE 里面。
到这里资源打包的几种方式我们都介绍的差不多了,有兴趣的可以自己摸索一下用资源文件而不是用资源 ZIP 压缩包的形式。
4、响应事件
Duilib中的事件响应有两种方式:
l 在事件处理类(一般使用窗口类)中实现INotifyUI接口,然后在Notify函数中处理事件,这种方式比较简单常用。示例如下:
class CLoginFrameWnd : public CWindowWnd, public INotifyUI
{
public:
// ……
void Notify(TNotifyUI& msg)
{
if( msg.sType == _T("click") )
{
if( msg.pSender->GetName() == _T("closebtn") )
{
PostQuitMessage(0); return;
}
else if( msg.pSender->GetName() == _T("loginBtn") )
{
Close();
return;
}
}
else if( msg.sType == _T("itemselect") )
{
if( msg.pSender->GetName() == _T("accountcombo") )
{
CEditUI* pAccountEdit = static_cast<CEditUI*>(m_pm.FindControl(_T("accountedit")));
if( pAccountEdit ) pAccountEdit->SetText(msg.pSender->GetText());
}
}
}
}
//使用代理机制处理事件
class CLoginFrameWnd : public CWindowWnd, public INotifyUI
{
public:
// ……
bool OnAlphaChanged(void* param)
{
TNotifyUI* pMsg = (TNotifyUI*)param;
if( pMsg->sType == _T("valuechanged") )
{
m_pm.SetTransparent((static_cast<CSliderUI*>(pMsg->pSender))->GetValue());
}
return true;
}
void OnPrepare()
{
CSliderUI* pSilder = static_cast<CSliderUI*>(m_pm.FindControl(_T("alpha_controlor")));
if( pSilder ) pSilder->OnNotify += MakeDelegate(this, &CFrameWindowWnd::OnAlphaChanged);
}
}
OnPrepare函数需要在控件创建完成之后调用。
5、贴图描述
Duilib的表现力丰富很大程度上得益于贴图描述的简单强大。Duilib的贴图描述分为简单模式和复杂模式两种。
简单模式使用文件名做为贴图描述内容,在这种方式下,此图片将会以拉伸方式铺满控件。
复杂模式使用带属性的字符串表示贴图方式,既支持从文件中加载图片,也可以从资源中加载,具体如下:
-
如果是从文件加载,设置file属性,如file=‘XXX.png’,不要写res和restype属性。
-
如果从资源加载,设置res和restype属性,不要设置file属性。
-
dest属性的作用是指定图片绘制在控件的一部分上面(绘制目标位置)。
-
source属性的作用是指定使用图片的一部分。
-
corner属性是指图片安装scale9方式绘制。
-
mask属性是给不支持alpha通道的图片格式(如bmp)指定透明色。
-
fade属性是设置图片绘制的透明度。
-
hole属性是指定scale9绘制时要不要绘制中间部分。
-
xtiled属性设置成true就是指定图片在x轴不要拉伸而是平铺,ytiled属性设置成true就是指定图片在y轴不要拉伸而是平铺:
6、类html描述
uilib使用一种经过简化的类html格式文本来描述复杂的图文格式。使用<>或{}符号来标识语法标签,支持标签嵌套,如text,但是应该避免交叉嵌套,如text。
-
text 表示text的内容使用粗体。
-
<c #xxxxxx>text 表示text内容使用#xxxxxx颜色,#xxxxxx表示16进制的RGB值。
-
text 表示text内容使用x序号的字体。
-
text 表示text内容使用斜体。
-
表示此次插入图片,x表示图片名称,y表示此图片包含几张字图片(可不填,默认值1),z表示当前使用的字图片id(可不填,默认值0)。
-
text 表示text内容有链接功能,x表示链接地址(可不填),用法如app:notepad or http:www.xxx.com,此字符串需要在用户程序中解析处理。
-
表示此次换行。
-
text
表示text内容是一个段落(从这里开始换行),x表示此段落文字水平距离(可不填)。 -
text 表示text内容不使用语法标签功能。
-
text表示text内容被选中(显示选中的背景颜色)。 -
text 表示text内容使用下划线。
-
表示从此处向后面移动x个像素值。
-
表示该行高度固定为y个像素值。
使用标签功能需要把控件的showhtml属性设置为true。
7、动态换肤
Duilib是一个以贴图为主要表现手段的界面库,实现换肤非常简单,可以通过给控件设置不同的图片来实现换肤,比如给需要换肤的控件调用CControlUI::SetBkImage。但是针对换肤功能,Duilib提供了更为简单的方法,即使用CPaintManagerUI::ReloadSkin。
假设我们给程序创建了两套皮肤,分别打包成skin1.zip和skin2.zip,在程序运行的时候,执行:
CPaintManagerUI::SetResourceZip(_T("skin2.zip")); // 或者skin1.zip
CPaintManagerUI::ReloadSkin();
这样简单的两行代码,就实现了全部窗口从skin1皮肤到skin2皮肤的切换。你也可以随时再次调用上