<VerticalLayoutbkcolor="#FFFF00FF">
<Buttonname="changeskinbtn" height="20" text="測試按鈕" maxwidth="120" />
<RichEditname="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>
<Editname="testedit" text="測試編輯框" />
</VerticalLayout>
</Window>
把以上xml保存爲test1.xml，主要保存格式爲utf-8（不要使用windows自帶的記事本保存，可以使用ultraedit、editplus之類具備xml編輯能力的編輯器保存）。然後運行程序，可以看到如下效果：
好像還不是太難看，不過按鈕好像看起來不大像按鈕，那就給貼個圖把，將一下這行加入到Window標籤下：
<Defaultname="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目錄下，運行程序，可以看到：
可以看到按鈕的顯示已經改變了，我們繼續將Richedit換個背景，將Richedit的背景色改成bkcolor="#FFF2F5FA" bkcolor2="#FFA0A000"bkcolor3="#FFF2F5FA"，我們得到下面的結果：
繼續修改這個xml，我們通過設置xml中控件的屬性，可以很簡單的實現自由調整界面。
3 響應事件
Duilib中的事件響應有兩種方式：
l 在事件處理類（一般使用窗口類）中實現INotifyUI接口，然後在Notify函數中處理事件，這種方式比較簡單常用。示例如下：
classCLoginFrameWnd : 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());
}
}
}
}
l 使用代理機制處理事件
classCLoginFrameWnd : public CWindowWnd, public INotifyUI
{
public:
//……
boolOnAlphaChanged(void* param) {
TNotifyUI* pMsg =(TNotifyUI*)param;
if( pMsg->sType == _T("valuechanged")) {
m_pm.SetTransparent((static_cast<CSliderUI*>(pMsg->pSender))->GetValue());
}
return true;
}
voidOnPrepare()
{
CSliderUI*pSilder = static_cast<CSliderUI*>(m_pm.FindControl(_T("alpha_controlor")));
if( pSilder )pSilder->OnNotify += MakeDelegate(this,&CFrameWindowWnd::OnAlphaChanged);
}
}
OnPrepare函數需要在控件創建完成之後調用。
4 貼圖描述
Duilib的表現力豐富很大程度上得益於貼圖描述的簡單強大。Duilib的貼圖描述分爲簡單模式和複雜模式兩種。
簡單模式使用文件名做爲貼圖描述內容，在這種方式下，此圖片將會以拉伸方式鋪滿控件。
複雜模式使用帶屬性的字符串表示貼圖方式，既支持從文件中加載圖片，也可以從資源中加載，具體如下：
l 如果是從文件加載，設置file屬性，如file='XXX.png'，不要寫res和restype屬性
l 如果從資源加載，設置res和restype屬性，不要設置file屬性
l dest屬性的作用是指定圖片繪製在控件的一部分上面（繪製目標位置）
l source屬性的作用是指定使用圖片的一部分
l corner屬性是指圖片安裝scale9方式繪製
l mask屬性是給不支持alpha通道的圖片格式（如bmp）指定透明色
l fade屬性是設置圖片繪製的透明度
l hole屬性是指定scale9繪製時要不要繪製中間部分
l xtiled屬性設置成true就是指定圖片在x軸不要拉伸而是平鋪，ytiled屬性設置成true就是指定圖片在y軸不要拉伸而是平鋪：
5 類html文本描述
Duilib使用一種經過簡化的類html格式文本來描述複雜的圖文格式。使用<>或{}符號來標識語法標籤，支持標籤嵌套，如<l><b>text</b></l>，但是應該避免交叉嵌套，如<l><b>text</l></b>。
l <b>text</b> 表示text的內容使用粗體
l <c#xxxxxx>text</c> 表示text內容使用#xxxxxx顏色，#xxxxxx表示16進制的RGB值
l <f x>text</f> 表示text內容使用x序號的字體
l <i>text</i> 表示text內容使用斜體
l <i x y z> 表示此次插入圖片，x表示圖片名稱，y表示此圖片包含幾張字圖片（可不填，默認值1），z表示當前使用的字圖片id（可不填，默認值0）
l <a x>text</a> 表示text內容有鏈接功能，x表示鏈接地址（可不填），用法如app:notepador http:www.xxx.com，此字符串需要在用戶程序中解析處理。
l <n> 表示此次換行
l <p x>text</p> 表示text內容是一個段落（從這裏開始換行），x表示此段落文字水平距離（可不填）
l <r>text</r> 表示text內容不使用語法標籤功能
l <s>text</s> 表示text內容被選中（顯示選中的背景顏色）
l <u>text</u> 表示text內容使用下劃線
l <x i> 表示從此處向後面移動x個像素值
l <y i> 表示該行高度固定爲y個像素值
使用標籤功能需要把控件的showhtml屬性設置爲true。
6 動態換膚
Duilib是一個以貼圖爲主要表現手段的界面庫，實現換膚非常簡單，可以通過給控件設置不同的圖片來實現換膚，比如給需要換膚的控件調用CControlUI::SetBkImage。但是針對換膚功能，Duilib提供了更爲簡單的方法，即使用CPaintManagerUI::ReloadSkin。
假設我們給程序創建了兩套皮膚，分別打包成skin1.zip和skin2.zip，在程序運行的時候，執行:
CPaintManagerUI::SetResourceZip(_T("skin2.zip")); // 或者skin1.zip
CPaintManagerUI::ReloadSkin();
這樣簡單的兩行代碼，就實現了全部窗口從skin1皮膚到skin2皮膚的切換。你也可以隨時再次調用上面兩行代碼，把皮膚切換回去。
7 Dll插件
Duilib支持使用外部dll來擴展控件：
l 在dll中，只需要實現一個接口CreateControl，如
extern"C" __declspec(dllexport) CControlUI* CreateControl(LPCTSTR pstrType)
{
if( _tcscmp(pstrType,_T("ButtonEx")) == 0 ) return new CButtonExUI;
return NULL;
}
l 在使用程序中，需要在WinMain函數把插件dll使用CPaintManagerUI::LoadPlugin加載進來，然後就可以和內置控件一樣使用了。
int APIENTRYWinMain(HINSTANCE hInstance, HINSTANCE /*hPrevInstance*/, LPSTR /*lpCmdLine*/,int nCmdShow)
{
CManager::SetInstance(hInstance);
CManager::SetResourcePath(CManager::GetInstancePath());
CManager::LoadPlugin(PLUGINNAME);
// ……
}
8 資源打包
Duilib使用資源打包功能非常簡單，在程序開發完成後只需做兩個步驟即可：
l 進入資源目錄，然後使用具備zip壓縮功能的軟件（如winrar、winzip、7zip等）把佈局xml和圖片等資源壓縮到一個zip文件包裏。
l 在WinMain函數中CPaintManagerUI::SetInstance(hInstance)的後面加入CPaintManagerUI::SetResourceZip(_T("xxx.zip"))，如
int APIENTRYWinMain(HINSTANCE hInstance, HINSTANCE /*hPrevInstance*/, LPSTR /*lpCmdLine*/,int nCmdShow)
{
CManager::SetInstance(hInstance);
CManager::SetResourcePath(CManager::GetInstancePath());
CPaintManagerUI::SetResourceZip(_T("xxx.zip"));
// ……
}
這樣就完成了資源打包功能，發佈程序只需要把exe、dll和zip文件帶上就行了。有時爲了需要，也可以修改.zip爲其他擴展名，比如.dat。
9 Duilib在MFC或WTL程序中的應用
MFC和WTL依託強大的Windows Common Controls實現和十多年的發展，在傳統軟件界面領域佔了統治地位，很多的現有軟件代碼都是使用MFC（或WTL，下同，不再特別註明）寫的。所以對於一個界面庫來說，兼容MFC和WTL顯的非常重要。
如果一個軟件希望從MFC界面轉換到Duilib，或者打算使用Duilib做界面，但是又希望使用MFC的其他功能，這時Duilib和MFC混合使用就派上用場了。
在MFC中使用Duilib，可以按以下步驟操作：
l 在BOOL CXXXApp::InitInstance()函數中，添加
DuiLib::CManager::SetInstance(CWinAppEx::m_hInstance);
DuiLib::CManager::SetResourcePath(DuiLib::CManager::GetInstancePath());
注意需要添加在MFC窗口創建之前。
l 創建Duilib窗口類
class CDuiWnd : publicDuiLib::CWindowWnd, public DuiLib::INotifyUI
{
public:
CDuiWnd();
LPCTSTR GetWindowClassName() const;
UINT GetClassStyle() const;
void Notify(DuiLib::TNotifyUI& msg);
LRESULT HandleMessage(UINT uMsg, WPARAMwParam, LPARAM lParam);
public:
DuiLib::CPaintManager m_manager;
};
l 在MFC窗口類中創建Duilib窗口
m_duiWnd.Create(*this,NULL, UI_WNDSTYLE_CHILD, 0, 0, 0, 642, 520);
m_duiWnd.Init();
m_duiWnd是MFC窗口類的成員變量。
示例：綠色框內是Duilib窗口，外層是MFC對話框。
