金山卫士界面源码解读及界面库分离(3)
通过前面两篇文章的介绍,相信同学们对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代码如下:
<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 是指出控件位置，是所有控件的共有属性。
icon 以src指明了图标位置。
text的class指明了所使用的样式。
imgbtn的id是比较重要的，点击按钮后将id以通知方式发送给主窗口，主窗口就可以根据按钮作相应动作。样式和皮肤则指明了按钮外观
其中按钮的通知可在程序代码里如此接收.
KUI_NOTIFY_MAP(IDC_RICHVIEW_WIN) KUI_NOTIFY_ID_COMMAND(60001, OnBkBtnClose) KUI_NOTIFY_ID_COMMAND(60002, OnBkBtnMax) KUI_NOTIFY_ID_COMMAND(60003, OnBkBtnMin) KUI_NOTIFY_MAP_END()
其中IDC_RICHVIEW_WIN是要接收的控件的ID,一般固定设置成该值就可以了.60001对应着xml中关闭按钮的id,这样就可以将通知消息映射到了OnBkBtnClose函数当中.用户再编写该函数实现就可以了.跟MFC挺相似的.
body的说明：
body里面我们展现了普通按钮，静态文本，分割线，check按钮，radio按钮，进度条，桢动画控件
普通按钮同样以id通知，样式是normalbtn，
需要注意的是普通按钮虽然看起来比windows原有按钮漂亮，但他是直接以不同颜色画出来的，没有用到贴图。
线控件以节点[ hr ]表示，直接在界面上画一条横线。
check控件和radio控件是直接用window的主题来画的，所以可以由程序员改变的地方不多。不过一般程序都是以这种外观展现的。
progress以min和max属性定义了值范围，当前值以value表示。showpercent指明是否要显示百分比文字
img是一系列的小图片，由subwidth指定每幅图片的宽度，通过sub属性来指定当前需要显示第几幅图片。可用于祯动画或状态图标显示。
footer
一般只是状态显示，没什么地方需要特别说明。
以上文件通过打包成zip文件，并命名为sample2.kui,然后用资源形式随程序一起提供。资源代码如下
kuires.dat SKIN "res//sample1.kui"
可以看到其实Kui提供的基础控件还是比较少的。不过这对于一般的应用还是可以的。
依据二八原则，应该是百分之八十的程序都是用这些基础控件的。所以各位同学将就着用吧。
金山卫士就是通过这些基础控件搭配几个高级控件完成了整个金山卫士的构建。
以后将展示高级界面的使用方法，敬请留意。
以上代码可在第一篇文章中下载
金山卫士界面源码解读及界面库分离(1)