第一步：先大概介绍下我们的窗体的布局框架，窗体大体分为以下3大块：
顶部：也就是大的模块划分（比如首页，软件管家，在线服务等）
内容区域：根据选择的不同的顶部模块，进行不同的内容展示；
底部：设置，下载管理，版本提示区域等等；
其中，顶部和底部是公用的，我们大多数的操作更多集中在内容区域；
第二步：DuiLib界面引擎原理介绍
首先打开首页所对应的XML；
F:\gjsvn\c\C++\GPlusTest\bin\Debug_u\GPlus_skin\MainFrame\MainFrame.xml
在真正的进行添加前，我们先介绍下DuiLib界面引擎原理；
做过web开发的同学们应该比较更容易理解；
先截取一个首页的XML片段
大家看以看到，新版G+的窗体的布局就是以多个XML来进行控制的；
可以控制字体，大小，颜色，背景图，模块布局（相当于DIV）等等，也就是说我们基本上在web页面上能控制的常用样式，在XML里基本都可以实现；但是有个小小的不方便，不提供预览的功能；后期可以搭建一个只为创建预览页面效果的纯净工具项目；
第三步：顶部添加一个我们自己的大的模块（KPI）
先上图：顶部导航
我们会发现里面有很多Option，这个和我们一般的程序里的作用是差不多的，就是一个分组里的各个选项；
我们先在这个分组里添加一个自己的选项，如下图：
大家可以看到这个选项中的各个属性，在这里我就不一一介绍各个属性的作用了，用到的时候大家可以自己尝试；最后一个group就是分组；上面的这几个模块他们都属于quickbar1这一分组；
顶部添加完了，但是他的对应内同在那显示呢，OK，现在我们就同样的道理在内容区域加上我们自己的展示位置；
其中，userkpi.xml就是我们添加的内容展示页面；
在这个XML里我们还可以控制页面级别的样式展示以及布局；大家注意到，这里我们又出现了一个新的控件： TabLayout ； 他就相当于咱们web中的页签；
还有一个比较有用的命令：Include， 做过新干线后台的同学们都比较明白，顾名思义，他的作用就是包含，包含source指定的子模板；
然后，我们需要去创建我们自己的userkpi.xml;
这里面，我们引入了新的控件；webBrowser，预览器容器；作用和WEB开发中的一样；
至此，我们自己的KPI页面就已经完全添加完成了；
第四步：首页程序中添加KPI页面；
首先：现在工程中添加一个新类：UserKpiPage.cpp 注意，如果是有页面的类，命名一定要和模板命名相对应，后面加上page；模板叫做userkpi.xml； 这样DUILIB界面引擎才能识别出来，才会去自动加载界面XML；
创建完页面后，去首页，也就是MainFrame.cpp中去添加对UserKpiPage的操作；
操作简单分为以下几步：
First：先在MainFrame.h顶部中添加userkpipage的引用；
代码如下：#include "UserKpiPage.h"
然后声明页面变量：
代码如下：UserKpiPage m_UserKpiPage;
Second：在MainFrame的构造函数中添加虚拟窗体；
代码如下：
m_UserKpiPage.SetPaintMagager(&m_pm);
AddVirtualWnd(_T("userkpipage"),&m_UserKpiPage);
Third： 在MainFrame的OnSelectChanged响应事件中添加KPI页面的触发；
代码如下：
注意了：showPage是我们在页面中自己定义的方法，用来进行构建页面，初始化数据等等；
SelectItem就是根据索引选中上文提到到分组中的对应页签；
Fourth：进入到UserKpiPage.cpp内部
我们先看看showpage方法：
发现他的功能很简单,初始化控件-》加载页面-》更改状态；代码本身无不好理解的地方；
然后我们看下InitControl方法：
这里面其实和。Net里的一些写法还是比较像的，注意FindControl，这个方法就是在你所对应的XML模板里，根据name属性找到对应的控件；比如找到webbrowser容器，然后创建CWebBrowserEventHandler对象，并进行对象初始化；
其他的ChangeShowStatus等和业务相关的方法就不细讲了；
Fifth：给页面添加各种响应事件；
首先在头文件里定义消息Map；（标黄处）
public:
UserKpiPage(void);
virtual ~UserKpiPage(void);
void SetPaintMagager(CPaintManagerUI* pPaintMgr);
void ShowPage();
DUI_DECLARE_MESSAGE_MAP()
然后再文件中添加消息响应类别已经对应的事件；
DUI_BEGIN_MESSAGE_MAP(UserKpiPage, CNotifyPump)
DUI_ON_MSGTYPE(DUI_MSGTYPE_SELECTCHANGED,OnSelectChanged)
DUI_END_MESSAGE_MAP()
然后创建对应的方法OnSelectChanged
在这里，我们可以根据不同的按钮触发不同的操作，你可以自定义你自己的业务，不细讲；
当然，消息类别不仅仅只有DUI_MSGTYPE_SELECTCHANGED
还有很多种，比如：
DUI_ON_MSGTYPE(DUI_MSGTYPE_CLICK,OnClick)
DUI_ON_MSGTYPE(DUI_MSGTYPE_SELECTCHANGED,OnSelectChanged)
DUI_ON_MSGTYPE(DUI_MSGTYPE_ITEMCLICK,OnItemClick)
DUI_ON_MSGTYPE(DUI_MSGTYPE_ITEMSELECT,OnItemSelect)
DUI_ON_MSGTYPE(DUI_MSGTYPE_LINK,OnLink)
还有很多未列举，我们可以根据自己的需要自行选择；
自己摸索学习，难免有遗漏或者理解不正确的地方，请各位看官多包涵~