金山卫士界面源码解读及界面库分离(3)

最新推荐文章于 2020-12-09 21:05:46 发布

wdt3385

最新推荐文章于 2020-12-09 21:05:46 发布

阅读量1k

点赞数

分类专栏：金山开源 bkwin 文章标签：金山 class command header xml xhtml

金山开源同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

bkwin

16 篇文章 0 订阅

订阅专栏

通过前面两篇文章的介绍,相信同学们对Kui这个库的大体使用方法有了了解.

接下来,我们就可以开始实际演练了,下面我们将展现基础控件的使用.

不过在这里要提一下此库的一些没完善的地方,因为论坛有人提到了.

一.没有键盘接口,所以对Tab等按键无法反应.

二.还没有换肤功能

三.xml必须手工编辑.

四.其实也是很多人提到的,就是代码缺乏注释,很多时候还可能发现代码有些零乱,的确不应该是金山这种顶级软件公司所应该展现的样子.

不过这方面金山已经作了相关说明.代码需要和商业代码相分离,很多做法可能是暂时的.

对于这些弊端,可以自己来完善,我如果一直对它保持着兴趣,相信也会去完善它的.

好了,下面我们将以第一篇文章的代码Sample2为例子,讲解Kui库中的基础控件.Kui库的基础控件并不多,只有简单的几个基础控件.不过相信对于大部分的需求来说还是可以应付的.毕竟它是针对金山卫士进行开发的,而金山卫士是作为商业级来应用的.一般的功能性软件还是够用了.

而且以后将讲解对库的扩充方法,那样针对你的应用来,在Kui框架下编写特定控件也是很简单的.

窗体布局

在上一篇文章金山卫士界面源码解读及界面库分离(2) 中,我们说过Kui窗体是分为上中下三部分的,

分别为Header,Body,Footer

这三部分内容是通过xml来定义的.其实Kui所有的资源都是通过xml来定义的.他们分别如下所示:

xmls.xml 定义其他需要使用到的xml

images.xml 定义图片

strings.xml 定义文本

通过定义之后就可以通过ID来使用资源了.

我们将需要使用的所有图片都在images.xml中定义.

如果你需要程序支持多语言,可以在strings.xml里定义所有需要展现的文本.那样需要多语言支持只需要提供另一个xml,而不需要修改程序代码

然后我们在xmls.xml里面定义了三个文件,分别是

def_skin.xml 皮肤定义

def_style.xml 样式定义

dlg_main.xml 窗口定义

他们分别是皮肤,样式和主窗口.

主窗口结构就是定义在dlg_main.xml

所以我们需要定义窗体时主要是通过主dlg_main.xml来布局窗口中的元素.

我们看看Sample2中如何定义出一个窗口.

界面如下:

基础控件程序代码例子

dlg_main.xml代码如下:

[xhtml] view plain copy print ?

<layer title="sample3" width="300" height="470" appwin="1">
<header class="mainhead" width="full" height="30">
<icon src="ICON_MAIN" mce_src="ICON_MAIN" pos="5,4"/>
<text class="dlgtitle" pos="25,6">样例程序3</text>
<imgbtn id="60003" class="linkimage" skin="minbtn" pos="-105,1"/>
<imgbtn id="60002" class="linkimage" skin="maxbtn" pos="-79,1"/>
<imgbtn id="60001" class="linkimage" skin="closeonlybtn" pos="-53,1"/>
</header>
<body class="mainbody" width="full" height="full">
<button id="1" class="normalbtn" pos="50,20,110,40">登陆</button>
<text class="infostyle" pos="120,25,180">信息显示:</text>
<text id="2" class="infostyle" pos="200,25">Ready</text>
<hr style="dot" mce_style="dot" size=1 pos="50,50,250,50" crbg=888888 />
<check id="3" check=4 pos="50,60">复选框1</check>
<check id="4" pos="50,80">复选框2</check>
<hr style="dot" mce_style="dot" size=1 pos="50,100,250,100" crbg=888888 />
<radio id="5" check=4 pos="50,120">Radio按钮1</radio>
<radio id="6" pos="50,140">Radio按钮2</radio>
<radio id="7" pos="50,160">Radio按钮3</radio>
<progress id="8" pos="50,200,250,210" min="0" max="100" value="30" showpercent="1" bgskin="progressbg" posskin="progresspos" show="1" />
<button id="9" class="normalbtn" pos="50,220,110,240">增加</button>
<button id="10" class="normalbtn" pos="120,220,180,240">减少</button>
<img id="11" pos="50,250" skin="loading" sub="0"/>
<text class="infostyle" pos="70,250">Loading...</text>
</body>
<footer class="mainfoot" width="full" height="27" crbg=FFB9B9>
</footer>
</layer>

