金山卫士开源软件之旅(九) KUI高级界面(列表控件、树控件例子、超文本、网页控件)
2012-05-30 10:54
1021 查看
转载自: http://blog.csdn.net/b2b160/article/details/6275839#reply
注意: 作者的例子及代码是基与上一版本的金山库,XML的语法及有些API名字不一样。
本篇开始介绍比较复杂的界面应用了.界面应用介绍完成后,估计要开始整理系统的应用文档资料了.也不知道自己能坚持到啥时候,呵呵.
KUI高级界面
这一篇有些内容是根据网友的反馈来添加的。主要讲解几个功能较为复杂的控件的使用。
不过提请同学们注意的是这里介绍的大部分是实际窗口,而非DirectUI。因为金山卫士界面库实际上实现的KUI还不是很丰富。
本篇要介绍的几个控件包括Tab多页面(可以理解为属性页),多列列表控件(ListCtrl的Report模式),树控件,富文本控件(就是可以进行简单格式化文本),网页浏览,然后我还添加了一个小游戏--贪吃蛇作为实际应用的使用范例。
我们先来浏览下这个界面的整体样子。页面通过Tab控件分为四个Tab页面,你可以通过顶上的按钮切换,分别如下:
列表控件:
树控件例子
富文本:
网页控件
游戏例子:
同样的,我们以页面布局开始,先看页面布局代码:
[xhtml]
view plaincopyprint?
<layer title="sample3" width="800" height="600" appwin="1">
<header class="mainhead" width="full" height="23">
<icon src="ICON_MAIN" pos="5,4"/>
<text class="dlgtitle" pos="25,6">样例程序4----TAB及RichText等高级控件例子</text>
<imgbtn id="60003" class="linkimage" skin="minbtn" pos="-105,1"/>
<imgbtn id="60002" class="linkimage" skin="maxbtn" pos="-73,1"/>
<imgbtn id="60001" class="linkimage" skin="closeonlybtn" pos="-43,1"/>
</header>
<body class="mainbody" width="full" height="full">
<tabctrl id="1" tabwidth="71" tabheight="71" tabskin="tabmain" iconskin="tabicon" crtext="ffffff" tabspacing="5" tabpos="1" framepos="7" pos="0,4,-0,-1" icon-x="10" icon-y="1" text-x="0" text-y="25">
<tab title="列表控件" width="full" height="full" crtext="FFFFFF">
<realwnd id="101" ctrlid="101" pos="10,10,-10,-5" />
</tab>
<tab title="树型控件" width="full" height="full" crtext="FFFFFF">
<realwnd id="401" ctrlid="501" pos="10,10,-10,-5"/>
</tab>
<tab title="富文本" width="full" height="full" crtext="000000">
<richtext pos="10,10,-10,-5" linkclass="linktext">
<b>富文本测试样例</b>
<br/>
<c color="FF0000">红色字</c>
<br/>
<c color="0000FF">蓝色字</c>
<br/>
<i>斜体字</i>
<br/>
<b>黑体字</b>
<br/>
<u>下划线</u>
<br/>
非常长的文本
非常长的文本
<br/><br/><br/><br/><br/><br/>
<a id="1">还可以加超链接哦</a>
</richtext>
</tab>
<tab title="网页浏览" width="full" height="full" crtext="FFFFFF">
<realwnd id="401" ctrlid="401" pos="10,10,-10,-5"/>
</tab>
<tab title="贪吃蛇" width="full" height="full" crtext="FFFFFF">
<dlg pos="10,10,210,-5">
<img skin="snakelogo" pos="|-90,10,|90" />
<text class="scorelabel" pos="|-50,240,|50">分数</text>
<text class="score" pos="|-50,260,|50" id="303">0</text>
<button id="302" class="normalbtn" pos="|-50,300,|50,325">开始游戏</button>
</dlg>
<dlg pos="211,10,-10,-5" crbg="EEEEEE">
<realwnd id="301" ctrlid="301" pos="|-150,|-150,|150,|150" />
</dlg>
</tab>
</tabctrl>
</body>
<footer class="mainfoot" width="full" height="23" crbg=FFB9B9>
</footer>
</layer>
其中101与xml的代码对应。
然后可通过函数InsertColumn添加列头,InsertItem及SetItemText可添加项目。
但记得创建后需要使用m_ctlListCtrl.Init();对Header进行美化操作。
树控件
树控件通过定义KUIMulStatusTree类型的窗口,它实现了对TreeCtrl的封装,可以对选项进行钩选,窗口创建代码为
[cpp]
view plaincopyprint?
if( !m_ctlTree.Create( GetViewHWND(), 501 ) )
{
CKuiMsgBox::Show( _T("无法初始化树控件") );
}
else
{
HTREEITEM hItem = m_ctlTree.InsertItem( _T("全选集"), NULL, NULL, KUIMulStatusTree::EM_TVIS_CHECK );
m_ctlTree.InsertItem( _T("下属项目1"), hItem, NULL, KUIMulStatusTree::EM_TVIS_CHECK );
m_ctlTree.InsertItem( _T("下属项目2"), hItem, NULL, KUIMulStatusTree::EM_TVIS_CHECK );
m_ctlTree.InsertItem( _T("下属项目3"), hItem, NULL, KUIMulStatusTree::EM_TVIS_CHECK );
m_ctlTree.InsertItem( _T("下属项目4"), hItem, NULL, KUIMulStatusTree::EM_TVIS_CHECK );
m_ctlTree.InsertItem( _T("下属项目5"), hItem, NULL, KUIMulStatusTree::EM_TVIS_CHECK );
hItem = m_ctlTree.InsertItem( _T("半选集"), NULL, NULL, KUIMulStatusTree::EM_TVIS_UNCHECK );
m_ctlTree.InsertItem( _T("下属项目1"), hItem, NULL, KUIMulStatusTree::EM_TVIS_CHECK );
m_ctlTree.InsertItem( _T("下属项目2"), hItem, NULL, KUIMulStatusTree::EM_TVIS_UNCHECK );
m_ctlTree.InsertItem( _T("下属项目3"), hItem, NULL, KUIMulStatusTree::EM_TVIS_CHECK );
m_ctlTree.InsertItem( _T("下属项目4"), hItem, NULL, KUIMulStatusTree::EM_TVIS_UNCHECK );
m_ctlTree.InsertItem( _T("下属项目5"), hItem, NULL, KUIMulStatusTree::EM_TVIS_UNCHECK );
hItem = m_ctlTree.InsertItem( _T("全非选集"), NULL, NULL, KUIMulStatusTree::EM_TVIS_UNCHECK );
m_ctlTree.InsertItem( _T("下属项目1"), hItem, NULL, KUIMulStatusTree::EM_TVIS_UNCHECK );
m_ctlTree.InsertItem( _T("下属项目2"), hItem, NULL, KUIMulStatusTree::EM_TVIS_UNCHECK );
m_ctlTree.InsertItem( _T("下属项目3"), hItem, NULL, KUIMulStatusTree::EM_TVIS_UNCHECK );
m_ctlTree.InsertItem( _T("下属项目4"), hItem, NULL, KUIMulStatusTree::EM_TVIS_UNCHECK );
m_ctlTree.InsertItem( _T("下属项目5"), hItem, NULL, KUIMulStatusTree::EM_TVIS_UNCHECK );
}
在这里我还演示了CKuiMsgBox::Show来显示MessageBox,他的用法和MessageBox类似。
创建成功后使用m_ctlWeb.Show2( _T("http://www.baidu.com/"), _T("about:blank") );进行网页显示。
贪吃蛇
这个没什么好说的了,是我上次帮CSDN网友写一个例子代码时顺手写的,这次也顺手贴过来,有兴趣的可以看看源代码。
其实高级界面主要体现在Tab控件的应用上,因为它可以实现嵌套,就是作为Tab的子窗口也可以包含Tab控件,那样层层嵌套,就可以实现比较复杂的界面了。对软件功能的组织也有一定好处。大家不妨试下,希望你写出好的界面后别忘了和我分享哦。
至此,基本的库使用都介绍完了,下一步如果有时间准备***一个界面编辑器,以及整理文档了。
最后感谢你的关注与浏览,期待你的建议。
最新的库及代码V1.0.48请到以下svn地址更新,暂时不上传到CSDN了,怕和原来的版本混淆,如果你希望从CSDN下载,请给我留言,如果多人要求我再上传一份。
https://openkui.googlecode.com/svn/trunk
注意: 作者的例子及代码是基与上一版本的金山库,XML的语法及有些API名字不一样。
本篇开始介绍比较复杂的界面应用了.界面应用介绍完成后,估计要开始整理系统的应用文档资料了.也不知道自己能坚持到啥时候,呵呵.
KUI高级界面
这一篇有些内容是根据网友的反馈来添加的。主要讲解几个功能较为复杂的控件的使用。
不过提请同学们注意的是这里介绍的大部分是实际窗口,而非DirectUI。因为金山卫士界面库实际上实现的KUI还不是很丰富。
本篇要介绍的几个控件包括Tab多页面(可以理解为属性页),多列列表控件(ListCtrl的Report模式),树控件,富文本控件(就是可以进行简单格式化文本),网页浏览,然后我还添加了一个小游戏--贪吃蛇作为实际应用的使用范例。
我们先来浏览下这个界面的整体样子。页面通过Tab控件分为四个Tab页面,你可以通过顶上的按钮切换,分别如下:
列表控件:
树控件例子
富文本:
网页控件
游戏例子:
同样的,我们以页面布局开始,先看页面布局代码:
[xhtml]
view plaincopyprint?
<layer title="sample3" width="800" height="600" appwin="1">
<header class="mainhead" width="full" height="23">
<icon src="ICON_MAIN" pos="5,4"/>
<text class="dlgtitle" pos="25,6">样例程序4----TAB及RichText等高级控件例子</text>
<imgbtn id="60003" class="linkimage" skin="minbtn" pos="-105,1"/>
<imgbtn id="60002" class="linkimage" skin="maxbtn" pos="-73,1"/>
<imgbtn id="60001" class="linkimage" skin="closeonlybtn" pos="-43,1"/>
</header>
<body class="mainbody" width="full" height="full">
<tabctrl id="1" tabwidth="71" tabheight="71" tabskin="tabmain" iconskin="tabicon" crtext="ffffff" tabspacing="5" tabpos="1" framepos="7" pos="0,4,-0,-1" icon-x="10" icon-y="1" text-x="0" text-y="25">
<tab title="列表控件" width="full" height="full" crtext="FFFFFF">
<realwnd id="101" ctrlid="101" pos="10,10,-10,-5" />
</tab>
<tab title="树型控件" width="full" height="full" crtext="FFFFFF">
<realwnd id="401" ctrlid="501" pos="10,10,-10,-5"/>
</tab>
<tab title="富文本" width="full" height="full" crtext="000000">
<richtext pos="10,10,-10,-5" linkclass="linktext">
<b>富文本测试样例</b>
<br/>
<c color="FF0000">红色字</c>
<br/>
<c color="0000FF">蓝色字</c>
<br/>
<i>斜体字</i>
<br/>
<b>黑体字</b>
<br/>
<u>下划线</u>
<br/>
非常长的文本
非常长的文本
<br/><br/><br/><br/><br/><br/>
<a id="1">还可以加超链接哦</a>
</richtext>
</tab>
<tab title="网页浏览" width="full" height="full" crtext="FFFFFF">
<realwnd id="401" ctrlid="401" pos="10,10,-10,-5"/>
</tab>
<tab title="贪吃蛇" width="full" height="full" crtext="FFFFFF">
<dlg pos="10,10,210,-5">
<img skin="snakelogo" pos="|-90,10,|90" />
<text class="scorelabel" pos="|-50,240,|50">分数</text>
<text class="score" pos="|-50,260,|50" id="303">0</text>
<button id="302" class="normalbtn" pos="|-50,300,|50,325">开始游戏</button>
</dlg>
<dlg pos="211,10,-10,-5" crbg="EEEEEE">
<realwnd id="301" ctrlid="301" pos="|-150,|-150,|150,|150" />
</dlg>
</tab>
</tabctrl>
</body>
<footer class="mainfoot" width="full" height="23" crbg=FFB9B9>
</footer>
</layer>
[cpp] view plaincopyprint? DWORD dwStyle = WS_CHILD|LVS_REPORT|LVS_SHOWSELALWAYS|LVS_SINGLESEL|LVS_OWNERDRAWFIXED; if( m_ctlListCtrl.Create( GetRichWnd(), NULL, NULL, dwStyle, 0, 101 ) ) { } DWORD dwStyle = WS_CHILD|LVS_REPORT|LVS_SHOWSELALWAYS|LVS_SINGLESEL|LVS_OWNERDRAWFIXED; if( m_ctlListCtrl.Create( GetRichWnd(), NULL, NULL, dwStyle, 0, 101 ) ) { }
其中101与xml的代码对应。
然后可通过函数InsertColumn添加列头,InsertItem及SetItemText可添加项目。
但记得创建后需要使用m_ctlListCtrl.Init();对Header进行美化操作。
树控件
树控件通过定义KUIMulStatusTree类型的窗口,它实现了对TreeCtrl的封装,可以对选项进行钩选,窗口创建代码为
[cpp]
view plaincopyprint?
if( !m_ctlTree.Create( GetViewHWND(), 501 ) )
{
CKuiMsgBox::Show( _T("无法初始化树控件") );
}
else
{
HTREEITEM hItem = m_ctlTree.InsertItem( _T("全选集"), NULL, NULL, KUIMulStatusTree::EM_TVIS_CHECK );
m_ctlTree.InsertItem( _T("下属项目1"), hItem, NULL, KUIMulStatusTree::EM_TVIS_CHECK );
m_ctlTree.InsertItem( _T("下属项目2"), hItem, NULL, KUIMulStatusTree::EM_TVIS_CHECK );
m_ctlTree.InsertItem( _T("下属项目3"), hItem, NULL, KUIMulStatusTree::EM_TVIS_CHECK );
m_ctlTree.InsertItem( _T("下属项目4"), hItem, NULL, KUIMulStatusTree::EM_TVIS_CHECK );
m_ctlTree.InsertItem( _T("下属项目5"), hItem, NULL, KUIMulStatusTree::EM_TVIS_CHECK );
hItem = m_ctlTree.InsertItem( _T("半选集"), NULL, NULL, KUIMulStatusTree::EM_TVIS_UNCHECK );
m_ctlTree.InsertItem( _T("下属项目1"), hItem, NULL, KUIMulStatusTree::EM_TVIS_CHECK );
m_ctlTree.InsertItem( _T("下属项目2"), hItem, NULL, KUIMulStatusTree::EM_TVIS_UNCHECK );
m_ctlTree.InsertItem( _T("下属项目3"), hItem, NULL, KUIMulStatusTree::EM_TVIS_CHECK );
m_ctlTree.InsertItem( _T("下属项目4"), hItem, NULL, KUIMulStatusTree::EM_TVIS_UNCHECK );
m_ctlTree.InsertItem( _T("下属项目5"), hItem, NULL, KUIMulStatusTree::EM_TVIS_UNCHECK );
hItem = m_ctlTree.InsertItem( _T("全非选集"), NULL, NULL, KUIMulStatusTree::EM_TVIS_UNCHECK );
m_ctlTree.InsertItem( _T("下属项目1"), hItem, NULL, KUIMulStatusTree::EM_TVIS_UNCHECK );
m_ctlTree.InsertItem( _T("下属项目2"), hItem, NULL, KUIMulStatusTree::EM_TVIS_UNCHECK );
m_ctlTree.InsertItem( _T("下属项目3"), hItem, NULL, KUIMulStatusTree::EM_TVIS_UNCHECK );
m_ctlTree.InsertItem( _T("下属项目4"), hItem, NULL, KUIMulStatusTree::EM_TVIS_UNCHECK );
m_ctlTree.InsertItem( _T("下属项目5"), hItem, NULL, KUIMulStatusTree::EM_TVIS_UNCHECK );
}
[cpp] view plaincopyprint? if( !m_ctlWeb.Create( GetViewHWND(), 401, FALSE, RGB(0xFB, 0xFC, 0xFD) ) ) { CKuiMsgBox::Show( _T("无法初始化网页") ); } else { CString strURL; m_ctlWeb.Show2( _T("http://www.baidu.com/"), strURL ); } if( !m_ctlWeb.Create( GetViewHWND(), 401, FALSE, RGB(0xFB, 0xFC, 0xFD) ) ) { CKuiMsgBox::Show( _T("无法初始化网页") ); } else { CString strURL; m_ctlWeb.Show2( _T("http://www.baidu.com/"), strURL ); }
在这里我还演示了CKuiMsgBox::Show来显示MessageBox,他的用法和MessageBox类似。
创建成功后使用m_ctlWeb.Show2( _T("http://www.baidu.com/"), _T("about:blank") );进行网页显示。
贪吃蛇
这个没什么好说的了,是我上次帮CSDN网友写一个例子代码时顺手写的,这次也顺手贴过来,有兴趣的可以看看源代码。
其实高级界面主要体现在Tab控件的应用上,因为它可以实现嵌套,就是作为Tab的子窗口也可以包含Tab控件,那样层层嵌套,就可以实现比较复杂的界面了。对软件功能的组织也有一定好处。大家不妨试下,希望你写出好的界面后别忘了和我分享哦。
至此,基本的库使用都介绍完了,下一步如果有时间准备***一个界面编辑器,以及整理文档了。
最后感谢你的关注与浏览,期待你的建议。
最新的库及代码V1.0.48请到以下svn地址更新,暂时不上传到CSDN了,怕和原来的版本混淆,如果你希望从CSDN下载,请给我留言,如果多人要求我再上传一份。
https://openkui.googlecode.com/svn/trunk
相关文章推荐
- 【Android开发学习29】界面控件之列表控件(ListView)--显示图片和文本
- 金山卫士开源软件之旅(六) 添加控件CBkEdit与CbkCombo
- !!无须定义配置文件中的每个变量的读写操作,以下代码遍历界面中各个c#控件,自动记录其文本,作为配置文件保存
- NoSQL数据库开源软件列表大全
- Flex中如何在Panel控件的status文本中添加一个链接的例子
- 推荐几个有用的iOS界面开源视图、控件
- 获取列表(ListBox)控件的当前文本、item数量等
- 几个不错的开源的.net界面控件(转载自)
- 几个不错的开源的.net界面控件(转)
- InstallShield InstallScript工程中自定义界面文本输入控件的两个注意事项
- CListCtrl 控件使用虚拟列表参考例子
- 金山卫士开源软件之旅(十) KSafeMainproject的分析 1
- SNF快速开发平台MVC-富文本控件集成了百度开源项目editor
- c++编程:获取控件上的文本值---例子是CEdit 的七种方法(转载)
- 顺顺网页电子表格控件开源下载
- 几个不错的开源的.net界面控件
- 推荐系统开源软件列表汇总和点评
- Flex中如何设置TextArea控件中的无效(disabled)文本颜色的例子
- 利用htmlparser提取网页纯文本的例子
- 推荐系统开源软件列表 | Resys China