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)
还有很多未列举,我们可以根据自己的需要自行选择;
自己摸索学习,难免有遗漏或者理解不正确的地方,请各位看官多包涵~