CN101071375A - 一种界面开发***及组合控件的方法 - Google Patents

Abstract

本发明适用于计算机图形界面设计领域，提供了一种界面开发***及组合控件的方法，所述***的基本界面元素为虚拟窗口，所述虚拟窗口的属性包括：大小、相对于其父虚拟窗口的位置、用于标明该虚拟窗口所包含其他虚拟窗口的属性标签以及用于产生事件回调的脚本。本发明实施例通过利用虚拟窗口的特有属性，使用脚本语言描述虚拟窗口的父子关系、空间位置关系以及函数调用等，方便、快捷的实现将多个存在的虚拟窗口拼接成一个新的、功能更加强大的虚拟窗口，从而提高了控件的扩展性和重用性，增加了控件的种类，使得界面开发的灵活性及开发效率大大提高。

Description

一种界面开发***及组合控件的方法

技术领域

本发明属于计算机图形界面设计领域，尤其涉及一种界面开发***及组合控件的方法。

背景技术

界面开发工具和模式发展到今天，已经是层出不穷、目不暇接了，针对界面多样化的需求，在各类不同的平台之上都有自己的界面开发方法。界面框架发展到今天，已经不像它最初定位那样，以帮助开发人员减少重复代码为目的；而是大大延展了其实用性和扩展性。众所周知，我们能够看到的如此绚烂夺目的软件，不过是由最基本的界面元素构成的；这些界面元素包括像素(pixel)，直线(line)，色块(colorbox)，纹理(texture)以及文字(text)等。如果开发人员直接对这些界面的基本元素进行操作，不仅耗费大量的精力，而且无法实现(或者很难实现)在当前形式下软件界面越来越酷、越来越炫的效果。所以，在界面开发的过程中，开发人员都希望能够有一个丰富、强力以及可重用的界面库的支持。

在Windows***中，提供了一组内建控件方便给界面开发人员使用，在MFC(微软封装类库)中，微软进一步对这些界面控件进行了封装，而且通过组合生成一些更加高级的控件，例如：CStatic，CButton，CListBox，CComboBox，CEdit，CScrollBar，CImageList，CListViewCtrl等。这些控件因为采用接近底层的绘图操作，所以速度快；又由于是Windows自带的，所以兼容性好，但其缺点是样式死板，很难做出酷、炫效果的界面。而且***相关性极强，在不同的***，甚至不同的浏览器版本下表现都是不一样的。同时，这些界面的元素位置固定，如果改变窗口大小的话，需要每个窗口都响应大小改变的消息来调整元素位置，非常麻烦，大大影响界面的开发效率。

在现有的另一技术方案中，采用超文本标记语言(Hypertext MarkupLanguage，HTML)描述界面，用脚本响应事件。基本上所有的网页都是用这种模式实现的。这种界面实现方案的优势在于界面元素之间的位置使用可扩展标记语言(Extensible Markup Language，XML)描述，比较灵活，可以适应不同分辨率的显示器和不同的***。但是控件的种类非常少，样式也很死板，虽然有的效果很酷，但都是通过事件来模拟出来的，例如将一张图像模拟成一个按钮，但是这样做需要从底层开始写代码，稍微复杂一点的界面效果就需要成千上百行的JavaScript脚本代码支持。以Google首页为例，如图1所示，其上有“网页”“图片”“咨询”“论坛”“更多”几个Tab页，为了达到点击切换的效果，每一个Link控件都要单独响应点击的事件，并且附带一段JavaScript脚本来实现切换功能，扩展性和重用性都非常差，而且界面和逻辑耦合的非常厉害，影响界面的开发效率。

发明内容

本发明实施例的目的在于提供一种界面开发***，旨在解决现有技术中界面控件的扩展性、重用性差，种类少，导致生成的界面样式死板以及界面开发效率低的问题。

本发明实施例是这样实现的，一种界面开发***，所述***的基本界面元素为虚拟窗口，所述虚拟窗口的属性包括：大小、相对于其父虚拟窗口的位置、用于标明该虚拟窗口所包含其他虚拟窗口的属性标签以及用于产生事件回调的脚本。

本发明实施例的另一目的在于提供一种组合控件的方法。

一种组合控件的方法，所述方法包括：

