duilib学习笔记

原创文章&＃xff0c;转载请注明&＃xff1a;转载自Soul Apogee
本文链接地址&＃xff1a;duilib学习笔记

前段时间对皮肤引擎比较感兴趣&＃xff0c;于是在VS第一人称快的无法直视的dot大神推荐下&＃xff0c;看了一个小巧又好用的皮肤引擎&＃xff1a;duilib。

1. duilib简介

duilib是一个开源的DirectUI界面库&＃xff0c;简洁但是功能强大。而且还是BSD的license&＃xff0c;所以即便是在商业上&＃xff0c;大家也可以安心使用。
现在大家可以从这个网站获取到他们所有的源码&＃xff1a;http://code.google.com/p/duilib/

为了让我们能更简单的了解其机制&＃xff0c;我们按照如下顺序一步一步的来对他进行观察&＃xff1a;

工具库&＃xff1a;用于支撑整个项目的基础
控件库&＃xff1a;这是dui最关键的部分之一&＃xff0c;相信也是大家最关注的部分之一&＃xff0c;另外这里也来看看它是如何管理这些控件的
消息流转&＃xff1a;有了控件库&＃xff0c;我们需要将Windows窗口的原生消息流转给这些控件&＃xff0c;另外在这里也来看看Focus&＃xff0c;Capture等等的实现
资源组织和皮肤加载&＃xff1a;有了上面所有的这些&＃xff0c;我们再来看看它是如何自动创建皮肤的
简单使用&＃xff1a;最后&＃xff0c;来看看到底要如何使用它

以下是duilib工程带的一副总体设计图&＃xff0c;在看代码之前看看这幅图&＃xff0c;对看代码会很有帮助。
duilib:
duilib

2. 工具库

由于duilib没有对外部的任何库进行依赖&＃xff0c;所以在其内部实现了很多用于支撑项目的基础类&＃xff0c;这些类分布在Util文件夹中&＃xff1a;

UI相关&＃xff1a;CPoint / CSize / CDuiRect
简单容器&＃xff1a;CStdPtrArray / CStdValArray / CStdString / CStdStringPtrMap

上面这些类看名字就基本能够理解其具体的含义了&＃xff0c;当然除了基本的基础库&＃xff0c;还有一些和窗口使用相关的工具的封装&＃xff1a;

窗口工具&＃xff1a;WindowImplBase&＃xff0c;这个工具我们在这里不详述&＃xff0c;后面会再次提到。

3. 控件库

控件库在duilib的实现中被分为了两块&＃xff1a;Core和Control&＃xff1a;

Core中包含的是所有控件公用的部分&＃xff0c;里面主要是一些基类和绘制的封装。
Control中包含的就是各个不同的控件的行为了。

Core部分和控件相关的类图非常简单&＃xff1a;
duilib-core:

3.1. 控件基类&＃xff1a;CControlUI

CControlUI在整个控件体系中非常重要&＃xff0c;它是所有控件的基类&＃xff0c;也是组成控件树的基本元素&＃xff0c;控件树中所有的节点都是一个CControlUI。
他基本包括了所有控件公共的属性&＃xff0c;如&＃xff1a;位置&＃xff0c;大小&＃xff0c;颜色&＃xff0c;是否有焦点&＃xff0c;是否被启用&＃xff0c;等等等等。当然这个类中还提供了非常多的基础函数&＃xff0c;用于重载来实现子控件&＃xff0c;如获取控件名称和ClassName&＃xff0c;是否显示&＃xff0c;等等等等。
另外为了方便从XML中直接解析出控件的各个属性&＃xff0c;这个类中还在提供了一个SetAttribute的方法&＃xff0c;传入字符串的属性名称和值对特定的属性进行设置&＃xff0c;内部其实就是挨个比较字符串去完成的&＃xff0c;所以平时使用的时候就还是不要使用的比较好了&＃xff0c;因为每个属性实际上都有特定的方法来获取和设置。
另外每个控件中还有几个事件管理的对象——CEventSource&＃xff0c;这些对象会在特定的时机被触发&＃xff0c;如OnInit&＃xff0c;调用其中保存的各个回调函数。

3.1.1. 控件类型转换

