step_by_step_G+入门-在线服务

第一步：先大概介绍下我们的窗体的布局框架，窗体大体分为以下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)

还有很多未列举，我们可以根据自己的需要自行选择；

自己摸索学习，难免有遗漏或者理解不正确的地方，请各位看官多包涵~