通过脚本语言描述将界面开发***的基本界面元素虚拟窗口组合起来；所述虚拟窗口的属性包括：大小、相对于其父虚拟窗口的位置、用于标明该虚拟窗口所包含其他虚拟窗口的属性标签以及用于产生事件回调的脚本。

本发明实施例通过利用虚拟窗口的特有属性，使用脚本语言描述虚拟窗口的父子关系、空间位置关系以及函数调用等，方便、快捷的实现将多个存在的虚拟窗口拼接成一个新的、功能更加强大的虚拟窗口，从而提高了控件的扩展性和重用性，增加了控件的种类，使得界面开发的灵活性及开发效率大大提高。

附图说明

图1是现有技术开发的界面示意图；

图2是本发明实施例提供的界面开发***的虚拟窗口的属性标签Frames中包括的虚拟窗口类型示意图；

图3～5是本发明实施例提供的界面开发***的应用示例图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本发明实施例通过利用虚拟窗口(Frame)的特有属性，使用脚本语言描述Frame的父子关系、空间位置关系以及函数调用等，方便、快捷的实现将多个存在的Frame拼接成一个新的、功能更加强大的Frame，从而提高了控件的扩展性和重用性，增加了控件的种类，使得界面开发的灵活性及开发效率大大提高。

控件是由下列元素决定的：大小和位置，例如：Height、Width、Top、Left、Bottom、Right、Bottom以及Rgn等；外观，例如：ForeColor、BackColol以及Font等。控件会响应用户的各种事件，一些比较常见的控件包括：Click(单击)、DoubleClick(双击)、KeyDown(按键按下)、KeyPress(按键)以及Paint(绘制)等。而本发明实施例提供的界面开发***中最基本的元素为Frame，一个Frame对应着一个处理逻辑，例如：上面提到的Click、DoubleClick、KeyDown、KeyPress以及Paint等，此外Frame不仅包涵了传统意义上控件的全部功能，还得到了极大的延展，从字面上理解是一个画面，从传统的Windows界面开发的意义上理解为一个窗口，抽象起来可以看作是C++里边的一个类，有自己的特有属性，例如：用于定义这个Frame大小的Size、用于定义这个Frame相对于他的父Frame位置的Anchors、用于标明这个Frame对象所包含其他Frame的XML语言的属性标签Frames以及用于产生事件回调的脚本Script等。

图2示出了Frame的属性标签Frames中描述的该Frame可能包括的类型，例如：原子Frame、由FrameEx开头的控件(足够强大，已经能够达到独立完成某些功能的Frame)、适配Frame以及CtrlSkinner。其中，原子Frame可以是Texture(纹理)，也可以是FontString(能支持多种字体显示的字符串控件)，CtrlSkinner可以是在C++程序里封装的一些Window基本控件或者一些实现难度较高，交互较复杂的一系列基础控件。

适配Frame用于组合不同的Frame以达到特殊效果，例如：选择虚拟窗口(SelectFrame)、组虚拟窗口(GroupFrame)等。SelectFrame用于容纳几个不同的Frame，但是这几个不同的Frame在任何时间只有一个处于可见(Visible)状态。这样就可以实现类似图1中Button控件的多态效果，因为Button控件可以在正常状态(Normal Style)、鼠标移上(Highlight Style)、鼠标按下(PushedStyle)、默认选中(Default Style)、焦点(Focus Style)等五种状态间随意切换的，但是任一时间内只有一种状态处于激活(Active)。所以将每种状态使用不同的Frame来实现，给每个Frame取个唯一的识别名，然后把这些Frame定义于一个SelectFrame的Selects域内；同时响应鼠标事件和焦点事件，当欲激活某个Frame时，调用SelectFrame对象的ChangeSelect()方法，传入的参数就是该Frame的唯一识别名，此时将当前Frame置于隐藏状态，而将欲激活Frame显示出来，达到切换的效果。

