CN102193786B - 一种自适应的图形用户界面构建装置及方法 - Google Patents

一种自适应的图形用户界面构建装置及方法 Download PDF

Info

Publication number
CN102193786B
CN102193786B CN201010122711.8A CN201010122711A CN102193786B CN 102193786 B CN102193786 B CN 102193786B CN 201010122711 A CN201010122711 A CN 201010122711A CN 102193786 B CN102193786 B CN 102193786B
Authority
CN
China
Prior art keywords
gui
resource
control
gui object
node
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201010122711.8A
Other languages
English (en)
Other versions
CN102193786A (zh
Inventor
罗强
王向荣
梁敏俐
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Industrial and Commercial Bank of China Ltd ICBC
Original Assignee
Industrial and Commercial Bank of China Ltd ICBC
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Industrial and Commercial Bank of China Ltd ICBC filed Critical Industrial and Commercial Bank of China Ltd ICBC
Priority to CN201010122711.8A priority Critical patent/CN102193786B/zh
Publication of CN102193786A publication Critical patent/CN102193786A/zh
Application granted granted Critical
Publication of CN102193786B publication Critical patent/CN102193786B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Landscapes

  • User Interface Of Digital Computer (AREA)

Abstract

本发明提供一种自适应的图形用户界面构建方法及装置,该装置包括:文件接收单元,接收用户输入的资源文件和界面框架模板文件;控件属性设置设置单元,将所述的资源文件分解为数据项记录,生成GUI控件资源;GUI对象存储单元,将坐标资源对象和非坐标资源对象翻译成对应的GUI对象进行存储;资源树生成单元,按照适应GUI布局的顺序将GUI对象作为逻辑节点插入到基于界面框架模板文件的资源树中;控件位置设置单元,根据控件位置设置指令对资源树中GUI对象的坐标位置数据进行设置;GUI布局显示单元,显示GUI布局。用以解决GUI布局重排的问题。

Description

一种自适应的图形用户界面构建装置及方法
技术领域
本发明关于计算机系统中的图形用户界面技术,特别是关于图形用户界面的布局技术,具体的讲是一种自适应的图形用户界面构建装置及方法。
背景技术
图形用户界面(GUI)是一种由对话框、标签、按钮、组件容器等一系列GUI控件组成的可视系统,GUI布局是对GUI控件的合理布置和安排,其美观性、合理性和实用性直接影响着用户的观感和评价。然而在复杂程度较高的企业化信息系统开发中,研发人员往往需要在极短的时间内完成大规模的GUI布局设计;同时,随着业务流程的发展和变更,原有GUI布局和风格不可避免发生变化,需要进行布局重排。
导致GUI布局重排的原因主要有以下两种:一、GUI控件调整,包括在已有布局上新增、删除组件,或调整组件的绝对位置,由此引起GUI布局中大量GUI控件的重新调整;二、界面的可视面积发生变化,从而使得原有内容无法适应新的组件容器。面对因局部调整GUI控件而引起的布局重排,现有技术没有考虑控件之间的关联性约束,重排后的布局存在GUI控件的交叉和截断的问题,使得用户无法理解控件的含义,使用很不方便。
发明内容
本发明实施例提供了一种自适应的图形用户界面构建装置及方法,用以解决因GUI控件局部调整和业务需求变化而进行的GUI布局重排问题。
本发明的目的之一是,提供一种自适应的图形用户界面构建方法,该方法包括:接收用户输入的资源文件和界面框架模板文件;将所述的资源文件分解为数据项记录,根据用户输入的控件属性设置指令对所述数据项记录中的控件属性和控件之间的关联关系进行设置,生成GUI控件资源;将GUI控件资源中具有坐标位置属性的GUI控件资源封装成坐标资源对象,并将GUI控件资源中不具有坐标位置属性的GUI控件资源封装成非坐标资源对象,并将坐标资源对象和非坐标资源对象翻译成对应的GUI对象进行存储;读取GUI对象,按照适应GUI布局的顺序将GUI对象作为逻辑节点插入到基于界面框架模板文件的资源树中;接收用户输入的控件位置设置指令,并根据控件位置设置指令对资源树中GUI对象的坐标位置数据进行设置;将设置后的资源树翻译为GUI布局,并显示GUI布局。
本发明的目的之一是,提供一种自适应的图形用户界面构建装置,该装置包括:文件接收单元,用于接收用户输入的资源文件和界面框架模板文件;控件属性设置单元,用于将所述的资源文件分解为数据项记录,根据用户输入的控件属性设置指令对所述数据项记录中的控件属性和控件之间的关联关系进行设置,生成GUI控件资源;GUI对象存储单元,用于将GUI控件资源中具有坐标位置属性的GUI控件资源封装成坐标资源对象,并将GUI控件资源中不具有坐标位置属性的GUI控件资源封装成非坐标资源对象,并将坐标资源对象和非坐标资源对象翻译成对应的GUI对象进行存储;资源树生成单元,用于将用户输入的界面框架模板文件作为产生资源树的初始起点;然后,顺序从GUI对象数据库读取GUI对象,若该GUI对象的输入/输出属性为输入,则从根节点依次遍历资源树,找到输入节点组;进一步的,遍历所述的输入节点组下的GUI对象节点,若新GUI对象节点已经存在,则返回继续执行下一个GUI对象插入资源树的步骤,否则在输入节点组中添加一个GUI对象节点;若GUI对象的输入/输出属性为输出,则从根节点依次遍历资源树,找到输出节点组,进一步的,遍历输出节点组下的GUI对象节点,若新GUI对象节点已经存在,则返回继续执行下一个GUI对象插入资源树的步骤,否则在输出节点组中添加一个GUI对象节点;重复上述插入GUI对象节点的步骤,直到资源对象数据库中的GUI对象已经处理完毕;;控件位置设置单元,用于接收用户输入的控件位置设置指令,并根据控件位置设置指令对资源树中GUI对象的坐标位置数据进行设置;GUI布局显示单元,用于将设置后的资源树翻译为GUI布局,并显示GUI布局;其中,资源树生成单元包括:资源树存储模块,用于存储根据界面框架模板文件生成的包括资源树根节点的资源树初始框架;GUI对象读取模块,用于按照适应GUI布局的顺序读取GUI对象;节点插入模块,用于根据GUI对象的属性,从根节点依次遍历资源树,找到与GUI对象的属性相对应的节点组,在节点组中添加GUI对象作为资源树的一个新节点。
本发明解决了因为业务需求变化而需要进行GUI布局重排时产生的效率低下、控件位置交叉和信息截断、不关心控件关联关系,以及无法自适应调整GUI控件布局的问题,本发明的有益效果在于:
一、针对由于业务变化和界面重新设计导致的GUI布局重排,本发明通过GUI布局调整能够自适应地对GUI控件的布局进行适配,并且提供最适合的显示效果,有效解决了控件交叉和信息截断问题,使得本发明具有极大的实用性,有效提高了图形用户界面布局的构建效率。
二、本发明对于具有关联关系的GUI控件和非关联关系的GUI控件,在GUI布局构建中予以区别对待,使得具有关联关系的GUI控件之间的关系更加紧密,能够显示最符合客户需求的GUI布局。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。
图1为本发明实施例自适应的图形用户界面构建方法流程图;
图2为本发明实施例控件属性设置界面示意图;
图3为本发明实施例控件之间的关联关系示意图;
图4为本发明实施例资源树结构示意图;
图5为本发明实施例控件位置设置界面示意图;
图6为本发明实施例的工作流程图;
图7为本发明实施例自适应的图形用户界面构建装置结构框图;
图8为本发明实施例资源树生成单元程序框图;
图9为本发明实施例的控件位置设置单元程序框图;
图10为本发明实施例自适应的图形用户界面布局示意图。
具体实施方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
如图1所示,本发明具体实施方式提供了一种自适应的图形用户界面构建方法,该方法包括:接收用户输入的资源文件和界面框架模板文件(步骤S101);将所述的资源文件分解为数据项记录,根据用户输入的控件属性设置指令对所述数据项记录中的控件属性和控件之间的关联关系进行设置,生成GUI控件资源(步骤S102);将GUI控件资源中具有坐标位置属性的GUI控件资源封装成坐标资源对象,并将GUI控件资源中不具有坐标位置属性的GUI控件资源封装成非坐标资源对象,并将坐标资源对象和非坐标资源对象翻译成对应的GUI对象进行存储(步骤S103);读取GUI对象,按照适应GUI布局的顺序将GUI对象作为逻辑节点插入到基于界面框架模板文件的资源树中(步骤S104);接收用户输入的控件位置设置指令,并根据控件位置设置指令对资源树中GUI对象的坐标位置数据进行设置(步骤S105);将设置后的资源树翻译为GUI布局,并显示GUI布局(步骤S106)。
在本实施例的自适应的图形用户界面构建方法中,可通过网络终端向用户提供资源文件和界面框架模板文件选择界面,并接收用户的选择指令。
在通过网络与网络终端相连接的服务器中解析用户所选择的资源文件的内容,将其分解为数据项记录,输出到网络终端供用户设置数据项的属性。如图2所示,为DSR元数据表显示了DSR网关文件经过解析后的数据项记录,提供了数据项的六种属性供用户设置,其中组件类型列提供控件属性的下拉菜单供用户选择。网络终端可接收用户对于数据项记录中控件之间的关联关系的定义,例如将标签和输入场标识为有关联关系的控件(如图3所示),将用户设置的控件之间的关联关系保存到数据项的属性中,为后续设置控件间距做准备。
在如图2所示的控件属性设置界面中,通过输入/输出属性对用户选择的数据项进行分类,以确定其所属的组(GROUP);然后根据GUI控件资源是否具有布局信息,将用户选择的GUI控件资源划分成图形坐标资源和图形非坐标资源,并将经过分类的资源封装成资源对象,存储到资源对象数据库中。
顺序读取资源对象数据库中的资源对象,并根据资源对象和GUI对象的对应关系将资源对象翻译成GUI对象,存储到GUI对象数据库中。
如图4所示,将用户输入的界面框架模板文件作为产生资源树的初始起点,即资源树的雏形;然后,顺序从GUI对象数据库读取GUI对象,若该GUI对象的输入/输出属性为输入(I),则从根节点(Window)依次遍历资源树,找到输入节点组(Group_Input);进一步的,遍历输入节点组(Group_Input)下的GUI对象节点,若新GUI对象节点已经存在,则返回继续执行下一个GUI对象插入资源树的步骤,否则在输入节点组(Group_Input)中添加一个GUI对象节点。若GUI对象的输入/输出属性为输出(O),则从根节点(Window)依次遍历资源树,找到输出节点组(Group_Output),进一步的,遍历输出节点组(Group_Output)下的GUI对象节点,若新GUI对象节点已经存在,则返回继续执行下一个GUI对象插入资源树的步骤,否则在输出节点组(Group_Output)中添加一个GUI对象节点。重复上述插入GUI对象节点的步骤,直到资源对象数据库中的GUI对象已经处理完毕。
网络终端向用户展示GUI控件位置参数设置界面,接收用户设置的参数。顺序读取资源树中的数据,获取GUI对象,并结合用户设置的布局参数,依次自适应地设置GUI对象的位置属性。其中包括:(1)尺寸调整,根据资源文件中数据项的长度与实际控件长度的差异估算缩放比率,即长度系数;然后,根据长度系数和数据项长度计算GUI控件的长度,同样地计算出GUI控件的宽度;最后将GUI控件的长度和宽度作为位置属性存储到资源树数据库中。(2)位置调整,用于进行GUI控件的X坐标和Y坐标的调整,使得被调整控件的X坐标对齐上一列子控件X坐标,Y坐标对齐上一行子控件Y坐标;保证布局的整齐美观,并将控件的坐标作为位置属性存储到资源树数据库中。(3)边界调整,通过自适应边界差值法调整GUI控件的间距,通过多次越界检查,直到找到符合边界范围的间距参数,确定GUI控件的间距。在越界检查和间距设置尝试已无法获得合适间距的情况下,则通过采取减少或增加每行控件数的方法重新确定GUI控件的间距,避免发生控件越界或边距过大现象。如图5所示,控件位置设置界面由四个参数组构成,第一组参数用于选择GUI控件的输出控件类型,可选择表格类型输出组件、按固定长度构建图形组件;第二组参数用于设置GUI布局中第一个组控件(Group1)的初始坐标和长宽大小;第三组参数用于设置组控件(Group)中GUI控件的位置属性,包括文本标签(Label)的初始位置信息、行间距,文本输入场(Text)的初始位置信息,按钮控件(Button)的初始位置信息等;第四组参数用于设置输出控件类型为表格控件的位置信息,该参数队列只有当用户选择了按照表格类型输出组件时才生效。
用户在图5所示的控件位置设置界面中,依次自适应地调整GUI对象的布局,依次完成以下几项任务:1)按照输入/输出数据项的缩放比例调整GUI控件的实际长度;2)调整输入/输出标签和控件的坐标位置;3)调整组控件中第一个和最后一个GUI控件的绝对位置;4)设置输入/输出控件的列数、行间距、列间距等。
根据GUI对象的位置属性信息,通过GUI图形显示插件将资源树翻译成GUI布局,并输出到网络终端供用户预览。
如图6所示,本实施例的具体步骤包括:
步骤401,向用户提供资源文件/界面框架模板文件选择界面,并接收用户的选择指令。
步骤402,解析用户所选择的资源文件的内容,将其分解为数据项记录。
步骤403,用户设置数据项的属性。
步骤404,接收用户对于控件的关联关系定义,将标签和输入场标识为有关联关系的控件,将用户设置的关联关系保存到数据项的属性中。
步骤405,通过输入/输出属性对用户选择的数据项进行分类,以确定其所属的组(GROUP);然后根据GUI控件资源是否具有布局信息,将用户选择的GUI控件资源划分成图形坐标资源和图形非坐标资源,并将经过分类的资源封装成资源对象,存储到资源对象数据库中。
步骤406,访问资源对象数据库,判断新加入的资源对象是否为新,如果不是,则返回步骤403,继续处理资源文件中的下一个数据项直到处理完成,否则,将新的资源对象保存在资源对象数据库中。
步骤407,遍历资源对象数据库,顺序读取资源对象,并根据资源对象和GUI对象的对应关系将资源对象翻译成GUI对象,存储到GUI对象数据库中。
步骤408,将GUI对象数据库中的GUI对象转换成逻辑节点,按照GUI布局的控件顺序,将GUI对象插入资源树中,并存储到资源树数据库中。
步骤409,向用户展示GUI控件位置参数设置界面,接收用户设置的参数。
步骤410-步骤412,顺序读取资源树数据库中的数据,获取GUI对象,并结合用户设置的布局参数,依次自适应地设置GUI对象的位置属性。其中包括:
步骤410,尺寸调整。
步骤411,位置调整。
步骤412,边界调整。
步骤413,访问GUI对象数据库,判断是否存在未经设置的GUI对象,如果存在,则返回步骤408,执行将GUI对象插入资源树的任务,步骤409-步骤413重复执行,直到所有的GUI对象均已插入资源树。如果已经完成对所有GUI对象的遍历,则转步骤414执行。
步骤414,访问资源树数据库,通过GUI图形显示插件将资源树翻译成图形用户界面,并输出到用户终端,展现GUI布局的预览效果。
步骤415,用户终端接收用户对于GUI布局的选择结果,如果需要调整GUI布局,返回步骤403,对GUI布局的控件参数等进行调整;如果不需要调整GUI布局,则转到步骤416。
步骤416,输出GUI布局界面,结束本流程。
如图7所示,本实施例还提供一种自适应的图形用户界面构建装置,该装置包括:文件接收单元201,用于接收用户输入的资源文件和界面框架模板文件;控件属性设置设置单元202,用于将所述的资源文件分解为数据项记录,根据用户输入的控件属性设置指令对所述数据项记录中的控件属性和控件之间的关联关系进行设置,生成GUI控件资源;GUI对象存储单元203,用于将GUI控件资源中具有坐标位置属性的GUI控件资源封装成坐标资源对象,并将GUI控件资源中不具有坐标位置属性的GUI控件资源封装成非坐标资源对象,并将坐标资源对象和非坐标资源对象翻译成对应的GUI对象进行存储;资源树生成单元204,用于读取GUI对象,按照适应GUI布局的顺序将GUI对象作为逻辑节点插入到基于界面框架模板文件的资源树中;控件位置设置单元205,用于接收用户输入的控件位置设置指令,并根据控件位置设置指令对资源树中GUI对象的坐标位置数据进行设置;GUI布局显示单元206,用于将设置后的资源树翻译为GUI布局,并显示GUI布局。
如图8所示,资源树生成单元包括:资源树存储模块,用于存储根据界面框架模板文件生成的包括资源树根节点的资源树初始框架;GUI对象读取模块,用于按照适应GUI布局的顺序读取GUI对象;节点插入模块,用于根据GUI对象的属性,从根节点依次遍历资源树,找到与GUI对象的属性相对应的节点组,在节点组中添加GUI对象作为资源树的一个新节点。
本实施例装置接收用户提供的界面框架模板和资源文件,并将资源文件中的数据元转换成GUI控件,为了便于进行布局调整,本实施例装置还按照GUI布局中的控件的层次关系,将GUI布局转换成由GUI控件作为节点的资源树,再以资源树为基础,线性调整GUI控件的位置属性,从而达到调整整个GUI布局的目的。
GUI控件资源包括容器(窗体、外框、层、组)、组件(按钮、文本框、下拉框、标签、编辑框等)、组合组件(按钮组、表格)三类。在本实施例中,GUI布局调整系统建立在GUI设计器平台基础上,因此GUI控件资源是预先确定的。
本实施例装置可为一服务器,本实施例装置可通过网络与网络终端相连接,并通过该网络终端实现与用户之间的信息交互。本实施例装置包括:文件接收程序模块,接收用户选择资源文件/界面框架模板文件,传递到控件属性设置程序模块进行解析,并展示解析后的数据项供用户输入数据项的属性;控件位置设置程序模块,供用户输入GUI控件位置参数,并进行GUI布局的调整;GUI布局显示程序模块,生成图形界面向用户展示,供用户确认是否需要调整GUI布局;GUI对象数据库,负责存储资源文件数据项转换的GUI对象;资源树生成程序模块,按照GUI控件在GUI布局中的的层次关系将GUI布局转换成由GUI对象作为节点的资源树,存储到资源树数据库中。
控件属性设置程序模块,负责读取用户输入的资源文件和界面框架模板文件,将资源文件解析成数据项,接收用户确定的用于GUI布局的数据项,以及对数据项属性的设定(具有属性之后的数据项对应成为GUI控件资源),同时按照GUI控件资源是否具有坐标位置属性将其划分成坐标资源和非坐标资源,具有布局位置信息的GUI控件资源称为图形坐标资源,包括标签、输入/输出场、按钮、组控件等;不具有布局位置信息的GUI控件资源称为非坐标资源,包括窗体、图层、光标控件等,最后将经过分类的资源封装成资源对象存储到资源对象数据库中。
GUI对象存储模块,负责访问资源对象数据库的资源对象,顺序读取资源对象,并将其转换成GUI对象,并存储在GUI对象数据库中。
资源树生成程序模块,负责将GUI对象数据库中的GUI对象按照GUI布局的控件顺序,作为逻辑节点插入资源树中,并存储到资源树数据库中。
控件位置设置程序模块,负责将资源树中的所有分类为图形坐标资源的GUI对象,自适应调整其尺寸、位置、边界等位置属性,并更新到资源树数据库中。其包括:尺寸调整单元、位置调整单元、边界调整单元。
尺寸调整单元,负责根据资源文件中数据项的长、宽,以及父控件的长宽,估算实际控件的长度和宽度的缩放系数,并据此调整控件的尺寸大小,实现数据项长度到GUI控件长度的转换。首先,根据资源文件中数据项的长度与实际控件长度的差异,估计缩放比率,即长度系数。长度系数遵循如下两条约束条件:一、水平向控件的长度和间距累加不能大于父控件的实际宽度;二、父控件的宽度与水平向控件的长度和间距的长度和之差不能小于用户的边界距。长度系数的公式:设资源文件中数据项的长度为x,水平向控件的长度为len,r为长度系数,len满足关系式:len=rx(显然,给定父控件的宽度时,r值取决于水平控件的长度len)。水平控件长度与数据项长度的关系比例可根据线性计算公式表示,其公式如下:
r=(len1/x1+len2/x2+…+lenN/xN)/N
其中,N表示坐标控件数,x1,x2...xn是数据项长度,len1,len2...lenn是实际的输入/输出组件长度。垂直向控件的宽度估计方法与长度系数相类似。按照同样的方式,可以计算垂直向的宽度系数i。然后,根据长度系数和数据项的长度可以计算GUI控件的长度:x=len/r,同样地可以计算出GUI控件的宽度y=width/i。最后,将GUI控件的长度和宽度作为GUI控件的位置属性值,保存到资源树数据库中。
位置调整单元,负责进行GUI控件的X坐标和Y坐标的调整,使得被调整控件的X坐标对齐上一列子控件X坐标,Y坐标对齐上一行子控件Y坐标;保证布局的整齐美观。
边界调整单元,负责调整GUI父控件中出现的第一个子控件,同一输出行最后一个子控件以及最后一个输出行的第一个子控件的边界位置信息,使得边界的长度不大于用户提供的边界设置值;同时,调整水平向GUI控件的间距,包括调整具有关联关系的GUI控件间距和非关联关系的GUI控件间距,使界面布局整齐,空间利用率较高。
对于具有关联关系的GUI控件间距,默认取固定值(例如:1个字符)的长度;对于非关联关系的GUI控件间距,除了根据用户设置的控件间距作为参考,也要控制避免因水平控件数过大而产生实际输出宽度的越界影响,装置使用“自适应边界差值法”进行调整:
首先,参考用户设置的GUI控件间距来计算水平控件和间距的长度和,若组控件的宽度与该长度和的边界差值大于0,且边界差值在边距的一定范围内(例如±30%),则接受现有的布局参数;若边界差值大于边距某特定值(例如30%),则将非关联关系GUI控件的间距递增若干个单位长度(例如:若干个字符长度),尝试再次执行上述越界检查,直到获得的间距落在标准范围;若边界差值小于边距某特定值(例如:30%),则将非关联关系GUI控件的间距递减若干个单位长度,尝试再次执行上述越界检查,直到获得的间距落在标准范围。由于该步骤最多可涉及多次间距调整,称这种调整方法为“自适应边界差值法”。
其次,在越界检查和间距设置尝试已无法获得合适间距的前提下,通过采取减少或增加输出GUI控件数的方法,避免发生GUI控件越界或边距过大现象。具体步骤如下:
1:遍历资源树存储单元,顺序读取组控件下的GUI对象;
2:按照最大列数(假设为6,包含三组标签+文本框),循环执行以下步骤:
计算边界差值是否在合理的范围内,即边界差值在用户设置的边距的一定范围内(例如:30%)。
若边界差值小于0,且超过文本输入框和标签长度和,达到该长度和的一定范围值(例如:+30至+50%),则采用自适应边界差值法调整控件间距和边距;若无法获得合适的间距,则将最大列数减2,重新进行自适应边界差值法调整,重复此步骤直至获得合适的间距。
若边界差值大于0,且其绝对值超过文本输入框和标签长度和,达到该长度和的一定范围值(例如:+30至+50%之间),则采用自适应边界差值法调整控件的间距和边距;若无法获得合适的间距,则将最大列数加2,重新进行自适应边界差值法调整,重复此步骤直至获得合适的间距。
如果选择的边距在合理的范围内,则记录水平向GUI控件的位置参数。
3:执行下一行控件及其位置参数设置。检查组控件的高度与当前行输出的控件高度、行间距总和的差值(垂直边界差值)是否在合理的范围内。
若垂直边界差值在某个区间内(例如:小于1.5倍边距,且大于1倍边距),则减少若干单位的(例如:1个单位)行间距和边距,重新进行越界检查,直到垂直边界差值等于适当的值(例如:1.5倍边距);
若垂直边界差值大于某个值(例如:2倍边距),则增加若干单位(例如:1个单位)行间距和边距,重新进行越界检查,直到垂直边界差值等于适当的值(例如:1.5倍边距);
若垂直边界差值小于某个值(例如:1倍边距),则增加组控件的高度,使得垂直边界差值达到适当的值(例如:1.5倍边距);
最后,将计算得到的GUI控件的行间距和边距作为其位置属性,存储到资源树存储单元中。经过调整后,界面布局整齐,空间利用率较高。
数据存储装置,负责存储本装置运行所需要的数据信息,包括:资源文件、界面框架模板文件、资源对象及GUI对象数据库、资源树。其中,
资源文件存储单元,负责存储用户用于进行GUI布局设计的相关的资源文件,用于提供给用户选择本次进行GUI设计所使用的资源文件,可以为DSR网关文件、接口文件等等。
界面框架模板文件存储单元,负责存储原始的GUI布局文件,包括窗体、图层和组控件等构成GUI布局的基本控件,其作用是辅助确定用户需要的GUI布局雏形。
资源对象存储单元,负责存储经过资源分析和分类后封装的资源对象。
资源树存储单元,负责存储按照GUI布局的控件顺序将GUI对象作为逻辑节点的资源树,以便于进行线性调整GUI对象的位置属性,实现GUI布局的调整。
GUI布局显示程序模块,负责解析资源树存储单元中的GUI对象,根据GUI对象的位置属性信息,通过GUI图形显示插件将资源树翻译成图形用户界面布局,并输出到用户终端,向用户展现GUI布局的预览效果,最终生成的图形用户界面布局。
优选地,控件位置设置程序模块的三个单元:尺寸调整单元、位置调整单元、边界调整单元,每个单元的组成结构如图9所示,其包括:格布局调整单元311、流布局调整单元312、边界布局调整单元313、关联布局调整单元314。布局调整单元311、312、313、314可以相互嵌套,例如,格布局调整单元311可以嵌套于边界布局调整单元313中,使得网格单元可用于度量控件的边界距离。由于布局调整单元具有相互嵌套的性质,其结构可有多种构成方式,图9所示为其中一种结构示例。
格布局调整单元311,负责是使用网格来划分控件的坐标,建立基于网格的坐标空间。控件的边距、间距、长度和宽度等距离就以网格单元的尺寸来衡量,表示为网格尺寸大小的整数倍,例如:规定一个网格单位长度为一个字符;
流布局调整单元312,负责控制水平面控件坐标(X坐标)的间距,避免因横向显示控件数据量太多,以及间距过大而发生的水平方向的越界冲突;
边界布局调整单元313,负责控制矩形方框中控件和四种边界区域,即上边界、下边界、左边界和右边界的边界距,使边距不能超越用户设置的边界值。
关联布局调整单元314,负责控制有关联关系的控件间的间距关系,使有关联关系的控件的关系紧密。规定控件之间的关联关系是十分必要的,比如:文本标签和输入场之间总是成对出现,而表格和表格列也存在着对应关系,这种对应关系在界面设计中需要定义合适的间距。例如:规定有关联关系的标签与输入场的间距为一个网格单位长度。
图10为运用本实施例装置构建的GUI界面。该界面由3个组控件构成,组控件包含的子控件由文本框、标签、下拉框和按钮构成,由图10可见,同一水平向控件的Y坐标相等,同一垂直向控件的X坐标相等,控件的长度基本相等,有特殊长度要求的控件除外。通过自适应算法调整后,GUI布局界面的边距和间距设置较为合理,已达到图形用户界面布局设计的要求。
本发明解决了因为业务需求变化而需要进行GUI布局重排时产生的效率低下、控件位置交叉和信息截断、不关心控件关联关系,以及无法自适应调整GUI控件布局的问题,本发明的优点在于:
一、针对由于业务变化和界面重新设计导致的GUI布局重排,本发明通过GUI布局调整装置3能够自适应地对GUI控件的布局进行适配,并且提供最适合的显示效果,有效解决了控件交叉和信息截断问题,使得本发明具有极大的实用性,有效提高了图形用户界面布局的构建效率。
二、本发明对于具有关联关系的GUI控件和非关联关系的GUI控件,在GUI布局构建中予以区别对待,使得具有关联关系的GUI控件之间的关系更加紧密,能够显示最符合客户需求的GUI布局。
本发明中应用了具体实施例对本发明的原理及实施方式进行了阐述,以上实施例的说明只是用于帮助理解本发明的方法及其核心思想;同时,对于本领域的一般技术人员,依据本发明的思想,在具体实施方式及应用范围上均会有改变之处,综上所述,本说明书内容不应理解为对本发明的限制。

