CN1506814A - 用可扩展的标记性语言对应用程序界面进行描述的方法 - Google Patents

Abstract

本发明涉及一种用可扩展的标记性语言对应用程序界面进行描述的方法，包括描述界面的整体布局，定义界面元素的样式风格，把样式风格应用于界面元素之上，编写脚本代码，定义界面的基本交互逻辑，使整体布局里的界面元素与脚本代码连接的步骤。该方法克服了超文本连接表示语言所存在的界面描述与数据混合的问题，用户界面设计和程序代码编写可分别由美术设计人员和程序设计人员并行完成，使开发效率得以提高。该方法适用于软件的可视化创作开发。

Description

用可扩展的标记性语言对应用程序界面进行描述的方法

技术领域

本发明属于计算机程序控制技术领域，具体地说是用可扩展的标记性语言对应用程序界面进行描述的方法。

背景技术

在传统的应用软件开发中，对于程序的用户界面的生成往往是直接由程序员编写程序代码完成。于是，用户界面的效果往往与程序员的审美观和代码编写能力直接相关，而美术设计人员受程序员的牵制比较大。另外，美术与程序的交错，使得开发效率变得很低。

随着互联网的流行，HTML(超文本连接表示语言)也以其简单的语法和灵活的表达方式成为WWW(万维网)的页面描述语言。不需要很复杂的程序知识，普通人就可以做出很漂亮的页面。但是HTML的弱点就是界面描述与数据的混合，使得页面的维护和数据的处理变得复杂。

发明内容

为克服上述不足，本发明的目的在于提供一种用可扩展的标记性语言来对应用程序界面进行描述的方法，达到像超文本连接表示语言那样简单易用，而又能使数据与界面分离。

为完成上述目的，本发明采取的技术方案为：用可扩展的标记性语言来对应用程序界面进行描述的方法，包括描述界面的整体布局，定义界面元素的样式风格，把样式风格应用于界面元素之上，编写脚本代码，定义界面的基本交互逻辑，使整体布局里的界面元素与脚本代码连接的步骤。

界面描述语言规范的样式风格、界面布局、连接、代码、资源的功能五个部分都可以存放在不同的文件里，并可以从其它文件里进行引用；定义样式风格时注重描述单个界面元素的细节；在资源描述部分，对界面中要引用的外部资源进行定义；样式风格主要用于描述各种公共的属性，它可在界面布局中进行引用；对界面元素的事件响应放在独立的标记里；界面元素可以是不可视的；交互逻辑指的是当用户对界面元素进行动作之后引起的代码操作；连接是把界面元素与代码进行关联的过程；相互调用指底层模块按照组件对象模型的标准来编写。

采用以上技术方案，本发明具有积极的效果，界面描述语言规范的样式风格、界面布局、连接、代码、资源的功能五个部分都可以存放在不同的文件里，并可以从其它文件里进行引用，便于独立平行开发。美术设计人员可以通过编辑器对界面布局和样式风格部分进行任意的创作和修改，而程序员可以对代码部分进行独立编写。最后通过连接部分，确保界面和代码正确耦合。另外，资源部分还可以对各种外部数据进行封装，方便引用，也简化了对外的接口。

通过编辑器可以提供可视化的创作开发，这将会大大提高软件的开发效率，用户界面和程序代码可以分别由美术设计人员和程序设计人员来并行完成，而不会相互牵扯，二者都能更加专注于自己的专业特长，于是开发效率能得到很大的提高。

附图说明

图1是本发明的界面描述语言规范结构示意图；

图2是本发明的整体构架图；

图3-图7是实施例运行结果图。

下面结合附图和实施方式对本发明作进一步详细的说明。

具体实施方式

参阅图1，本发明的界面描述语言规范分为五个部分，使得界面与代码充分分离，这五个部分是：

样式风格：主要用于描述各种公共的属性，并可在界面布局中进行引用；

界面布局：主要用于描述各种界面元素的布局；

连接：用于把界面元素与程序代码进行连接；

代码：对界面元素的控制和响应；资源：对各种数据的引用，比如声音、图片等等。

