CN1987772A - 通用界面设计接口系统及使用该系统的界面开发方法 - Google Patents

Abstract

本发明公开了一种通用界面设计接口系统及使用该系统的界面开发方法，可以提高开发效率，缩短开发周期，方便后期修改。其技术方案为：接口系统包括一体系结构，该体系结构包括界面定义接口、解析器和应用程序接口，该界面定义接口包括界面美工单元、界面框架定义单元和通用模板，该通用模板经设定后形成用户模板，该界面美工单元和界面框架定义单元是各自独立的，并通过该用户模板交互结合成完整的界面式样文件，该解析器用于将该界面式样文件编译为程序代码，所述应用程序接口也是独立的接口，用于为界面交互的功能实现提供接口。本发明应用于数字电视的界面开发中。

Description

通用界面设计接口系统及使用该系统的界面开发方法

技术领域

本发明涉及数字电视中的图形用户界面的接口系统及相应的开发方法，尤其涉及一种界面美工、界面框架定义和界面功能实现三者分离的接口系统及相应的界面开发方法。

背景技术

目前在数字电视中，用户图形界面的开发主要采用界面设计嵌入程序中的做法。美工在设计完整个界面的样式之后，程序员开始编写代码，程序员此时的代码必须覆盖界面的功能和式样两部分。

现有技术有如下的不足：1)开发效率低，程序员负担重，程序员必须在实现程序功能的同时兼顾实现图形效果的显示；2)程序的可扩展性和可修改性低，每当界面样式需要修改时，必须由程序员来修改程序代码，严重加大程序复杂度和程序员的重复劳动率。举例来说，通常同一类型的界面虽然数量多，但在设计形式上往往差距不大，只是有一些细节的变化。如目前的换肤(skin)，可能界面只是在颜色或形状上有所不同，整个界面的结构并没有太大的变化。但在目前公知的开发方法中，修改这些差异仍然是费时费力的。

发明内容

本发明的目的在于解决了上述问题，提供了一种通用界面设计接口系统及使用该系统的界面开发方法，可以提高开发效率，缩短开发周期，方便后期修改。

本发明的技术方案为：一种通用界面设计接口系统，将界面美工设计、界面框架定义和界面功能实现分离开，所述接口系统包括一体系结构，所述体系结构包括界面定义接口、解析器和应用程序接口，所述界面定义接口包括界面美工单元、界面框架定义单元和通用模板，所述通用模板经设定后形成用户模板，所述界面美工单元和界面框架定义单元是各自独立的，并通过所述用户模板交互结合成完整的界面式样文件，所述解析器用于将所述界面式样文件编译为程序代码，所述应用程序接口也是独立的接口，用于为界面交互的功能实现提供接口。

上述的通用界面设计接口系统中，所述通用模板包括输出元素和各自的交互属性，所述通用模板提供了所述输出元素的数量、类型和位置以及交互属性的数量、名称、类型和位置，所述通用模板在根据所述界面美工单元设定所述输出元素的交互属性值后形成所述用户模板。

上述的通用界面设计接口系统中，所述界面式样文件包括目标资源和界面构件两部分，所述目标资源包括位图、图标和字体，所述界面构件包括窗口、在所述窗口上定义的组件和在所述组件上定义的元素。

上述的通用界面设计接口系统中，所述组件包括背景、标题、说明、菜单条、编辑条、进度条和列表，所述元素包括点、线、圆、椭圆、矩形、多边形、文字、位图、和图标。

上述的通用界面设计接口系统中，所述体系结构是一个CGI结构。

上述的通用界面设计接口系统中，所述界面式样文件是XML配置文件。

一种使用通用界面设计接口系统的界面开发方法，包括以下步骤：a)设定仅具有框架的界面式样文件；b)使用者在所述界面式样文件上添加、删除和修改界面元素；c)所述仅具有框架的界面式样文件最终形成完整的界面式样文件；d)解析器采集所述完整的界面式样文件中的数据形成程序。

上述的界面开发方法中，所述步骤(b)是以可视化编辑区的形式操作的。

上述的界面开发方法中，所述界面式样文件是XML文件，在所述界面式样文件中同一类型的元素及其属性值作为一组顺序存储。