这里我们就碰到一个问题&＃xff0c;控件树中的每一个节点都是CControlUI&＃xff0c;但是其实这些节点可能是文字&＃xff0c;可能是图像&＃xff0c;也有可能是列表&＃xff0c;那么他怎么在这些控件指针之间进行转换呢&＃xff1f;
强制转型不是一个好的选择&＃xff0c;duilib中使用的是CControlUI::GetInterface&＃xff0c;传入一个字符串&＃xff0c;传出指向控件的指针。类似于COM的QueryInterface。

?
LPVOID CControlUI::GetInterface(LPCTSTR pstrName)
{
    if( _tcscmp(pstrName, _T("Control")) &＃61;&＃61; 0 ) return  this;
    return NULL;
}

3.2. 容器基类&＃xff1a;CContainerUI

有了基本的控件基类之后&＃xff0c;我们就需要容器来将他管理起来&＃xff0c;这个容器就是CContainerUI&＃xff0c;其内部用一个数组来保存所有的CControlUI的对象&＃xff0c;后续的所有工作&＃xff0c;就都是基于这个对象来进行的了。
这样在CContainerUI里面&＃xff0c;主要实现了一下几个功能&＃xff1a;

子控件的查找&＃xff1a;CContainerUI::FindControl
子控件的生命周期管理&＃xff1a;是否销毁&＃xff08;在Remove的时候自动销毁&＃xff09; / 是否延迟销毁&＃xff08;交给CPaintMangerUI去一起销毁&＃xff09;。
滚动条&＃xff1a;所有的容器都支持滚动条&＃xff0c;在其内部会对键盘和鼠标滚轮事件进行处理&＃xff08;CContainerUI::DoEvent&＃xff09;&＃xff0c;对其内部所有的元素调整位置&＃xff0c;最后在绘制的时候实现滚动的效果
绘制&＃xff1a;由于容器中有很多元素&＃xff0c;所以为了加快容器的绘制&＃xff0c;绘制的时候会获取其真正需要绘制的区域&＃xff0c;如果子控件不在此区域中&＃xff0c;那么就不予绘制了

3.3. 控件实现

有了普通的基类和容器的基类之后&＃xff0c;我们就可以在其之上搭建控件了。其类图大致如下&＃xff1a;
duilib-control:

3.3.1. 基本控件

duilib实现了非常多的基本控件&＃xff0c;他们分布在Control文件夹下&＃xff0c;每一个头文件就是一个控件&＃xff0c;主要有&＃xff1a;

CLabelUI / CTextUI / CEditUI / CRichEditUI
CButtonUI / CCheckBoxUI / COptionUI (RadioButton)
CScrollBarUI / CProgressUI / CSliderUI
CListUI
CDateTimeUI / CActiveXUI / CWebBrowserUI

3.3.2. Layout

除了基本控件之外&＃xff0c;duilib为了辅助大家对界面元素进行布局&＃xff0c;还在中间实现了专门用于Layout的元素&＃xff1a;

CChildLayoutUI
CHorizontalLayoutUI / CVerticalLayoutUI / CTileLayoutUI&＃xff1a;纵向排列&＃xff0c;横向排列格子排列
CTabLayoutUI&＃xff1a;Tab

3.3.3. 控件绘制

绘制控件实际上有很多代码都是可以抽取出来的&＃xff0c;比如&＃xff1a;九宫格拉伸图片&＃xff0c;平铺图片等等工作&＃xff0c;我们实际上都不需要每次都去重写。所以这部分代码被抽取出来&＃xff0c;形成了CRenderEngine&＃xff0c;这个类在Core/UIRender下。在这个里面&＃xff0c;我们可以看到很多的用于绘制方法。

?
class UILIB_API CRenderEngine
{
public:
    // ......
    static void DrawLine(HDC hDC, const  RECT& rc, int  nSize, DWORD  dwPenColor);
    static void DrawRect(HDC hDC, const  RECT& rc, int  nSize, DWORD  dwPenColor);
    static void DrawRoundRect(HDC hDC, const  RECT& rc, int  width, int height, int nSize,  DWORD dwPenColor);
    static void DrawText(HDC hDC, CPaintManagerUI* pManager, RECT& rc, LPCTSTR pstrText, \
        DWORD dwTextColor, int iFont, UINT  uStyle);
    static void DrawHtmlText(HDC hDC, CPaintManagerUI* pManager, RECT& rc, LPCTSTR pstrText, 
        DWORD dwTextColor, RECT* pLinks, CDuiString* sLinks, int& nLinkRects, UINT uStyle);
    // ......
};