首先描述出界面的整体布局，比如文本框、按钮的位置，而不注重其具体的外观风格和事件响应。其次定义样式风格，具体对界面元素如文本框的边框颜色、背景颜色等进行定义，对某一系列的属性值，定义为一个类，并通过类进行引用，界面元素指的是界面布局里的每一个独立的组成部分，比如一个按钮、菜单等，界面元素可以是不可视的。然后把样式风格应用于界面布局描述中的每一个元素上，通过指定使用某个样式风格类来实现。再定义连接描述，所谓连接，是指某个界面对应于代码中的某个变量名，以及该界面元素触发的事件该由什么代码进行响应，通过灵活的设置连接，就可以保证代码和界面两端的灵活变化，它是把界面元素与代码进行关联的过程，因为界面布局和代码是独立开发的，之间的联系是很少的，需要在最后对两者进行整合和关联，比如按钮点击以后，要执行某个代码语句。在本发明中，界面与代码之间连接的描述方式不同于超文本连接语言，对于元素的事件响应的连接不是放置于同一个标记里，而是放在另外一个独立的标记里，在界面描述语言规范里，有专门的连接描述部分，把连接描述部分单独提取出来，方便了界面布局与代码的独立变更，而不至于引起相互的交错影响。之后编写脚本代码，定义界面的基本交互逻辑，对界面元素进行控制，以及对界面元素事件的响应，交互逻辑指的是当用户对界面元素进行动作比如鼠标点击之后，引起的代码操作，比如开始播放音乐，它随应用程序的不同而各不相同，同时，脚本代码还要调用底层模块，进行具体的运算工作，本发明要求底层模块按照组件对象模型的标准来编写，从而视窗操作系统能与脚本技术相融合，具体的运算也就是底层模块，它是实现整个应用程序的关键任务，与应用程序直接相关，与本发明的界面描述没有直接关系，但底层模块要满足上面的对象模型标准。脚本代码同时也是连接的一部分，又是程序逻辑的一部分。最后在资源部分里对引用的外部数据进行描述，并进行命名。这样前面的样式描述和代码就可以直接通过名字来对资源进行引用，而无需了解外部的数据存放结构。

参阅图2，通过以上步骤得到了一个界面描述文本，把该文本放入解释器/引擎进行执行，解释器就是对界面描述语言的实现，能够对符合界面描述语言规范/语法的文本进行解释，并生成真正的程序界面，这样就生成了实际运行的界面了。

下面是一个实施例：

1.描述布局

a.定义一个主窗口，命名为MainForm。

b.在窗口上添加一个文本标签，命名为Label。

c.界面描述文本片断如下：

<View xmlns：g＝″FrameUI″>

    <g：Form Name＝′MainForm′Title＝′主窗口′x＝′0′y＝′0′Width＝′300′Height＝′200′>

        <g：Label Name＝′Label′Title＝′你好′x＝′10′y＝′10′Width＝′100′Height＝′50′/>

    </g：Form>

</View>

运行结果见图3。

2.描述样式风格

a.创建一个样式类，命名为ClassA。

b.在样式类描述了一个属性值TextFont(字体)，值为“TextColor：#FF0000；Underline：1”(表示为红色，并有下划线)。

界面描述文本片断如下：

<Style>

      <Class Name＝′ClassA′>

        <Property Name＝′T extFont′Value＝′TextColor：#FF0000；Underline：1′/>

    </Class>

</Style>

3.把样式风格应用于界面元素上

把样式类ClassA赋给Label对象界面描述文本片断如下：

<g：XULLabel Name＝′Label′Title＝′你好′x＝′10′y＝′10′Width＝′100′Height＝′50′Class＝′ClassA′/>

运行结果见图4。

4.编写代码

我们希望出现一个欢迎对话框。具体是调用了一个叫做XULScript的内部对象的MsgBox方法。界面描述文本片断如下：

<Script>

    <！[CDATA[

function OnClick()

    {

        XULScript.MsgBox(″你好！″)；

    }

    ]]>

</Script>

5.连接