本发明比较现有技术，有如下有益的技术效果：

1)界面式样的开发和界面功能的代码编写相互独立，程序员只需要考虑界面的功能并进行相应的编码即可，让程序员从繁琐的界面式样变成中解脱出来；

2)极大的降低界面式样修改的工作量，界面的修改不再需要修改程序代码；

3)极大提高了界面设计的效率，在界面式样修改后，可以立刻看见修改后的界面。

附图说明

图1是本发明的CGI定义的结构图。

图2是本发明的界面开发方法的运行流程图。

图3是本发明的通用模板的格式示意图。

图4是本发明的界面式样文件的描述图。

图5是本发明的一个文字组件实施例编辑区的示意和效果图。

图6A是本发明的一个窗口实施例编辑区的示意图。

图6B是本发明的一个矩形元素实施例编辑区的示意和效果图。

图6C是本发明的一个列表元素实施例编辑区的示意和效果图。

图6D是本发明的一个进度条元素实施例编辑区的示意和效果图。

图7是本发明的界面开发方法的流程图。

具体实施方式

下面结合附图和实施例对本发明作进一步的描述。

图1示出了CGI体系结构，如图1所示，CGI结构10包括界面定义接口11、解析器12和应用程序接口13三部分。界面定义接口11完成界面效果和式样的定制工作，该接口提供了对式样的描述方式。解析器12负责将界面式样解析为程序。应用程序接口13提供独立的面向程序级的图形接口，程序员可在此基础上进行程序的编写。界面定义接口11又包括界面美工单元110、界面框架定义单元111和通用模板113。通用模板113可通过设定特殊值使之称为用户模板，而界面美工单元110和界面框架定义单元111是各自独立的，并通过上述的用户模板交互结合成完整的界面式样文件。

图2示出了使用上述CGI体系结构进行界面开发的运行流程图。如图2所示，程序员22设计界面框架文件25，确定菜单结构和逻辑框架，并将这些结构和框架以可视化编辑区的形式提供给界面定制人员23。同时，美工21设计界面的美工效果图24，并以如bmp或者jpg等格式的图片文件提供给界面定制人员23。界面定制人员23在界面效果图24和界面框架文件25基础上通过图1所示的界面定义接口11完成对界面式样的描述工作。CGI采集界面定制人员23配置的界面元素的交互属性值，并通过图1所示的通用模板112将上述界面元素及其交互属性值存储成用户模板。用户模板即完整的界面式样文件，以XML格式的文件存储。CGI根据该文件自动形成相关的程序代码，并创建可视化界面。CGI提供图1所示的应用程序接口13，程序员可通过该接口13编写菜单功能实现的代码，结合上述生成的代码模块，最终形成应用程序。

图3示出了本发明通用模板的格式。如图3所示，通用模板的功能是赋予交互属性以形成用户私有化模板。该通用模板的物理形式为XML文件。301给出了窗口的标志，在标志后是多个窗口的说明302，最后是结束标志303。该窗口说明302包括窗口名、窗口参数和随后的多个组件。组件又包括组件标志311，随后的各个组件说明312和结束标志313。该组件说明312包括组件名、组件参数和随后的多个元素。元素又包括元素标志321、随后的各个元素说明322和结束标志323。该元素说明322由元素名331、位置参数332、大小尺寸333、字体颜色334、字体335、前景颜色336、后景颜色337、其他交互属性338和结束标志339组成。

图4示出了XML界面式样文件。如图4所示，XML文件由目标资源(resource)和界面构件(interface)两部分组成。目标资源包括位图(bitmap)、图标(icon)和字体(font)，界面构件包括窗口(window)、在窗口上定义的组件(item)和在组件上定义的元素(element)，元素可通过参数(parameter)来设置。这些组件包括背景、标题、说明、菜单条、编辑条、进度条和列表等，这些元素包括点、线、圆、椭圆、矩形、多边形、文字、位图、和图标等。

例如<window win_id＝“0”widget_type＝“menu”label＝“主菜单界面”position＝“(100，50)(536，274)”>中，window代表定义的窗口构件，win_id代表窗口的序号，widget_type代表类型，在此处指菜单，label代表窗口标题，此处指主菜单界面，position代表窗口地址，这里(100，50)(536，274)指窗口左上顶点和右下顶点的坐标值。