本发明实施例还提供了一种组合控件的方法，利用Frame的特有属性，通过脚本语言描述将多个Frame组合起来。通过本发明实施例提供的组合控件的方法，组合上述5种状态的Frame实现Button控件的具体脚本语言描述如下：

    <Control name＝″ButtonCtrl″>//控件名

    <Lua>

    local Param＝{style＝″Button″，Data＝{}，text＝nil}

    if type(CtrlArg)～＝″table″then

    CtrlArg＝{}

    end

    setmetatable(CtrlArg，{__index＝Param})

    if not CtrlArg.text then

    CtrlArg.text＝CtrlArg.Data.text

    end

    local colorIndex＝CtrlArg.style..″.TextColor″//文字颜色

    local textFont＝CtrlArg.style..″.Font″//文字字体

    local NormalTexture＝CtrlArg.style..″.NormalFile″//正常状态

    local PushedTexture＝CtrlArg.style..″.PushedFile″//鼠标移上

    local HighlightTexture＝CtrlArg.style..″.HighlightFile″//鼠标按下

    local DisableTexture＝CtrlArg.style..″.DisableFile″//默认选中

    local FocusTexture＝CtrlArg.style..″.FocusFile″//焦点

    </Lua>

    <CtrlSkinner            id＝″ButtonSkinner″            text＝″CtrlArg.text″

color_Index＝″colorIndex″       font_Index＝″textFont″      layer＝″Normal″

ownerDrawStateFocus＝″false″>

<NormalTexture file_Index＝″NormalTexture″trans＝″true″/>

<PushedTexture file_Index＝″PushedTexture″trans＝″true″/>

<HighlightTexture file_Index＝″HighlightTexture″trans＝″true″/>

<DisableTexture file_Index＝″DisableTexture″trans＝″true″/>

<FocusTexture file_Index＝″FocusTexture″trans＝″true″/>

<Scripts>//用于产生事件回调的脚本

<UpdataDataSource>

self:SetText(_arg.text)

</UpdataDataSource>

</Scripts>//用于产生事件回调的脚本

</CtrlSkinner>

</Control>

GroupFrame的作用是组合一系列会被同时显示的Frame，这些Frame的内部元素的结构基本相同，只是表现的内容有所不同，每个Frame既有共有的属性也有私有的属性，能够通过索引(Index)找到其中的某个Frame。GroupFrame拥有的接口包括InsertElement(***一个Frame)、RemoveElement(删除一个Frame)、RemoveAllGroupElement(删除全部的Frame)、FindGroupElement(通过子Frame的名字找到相应的元素)、GetGroupElement(通过子Frame的Index找到响应的元素)等。图3示出了GroupFrame的一个典型的应用：可以看到即时通讯软件的整个好友列表的侧边栏sidebar控件就是一个GroupFrame，而其中的虚线部分就是其中的一个子Frame。这些子Frame拥有非常明显的相似性，仅仅在于显示的图片的内容有所不同，所以适合用一个GroupFrame将其容纳。通过本发明实施例提供的组合控件的方法，实现sidebar控件的具体脚本语言描述如下：

    <GroupFrame                                   name＝″SidebarItemList_Frame″

elementTemplate＝″CreateSidebarItemElement″virtual＝″true″>//控件名

      <Anchors>//相对于父虚拟窗口的位置

      <Anchor point＝″TOPCENTER″relativePoint＝″TOPCENTER″></Anchor>

</Anchors>

<SortMethods>

<SortMethod name＝″SortItem″type＝″function″>

<Scripts>//产生事件回调的脚本

<Sort param＝″sort1，sort2″>

return sort1.index &lt；sort2.index

</Sort>

</Scripts>

</SortMethod>

</SortMethods>

<AnchorMethods>

<AnchorMethod name＝″Default″type＝″SVList″>

</AnchorMethod>

</AnchorMethods>

<Scripts>

</Scripts>

</GroupFrame>

为了更好的说明本发明，图4示出了本发明的又一示例，一个CheckBox控件由两个Frame组合而成，右边文字的部分是一个原子Frame：FontString，负责显示CheckBox需要显示的文字，而左边是一个适配Frame：SelectFrame，其中又包含了4个子Frame，而每个子Frame实际上又是一个原子Frame：Texture，SelectFrame负责在4种不同的状态下切换不同的Texture，分别是鼠标移上的选中、鼠标移上的未选中、鼠标未移上的选中以及鼠标未移上的未选中。所以CheckBox能够响应鼠标移过和鼠标点击的事件，通过这些事件来判断自己处于什么状态，然后再切换至响应的Frame。