把我们希望Label对象点击之后执行欢迎对话框。于是添加Event标记，连接Label对象的Click事件，并执行前面定义的代码。界面描述文本片断如下：

<Connection>

    <Event Src＝′Label′EventName＝′Click′Action＝′OnClick()′/>

</Connection>

运行结果见图5。

6.资源的引用

定义一个位图资源，命名为Imagel，并在主窗口的背景上进行引用。界面描述文本片断如下：

<Resource>

    <Image Src＝′res＼Zapotec.bmp′Name＝′Image 1′/>

</Resource><g：SimpleForm Name＝′MainForm′Title＝′主窗口′x＝′0′y＝′0′Width＝′300′Height＝′200′BGImage＝′RES：//Image 1′>

运行结果见图6。

7.完整的界面描述文本

＜？xml version＝′1.0′encoding＝″GB2312″？＞
＜XUL＞
＜Style＞

             ＜Class Name＝′ClassA′＞

    ＜Property Name＝′TextFont′Value＝′TextColor：#FF0000；Underline：1；BGColor：#FFFFFF′/＞

         ＜/Class＞ 
＜/Style＞
＜Resource＞

        ＜Image Src＝′res\Zapotec.bmp′Name＝′Image 1′/＞
＜/Resource＞
＜View xmlns：g＝″FrameUI″xmlns：g2＝″CustomUI″＞

    ＜g：SimpleForm Name＝′MainForm′ Title＝′主窗口′x＝′0′y＝′0′Width＝′300′Height＝′200′

    BGImage＝′RES：//Imagel′＞

        ＜g：XULLabel Name＝′Label′Title＝′你好′x＝′10′y＝′10′Width＝′100′Height＝′50′

        Class＝′ClassA′/＞
＜/g：SimpleForm＞
＜/View＞
＜Connection＞
＜Event Src＝′Label′EventName＝′Click′Action＝′OnClick()′/＞
＜/Connection＞
＜Script＞
＜！[CDATA[
function OnClick()

    {

        XULScript.MsgBox(″你好！″)；

    }

    ]]＞
＜/Script＞
＜/XUL＞

最终的运行结果见图7。

Claims (10)

1、用可扩展的标记性语言对应用程序界面进行描述的方法，其特征在于，它包括下述步骤：

(a)描述界面的整体布局；

(b)定义界面元素样式风格；

(c)把样式风格应用于界面元素之上；

(d)编写脚本代码，定义界面的基本交互逻辑；

(e)使整体布局里的界面元素与脚本代码连接。

2、根据权利要求1所说的用可扩展的标记性语言对应用程序界面进行描述的方法，其特征在于：界面描述语言规范的样式风格、界面布局、连接、代码、资源的功能五个部分都可以存放在不同的文件里，并可以从其它文件里进行引用。

3、根据权利要求1所说的用可扩展的标记性语言对应用程序界面进行描述的方法，其特征在于：定义样式风格时注重描述单个界面元素的细节。

4、根据权利要求1所说的用可扩展的标记性语言对应用程序界面进行描述的方法，其特征在于：在资源描述部分，对界面中要引用的外部资源进行定义。

5、根据权利要求1所说的用可扩展的标记性语言对应用程序界面进行描述的方法，其特征在于：样式风格主要用于描述各种公共的属性，它可在界面布局中进行引用。

6、根据权利要求1所说的用可扩展的标记性语言对应用程序界面进行描述的方法，其特征在于：对界面元素的事件响应放在独立的标记里。

7、根据权利要求1所说的用可扩展的标记性语言对应用程序界面进行描述的方法，其特征在于：所说的界面元素可以是不可视的。

8、根据权利要求1所说的用可扩展的标记性语言对应用程序界面进行描述的方法，其特征在于：交互逻辑指的是当用户对界面元素进行动作之后引起的代码操作。

9、根据权利要求1所说的用可扩展的标记性语言对应用程序界面进行描述的方法，其特征在于：所说的连接是把界面元素与代码进行关联的过程。

10、根据权利要求1所说的用可扩展的标记性语言对应用程序界面进行描述的方法，其特征在于：相互调用指底层模块按照组件对象模型的标准来编写。

Images