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