DUILib經(jīng)典教程(實(shí)例)

1、.Duilib入門文檔Duilib經(jīng)典實(shí)例教程1 基本框架一個(gè)簡(jiǎn)單的Duilib程序一般是下面這個(gè)樣子的：/ Duilib使用設(shè)置部分#pragma once#define WIN32_LEAN_AND_MEAN#define _CRT_SECURE_NO_DEPRECATE#include <windows.h>#include <objbase.h>#include ".DuiLibUIlib.h"using namespace DuiLib;#ifdef _DEBUG# ifdef _UNICODE# pragma comment(lib, &

2、quot;.binDuiLib_ud.lib")# else# pragma comment(lib, ".binDuiLib_d.lib")# endif#else# ifdef _UNICODE# pragma comment(lib, ".binDuiLib_u.lib")# else# pragma comment(lib, ".binDuiLib.lib")# endif#endif/ 窗口實(shí)例及消息響應(yīng)部分class CFrameWindowWnd : public CWindowWnd, public INot

3、ifyUIpublic: 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

4、( 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.Attac

5、hDialog(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); public: CPaintManagerUI m_pm;/ 程序入口及Duilib初始化部分int APIENTR

6、Y 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(N

7、ULL, _T("測(cè)試"), UI_WNDSTYLE_FRAME, WS_EX_WINDOWEDGE); pFrame->ShowWindow(true); CPaintManagerUI:MessageLoop(); return 0;可以看出，這個(gè)程序分三個(gè)部分：l Duilib使用設(shè)置部分，這個(gè)部分都是一些使用Duilib所需要的頭文件和自動(dòng)鏈接到相應(yīng)的Duilib庫，一般來說基本上不用改動(dòng)。l 窗口實(shí)例及消息響應(yīng)部分，基本的窗口實(shí)現(xiàn)類和簡(jiǎn)單的消息響應(yīng)，需要重點(diǎn)關(guān)注的是void Notify(TNotifyUI& msg)中的事件處理，這是Duilib程

8、序最重要的部分。l 程序入口及Duilib初始化部分，Duilib初始化和窗口創(chuàng)建。編譯這個(gè)程序，出現(xiàn)如下效果：點(diǎn)擊紅色區(qū)域的任意位置，窗口會(huì)立即關(guān)閉。這樣我們就完成了最簡(jiǎn)單的一個(gè)Duilib程序編寫，雖然這個(gè)例子還不能展現(xiàn)Duilib的強(qiáng)大，但也算是麻雀雖小，肝膽俱全了。因?yàn)楹芏嗝烙^的界面都不使用系統(tǒng)的標(biāo)題欄和邊框這些非客戶區(qū)繪制，我們也把這掉，修改CFrameWindowWnd: HandleMessage為: LRESULT HandleMessage(UINT uMsg, WPARAM wParam, LPARAM lParam) if( uMsg = WM_CREATE ) m_pm

9、.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)

10、 ) 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);編譯運(yùn)行，我們得到如下效果：2 編寫界面xml為了使用xml進(jìn)行界面布局，需要把前