<layer
 title="sample3" width="300" height="470" appwin="1">
	<header class="mainhead" width="full" height="30">
		<icon src="ICON_MAIN" mce_src="ICON_MAIN" pos="5,4"/>
		<text class="dlgtitle" pos="25,6">样例程序3</text>
		<imgbtn id="60003" class="linkimage" skin="minbtn" 
pos="-105,1"/>
		<imgbtn id="60002" class="linkimage" skin="maxbtn" pos="-79,1"/>
		<imgbtn id="60001" class="linkimage" skin="closeonlybtn" 
pos="-53,1"/>
	</header>
	<body class="mainbody" width="full" height="full">
		<button id="1" class="normalbtn" 
pos="50,20,110,40">登陆</button>
		<text class="infostyle" pos="120,25,180">信息显示:</text>
		<text id="2" class="infostyle" pos="200,25">Ready</text>
		<hr style="dot" mce_style="dot" size=1 pos="50,50,250,50" 
crbg=888888 />
		<check id="3" check=4 pos="50,60">复选框1</check>
		<check id="4" pos="50,80">复选框2</check>
		<hr style="dot" mce_style="dot" size=1 pos="50,100,250,100" 
crbg=888888 />
		<radio id="5" check=4 pos="50,120">Radio按钮1</radio>
		<radio id="6" pos="50,140">Radio按钮2</radio>
		<radio id="7" pos="50,160">Radio按钮3</radio>
		
		<progress id="8" pos="50,200,250,210" min="0" max="100" value="30" 
showpercent="1" bgskin="progressbg" posskin="progresspos" show="1" />
		<button id="9" class="normalbtn" 
pos="50,220,110,240">增加</button>
		<button id="10" class="normalbtn" 
pos="120,220,180,240">减少</button>

<img id="11" pos="50,250" skin="loading" sub="0"/>
		<text class="infostyle" pos="70,250">Loading...</text>
	</body>
	<footer class="mainfoot" width="full" height="27" crbg=FFB9B9>
	</footer>
</layer>

首先所有窗口必须以layer为根节点.并设置其属性与窗口属性对应.关于具体的属性解释,我会在以后以文档方式提供.

简单说明如下:

width是窗体宽度，可用full定义自动填满宽度,height是高度可用full自动填满高度,

appwin表示是一个程序窗口,那将使其显示于任务栏.

然后是前面所说的上中下三部分的定义.

他们分别以header,mainbody,footer为节点,但他们实际都是属于KUI里面的KuiDialog虚拟窗体.是作为子控件的容器的.

这三部分不是都需要的,你可以只取三个中的部分,假如你不需要footer,可以直接去掉.但一般来说标题栏还是要的,否则很难拖动窗口了.

header说明：

header里面包含的子控件有一个图标，三个典型的系统按钮，以及一个显示标题的文本控件。

他们分别以节点icon,imgbtn,text节点定义。同样他们的具体说明将以后用文档提供。

简单说明如下：

pos 是指出控件位置，是所有控件的共有属性。