Claims (4)

1.一种自适应的图形用户界面构建装置,其特征是,所述的装置包括:
文件接收单元,用于接收用户输入的资源文件和界面框架模板文件;
控件属性设置单元,用于将所述的资源文件分解为数据项记录,根据用户输入的控件属性设置指令对所述数据项记录中的控件属性和控件之间的关联关系进行设置,生成GUI控件资源;
GUI对象存储单元,用于将所述GUI控件资源中具有坐标位置属性的GUI控件资源封装成坐标资源对象,并将所述GUI控件资源中不具有坐标位置属性的GUI控件资源封装成非坐标资源对象,并将所述的坐标资源对象和非坐标资源对象翻译成对应的GUI对象进行存储;
资源树生成单元,用于将用户输入的界面框架模板文件作为产生资源树的初始起点;然后,顺序从GUI对象数据库读取GUI对象,若该GUI对象的输入/输出属性为输入,则从根节点依次遍历资源树,找到输入节点组;进一步的,遍历所述的输入节点组下的GUI对象节点,若新GUI对象节点已经存在,则返回继续执行下一个GUI对象插入资源树的步骤,否则在所述的输入节点组中添加一个GUI对象节点;若GUI对象的输入/输出属性为输出,则从根节点依次遍历资源树,找到输出节点组,进一步的,遍历所述的输出节点组下的GUI对象节点,若新GUI对象节点已经存在,则返回继续执行下一个GUI对象插入资源树的步骤,否则在所述的输出节点组中添加一个GUI对象节点;重复上述插入GUI对象节点的步骤,直到资源对象数据库中的GUI对象已经处理完毕;
控件位置设置单元,用于接收用户输入的控件位置设置指令,并根据所述的控件位置设置指令对所述资源树中GUI对象的坐标位置数据进行设置;
GUI布局显示单元,用于将设置后的资源树翻译为GUI布局,并显示所述的GUI布局;
其中,所述的资源树生成单元包括:资源树存储模块,用于存储根据所述的界面框架模板文件生成的包括资源树根节点的资源树初始框架;GUI对象读取模块,用于按照适应GUI布局的顺序读取所述的GUI对象;节点插入模块,用于根据所述的GUI对象的属性,从所述根节点依次遍历资源树,找到与所述GUI对象的属性相对应的节点组,在所述节点组中添加所述的GUI对象作为所述资源树的一个新节点。
2.根据权利要求1所述的装置,其特征是,所述的数据项记录包括:变量名称、输入/输出类型、层次、数组、组件类型和长度。
3.根据权利要求1所述的装置,其特征是,所述的GUI对象的坐标位置数据包括:控件的输入/输出类型、控件在所述图形用户界面中的位置数据以及控件的长度和宽度。
4.根据权利要求3所述的装置,其特征是,所述的控件在所述图形用户界面中的位置数据包括:
文本标签的初始位置数据和行间距;
文本输入场初始位置数据;
按钮控件的初始位置数据。
CN201010122711.8A 2010-03-11 2010-03-11 一种自适应的图形用户界面构建装置及方法 Active CN102193786B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201010122711.8A CN102193786B (zh) 2010-03-11 2010-03-11 一种自适应的图形用户界面构建装置及方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201010122711.8A CN102193786B (zh) 2010-03-11 2010-03-11 一种自适应的图形用户界面构建装置及方法

