第一步:先大概介绍下我们的窗体的布局框架,窗体大体分为以下3大块:

顶部:也就是大的模块划分(比如首页,软件管家,在线服务等)

内容区域:根据选择的不同的顶部模块,进行不同的内容展示;

底部:设置,下载管理,版本提示区域等等;

其中,顶部和底部是公用的,我们大多数的操作更多集中在内容区域;

第二步:DuiLib界面引擎原理介绍

首先打开首页所对应的XML;

F:\gjsvn\c\C++\GPlusTest\bin\Debug_u\GPlus_skin\MainFrame\MainFrame.xml

在真正的进行添加前,我们先介绍下DuiLib界面引擎原理;

做过web开发的同学们应该比较更容易理解;

先截取一个首页的XML片段

step_by_step_G+入门-在线服务-LMLPHP

大家看以看到,新版G+的窗体的布局就是以多个XML来进行控制的;

可以控制字体,大小,颜色,背景图,模块布局(相当于DIV)等等,也就是说我们基本上在web页面上能控制的常用样式,在XML里基本都可以实现;但是有个小小的不方便,不提供预览的功能;后期可以搭建一个只为创建预览页面效果的纯净工具项目;

第三步:顶部添加一个我们自己的大的模块(KPI)

先上图:顶部导航

step_by_step_G+入门-在线服务-LMLPHP

 

我们会发现里面有很多Option,这个和我们一般的程序里的作用是差不多的,就是一个分组里的各个选项;

我们先在这个分组里添加一个自己的选项,如下图:

 step_by_step_G+入门-在线服务-LMLPHP

大家可以看到这个选项中的各个属性,在这里我就不一一介绍各个属性的作用了,用到的时候大家可以自己尝试;最后一个group就是分组;上面的这几个模块他们都属于quickbar1这一分组;

顶部添加完了,但是他的对应内同在那显示呢,OK,现在我们就同样的道理在内容区域加上我们自己的展示位置;

step_by_step_G+入门-在线服务-LMLPHP

其中,userkpi.xml就是我们添加的内容展示页面;

在这个XML里我们还可以控制页面级别的样式展示以及布局;大家注意到,这里我们又出现了一个新的控件: TabLayout ; 他就相当于咱们web中的页签;

还有一个比较有用的命令:Include, 做过新干线后台的同学们都比较明白,顾名思义,他的作用就是包含,包含source指定的子模板;

然后,我们需要去创建我们自己的userkpi.xml;

step_by_step_G+入门-在线服务-LMLPHP

这里面,我们引入了新的控件;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)

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

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

04-15 22:18