CN111679822A - 用于实现基于模式的用户界面呈现模型的系统及其方法 - Google Patents
用于实现基于模式的用户界面呈现模型的系统及其方法 Download PDFInfo
- Publication number
- CN111679822A CN111679822A CN201910180691.0A CN201910180691A CN111679822A CN 111679822 A CN111679822 A CN 111679822A CN 201910180691 A CN201910180691 A CN 201910180691A CN 111679822 A CN111679822 A CN 111679822A
- Authority
- CN
- China
- Prior art keywords
- mode
- tag
- interface
- layout
- presentation
- 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.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
- Stored Programmes (AREA)
Abstract
一种用于实现基于模式的用户界面呈现模型的系统及其方法,包括树形结构集合,所述树形结构集合用于表示用户界面呈现模型的整体布局形式,所述树形结构集合中的树形结构包括根节点、中间节点和叶子节点;所述根节点表示用户界面的整体布局结构;所述叶子节点表示界面模式构件,所述界面模式构件中的界面为所述用户界面;所述界面模式构件也能够为界面的基础构件;所述中间节点表示所述界面模式构件的布局策略,也就是用于组织所述叶子节点的布局容器对象。结合方法有效避免了现有技术中界面的开发效率低下、实现的可复用性不强、不利于界面的快速原型化、当需求的变化导致界面设计改变时界面的实现需要在代码层次做大量的修改的缺陷。
Description
技术领域
本发明涉及用户界面呈现模型技术领域,具体涉及一种用于实现基于模式的用户界面呈现模型的系统及其方法。
背景技术
UI即UserInterface(用户界面)的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。
通过对用户界面设计不同需求进行的分类以及用户界面设计元素对用户行为的影响,来研究用户在用户界面设计中所体现的重要性。交互性已经成为用户界面设计中设计追求的目标。
另外,基于模型的用户界面开发方法通过模型之间的转换,从高度抽象的模型被转换为几个低级抽象模型,直到生成最终的用户界面。使得界面“描述一次,到处运行”。然而,基于模型的方法在创建呈现模型时只保留了具有相关用户所需功能的用户界面,而将可用性信息(如构建布局、页面布局、组件大小等)丢失。而当前业界普遍使用了基于模式的用户界面设计方法和技术。用户界面模式,是一种经过证明了的界面设计方案,能够为用户提供较好可用性。
目前,基于模式的界面设计方法提供有关界面设计的模式,不仅保证了界面的可用性,而且提高界面设计效率。然而,现有平台(如安卓)对于界面的实现仍然是基于WidgetSet层,平台并没有对界面模式的实现提供支持,开发人员在界面实现阶段,必须根据自己的理解然后使用建立在小粒度交互组件(如菜单、按钮等)基础上的界面标记语言,先将基本交互组件拼装成大粒度的界面模式构件,然后再构建用户界面的布局和交互逻辑,从而完成界面的编码工作。这种开发流程可能会产生以下问题:其一,界面的开发效率低下,开发人员需要先将基本组件拼装成大粒度的模式构件,再构件用户界面,造成实现的可复用性不强;其二,不利于界面的快速原型化,当需求的变化导致界面设计改变时,界面的实现需要在代码层次做大量的修改。
发明内容
为解决上述问题,本发明提供了一种用于实现基于模式的用户界面呈现模型的系统及其方法,有效避免了现有技术中界面的开发效率低下、实现的可复用性不强、不利于界面的快速原型化、当需求的变化导致界面设计改变时界面的实现需要在代码层次做大量的修改的缺陷。
为了克服现有技术中的不足,本发明提供了一种用于实现基于模式的用户界面呈现模型的系统及其方法的解决方案,具体如下:
一种用于实现基于模式的用户界面呈现模型的系统,包括树形结构集合,所述树形结构集合用于表示用户界面呈现模型的整体布局形式,所述树形结构集合中的树形结构包括根节点、中间节点和叶子节点;
所述根节点表示用户界面的整体布局结构;
所述叶子节点表示界面模式构件,所述界面模式构件中的界面为所述用户界面;所述界面模式构件也能够为界面的基础构件;
所述中间节点表示所述界面模式构件的布局策略,也就是用于组织所述叶子节点的布局容器对象。
所述树形结构集合包括若干界面,每个界面均采用所述树形结构来组织界面元素;
每个界面又包含若干所述界面模式构件,而所述界面模式构件的布局容器是组织所述界面模式构件的策略。
所述布局容器分为两类:Page布局和Layout布局;
所述Page布局是根节点布局,而在每一个Page布局的具体页面中,每种Page布局又提供了模式构件的若干种组织形式的布局策略,所述中间节点的布局策略就是Layout布局。
所述基于模式的用户界面呈现模型运用基于XML的标记语言X-PPML来实现;
所述基于XML的呈现模型标记语言X-PPML包括两个子模块,所述两个子模块分别是模式标签和布局标签;
所述模式标签包括标签<name>和标签<presentation>;
所述标签<name>表示模式的名称,该标签<name>能唯一的标识模式;
所述标签<presentation>表示模式的呈现信息,所述标签<presentation>将模式描述分为如下几个独立的部分:
用于表示模式属性的子标签<attribute>、用于表示风格的子标签<style>和用于表示可拓展组件的子标签<customization>;
所述布局标签包括线性排列标签<LinearLayout>、相对排列标签<RelativeLayout>和整体排列标签AbsoluteLayout>:
所述线性排列标签<LinearLayout>用于描述界面的组件间的线性排列结构;
所述相对排列标签<RelativeLayout>用于描述界面的组件间的相对排列结构;
所述整体排列标签AbsoluteLayout>用于描述界面的组件间的整体排列结构。
所述标签<presentation>的语法结构为:
<presentation>
<attribute>...</attribute>
<style>...<style>
<customization>
<element></element>
</customization>
</presentation>;
所述子标签<attribute>描述了模式的相关位置属性和大小属性,其中模式的相关位置属性用left、top、right、bottom和center分别表示模式的左、上、右、下和中心的位置;所述模式的大小属性用占界面大小的百分比来表示;
所述子标签<style>表示界面模式的呈现风格,模式构件库中的模式对界面中的不同组件的不同呈现风格做了限制;
所述子标签<customization>属于可定制化属性,可以根据不同设备的需要在模式外进行定义;
所述子标签<customization>中包含界面的组件的名称name、事件event、位置position和内容text四种属性。
所述用于实现基于模式的用户界面呈现模型的系统的方法,其包括基于XML的呈现模型标记语言X-PPML的实现方法,该实现方法包括:
所述基于XML的呈现模型标记语言X-PPML的布局呈现方式,该布局呈现方式包括:
所述布局呈现用于描述界面模式构件的内部呈现形式,所述界面模式构件的内部呈现形式的描述方式如下所示:
所述基于XML的呈现模型标记语言X-PPML标记的呈现信息经过解析器解释,在解析过程中通过调用模式构件库中的模式构件,从抽象元素解析为用户终端的系统平台中的构件,完成模式构件的呈现,也就是将构成模式的基本构件形成一个构件对象树,这样,构件树就对应于Android中的实际的构件;
所述基于XML的呈现模型标记语言X-PPML的实现方法还包括该基于XML的呈现模型标记语言X-PPML拓展的对话机制,该拓展的对话机制服务于所述子标签<customization>,针对于不同的组件,开发者可以自定义该子标签的响应机制。
所述解析器的解析方式包括两部分,其一是对所述基于XML的呈现模型标记语言X-PPML中的标签的属性进行解析分析;
其二是所述基于XML的呈现模型标记语言X-PPML中的标签和模式构件库的匹配工作。
所述对所述基于XML的呈现模型标记语言X-PPML的标签的属性进行解析分析的方式包括如下步骤:
步骤1:通过SAX解析引擎对所述基于XML的呈现模型标记语言X-PPML中的标签进行一层一层遍历,生成对象树;
步骤2:通过深度优先遍历算法访问所述基于XML的呈现模型标记语言X-PPML中的标签;
步骤3:读入模式构件库的XML文件,生成一个树形对象全局变量;所述模式构件库包括在原有Widget库上加了一层,该模式构件库有一个内部标记语言,用来构造模式构件库的元素;
步骤4:对两种标签进行解析,该解析方式如下:
解析第一种标签,就是对所述模式标签进行解析时,通过解析模式标签的标签<name>和标签<presentation>,标签<name>用来可以唯一匹配模式构件库中的模式,标签<presentation>中的子标签<attribute>和<style>可以用来唯一的确定模式的整体呈现风格和位置,并且将模式中所对应的组件添加到界面文件中,而标签<presentation>中的<子标签customization>解析生成的是在模式的相对位置添加组件和组件的响应事件;
解析第二种标签,就是对所述布局标签进行解析,所述布局标签是利用的现有的系统平台下的界面的布局标签,将布局标签添加到界面文件中,并且重复执行步骤3,实现递归调用,直到访问到模式中的叶子结点为止;
步骤5:对所述基于XML的呈现模型标记语言X-PPML的源代码进行编译,在所述对所述基于XML的呈现模型标记语言X-PPML的源代码进行编译的阶段中,只需使用具体的软件开发环境以此完成编译工作。
所述基于XML的呈现模型标记语言X-PPML中的标签和模式构件库的匹配工作的方式包括:
所述匹配工作的过程中通过所述基于XML的呈现模型标记语言X-PPML中的标签<name>的值,通过调用document.getElementById()方法去查询定位到模式构件库标记语言生成的树对象的全局变量中的标签<Name>以及其兄弟标签,通过解析兄弟标签<Implement>中的子标签<Description>、子标签<Structure>、子标签<Data>、子标签<Event>和子标签<Attribute>可以准确的确定该模式中所包含开发平台上的组件,组件位置结构,组件数据类型,组件所绑定的事件以及组件呈现风格。
本发明的有益效果为:
本发明采用基于XML的语言描述基于模式构件的用户界面呈现模型,使得能够在模式层次上描述用户界面的实现,这样就具有了如下的优点:
1.将用户界面模式与基于模型的界面开发方法相结合设计出基于XML的呈现模型标记语言X-PPML,使得在加快界面原型化速度的同时可以保证界面可用性。
2.基于XML的呈现模型标记语言X-PPML采用XML语言从抽象层次描述用户界面,使得其不依赖于具体平台。即在设计改变时无需在代码层次做大量的修改
3.基于XML的呈现模型标记语言X-PPML的界面生成框架采用了大粒度模式构件作为界面的基础组件,可在界面代码实现阶段提高模式的可复用性。
附图说明
图1是本发明的树形结构集合的结构示意图。
图2是本发明的基于XML的呈现模型标记语言X-PPML的标签的结构图。
图3是本发明的界面模式构件的内部呈现形式的描述方式的原理图。
图4是本发明的解析器解析的流程图。
图5是本发明的基于XML的呈现模型标记语言X-PPML的应用框架结构图。
图6是本发明的基于XML的呈现模型标记语言X-PPML的生成框架结构图。
具体实施方式
下面将结合附图和实施例对本发明做进一步地说明。
如图1-图6所示,用于实现基于模式的用户界面呈现模型的系统,包括树形结构集合,所述树形结构集合用于表示用户界面呈现模型的整体布局形式,如图1所示:所述树形结构集合中的层次性的树形结构包括根节点、中间节点和叶子节点;
所述根节点表示用户界面的整体布局结构;
所述叶子节点表示是界面布局的最小单位,一般指界面模式构件,所述界面模式构件中的界面为所述用户界面;所述界面模式构件也能够为界面的基础构件;
所述中间节点表示所述界面模式构件的布局策略,也就是用于组织所述叶子节点的布局容器对象。
所述层次性的树形结构运用于用户终端。所述用户终端能够为PC机、笔记本电脑、PDA、智能手机或者平板电脑。
所述树形结构集合通常包括若干界面,每个界面均采用所述树形结构来组织界面元素;
每个界面又包含若干所述界面模式构件,而所述界面模式构件的布局容器是组织所述界面模式构件的策略。
所述布局容器分为两类:Page布局和Layout布局;
所述Page布局是根节点布局,而在每一个Page布局的具体页面中,每种Page布局又提供了模式构件的若干种组织形式的布局策略,所述中间节点的布局策略就是Layout布局。
所述基于模式的用户界面呈现模型运用基于XML的呈现模型标记语言X-PPML来实现;
所述基于XML的呈现模型标记语言X-PPML包括两个子模块,所述两个子模块分别是模式标签和布局标签;所述基于XML的呈现模型标记语言X-PPML的子模块结构如图2所示;
所述模式标签包括标签<name>和标签<presentation>;
所述标签<name>表示模式的名称,该标签<name>能唯一的标识模式;
所述标签<presentation>表示模式的呈现信息,所述标签<presentation>将模式描述分为如下几个独立的部分:
用于表示模式属性的子标签<attribute>、用于表示风格的子标签<style>和用于表示可拓展组件的子标签<customization>;
所述布局标签包括线性排列标签<LinearLayout>、相对排列标签<RelativeLayout>和整体排列标签AbsoluteLayout>:
所述线性排列标签<LinearLayout>用于描述界面的组件间的线性排列结构;
所述相对排列标签<RelativeLayout>用于描述界面的组件间的相对排列结构;
所述整体排列标签AbsoluteLayout>用于描述界面的组件间的整体排列结构。
所述标签<presentation>的语法结构为:
<presentation>
<attribute>...</attribute>
<style>...<style>
<customization>
<element></element>
</customization>
</presentation>;
一个用户界面可以包含多个模式,而且每个模式都可以按该模式的名称唯一标识。
所述子标签<attribute>描述了模式的相关位置属性和大小属性,其中模式的相关位置属性用left、top、right、bottom和center分别表示模式的左、上、右、下和中心的位置;所述模式的大小属性用占界面大小的百分比来表示;通过模式的子标签<attribute>可以改变模式在界面的位置以及大小从而满足不同大小设备的需求;
所述子标签<style>表示界面模式的呈现风格,模式构件库中的模式对界面中的不同组件的不同呈现风格做了限制,因此子标签<style>是整个模式的呈现风格,该呈现风格包括模式的长度、背景图片、背景色以及线框粗细;
所述子标签<customization>属于可定制化属性,可以根据不同设备的需要在模式外进行定义;所述子标签<customization>里面包含了界面的组件的各种基本属性,例如:相对模式位置,组件的名称(唯一标识符)等。
所述子标签<customization>中包含界面的组件的名称name、事件event、位置position和内容text四种属性,所述可定制化属性的呈现风格和模式风格是能够相统一的。
所述用于实现基于模式的用户界面呈现模型的系统的方法,其包括基于XML的呈现模型标记语言X-PPML的实现方法,该实现方法包括:
所述基于XML的呈现模型标记语言X-PPML的布局呈现方式,该布局呈现方式包括:
根据用户界面呈现模型为布局结构提供的实现支持,负责提供页面布局策略供开发人员选择以实现基于模式的设计方案,同时提供构造布局策略的扩展接口,使得开发人员可以自定义布局结构;
所述布局呈现用于描述界面模式构件的内部呈现形式,所述界面模式构件的内部呈现形式的描述方式如下所示:
所述基于XML的呈现模型标记语言X-PPML标记的呈现信息经过解析器解释,从抽象元素解析为用户终端的如Android这样的系统平台中的构件,完成模式构件的呈现,也就是将构成模式的基本构件形成一个构件对象树,这样,构件树就对应于Android中的实际的构件;
这样就是通过调用如Android这样的系统平台中提供的用于绘制界面的类,可以完成模式构件的呈现;由于如Android这样的系统平台下的界面开发是由XML组件标记语言实现,因此应将模式构件的布局呈现信息分离为一个个界面元素XML标签,将这些标签依照XML的树形结构组织,从而生成一个新的如Android这样的系统平台下的界面解析器可识别的XML文件。然后通过如Android这样的系统平台下的界面解析器解析,最终将所述基于XML的呈现模型标记语言X-PPML中的抽象结构的布局呈现信息转换成具体的如Android这样的系统平台下的构件。
子标签<customization>是为了提高所述基于XML的呈现模型标记语言X-PPML的可拓展性,开发者可以在原有模式基础上进行自定义的一些添加设计,例如:在登录模式中加入选择框(是否记住密码)。
所述基于XML的呈现模型标记语言X-PPML的实现方法还包括该基于XML的呈现模型标记语言X-PPML拓展的对话机制,该拓展的对话机制服务于所述子标签<customization>,针对于不同的组件,开发者可以自定义该子标签的响应机制。如上述提到的是否记住密码的选择框,则需要规定和编写对应的函数调用。
所述解析器的解析方式包括两部分,其一是对所述基于XML的呈现模型标记语言X-PPML中的标签的属性进行解析分析;
其二是所述基于XML的呈现模型标记语言X-PPML中的标签和模式构件库的匹配工作,该模式构件库可以用已有的模式构件库也可重新建立新的模式构件库(采用标记语言描述形成的模式构件库)。以下将从以上两部分进行解释性描述解析流程。
所述对所述基于XML的呈现模型标记语言X-PPML的标签的属性进行解析分析的方式包括如下步骤:
步骤1:通过SAX解析引擎对所述基于XML的呈现模型标记语言X-PPML中的标签进行一层一层遍历,生成对象树;
步骤2:通过深度优先遍历算法访问所述基于XML的呈现模型标记语言X-PPML中的标签;
步骤3:读入模式构件库的XML文件,生成一个树形对象全局变量,这样可以方便随时调用,有利于快速完成模式构件库的匹配工作;所述模式构件库包括在原有Widget库上加了一层,该模式构件库有一个内部标记语言,用来构造模式构件库的元素;就如,所述模式构件库能够用如下的参考文献中的任一种方法来构造模式构件库的元素:
[1]闫迎兵.面向界面模式的构件库设计与实现[D].西北大学,2017.
[2]王莎莎.基于模式的移动界面开发工具箱的研究与实现[D].2015.
[3]Yu K.,Hua Q.Y.,Wang S.S.,et al.An user interface dialog controlmodel based on UI patterns[C]//IEEE International Conference on SoftwareEngineering and Service Science.IEEE,2015:702-705。
步骤4:对两种标签进行解析,该解析方式如下:
解析第一种标签,就是对所述模式标签进行解析时,通过解析模式标签的标签<name>和标签<presentation>,标签<name>用来可以唯一匹配模式构件库中的模式,标签<presentation>中的子标签<attribute>和<style>可以用来唯一的确定模式的整体呈现风格和位置,并且将模式中所对应的如安卓组件这样的组件添加到界面文件中,而标签<presentation>中的<子标签customization>解析生成的是在模式的相对位置添加如安卓组件这样的组件和组件的响应事件;
解析第二种标签,就是对所述布局标签进行解析,所述布局标签是利用的现有的如安卓这样的系统平台下的界面的布局标签,将布局标签添加到界面文件中,并且重复执行步骤3,实现递归调用,直到访问到模式中的叶子结点为止;
步骤5:对所述基于XML的呈现模型标记语言X-PPML的源代码进行编译,在所述对所述基于XML的呈现模型标记语言X-PPML的源代码进行编译的阶段中,只需使用具体的如Android Devel oper Tools这样的软件开发环境以此完成编译工作。借助具体平台的软件开发环境,一定程度上也可当作实现了自动化。
所述基于XML的呈现模型标记语言X-PPML中的标签和模式构件库的匹配工作的方式包括:
所述匹配工作的过程中通过所述基于XML的呈现模型标记语言X-PPML中的标签<name>的值,通过调用document.getElementById()方法去查询定位到模式构件库标记语言生成的树对象的全局变量中的标签<Name>以及其兄弟标签,该标签<Name>表示的是树对象的标识,所述<Implement>中的子标签<Description>、子标签<Structure>、子标签<Data>、子标签<Event>和子标签<Attribute>中分别包含有该模式中所包含的如安卓这样的开发平台上的组件,组件位置结构,组件数据类型,组件所绑定的事件以及组件呈现风格的信息;通过解析兄弟标签<Implement>中的子标签<Description>、子标签<Structure>、子标签<Data>、子标签<Event>和子标签<Attribute>可以准确的确定该模式中所包含如安卓这样的开发平台上的组件,组件位置结构,组件数据类型,组件所绑定的事件以及组件呈现风格。
在使用本发明的方法进行界面开发时,开发人员具有相应的知识背景和经验,然后将界面的设计方案用基于XML的呈现模型标记语言X-PPML在Pattern层次进行标记,包括界面的呈现信息与布局信息。接着借助解析器将基于XML的呈现模型标记语言X-PPML标记的界面进行解析,一定程度上实现了自动化,解析过程对于界面模式的解析通过调用实现的模式构件库,完成模式构件到基本组件的映射。最后的编译工作借助具体平台的软件开发环境,一定程度上也可当作实现了自动化。
以上以用实施例说明的方式对本发明作了描述,本领域的技术人员应当理解,本公开不限于以上描述的实施例,在不偏离本发明的范围的情况下,可以做出各种变化、改变和替换。
Claims (9)
1.一种用于实现基于模式的用户界面呈现模型的系统,其特征在于,包括树形结构集合,所述树形结构集合用于表示用户界面呈现模型的整体布局形式,所述树形结构集合中的树形结构包括根节点、中间节点和叶子节点;
所述根节点表示用户界面的整体布局结构;
所述叶子节点表示界面模式构件,所述界面模式构件中的界面为所述用户界面;所述界面模式构件也能够为界面的基础构件;
所述中间节点表示所述界面模式构件的布局策略,也就是用于组织所述叶子节点的布局容器对象。
2.根据权利要求1所述的用于实现基于模式的用户界面呈现模型的系统,其特征在于,所述树形结构集合包括若干界面,每个界面均采用所述树形结构来组织界面元素;
每个界面又包含若干所述界面模式构件,而所述界面模式构件的布局容器是组织所述界面模式构件的策略。
3.根据权利要求2所述的用于实现基于模式的用户界面呈现模型的系统,其特征在于,所述布局容器分为两类:Page布局和Layout布局;
所述Page布局是根节点布局,而在每一个Page布局的具体页面中,每种Page布局又提供了模式构件的若干种组织形式的布局策略,所述中间节点的布局策略就是Layout布局。
4.根据权利要求1所述的用于实现基于模式的用户界面呈现模型的系统,其特征在于,所述基于模式的用户界面呈现模型运用基于XML的标记语言X-PPML来实现;
所述基于XML的呈现模型标记语言X-PPML包括两个子模块,所述两个子模块分别是模式标签和布局标签;
所述模式标签包括标签<name>和标签<presentation>;
所述标签<name>表示模式的名称,该标签<name>能唯一的标识模式;
所述标签<presentation>表示模式的呈现信息,所述标签<presentation>将模式描述分为如下几个独立的部分:
用于表示模式属性的子标签<attribute>、用于表示风格的子标签<style>和用于表示可拓展组件的子标签<customization>;
所述布局标签包括线性排列标签<LinearLayout>、相对排列标签<RelativeLayout>和整体排列标签<AbsoluteLayout>:
所述线性排列标签<LinearLayout>用于描述界面的组件间的线性排列结构;
所述相对排列标签<RelativeLayout>用于描述界面的组件间的相对排列结构;
所述绝对排列标签<AbsoluteLayout>用于描述界面的组件间的绝对排列结构。
5.根据权利要求4所述的用于实现基于模式的用户界面呈现模型的系统,其特征在于,所述标签<presentation>的语法结构为:
<presentation>
<attribute>...</attribute>
<style>...<style>
<customization>
<element></element>
</customization>
</presentation>;
所述子标签<attribute>描述了模式的相关位置属性和大小属性,其中模式的相关位置属性用left、top、right、bottom和center分别表示模式的左、上、右、下和中心的位置;所述模式的大小属性用占界面大小的百分比来表示;
所述子标签<style>表示界面模式的呈现风格,模式构件库中的模式对界面中的不同组件的不同呈现风格做了限制;
所述子标签<customization>属于可定制化属性,可以根据不同设备的需要在模式外进行定义;
所述子标签<customization>中包含界面的组件的名称name、事件event、位置position和内容text四种属性。
6.根据权利要求1所述的用于实现基于模式的用户界面呈现模型的系统的方法,其特征在于,其包括基于XML的呈现模型标记语言X-PPML的实现方法,该实现方法包括:
所述基于XML的呈现模型标记语言X-PPML的布局呈现方式,该布局呈现方式包括:
所述布局呈现用于描述界面模式构件的内部呈现形式,所述界面模式构件的内部呈现形式的描述方式如下所示:
所述基于XML的呈现模型标记语言X-PPML标记的呈现信息经过解析器解析,从抽象元素解析为用户终端的系统平台中的构件,完成模式构件的呈现,也就是将构成模式的基本构件形成一个构件对象树,这样,构件树就对应于Android中的实际的构件;
所述基于XML的呈现模型标记语言X-PPML的实现方法还包括该基于XML的呈现模型标记语言X-PPML拓展的对话机制,该拓展的对话机制服务于所述子标签<customization>,针对于不同的组件,开发者可以自定义该子标签的响应机制。
7.根据权利要求6所述的用于实现基于模式的用户界面呈现模型的系统的方法,其特征在于,所述解析器的解析方式包括两部分,其一是对所述基于XML的呈现模型标记语言X-PPML中的标签的属性进行解析分析;
其二是所述基于XML的呈现模型标记语言X-PPML中的标签和模式构件库的匹配工作。
8.根据权利要求7所述的用于实现基于模式的用户界面呈现模型的系统的方法,其特征在于,对所述基于XML的呈现模型标记语言X-PPML的标签的属性进行解析分析的方式包括如下步骤:
步骤1:通过SAX解析引擎对所述基于XML的呈现模型标记语言X-PPML中的标签进行一层一层遍历,生成对象树;
步骤2:通过深度优先遍历算法访问所述基于XML的呈现模型标记语言X-PPML中的标签;
步骤3:读入模式构件库的XML文件,生成一个树形对象全局变量;所述模式构件库包括在原有Widget库上加了一层,该模式构件库有一个内部标记语言,用来构造模式构件库的元素;
步骤4:对两种标签进行解析,该解析方式如下:
解析第一种标签,就是对所述模式标签进行解析时,通过解析模式标签的标签<name>和标签<presentation>,标签<name>用来可以唯一匹配模式构件库中的模式,标签<presentation>中的子标签<attribute>和<style>可以用来唯一的确定模式的整体呈现风格和位置,并且将模式中所对应的组件添加到界面文件中,而标签<presentation>中的<子标签customization>解析生成的是在模式的相对位置添加组件和组件的响应事件;
解析第二种标签,就是对所述布局标签进行解析,所述布局标签是利用的现有的系统平台下的界面的布局标签,将布局标签添加到界面文件中,并且重复执行步骤3,实现递归调用,直到访问到模式中的叶子结点为止;
步骤5:对所述基于XML的呈现模型标记语言X-PPML的源代码进行编译,在所述对所述基于XML的呈现模型标记语言X-PPML的源代码进行编译的阶段中,只需使用具体的软件开发环境以此完成编译工作。
9.根据权利要求7所述的用于实现基于模式的用户界面呈现模型的系统的方法,其特征在于,所述基于XML的呈现模型标记语言X-PPML中的标签和模式构件库的匹配工作的方式包括:
所述匹配工作的过程中通过所述基于XML的呈现模型标记语言X-PPML中的标签<name>的值,通过调用document.getElementById()方法去查询定位到模式构件库标记语言生成的树对象的全局变量中的标签<Name>以及其兄弟标签,通过解析兄弟标签<Implement>中的子标签<Description>、子标签<Structure>、子标签<Data>、子标签<Event>和子标签<Attribute>可以准确的确定该模式中所包含开发平台上的组件,组件位置结构,组件数据类型,组件所绑定的事件以及组件呈现风格。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201910180691.0A CN111679822A (zh) | 2019-03-11 | 2019-03-11 | 用于实现基于模式的用户界面呈现模型的系统及其方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201910180691.0A CN111679822A (zh) | 2019-03-11 | 2019-03-11 | 用于实现基于模式的用户界面呈现模型的系统及其方法 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN111679822A true CN111679822A (zh) | 2020-09-18 |
Family
ID=72451215
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201910180691.0A Pending CN111679822A (zh) | 2019-03-11 | 2019-03-11 | 用于实现基于模式的用户界面呈现模型的系统及其方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN111679822A (zh) |
Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN1867886A (zh) * | 2003-09-02 | 2006-11-22 | 捷讯研究有限公司 | 用于用户界面定制的方法和数据结构 |
US7216298B1 (en) * | 2001-06-07 | 2007-05-08 | Oracle International Corporation | System and method for automatic generation of HTML based interfaces including alternative layout modes |
-
2019
- 2019-03-11 CN CN201910180691.0A patent/CN111679822A/zh active Pending
Patent Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US7216298B1 (en) * | 2001-06-07 | 2007-05-08 | Oracle International Corporation | System and method for automatic generation of HTML based interfaces including alternative layout modes |
CN1867886A (zh) * | 2003-09-02 | 2006-11-22 | 捷讯研究有限公司 | 用于用户界面定制的方法和数据结构 |
Non-Patent Citations (1)
Title |
---|
李楠楠: ""基于Pattern的用户界面呈现模型的研究与实现"", 《中国优秀硕士学位论文全文数据库信息科技辑》 * |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US10379710B2 (en) | Modeling system for graphic user interface | |
MacDonald et al. | Pro ASP. NET 4 in VB 2010 | |
US10114619B2 (en) | Integrated development environment with multiple editors | |
Meixner et al. | Model-driven useware engineering | |
US10776351B2 (en) | Automatic core data service view generator | |
CN114117645B (zh) | 一种舰船总体性能预报集成应用系统 | |
Helms et al. | Human-centered engineering of interactive systems with the user interface markup language | |
CN114820881A (zh) | 图片的生成方法、智能终端及其计算机可读存储介质 | |
CN116627418B (zh) | 一种基于递归算法的多级表单界面可视化生成方法及装置 | |
US9501598B1 (en) | System and method for assertion publication and re-use | |
White et al. | Introduction to the generic eclipse modeling system | |
Djukić et al. | Handling complex representations in visual modeling tools for MDSD/DSM by means of code generator languages | |
CN111679822A (zh) | 用于实现基于模式的用户界面呈现模型的系统及其方法 | |
Li et al. | Research on a pattern-based user interface development method | |
CN112631585A (zh) | 基于xml的快速参数界面配置方法 | |
Garzotto et al. | Supporting reusable web design with HDM-Edit | |
Clark et al. | Domain engineering for software tools | |
Bandelloni et al. | Reverse engineering cross-modal user interfaces for ubiquitous environments | |
Costa | Animating user interface prototypes with formal models | |
Xiaoqin et al. | A component model for designing dynamic GUI | |
Garrigós et al. | Personalizing the interface in rich Internet applications | |
Brüggemann-Klein et al. | Graphical User Interface Tool forDesigningModel-BasedUserInterfaces with UIML | |
CN114217780A (zh) | 一种支持网页和小程序可视化开发的方法、系统及终端 | |
Seffah et al. | HCI design patterns as a building block in model-driven engineering | |
Tielin et al. | A model transformation platform design based on model driven architecture |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
WD01 | Invention patent application deemed withdrawn after publication | ||
WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20200918 |