Publications (2)

Publication Number Publication Date
CN102193786A CN102193786A (zh) 2011-09-21
CN102193786B true CN102193786B (zh) 2014-04-09

Family

ID=44601908

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201010122711.8A Active CN102193786B (zh) 2010-03-11 2010-03-11 一种自适应的图形用户界面构建装置及方法

Country Status (1)

Country Link
CN (1) CN102193786B (zh)

Families Citing this family (25)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103092583B (zh) * 2011-11-01 2017-10-10 腾讯科技(深圳)有限公司 一种动态生成设置项列表视图的方法及装置
CN102436381B (zh) * 2011-11-15 2018-09-28 南京中兴软件有限责任公司 一种界面布局的生成方法及装置
CN102752536A (zh) * 2011-11-29 2012-10-24 新奥特(北京)视频技术有限公司 一种电视图文测屏播放的方法
FR2983600B1 (fr) * 2011-12-01 2014-02-07 Airbus Operations Sas Procede et systeme de surveillance d'une interface graphique dans un cockpit d'aeronef
CN102622232A (zh) * 2012-03-06 2012-08-01 惠州华阳通用电子有限公司 一种嵌入式设备用户界面实现方法
CN102902535A (zh) * 2012-09-18 2013-01-30 深圳市融创天下科技股份有限公司 一种图片自适应方法、系统和终端设备
US10055202B2 (en) * 2013-02-13 2018-08-21 Sandhills Publishing Co. Business process workflow system
CN103488479A (zh) * 2013-09-04 2014-01-01 用友软件股份有限公司 客户端界面动态生成装置和客户端界面动态生成方法
CN104238881A (zh) * 2014-09-10 2014-12-24 北京金山安全软件有限公司 终端信息的显示方法、装置及终端
CN105912310A (zh) * 2015-12-04 2016-08-31 乐视致新电子科技(天津)有限公司 基于虚拟现实应用的用户界面控件实现方法和装置
CN105975286B (zh) * 2016-06-16 2019-08-06 中国建设银行股份有限公司 生成用于人机交互的界面的方法及系统
CN106406868A (zh) * 2016-09-05 2017-02-15 乐视控股(北京)有限公司 一种控制方法及装置
CN107885421A (zh) * 2016-09-29 2018-04-06 珠海金山办公软件有限公司 一种工具栏的变化显示方法及装置
CN106502704A (zh) * 2016-10-31 2017-03-15 乐视控股(北京)有限公司 一种3d空间中用户界面控件的实现方法及其装置
CN106815022A (zh) * 2017-01-04 2017-06-09 中国石油大学(北京) 一种基于树型数据结构的通用ui界面生成方法及装置
CN107273548B (zh) * 2017-07-20 2020-10-27 创新先进技术有限公司 动态页面的实现方法和装置
CN107390978B (zh) * 2017-07-27 2020-11-03 广州视源电子科技股份有限公司 公式的显示方法、装置、终端及计算机可读存储介质
CN109542544A (zh) * 2017-09-22 2019-03-29 北京小度信息科技有限公司 界面显示方法及装置
CN107908399B (zh) * 2017-11-14 2021-03-16 浪潮通用软件有限公司 一种页面开发方法及装置
CN110795093B (zh) * 2018-08-01 2024-04-16 北京京东尚科信息技术有限公司 一种交互式视图生成方法和装置
CN109144511B (zh) * 2018-08-16 2020-10-13 北京应用物理与计算数学研究所 数值模拟图形用户界面自动生成方法及系统
CN110688037A (zh) * 2019-09-11 2020-01-14 深圳康佳电子科技有限公司 一种控件的显示方法、存储介质及移动终端
CN112558968B (zh) * 2020-12-22 2023-10-17 北京飞讯数码科技有限公司 一种资源树视图的生成方法、装置、设备及存储介质
CN113625641B (zh) * 2021-08-17 2023-02-28 华帝股份有限公司 基于厨电设备的控制端动态更新方法、系统、设备及介质
CN114153445B (zh) * 2022-02-09 2022-05-20 中国电子信息产业集团有限公司 一种通过批量选择组件实现快速生成连接关系的方法

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101042643A (zh) * 2006-03-24 2007-09-26 国际商业机器公司 在本地化过程中调整图形用户界面布局的方法及装置
CN101382887A (zh) * 2008-09-19 2009-03-11 金蝶软件(中国)有限公司 一种调整界面布局的方法及装置
US7675529B1 (en) * 2003-02-25 2010-03-09 Apple Inc. Method and apparatus to scale graphical user interfaces

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7675529B1 (en) * 2003-02-25 2010-03-09 Apple Inc. Method and apparatus to scale graphical user interfaces
CN101042643A (zh) * 2006-03-24 2007-09-26 国际商业机器公司 在本地化过程中调整图形用户界面布局的方法及装置
CN101382887A (zh) * 2008-09-19 2009-03-11 金蝶软件(中国)有限公司 一种调整界面布局的方法及装置