<item item_id＝“2”name＝“button”label＝“text>中，item代表定义的组件构件，item_id代表组件序号，name代表组件名称，label代表组件标题。

其他定义方式与上述定义类同，在此不再重复描述。

图5示出了一个元素实施例的编辑区和相应可视化的效果。请同时参阅图4和图5，效果图51是由美工设计的，编辑区52中的name、label部分是由程序员定义出的框架。而这些编辑区52中可视化的框架在图4所示的界面式样文件中，是<element name＝“text”label＝“文字”>下面的parameter中的name和label部分。界面定制人员根据美工设计的效果图51设定编辑区52中相应的text值，当在编辑区中设定好交互值后，界面描述文件的parameter部分自动填上对应值，最终形成完整的界面式样文件。CGI结构中的解析器会根据该界面描述文件编译成程序代码，形成与效果图51一模一样的可视化界面。

图6A-图6D示出了界面其他构件的编辑区及效果图，其设置和实现方式与上述的元素实施例类似，所在不再重复描述。

图7示出了使用本发明接口系统的界面开发方法的流程图。如图7所示，程序员设定框架XML文件71，包括界面的逻辑和框架关系，界面定制人员在编辑区设定界面输出元素及其交互值72，接着框架XML文件相应形成完整的界面式样XML文件73，最后解析器采集完整的界面式样XML文件中的数据形成最后的程序74。

上述实施例是提供给本领域普通技术人员来实现或使用本发明的，本领域普通技术人员可在不脱离本发明的发明思想的情况下，对上述实施例做出种种修改或变化，因而本发明的保护范围并不被上述实施例所限，而应该是符合权利要求书提到的创新性特征的最大范围。

Claims (9)

1 一种通用界面设计接口系统，其特征在于，将界面美工设计、界面框架定义和界面功能实现分开，所述接口系统包括一体系结构，所述体系结构包括界面定义接口、解析器和应用程序接口，所述界面定义接口包括界面美工单元、界面框架定义单元和通用模板，所述通用模板经设定后形成用户模板，所述界面美工单元和界面框架定义单元是各自独立的，并通过所述用户模板交互结合成完整的界面式样文件，所述解析器用于将所述界面式样文件编译为程序代码，所述应用程序接口也是独立的接口，用于为界面交互的功能实现提供接口。

2 根据权利要求1所述的通用界面设计接口系统，其特征在于，所述通用模板包括输出元素和各自的交互属性，所述通用模板提供了所述输出元素的数量、类型和位置以及交互属性的数量、名称、类型和位置，所述通用模板在根据所述界面美工单元设定所述输出元素的交互属性值后形成所述用户模板。

3 根据权利要求2所述的通用界面设计接口系统，其特征在于，所述界面式样文件包括目标资源和界面构件两部分，所述目标资源包括位图、图标和字体，所述界面构件包括窗口、在所述窗口上定义的组件和在所述组件上定义的元素。

4 根据权利要求3所述的通用界面设计接口系统，其特征在于，所述组件包括背景、标题、说明、菜单条、编辑条、进度条和列表，所述元素包括点、线、圆、椭圆、矩形、多边形、文字、位图、和图标。

5 根据权利要求1或4所述的通用界面设计接口系统，其特征在于，所述体系结构是一个CGI结构。

6 根据权利要求1或5所述的通用界面设计接口系统，其特征在于，所述界面式样文件是XML配置文件。

7 一种使用通用界面设计接口系统的界面开发方法，其特征在于，包括以下步骤：

a)设定仅具有框架的界面式样文件；

b)使用者在所述界面式样文件上添加、删除和修改界面元素；

c)所述仅具有框架的界面式样文件最终形成完整的界面式样文件；

d)解析器采集所述完整的界面式样文件中的数据形成程序。

8 根据权利要求7所述的界面开发方法，其特征在于，所述步骤(b)是以可视化编辑区的形式操作的。

9 根据权利要求7所述的界面开发方法，其特征在于，所述界面式样文件是XML文件，在所述界面式样文件中同一类型的元素及其属性值作为一组顺序存储。

Images