3.4. 控件管理&＃xff1a;CPaintManagerUI

当所有这些基本的控件都准备好了之后&＃xff0c;我们就只要将这些控件管理起来&＃xff0c;这样一个基本的控件库就完成了&＃xff0c;而这个管理就是CPaintManagerUI来负责的。
在duilib中&＃xff0c;一个Windows的原生窗口和一个CPaintManagerUI一一对应。其主要负责如下几个内容&＃xff0c;后面会分开来细说&＃xff0c;现在先了解一个概念就行&＃xff1a;

控件管理
资源管理
转化并分发Windows原生的窗口消息

为了实现上面这些功能&＃xff0c;其中有几个用于管理控件和资源的关键的数据结构&＃xff1a;

m_pRoot&＃xff1a;保存根控件的节点
m_mNameHash&＃xff1a;保存控件名称Hash和控件对象指针的关系
m_mOptionGroup&＃xff1a;保存控件相关的Group&＃xff0c;这个Group并不是TabOrder&＃xff0c;他用于实现Option控件
m_aCustomFonts&＃xff1a;用来管理字体资源
m_mImageHash&＃xff1a;用来管理图片资源

这些结构基本都可以看作是一堆列表和Map&＃xff0c;这样可以用其来实现控件和资源的管理了。

4. 消息流转

有了控件&＃xff0c;现在我们的问题是&＃xff0c;如何将原生的窗口消息分发给界面中所有的控件&＃xff0c;使其行为和原生的一样呢&＃xff1f;

4.1. 窗口基础类&＃xff1a;CWindowWnd

在duilib中&＃xff0c;用来表示窗口的最基础的类是CWindowWnd&＃xff0c;在这个类中实现了如下基本的内容&＃xff1a;

原生窗口的创建&＃xff08;CWindowWnd::Create&＃xff09;
Subclass&＃xff08;CWindowWnd::Subclass&＃xff09;
最基本的消息处理函数&＃xff08;CWindowWnd::__WndProc&＃xff09;和消息分发&＃xff08;CWindowWnd::HandleMessage&＃xff09;
模态窗口&＃xff08;CWindowWnd::ShowModal&＃xff09;

duilib通过这个类&＃xff0c;将原生窗口的消息分发给其派生类&＃xff0c;最后传给整个控件体系。另外在duilib中&＃xff0c;需要进行消息处理的基本控件&＃xff0c;都是从这个类继承出来的。

4.2. 消息分发

一旦我们使用CWindowWnd类创建了窗口之后&＃xff0c;消息就会通过CWindowWnd::HandleMessage进行分发&＃xff0c;我们可以和WTL等其他的库一样&＃xff0c;在此对原始的窗口消息进行处理。

?
LRESULT CWindowWnd::HandleMessage(UINT uMsg, WPARAM  wParam, LPARAM  lParam)
{
    return ::CallWindowProc(m_OldWndProc, m_hWnd, uMsg, wParam, lParam);
}

当然如果我们觉得这样麻烦&＃xff0c;我们也可以使用CPaintManagerUI来对其进行默认处理。我们上面提到CPaintManagerUI还会对所有的控件进行管理&＃xff0c;这样&＃xff0c;消息就传递给了窗口内部特定的控件了。
这些默认处理集中在CPaintManagerUI::MessageHandler()中&＃xff0c;其内部会对很多窗口消息进行处理&＃xff0c;并将其分发到对应的控件上去&＃xff0c;比如对WM_LBUTTONDOWN的处理。

?
case  WM_LBUTTONDOWN:
    {
        // ......
        POINT pt &＃61; { GET_X_LPARAM(lParam), GET_Y_LPARAM(lParam) };
        m_ptLastMousePos &＃61; pt;
        CControlUI* pControl &＃61; FindControl(pt);
        // ......
        TEventUI event &＃61; { 0 };
        event.Type &＃61; UIEVENT_BUTTONDOWN;
        // ......
        pControl->Event(event);
    }
    break;

4.2.1. Focus & Capture