Also Published As

Publication number Publication date
CN102193786A (zh) 2011-09-21

Similar Documents

Publication Publication Date Title
CN102193786B (zh) 一种自适应的图形用户界面构建装置及方法
CN201867789U (zh) 一种自适应的图形用户界面构建设备
CN101794280B (zh) 一种基于表格模板集的表格自动生成方法及系统
CN104298836B (zh) 一种基于蒙特卡罗计算的反应堆堆芯迭代设计系统
CN104077446B (zh) 从数字化三维模型中提取二维电气施工图的方法及系统
CN106844324B (zh) 一种变动列数据导出为Excel格式的方法
CN101796538A (zh) 以基于相对面积的控制在页面上布置图形对象
CN108255489A (zh) 前端界面代码生成方法、装置、电子设备及存储介质
US9335760B2 (en) Template framework for automated process routing
CN106970999B (zh) 一种bpa数据库建模与维护方法
CN101146281A (zh) 一种面向移动终端的创建图形用户界面模型
CN114048204A (zh) 基于数据库倒排索引的北斗网格空间索引方法和装置
CN106250110A (zh) 建立模型的方法及装置
CN106055535A (zh) 一种图表生成方法及装置
CN104656543A (zh) 一种plc梯形图矩阵编辑显示方法
CN105095599A (zh) 一种dwg格式图纸自动生成方法
CN102981842B (zh) 一种生成可交互横道图的方法
CN111612686B (zh) 一种ebom到pbom的结构映射方法
Adão et al. Procedural generation of traversable buildings outlined by arbitrary convex shapes
CN115145930A (zh) 基于树状层次索引的gis矢量数据层次编码方法及装置
CN104794300A (zh) 一种iec 61850逻辑节点图形符号自动生成方法
CN113656852B (zh) 一种精细化河道地形快速生成方法
CN114756938A (zh) 一种数据处理方法、装置、设备及可读存储介质
CN113536407A (zh) 基于单元设备构造项目图纸的方法、装置及存储介质
CN111339625A (zh) 构建风力发电机组基础模型的方法、装置及其系统

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
C14 Grant of patent or utility model
GR01 Patent grant