11、面的Duilib程序框架中的HandleMessage稍微改動(dòng)一下： LRESULT HandleMessage(UINT uMsg, WPARAM wParam, LPARAM lParam) if( uMsg = WM_CREATE ) m_pm.Init(m_hWnd); CDialogBuilder builder; CControlUI* pRoot = builder.Create(_T("test1.xml"), (UINT)0, NULL, &m_pm); ASSERT(pRoot && "Failed to parse X

12、ML"); 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; LRESU

13、LT lRes = 0; if( m_pm.MessageHandler(uMsg, wParam, lParam, lRes) ) return lRes; return CWindowWnd:HandleMessage(uMsg, wParam, lParam);灰色部分表示改動(dòng)的部分。然后我們來編寫一個(gè)簡(jiǎn)單的xml：<?xml version="1.0" encoding="UTF-8"?><Window mininfo="200,360" size=" 480,320 "><F

14、ont name="幼圓" size="16" default="true" /><VerticalLayout bkcolor="#FFFF00FF"><Button name="changeskinbtn" height="20" text="測(cè)試按鈕" maxwidth="120" /><RichEdit name="testrichedit" bordercolor=&qu

15、ot;#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

16、="true" rich="true" readonly="false" text="測(cè)試richedit"></RichEdit><Edit name="testedit" text="測(cè)試編輯框" /></VerticalLayout></Window>把以上xml保存為test1.xml，主要保存格式為utf-8（不要使用windows自帶的記事本保存，可以使用ultraedit、editplus之類具備xml編輯能

17、力的編輯器保存）。然后運(yùn)行程序，可以看到如下效果：好像還不是太難看，不過按鈕好像看起來不大像按鈕，那就給貼個(gè)圖把，將一下這行加入到Window標(biāo)簽下：<Default name="Button" value="normalimage=&quot;file='button_nor.bmp' corner='4,2,4,2' fade='200' hsl='true'&quot; hotimage=&quot;file='button_over.bmp' co

18、rner='4,2,4,2' fade='200' hsl='true'&quot; pushedimage=&quot;file='button_down.bmp' corner='4,2,4,2' fade='200' hsl='true' &quot; " />然后將button_nor.bmp、button_over.bmp、button_down.bmp（可在Duilib發(fā)行包中找到）放到exe目錄下，運(yùn)行程序，可以看到：可以看到按鈕

19、的顯示已經(jīng)改變了，我們繼續(xù)將Richedit換個(gè)背景，將Richedit的背景色改成bkcolor="#FFF2F5FA" bkcolor2="#FFA0A000" bkcolor3="#FFF2F5FA"，我們得到下面的結(jié)果：繼續(xù)修改這個(gè)xml，我們通過設(shè)置xml中控件的屬性，可以很簡(jiǎn)單的實(shí)現(xiàn)自由調(diào)整界面。3 響應(yīng)事件Duilib中的事件響應(yīng)有兩種方式：l 在事件處理類（一般使用窗口類）中實(shí)現(xiàn)INotifyUI接口，然后在Notify函數(shù)中處理事件，這種方式比較簡(jiǎn)單常用。示例如下：class CLoginFrameWnd : pub

20、lic CWindowWnd, public INotifyUIpublic:/ 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

21、= _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(); l 使用代理機(jī)制處理事件class CLoginFrameWnd : pu

22、blic CWindowWnd, public INotifyUIpublic:/ 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 = st

23、atic_cast<CSliderUI*>(m_pm.FindControl(_T("alpha_controlor"); if( pSilder ) pSilder->OnNotify += MakeDelegate(this, &CFrameWindowWnd:OnAlphaChanged); OnPrepare函數(shù)需要在控件創(chuàng)建完成之后調(diào)用。4 貼圖描述Duilib的表現(xiàn)力豐富很大程度上得益于貼圖描述的簡(jiǎn)單強(qiáng)大。Duilib的貼圖描述分為簡(jiǎn)單模式和復(fù)雜模式兩種。簡(jiǎn)單模式使用文件名做為貼圖描述內(nèi)容，在這種方式下，此圖片將會(huì)以拉伸方式鋪滿控件。復(fù)

24、雜模式使用帶屬性的字符串表示貼圖方式，既支持從文件中加載圖片，也可以從資源中加載，具體如下：l 如果是從文件加載，設(shè)置file屬性，如file='XXX.png'，不要寫res和restype屬性l 如果從資源加載，設(shè)置res和restype屬性，不要設(shè)置file屬性l dest屬性的作用是指定圖片繪制在控件的一部分上面（繪制目標(biāo)位置）l source屬性的作用是指定使用圖片的一部分l corner屬性是指圖片安裝scale9方式繪制l mask屬性是給不支持alpha通道的圖片格式（如bmp）指定透明色l fade屬性是設(shè)置圖片繪制的透明度l hole屬性是指定scale9繪

25、制時(shí)要不要繪制中間部分l xtiled屬性設(shè)置成true就是指定圖片在x軸不要拉伸而是平鋪，ytiled屬性設(shè)置成true就是指定圖片在y軸不要拉伸而是平鋪：5 類html文本描述Duilib使用一種經(jīng)過簡(jiǎn)化的類html格式文本來描述復(fù)雜的圖文格式。使用<>或符號(hào)來標(biāo)識(shí)語法標(biāo)簽，支持標(biāo)簽嵌套，如<l><b>text</b></l>，但是應(yīng)該避免交叉嵌套，如<l><b>text</l></b>。l <b>text</b> 表示text的內(nèi)容使用粗體l <c #

26、xxxxxx>text</c> 表示text內(nèi)容使用#xxxxxx顏色，#xxxxxx表示16進(jìn)制的RGB值l <f x>text</f> 表示text內(nèi)容使用x序號(hào)的字體l <i>text</i> 表示text內(nèi)容使用斜體l <i x y z> 表示此次插入圖片，x表示圖片名稱，y表示此圖片包含幾張字圖片（可不填，默認(rèn)值1），z表示當(dāng)前使用的字圖片id（可不填，默認(rèn)值0）l <a x>text</a> 表示text內(nèi)容有鏈接功能，x表示鏈接地址（可不填），用法如app:notepad or

27、http:，此字符串需要在用戶程序中解析處理。l <n> 表示此次換行l(wèi) <p x>text</p> 表示text內(nèi)容是一個(gè)段落（從這里開始換行），x表示此段落文字水平距離（可不填）l <r>text</r> 表示text內(nèi)容不使用語法標(biāo)簽功能l <s>text</s> 表示text內(nèi)容被選中（顯示選中的背景顏色）l <u>text</u> 表示text內(nèi)容使用下劃線l <x i> 表示從此處向后面移動(dòng)x個(gè)像素值l <y i> 表示該行高度固定為y個(gè)像素值使用標(biāo)簽

28、功能需要把控件的showhtml屬性設(shè)置為true。6 動(dòng)態(tài)換膚Duilib是一個(gè)以貼圖為主要表現(xiàn)手段的界面庫，實(shí)現(xiàn)換膚非常簡(jiǎn)單，可以通過給控件設(shè)置不同的圖片來實(shí)現(xiàn)換膚，比如給需要換膚的控件調(diào)用CControlUI:SetBkImage。但是針對(duì)換膚功能，Duilib提供了更為簡(jiǎn)單的方法，即使用CPaintManagerUI:ReloadSkin。假設(shè)我們給程序創(chuàng)建了兩套皮膚，分別打包成skin1.zip和skin2.zip，在程序運(yùn)行的時(shí)候，執(zhí)行:CPaintManagerUI:SetResourceZip(_T("skin2.zip"); / 或者skin1.zipCP

29、aintManagerUI:ReloadSkin();這樣簡(jiǎn)單的兩行代碼，就實(shí)現(xiàn)了全部窗口從skin1皮膚到skin2皮膚的切換。你也可以隨時(shí)再次調(diào)用上面兩行代碼，把皮膚切換回去。7 Dll插件Duilib支持使用外部dll來擴(kuò)展控件：l 在dll中，只需要實(shí)現(xiàn)一個(gè)接口CreateControl，如extern "C" _declspec(dllexport) CControlUI* CreateControl(LPCTSTR pstrType) if( _tcscmp(pstrType, _T("ButtonEx") = 0 ) return new

30、CButtonExUI; return NULL;l 在使用程序中，需要在WinMain函數(shù)把插件dll使用CPaintManagerUI:LoadPlugin加載進(jìn)來，然后就可以和內(nèi)置控件一樣使用了。int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE /*hPrevInstance*/, LPSTR /*lpCmdLine*/, int nCmdShow) CManager:SetInstance(hInstance); CManager:SetResourcePath(CManager:GetInstancePath();CManager

31、:LoadPlugin(PLUGINNAME);/ 8 資源打包Duilib使用資源打包功能非常簡(jiǎn)單，在程序開發(fā)完成后只需做兩個(gè)步驟即可：l 進(jìn)入資源目錄，然后使用具備zip壓縮功能的軟件（如winrar、winzip、7zip等）把布局xml和圖片等資源壓縮到一個(gè)zip文件包里。l 在WinMain函數(shù)中CPaintManagerUI:SetInstance(hInstance)的后面加入CPaintManagerUI:SetResourceZip(_T("xxx.zip")，如int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE /*hPrevInstance*/, LPSTR /*lpCmdLine*/, int nCmdShow) CManager:SetInstance(hInstance);CManager:SetReso