图5示出了本发明的又一示例，位于主面板好友列表上方的Tab控件使用户可以在好友列表、群列表以及最近联系人列表之间切换。每个按钮有相同的背景，但用不同的头像区分不同的列表，当正在显示某个列表的时候，对应的按钮要处于选中状态。Tab控件是这样实现的：首先一个Tab控件含有3个非常相似的Button控件，所以采用一个GroupFrame将他们组合起来。对于每一个Button，它又由前景Texture(原子Frame)和背景Frame构成。而背景Frame需要对于不同的鼠标和状态显示不同的样式，所以再次采用一个拥有4个Texture的SelectFrame构成。这样通过自上而下的实现方法，很容易就构建了一个可重用的Tab控件，有关实现CheckBox控件、Tab控件的具体的脚本语言描述与上述Button控件、sidebar控件的原理相同，不再赘述。

本发明实施例通过利用Frame的特有属性，使用脚本语言，例如lua(一个小巧的脚本语言)或XML等，描述Frame的父子关系、空间位置关系以及函数调用等，方便、快捷的实现将多个存在的Frame拼接成一个新的、功能更加强大的Frame，从而提高了控件的扩展性和重用性，使得界面开发的灵活性及开发效率大大提高。尤其当需要开发一个新的界面时，只需要写一个新的脚本文件来描述界面即可，而不用写和编译C++代码等，可以大大节省界面开发时间。同时，在速度要求和资源占用方面，控件的主题(例如：纹理样式、线条颜色以及文字颜色等)是单独提取出来定义的，可以通过修改一处地方很方便的实现整个界面格调的切换，且每个控件都可以采用懒加载(LazyLoad)的技术，即在第一次调用控件的接口或者第一次显示Frame的时候才将它创建出来，从而在重用、方便以及资源占用方面达到完美的统一。此外，现有技术实现的类似界面，通过Microsoft提供的工具Spy++就可以非常方便的看到其内部结构，最终可以达到破解或者其他恶意的目的。而对于本发明实现的界面，由于利用界面元素Frame的特有属性使用脚本语言描述的方式对控件进行了组合、封装等，所以保密性较好。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (10)

1、一种界面开发***，其特征在于，所述***的基本界面元素为虚拟窗口，所述虚拟窗口的属性包括：大小、相对于其父虚拟窗口的位置、用于标明该虚拟窗口所包含其他虚拟窗口的属性标签以及用于产生事件回调的脚本。

2、如权利要求1所述的界面开发***，其特征在于，所述属性标签通过可扩展标记语言描述。

3、如权利要求1所述的界面开发***，其特征在于，所述虚拟窗口包括：原子虚拟窗口、组合多个虚拟窗口的适配虚拟窗口或操作***中的基础控件。

4、如权利要求3所述的界面开发***，其特征在于，所述组合虚拟窗口通过脚本语言描述组合多个虚拟窗口实现。

5、如权利要求4所述的界面开发***，其特征在于，所述脚本语言为可扩展标记语言或lua语言。

6、如权利要求3所述的界面开发***，其特征在于，所述适配虚拟窗口包括：用于组合多个在同一时间只有一个处于可见状态虚拟窗口的选择虚拟窗口。

7、如权利要求6所述的界面开发***，其特征在于，所述选择虚拟窗口包括：传入待选择虚拟窗口的唯一识别名的接口。

8、如权利要求3所述的界面开发***，其特征在于，所述适配虚拟窗口包括：用于组合多个在同一时间处于同时可见状态虚拟窗口的组虚拟窗口。

9、如权利要求8所述的界面开发***，其特征在于，所述组虚拟窗口包括下述接口：

***虚拟窗口接口、删除一个虚拟窗口接口、删除全部虚拟窗口接口、通过子虚拟窗口的名字找到相应的元素接口以及通过子虚拟窗口的索引找到响应的元素的接口。

10、一种组合控件的方法，其特征在于，所述方法包括：

通过脚本语言描述将界面开发***的基本界面元素虚拟窗口组合起来；所述虚拟窗口的属性包括：大小、相对于其父虚拟窗口的位置、用于标明该虚拟窗口所包含其他虚拟窗口的属性标签以及用于产生事件回调的脚本。

Images