通过上面这个最简单的例子&＃xff0c;我们基本可以猜到duilib对Focus和Capture的处理方法了&＃xff1a;用一个成员变量保存对应的控件&＃xff0c;在消息到达时直接转发消息。
在CPaintMainagerUI中&＃xff0c;大家可以找到一个成员变量&＃xff1a;m_pFocus&＃xff0c;这个就是用来保存焦点控件的。在WM_KEYDOWN等键盘消息发生时&＃xff0c;duilib就会模拟Windows行为&＃xff0c;将消息直接转给当前Focus的控件。

?
case  WM_KEYDOWN:
    {
        if( m_pFocus &＃61;&＃61; NULL ) break;
        TEventUI event &＃61; { 0 };
        event.Type &＃61; UIEVENT_KEYDOWN;
        // ...
        m_pFocus->Event(event);
        // ...
    }
    break;

但是很奇怪的是&＃xff0c;duilib里面并没有对Capture做处理&＃xff0c;分发鼠标消息到对应的子控件上&＃xff0c;可能是还没有完善的原因。

4.2.2. 其他消息分发方式

除了Event以外&＃xff0c;CPaintManagerUI还提供了其他几种用于处理消息的方法&＃xff1a;

Notifier&＃xff1a;在窗口上处理一些控件的逻辑&＃xff0c;可以将其看成和WM_NOTIFY差不多的功能
PreMessageFilter&＃xff1a;消息预处理&＃xff0c;这个大家肯定不陌生了。
PostPaint&＃xff1a;绘制后的回调
TranslateAccelerator&＃xff1a;快捷键的处理

这里需要注意的是&＃xff1a;PreMessageFilter和TranslateAccelerator是通过全局数组来实现的&＃xff0c;这并不符合多线程的窗口编程要求&＃xff0c;所以duilib对多线程的支持并不是很好&＃xff01;

4.3. WindowImplBase

为了简化duilib的使用&＃xff0c;库中提供了一个非常方便的工具&＃xff1a;WindowImplBase。
这个类将常用的功能封装在其内部&＃xff0c;比如Notifier和PreMessageFilter&＃xff0c;并在其中提供了各种默认的虚回调函数&＃xff0c;供派生类重载。通过这个类&＃xff0c;我们可以非常方便的来实现一个简单的界面。

