Duilib入门文档

<Fontname="幼圆"size="16" default="true" />

<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=&quot;file='button_nor.bmp'corner='4,2,4,2' fade='200' hsl='true'&quot;hotimage=&quot;file='button_over.bmp' corner='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发行包中找到）放到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对话框。