3.xml描述界面

在上篇中我们手写了一个界面，并在上面添加了两个按钮，在收到WM_CREATE消息后，创建界面。一般界面包含很多个控件，而且界面经常发生变化，如果还是手写的画，显然不现实。

在duilib中可以使用xml来描述界面，框架通过解析xml，创建界面，这和我们手动写xml的效果是一样的。使用xml来描述界面，实现了界面和界面处理逻辑的分离。

这种界面和界面处理逻辑分离的方式其实和Qt是一样的，Qt 使用的是.ui文件(实质上是xml格式的文件)来描述界面。

在duilib源码中的属性列表.xml这个文件描述了duilib支持解析的元素和属性。以Button为例：

<Button parent="Label" notifies="setfocus killfocus timer menu click windowinit(root)">
        <Attribute name="name" default="" type="STRING" comment="控件名字，同一窗口内必须唯一，如(testbtn)"/>
        <Attribute name="pos" default="0,0,0,0" type="RECT" comment="位置，如果为float控件则指定位置和大小，否则只指定大小,如(0,0,100,100)"/>
        <Attribute name="padding" default="0,0,0,0" type="RECT" comment="外边距,如(2,2,2,2)"/>
        <Attribute name="bkcolor" default="0x00000000" type="DWORD" comment="背景颜色,如(0xFFFF0000)"/>
        <Attribute name="bkcolor2" default="0x00000000" type="DWORD" comment="背景渐变色2,和bkcolor配合使用,如(0xFFFFFF00)"/>
        ...省略很多...
</Button>

他的父节点为Label控件，他的属性有name，pos，padding，bkcolor等。
属性名、默认值、值的类型、属性的用途都在属性列表.xml有描述。
我们编写界面xml时要根据属性列表.xml。

我们用xml这么描述上篇手写的界面：

<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,600"> <!-- 窗口的初始尺寸 -->
    <HorizontalLayout bkcolor="#FF00FF00"> <!-- 整个窗口的背景 -->
        <Button name="btnHello1" pos="30,80,0,0" width="70" height="30" text="btnHello1"/> <!-- 按钮的属性，如名称、文本 -->
        <Button name="btnHello2" pos="120,80,0,0" width="70" height="40" text="btnHello2"/>
    </HorizontalLayout>
</Window>

创建窗口时的对应代码要修改为：

    if (uMsg == WM_CREATE)
        {
            m_PaintManager.Init(m_hWnd);
            CDialogBuilder builder;
            CControlUI* pRoot = builder.Create(_T("duilib.xml"), (UINT)0, NULL, &m_PaintManager);
            ASSERT(pRoot && "Failed to parse XML");
            m_PaintManager.AttachDialog(pRoot);
            m_PaintManager.AddNotifier(this);
            return lRes;
        }

同时我们要设置xml的路径：

int APIENTRY _tWinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPTSTR lpCmdLine, int nCmdShow)
{
    CPaintManagerUI::SetInstance(hInstance);
    // 设置资源的默认路径（此处设置为和exe在同一目录）
    CPaintManagerUI::SetResourcePath(CPaintManagerUI::GetCurrentPath()+"\\Debug");
    CDuiFrameWnd duiFrame;
    duiFrame.Create(NULL, _T("DUIWnd"), UI_WNDSTYLE_FRAME, WS_EX_WINDOWEDGE);
    duiFrame.CenterWindow(); // 启动居中;
    duiFrame.ShowModal();
    return 0;
}

大家可能觉得，手写界面xml也很麻烦，看效果也不是很方便，网友还是提供了一些ui设计工具，比如DuiDesigner，通过工具操作，可以帮助我们生成xml，还可以预览效果。

其实对比下Qt的代码：

class dlg_login : public QDialog
{
    Q_OBJECT

public:
    dlg_login(QWidget *parent = Q_NULLPTR);
    ~dlg_login();
signals:
    void mainWndLogin();
private slots:
    void OnLogin();
    void showLoginWnd();
private:
    void InitEvent();
private:
    Ui::dlg_login ui;
};

duilib的业务代码：

class CDuiFrameWnd : public CWindowWnd, public INotifyUI
{
public:
    virtual LPCTSTR GetWindowClassName() const;
    virtual void    Notify(TNotifyUI& msg);
    virtual LRESULT HandleMessage(UINT uMsg, WPARAM wParam, LPARAM lParam);
protected:
    CPaintManagerUI m_PaintManager;
};

是不是有点类似呢？CPaintManagerUI m_PaintManager相当于Ui::dlg_login ui;他们都是用来管理ui上的控件。
不同的是Qt的通信机制使用的是信号槽，而duilib使用的是windows消息。