?
class UILIB_API WindowImplBase
    : public CWindowWnd
    , public CNotifyPump
    , public INotifyUI
    , public IMessageFilterUI
    , public IDialogBuilderCallback
{
    // ......
    virtual UINT GetClassStyle() const;
    // ......
    virtual LRESULT OnClose(UINT /*uMsg*/, WPARAM /*wParam*/, LPARAM /*lParam*/, BOOL& bHandled);
    virtual LRESULT OnDestroy(UINT /*uMsg*/, WPARAM /*wParam*/, LPARAM /*lParam*/, BOOL& bHandled);
    // ......

5. 资源组织和皮肤加载

好了&＃xff0c;现在我们已经有了控件管理和控件库&＃xff0c;现在我们需要让UI框架来帮忙组织这些资源&＃xff0c;并且自动的来帮我们创建皮肤&＃xff0c;减少我们的开发量。
duilib中的皮肤文件主要有几个部分组成&＃xff1a;

xml描述文件&＃xff1a;描述窗口中控件的布局和样式
各种资源如图片

我们把这些资源放在一个文件夹中&＃xff0c;这样就形成了基础的皮肤包。当然我们还可以将其组合成一个zip包&＃xff0c;从而加快IO访问&＃xff0c;但是修改起来就会相对麻烦。所以我们可以在debug中使用前者&＃xff0c;而在release中使用后者。
我们可以在bin\skin下面找到duilib中自带demo的所有的皮肤包。

皮肤中&＃xff0c;最关键的部分就是这个xml描述文件了&＃xff0c;一个xml描述文件对应着一个窗口的信息&＃xff0c;如&＃xff1a;控件的类型和样式等等。为了有一个直观的印象&＃xff0c;我截取了duilib中ListDemo的xml描述文件的一部分放在这里&＃xff1a;

?
xml version&＃61;"1.0" encoding&＃61;"utf-8"?>
<Window caption&＃61;"0,0,0,30" roundcorner&＃61;"5,5,5,5" sizebox&＃61;"4,4,4,4" mininfo&＃61;"600,320" showdirty&＃61;"true">
...
<VerticalLayout bkimage&＃61;"file&＃61;&＃39;bg.png&＃39; corner&＃61;&＃39;10,100,10,10&＃39; hole&＃61;&＃39;true&＃39;" bkcolor&＃61;"#FF313C00">
...
    <HorizontalLayout height&＃61;"35" inset&＃61;"0,4,0,8">
        <VerticalLayout inset&＃61;"8,4,2,2" width&＃61;"80">
            <Text text&＃61;"Domain/ip:" textcolor&＃61;"#000000" font&＃61;"1">Text>
        VerticalLayout>
        <VerticalLayout>
            <Edit height&＃61;"23" text&＃61;"List控件添加使用案例&＃xff0c;每行可以响应事件" bordercolor&＃61;"#C6CFD8" name&＃61;"input" bkimage&＃61;"file&＃61;&＃39;search_bg.png&＃39; source&＃61;&＃39;0,0,258,23&＃39; corner&＃61;&＃39;1,1,1,1&＃39;"/>
        VerticalLayout>
        <VerticalLayout width&＃61;"80">
            <Button name&＃61;"btn" text&＃61;"Search" font&＃61;"0" float&＃61;"true" pos&＃61;"5,0,63,23" maxwidth&＃61;"63" maxheight&＃61;"23" normalimage&＃61;"file&＃61;&＃39;button.png&＃39; source&＃61;&＃39;0,0,63,23&＃39;" hotimage&＃61;"file&＃61;&＃39;button.png&＃39; source&＃61;&＃39;0,23,63,46&＃39;" pushedimage&＃61;"file&＃61;&＃39;button.png&＃39; source&＃61;&＃39;0,23,63,46&＃39;"/>
        VerticalLayout>
    HorizontalLayout>
...
VerticalLayout>
Window>
 
 

为了通过配置文件自动创建皮肤&＃xff0c;duilib提供了一个类&＃xff1a;CDialogBuilder&＃xff08;DuiLib\Core\UIDlgBuilder.h&＃xff09;。
这个类提供了从皮肤包&＃xff08;文件夹和zip格式&＃xff09;中的xml中创建皮肤的方法&＃xff1a;CDialogBuilder::Create。内部实际上就是一个xml的解析&＃xff0c;依次创建各式控件。
除了创建控件&＃xff0c;这个类还将一些可以复用的资源提取出来放入CPaintManagerUI中统一管理&＃xff0c;如字体和图片等等。

6. 简单使用

由于项目里面实在是带了太多太多的demo&＃xff0c;而且在duilib的工程中&＃xff0c;还有一个doc的目录&＃xff0c;里面也非常详细的描述了要如何使用duilib来创建一个简单的工程。
所以关于duilib的简单使用&＃xff0c;这里就不再详述了&＃xff0c;这里就只列出GameDemo的main函数&＃xff0c;这个函数非常的简单&＃xff0c;但是已经基本可以表达了。

?
int  APIENTRY WinMain(HINSTANCE  hInstance, HINSTANCE  /*hPrevInstance*/, LPSTR /*lpCmdLine*/, int nCmdShow)
{
    CPaintManagerUI::SetInstance(hInstance);
    CPaintManagerUI::SetResourcePath(CPaintManagerUI::GetInstancePath() &＃43; _T("skin"));
    CPaintManagerUI::SetResourceZip(_T("GameRes.zip"));
    HRESULT Hr &＃61; ::CoInitialize(NULL);
    if( FAILED(Hr) ) return 0;
    CGameFrameWnd* pFrame &＃61; new CGameFrameWnd();
    if( pFrame &＃61;&＃61; NULL ) return 0;
    pFrame->Create(NULL, _T(""), UI_WNDSTYLE_FRAME, 0L, 0, 0, 1024, 738);
    pFrame->CenterWindow();
    ::ShowWindow(*pFrame, SW_SHOWMAXIMIZED);
    CPaintManagerUI::MessageLoop();
    ::CoUninitialize();
    return 0;
}

7. 总结

总的来说&＃xff0c;duilib还是一个很小巧好用的皮肤引擎的&＃xff0c;但是他仍然有其不好的地方&＃xff1a;对多线程的支持不好&＃xff0c;不支持动画。但是无论如何&＃xff0c;它还是不错的&＃xff0c;所以如果你已经看到了这里&＃xff0c;那么接下来跑到vs里面建一个工程&＃xff0c;玩一把才是正经事&＃xff5e;