CN104267954A - 一种用户界面中所包含的部件的生成方法和装置 - Google Patents

一种用户界面中所包含的部件的生成方法和装置 Download PDF

Info

Publication number
CN104267954A
CN104267954A CN201410503422.0A CN201410503422A CN104267954A CN 104267954 A CN104267954 A CN 104267954A CN 201410503422 A CN201410503422 A CN 201410503422A CN 104267954 A CN104267954 A CN 104267954A
Authority
CN
China
Prior art keywords
information
parts
subassembly
described parts
user
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.)
Granted
Application number
CN201410503422.0A
Other languages
English (en)
Other versions
CN104267954B (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.)
Qingdao Hisense Electronics Co Ltd
Original Assignee
Qingdao Hisense Electronics Co Ltd
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 Qingdao Hisense Electronics Co Ltd filed Critical Qingdao Hisense Electronics Co Ltd
Priority to CN201410503422.0A priority Critical patent/CN104267954B/zh
Publication of CN104267954A publication Critical patent/CN104267954A/zh
Application granted granted Critical
Publication of CN104267954B publication Critical patent/CN104267954B/zh
Expired - Fee Related legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Abstract

本发明公开了一种生成用户界面中所包含的部件方法和装置,用于解决现有技术中存在的开发者只能在UISDK所提供的UI部件中进行选择,不能完全根据开发者自身需求自定义UI部件的问题。方法包括:获取并解析用户在用户界面开发过程中输入的用户所设计的部件的注册信息;根据注册信息中携带的部件的属性信息、第一信息和第二信息,生成该部件的结构;根据注册信息中携带的第四信息,生成该部件能够执行的各种行为;根据注册信息中携带的第三信息,生成该部件在不同操作状态下的显示样式,并调用该第三信息中表示该部件在未操作状态下的显示样式,在用户界面中显示该部件。本发明中,用户可以自行设计用户界面中的各个部件,提高了用户体验。

Description

一种用户界面中所包含的部件的生成方法和装置
技术领域
本发明涉及用户界面(User Interface,UI)的开发技术领域,特别涉及一种用户界面中所包含的部件的生成方法和装置。
背景技术
用户界面软件开发包(User Interface Software Development Kit,UISDK)技术,是一个用于用户界面开发、以及用户界面交互开发的框架。UISDK技术发展多年,已经成为软件工具中的重要组成部分,为软件的开发、生成提供了一定便利,如我们进行Web开发、应用程序开发,均有相应的UISDK开发工具,用于快速生成开发者所需的UI。
UISDK是一种运行时库,在程序的头部载入。UISDK一般根据常用的部件、事件、行为等进行封装,提供开发者便于使用的工具套件,比如按钮、列表、单选框、复选框、文本框、导航条、进度条、滚动条等;UISDK对事件的封装包括点击(Onclick)事件、按键事件、获得焦点、内容改变等;行为包括显示、执行、关联等方面,一般UISDK均进行高度封装。开发者使用UISDK进行开发,在一定程度上提高了开发效率,可以不必在一个按钮上花费太多的时间。比如最为简单的按钮部件,在不使用UISDK进行开发环境下,需要开发者自己定义一个矩形区域,在该矩形区域内放置一些文本作为按钮内容,然后需要开发者定义当鼠标移至该矩形区域时,矩形区域将会发生何种变化,比如更换区域内绘制新的图片,作为按钮处于焦点或者鼠标停留的样式,当点击时做出另一种处理,点击行为发生后,启动相应的函数或者方法执行,即所谓的点击事件。但是有了UISDK后便大大不同了,开发者可以直接从开发工具包中拖拽一个按钮到窗口区域,然后简单设置其属性便可使用,比如背景色、背景图片、鼠标停留时的背景及图片,实现其点击事件。
然而,开发者使用UISDK进行开发时,也有会受到一些限制,比如开发者只能在UISDK所提供的UI部件中进行选择,不能根据开发者自身需求自定义UI部件,如某一UI部件未提供背景图片的设置,开发者则无法为该部件指定自身所需的背景图片等,开发过程中受到一定的限制,降低了用户体验。
发明内容
本发明实施例提供了一种生成用户界面中所包含的部件的方法和装置,用于解决现有技术中存在的开发者只能在UISDK所提供的UI部件中进行选择,不能完全根据开发者自身需求自定义UI部件的问题。
本发明实施例提供了一种生成用户界面中所包含的部件的方法,包括:
获取并解析用户在用户界面开发过程中输入的用户所设计的部件的注册信息,所述注册信息包括:所述部件的属性信息、用于表示所述部件的组成部分的第一信息、用于表示与所述部件相关联的业务数据的第二信息、用于表示所述部件在不同操作状态下的显示样式的第三信息、和用于表示所述部件能够执行的各种行为的第四信息;
根据所述部件的属性信息、所述第一信息和所述第二信息,生成所述部件的结构;
根据所述第四信息,生成所述部件能够执行的各种行为;
根据所述第三信息,生成所述部件在不同操作状态下的显示样式,并调用所述第三信息中表示所述部件在未操作状态下的显示样式,在用户界面中显示所述部件。
较佳地,在用户界面中显示所述部件之后,该方法还包括:
根据用户对所述部件的操作指令,调用所述第四信息中与所述操作指令对应的行为,并执行所调用的行为;
根据用户对所述部件的操作指令,获取所述第三信息中包含的表示所述部件在所述操作指令对应的操作状态下的显示样式;以及
根据获取到的显示样式在用户界面中显示所述部件。
在实施中,作为一种优选的实现方式,若所述部件包括至少两个子部件,所述注册信息还包括:用于表示所述部件所包含的各子部件之间的嵌套关系的第五信息;
其中,所述部件的属性信息包括所述部件所包含的各子部件的属性信息;所述第一信息包括分别表示所述部件所包含的各子部件的组成部分的信息;所述第二信息包括分别表示与所述部件所包含的各子部件相关联的业务数据的信息;所述第三信息包括分别表示所述部件所包含的各子部件在不同操作状态下的显示样式的信息;所述第四信息包括分别表示所述部件所包含的各子部件能够执行的各种行为的信息。
该方式下,根据所述部件的属性信息、所述第一信息和所述第二信息,生成所述部件的结构,包括:
针对所述部件所包含的每个子部件,根据该子部件对应的属性信息、所述第一信息中表示该子部件的组成部分的信息和所述第二信息中表示该子部件相关联的业务数据的信息,生成该子部件的结构;以及
根据所述第五信息和生成的所述部件所包含的各子部件的结构,生成所述部件的结构。
该方式下,根据所述第四信息,生成所述部件能够执行各种行为,包括:
根据所述第四信息中包含的表示所述部件所包含的各子部件能够执行的各种行为的信息,生成所述部件所包含的各子部件能够执行的各种行为。
该方式下,根据所述第三信息,生成所述部件在不同操作状态下的显示样式,并调用所述第三信息中表示所述部件在未操作状态下的显示样式,在用户界面中显示所述部件,包括:
根据所述第三信息中包含的表示所述部件所包含的各子部件在不同操作状态下的显示样式,生成所述部件所包含的各子部件在不同操作状态下的显示样式,并调用第三信息中表示所述部件所包含的各子部件在未操作状态下的显示样式,在用户界面中显示所述部件。
该方式下,在用户界面中显示所述部件之后,该方法还包括:
根据用户对所述部件的各子部件的操作指令,调用所述第四信息中与所述操作指令对应的各子部件需要执行的行为,并执行所调用的行为;
根据用户对所述部件的各子部件的操作指令,获取所述第三信息中包含的分别表示所述部件所包含的各子部件在所述操作指令对应的操作状态下的显示样式;以及
根据获取到的显示样式在用户界面中显示所述部件。
本发明实施例提供的生成用户界面中所包含的部件的装置,包括:
注册界面提供模块,用于在接收到用于请求注册用户所设计的部件的注册请求后,提供能够输入注册信息的注册界面;
解析模块,用于解析用户在所述注册界面中输入的注册信息,所述注册信息包括:所述部件的属性信息、用于表示所述部件的组成部分的第一信息、用于表示与所述部件相关联的业务数据的第二信息、用于表示所述部件在不同操作状态下的显示样式的第三信息、和用于表示所述部件能够执行的各种行为的第四信息;
第一处理模块,用于根据所述部件的属性信息、所述第一信息和所述第二信息,生成所述部件的结构;
第二处理模块,用于根据所述第三信息中包含的表示所述部件在未操作状态下的显示样式,在用户界面中显示所述部件。
较佳地,该装置还包括:
第四处理模块,用于根据用户对所述部件的操作指令,调用所述第四信息中与所述操作指令对应的行为,并执行所调用的行为;根据用户对所述部件的操作指令,获取所述第三信息中包含的表示所述部件在所述操作指令对应的操作状态下的显示样式;以及根据获取到的显示样式在用户界面中显示所述部件。
在实施中,作为一种优选的实现方式,若所述部件包括至少两个子部件,所述注册信息还包括:用于表示所述部件所包含的各子部件之间的嵌套关系的第五信息;
其中,所述部件的属性信息包括所述部件所包含的各子部件的属性信息;所述第一信息包括分别表示所述部件所包含的各子部件的组成部分的信息;所述第二信息包括分别表示与所述部件所包含的各子部件相关联的业务数据的信息;所述第三信息包括分别表示所述部件所包含的各子部件在不同操作状态下的显示样式的信息;所述第四信息包括分别表示所述部件所包含的各子部件能够执行的各种行为的信息。
该方式下,所述第一处理模块具体用于:
针对所述部件所包含的每个子部件,根据该子部件对应的属性信息、所述第一信息中表示该子部件的组成部分的信息和所述第二信息中表示该子部件相关联的业务数据的信息,生成该子部件的结构;以及根据所述第五信息和生成的所述部件所包含的各子部件的结构,生成所述部件的结构。
该方式下,所述第二处理模块具体用于:
根据所述第四信息中包含的表示所述部件所包含的各子部件能够执行的各种行为的信息,生成所述部件所包含的各子部件能够执行的各种行为。
该方式下,所述第三处理模块具体用于:
根据所述第三信息中包含的表示所述部件所包含的各子部件在不同操作状态下的显示样式,生成所述部件所包含的各子部件在不同操作状态下的显示样式,并调用第三信息中表示所述部件所包含的各子部件在未操作状态下的显示样式,在用户界面中显示所述部件。
该方式下,该装置还包括:
第四处理模块,用于根据用户对所述部件的各子部件的操作指令,调用所述第四信息中与所述操作指令对应的各子部件需要执行的行为,并执行所调用的行为;根据用户对所述部件的各子部件的操作指令,获取所述第三信息中包含的分别表示所述部件所包含的各子部件在所述操作指令对应的操作状态下的显示样式;以及根据获取到的显示样式在用户界面中显示所述部件。
本发明实施例提供的方法和装置中,用户可以自行设计和定义所设计的界面中的各个部件,只需要将所设计的部件的注册信息告知给UISDK端,UISDK端就能根据用户输入的注册信息,生成该部件的结构并在用户界面中显示该部件,因此,用户在设计网页等用户界面时,不再受限于现有UISDK端提供固有部件的束缚,使用户在进行UI开发,可以根据自身需要生成不同于UISDK端所提供的固有部件的部件,实现了将用户自己设计的部件转化为UISDK端的部件提高了用户体验。
附图说明
图1为本发明提供的一种生成用户界面所包含的部件的方法示意图;
图2为本发明提供的一种用户在用户界面中设计的按钮的示意图;
图3A为本发明提供的一种用户所设计的按钮在无操作状态下进行显示的示意图;
图3B为本发明提供的一种用户设计的按钮在点击操作状态下进行显示的示意图;
图4为本发明提供的实施例一的流程示意图;
图5为本发明提供的一种用户所设计的列表的结构示意图;
图6为本发明提供的一种生成用户界面所包含的部件的装置示意图。
具体实施方式
本发明中,用户在设计用户界面的过程中,可以根据自身的需求,向UISDK注册部件,使UISDK在接收到用户输入所设计的部件的注册信息后,生成该部件,以显示在用户设计的界面中,从而提高了用户体验。
下面结合说明书附图对本发明实施例作进一步详细描述。应当理解,此处所描述的实施例仅用于说明和解释本发明,并不用于限定本发明。
如图1所示,本发明实施例提供的一种生成用户界面所包含的部件的方法,在用户设计界面的过程中,该方法包括:
步骤11、获取并解析用户在用户界面开发过程中输入的用户所设计的部件的注册信息,该注册信息包括:用户所设计的部件的属性信息、用于表示用户所设计的部件的组成部分的第一信息、用于表示与用户所设计的部件相关联的业务数据的第二信息、用于表示用户所设计的部件在不同操作状态下的显示样式的第三信息、和用于表示用户所设计的部件能够执行的各种行为的第四信息。
本步骤中,预先定义生成不同部件所需的接口信息,用户按照UISDK端定义的接口信息输入自身所涉及的部件的注册信息,即可以理解为用户输入的注册信息为UISDK端所定义的生成不同部件所需的接口信息的具体内容。
本步骤中,用户输入的注册信息可以采用JSON(JavaScript ObjectNotation,JavaScript对象表示法)、XML(Extensible Markup Language,可扩展标记语言)等格式。
步骤12、根据注册信息中所包含的用户所设计的部件的属性信息、第一信息和第二信息,生成用户所设计的部件的结构。
具体的,根据用户输入的注册信息中所包含的用户所设计的部件的属性信息、第一信息和第二信息,进行计算以生成用户所设计的部件的结构。
步骤13、根据注册信息中所包含的第四信息,生成该部件能够执行的各种行为。
具体的,生成用户所设计的部件的结构之后,结合注册信息中所包含的第四信息,确定该部件能够执行的各种行为,并生成该部件能够执行的各种行为。
步骤14、根据注册信息中所包含的第三信息,生成该部件在不同操作状态下的显示样式,并调用第三信息中表示该部件在未操作状态下的显示样式,在用户界面中显示该部件。
具体的,生成该部件能够执行的各种行为之后,结合注册信息中所包含的第三信息,确定该部件在不同操作状态下的显示样式,并生成该部件在不同操作状态下的显示样式,并调用第三信息中表示该部件在未操作状态下的显示样式,在用户界面中显示该部件。
较佳地,上述步骤11~步骤14的执行主体为UISDK端。
本发明实施例中,在用户设计用户界面过程中,用户可以自行设计和定义所设计的用户界面中的各个部件,只需要将所设计的部件的注册信息告知给UISDK端,UISDK端就能根据用户输入的注册信息,生成该部件,因此,用户在设计界面时,不再受限于UISDK端提供固有部件的束缚,使用户在进行UI开发,可以根据自身需要生成不同于UISDK端所提供的固有部件的部件,实现了将用户自己设计的部件转化为UISDK端的部件,提高了用户体验。
需要说明的是,用户设计部件即程序开发的过程,用户在提供注册信息时,需要根据UISDK端给定的规范对所设计的部件进行注册。在程序进入运行时后,UISDK会在程序运行的开始首先载入,程序执行过程中才能发挥其框架作用,控制程序运行,以实现生成并显示用户所设计的部件的功能。
本发明实施例可以应用于用户设计任何界面的过程中,如网页界面,游戏界面等;用户设计的部件的类型可以是按钮、列表、单选框、复选框、文本框、导航条、进度条、滚动条等中的任一种部件或至少两种部件的组合。
在实施中,步骤11中,注册信息为用户按照UISDK端所规定的格式输入UISDK端的。在UISDK端内部,对每种类型的部件都会进行宏观定义,以WEB页面设计中设计的按钮为例,对按钮的宏观定义,包括以下信息:
“按钮应该是这样,按钮应该有个名字,按钮应该有自己独立的数据,点击按钮应该执行一个函数,在执行函数时可利用自己的数据,按钮在常规无操作的状态下以什么方式显示,在获得焦点后以什么方式显示”。
上述定义即为UISDK端针对按钮这个部件所规定的接口信息,若用户需要生成自身所涉及的按钮部件,则应该按照UISDK端针对按钮所规定的接口信息输入自身所生成的按钮对应的注册信息,仍以WEB页面设计中设计按钮为例,若用户需要设计一个按钮,则用户输入的注册信息如下:
“我要注册一个按钮,该按钮包括一个图像和一段显示文字,按钮的名字叫做按钮A;按钮点击后执行的函数为FunA;按钮使用的数据为DataA,其中DataA中包括三个部分的数据:img标签对应的图像数据DataImgA、span标签对应的文字数据DataSpanA、以及div标签对应的前二者数据组合DataDivA;按钮在普通状态下显示的样式为StyleNormalA,按钮在获得焦点后显示的样式为StyleFocusA”,如图2所示。其中,标签为WEB中的最小单元。程序如下:
用户所设计的按钮如下:
<div id="buttonA"class="divA">//定义一个div标签,id为buttonA,样式为divA;
<img id="imgA"class="imgA">//定义一个img标签,id为imgA,样式为imgA;
<span id="spanA"class="spanA"></span>//定义一个span标签,id为spanA,样式为spanA;
</div>
用户写入的注册信息如下:
运行上述程序后,生成的按钮结构如图3A所示,点击该新按钮后,执行点击功能(onclickfunction)函数,该按钮的显示效果如图3B所示。
较佳地,步骤11中,用户输入的注册信息中的部件的属性信息包括但不限于下列信息中的一种或多种:类型信息、名称信息等。其中,类型信息表示该部件的类型,如按钮、列表、单选框、复选框、文本框、导航条、进度条、滚动条等;名称信息表示用户为该部件的命名。
较佳地,步骤11中,用户输入的注册信息中的第二信息包括但不限于下列信息中的一种或多种:部件所显示的图像数据的地址信息、部件所显示的字符数据(其中,字符包括文字、数字、字母等)、部件所显示的视频数据的地址信息、部件所显示的音频数据的地址信息。
较佳地,步骤11中,用户输入的注册信息中的第三信息包括但不限于下列信息中的一种或多种:部件的在无操作状态下的显示样式、部件在获得焦点状态下的显示样式、部件在被选择状态下的显示样式、部件在不可用状态下的显示样式、部件在拖动状态下的显示样式。
较佳地,步骤11中,用户输入的注册信息中的第四信息是指部件能够执行的各种行为对应的函数,第四信息包括但不限于下列信息中的一种或多种:鼠标点击、鼠标移动、按键触发、推拽、获得焦点、失去焦点、内容改变、加载完成、尺寸改变、删除、卸载等。
在实施中,在生成并显示用户设计的部件之后,保存该部件以及该部件对应的注册信息中携带的第三信息和第四信息,以便该用户在本次界面设计或其他界面设计时,能够使用该用户设计的部件,也使其他用户在进行界面设计时能够使用已生成的部件。
基于上述任一实施例,步骤14中,在用户界面中显示用户所设计的部件之后,该方法还包括:
根据用户对该用户所设计的部件的操作指令,调用该部件的注册信息所包含的第四信息中与该操作指令对应的行为,并执行所调用的行为;
根据用户对该用户所设计的部件的操作指令,获取该部件的注册信息所包含的第三信息中包含的表示该部件在该操作指令对应的操作状态下的显示样式;以及
根据获取到的显示样式在用户界面中显示该部件。
在实施中,作为一种优选的实现方式,若用户所设计的部件包括至少两个子部件,则该部件所对应的注册信息还包括:用于表示该部件所包含的各子部件之间的嵌套关系的第五信息。
较佳地,第五信息中包括但不限于下列信息中的一种或多种:各子部件的位置关系、各子部件的包含关系、各子部件的组合关系。
该方式下,用户所设计的部件的属性信息包括该部件所包含的各子部件的属性信息;
用户所设计的第一信息包括分别表示该部件所包含的各子部件的组成部分的信息;
用户所设计的第二信息包括分别表示与该部件所包含的各子部件相关联的业务数据的信息;
用户所设计的第三信息包括分别表示该部件所包含的各子部件在不同操作状态下的显示样式的信息;
用户所设计的第四信息包括分别表示该部件所包含的各子部件能够执行的各种行为的信息。
该方式下,步骤12具体为:
针对用户所设计的部件所包含的每个子部件,根据该子部件对应的属性信息、第一信息中表示该子部件的组成部分的信息和第二信息中表示该子部件相关联的业务数据的信息,生成该子部件的结构;以及
根据注册信息携带的第五信息和生成的该部件所包含的各子部件的结构,生成该部件的结构。
具体的,若用户所设计的部件包括至少两个子部件,则在生成该部件的结构时,先生成该部件中各子部件的结构,再根据注册信息所携带的用于表示该部件中各子部件的嵌套关系的信息,生成该部件的结构。
该方式下,步骤13具体为:
根据注册信息携带的第四信息中包含的表示用户所设计的部件所包含的各子部件能够执行的各种行为的信息,生成该件所包含的各子部件能够执行的各种行为。
该方式下,步骤14具体为:
根据注册信息携带的第三信息中包含的表示用户所设计的部件所包含的各子部件在不同操作状态下的显示样式,生成该部件所包含的各子部件在不同操作状态下的显示样式,并调用第三信息中表示该部件所包含的各子部件在未操作状态下的显示样式,在用户界面中显示该部件。
该方式下,步骤14中,在用户界面中显示该部件之后,该方法还包括:
根据用户对该用户所设计的部件的各子部件的操作指令,调用注册信息携带的第四信息中与该操作指令对应的各子部件需要执行的行为,并执行所调用的行为;
根据用户对该用户所设计的部件的各子部件的操作指令,获取注册信息携带的第三信息中包含的分别表示该部件所包含的各子部件在所述操作指令对应的操作状态下的显示样式;以及
根据获取到的显示样式在用户界面中显示该部件。
下面以生成用户所设计的按钮为例,对本发明实施例提供的一种生成用户界面所包含的部件的方法进行详细说明。
实施例一、如图4所示,包括如下过程:
步骤1:用户根据美工设计UI画面。
以WebUI设计为例,该步骤表示,用户可以根据自己需求自由设计网页,如在制作过程中,不必遵循UISDK所包含的固有按钮为一矩形区域或者圆角矩形的普通概念,可以在形状、实现方式、标签组合、位置上自由设计。
步骤2:用户根据自身的设计向UISDK注册新按钮。其中,用户写入UISDK的注册信息包括:新按钮的属性信息、用于表示新按钮的组成部分的第一信息、用于表示新按钮的对应的数据的第二信息、用于表示新按钮的在不同操作状态下的显示样式的第三信息、以及用于表示新按钮能够执行的各种行为的第四信息。
这一注册过程为生成用户所设计的部件的依据。通过用户所设计的部件的用户界面的组成(即第一信息)的注册,告知UISDK某些元素将成为或者组合成为一个部件;第二信息为部件的用户界面的显示基础,通过用户界面中的数据(即第二信息)和该部件在不同操作下的显示样式(即第三信息)的注册,告知UISDK在部件的用户界面初始化时,该部件上显示、内部包含携带的数据以及显示样式;当注册为UISDK的一个部件后,比如注册为UISDK可识别的一个按钮,此时便可根据UISDK提供的行为添加该按钮行为了,比如:注册点击按钮后执行的函数;鼠标在该按钮上悬停时执行的函数等等;总之,注册信息为UISDK智能识别用户设计的前提条件。
步骤3:UISDK根据注册信息生成部件的用户界面。该生成包括部件的最终用户界面组成,用户界面数据,以及行为的生成。
该步骤对用户来讲是透明的,为UISDK内部处理。UISDK根据上一步获得的注册信息,执行计算生成最终结果输出。UISDK中定义了各种部件的框架以及部件的实现方法,接口信息规范。用户在注册信息中指定最终生成为UISDK中的某个部件,注册信息中包括了各种基础单元的组合方式。UISDK根据以上注册信息执行内部运算,分析计算出该部件最终的页面结构。
其中,页面数据计算即UISDK根据用户注册时提供的数据(即第二信息)、页面结构(即第一信息)等进行计算过程;页面行为由UISDK根据接口定义,在运行时生成调用用户注册的行为信息(即第四信息)及在不同操作下的显示样式(即第三信息),另外UISDK根据在生成部件的最终用户界面的过程中,可对生成的部件进行复制以及附加行为等操作。
步骤4:UISDK根据用户交互控制页面运行。以Web页面为例,UISDK生成的部件的最终运行程序画面与一般UISDK固有的部件无异,页面在生成时进行数据初始化,根据与系统、用户之间的交互来运行程序。
下面以生成用户所设计的包含三个子部件的列表为例,对本发明实施例提供的一种生成用户界面所包含的部件的方法进行详细说明。
首先,用户在用户界面中绘制了如图5所示的列表。
所设计的列表代码如下:
然后,用户在向UISDK注册时,考虑注册为UISDK的列表,所设计的列表内部每行包括一个图片和两段文字构成的子部件,以上包含3条数据。针对该列表,注册信息如下(以Json格式为例):
上述注册信息中,"id"、"description"、"CaEType"、"classes"、"normal"、"focus"、"dataSelected"、"oriCaE"、"ListConfig"、"nav"、"handler"等均为用户向UISDK注册过程中的关键字,即UISDK规定的接口信息。其中“oriCaE”关键字表示该部件所包含子部件的嵌套关系的第五信息,该示例中包含ProductPic、ProductName、ProductDescription三个子部件,注意该处的子部件仅仅表示一种组合、结构,并非最终UISDK计算结果,只是计算的一个要素。
接着,用户输入注册信息中的数据信息(即第二信息),以使UISDK显示该列表,具体的数据信息如下:
最后,UISDK根据用户提供的所设计的列表的注册信息,计算获得如下部件代码:
以上信息是SDK根据给定的注册信息计算生成,原先oriCaE中注册的图片项目ProductPic,结合数据信息后,生成了ProductPic_0、ProductPic_1、ProductPic_2三个img标签。
需要说明的是,上述注册信息中的"id"、"description"、"CaEType"、"classes"、"normal"、"focus"、"dataSelected"、"oriCaE"、"ListConfig"、"nav"、"handler"等均为用户向UISDK输入的用于注册所设计的部件的关键字,即UISDK规定的接口信息,它们在Json数据描述中以键的形式存在,在注册过程中要求用户给定其内容,具体格式由UISDK规定,部分项目可为空。
上述方法处理流程可以用软件程序实现,该软件程序可以存储在存储介质中,当存储的软件程序被调用时,执行上述方法步骤。
基于同一发明构思,本发明实施例中还提供了一种用户界面的生成装置,由于该装置解决问题的原理与上述一种用户界面的生成方法相似,因此该装置的实施可以参见方法的实施,重复之处不再赘述。
如图6所示,本发明实施例提供的一种用户界面的生成装置,该装置应用于用户设计界面的过程中,该装置包括:
解析模块61,用于获取并解析用户在用户界面开发过程中输入的用户所设计的部件的,所述注册信息包括:所述部件的属性信息、用于表示所述部件的组成部分的第一信息、用于表示与所述部件相关联的业务数据的第二信息、用于表示所述部件在不同操作状态下的显示样式的第三信息、和用于表示所述部件能够执行的各种行为的第四信息;
第一处理模块62,用于根据所述部件的属性信息、所述第一信息和所述第二信息,生成所述部件的结构;
第二处理模块63,用于根据所述第四信息,生成所述部件能够执行的各种行为;
第三处理模块64,用于生成所述部件在不同操作状态下的显示样式,并调用所述第三信息中表示所述部件在未操作状态下的显示样式,在用户界面中显示所述部件。
较佳地,该装置还包括:
第四处理模块65,用于根据用户对所述部件的操作指令,调用所述第四信息中与所述操作指令对应的行为,并执行所调用的行为;根据用户对所述部件的操作指令,获取所述第三信息中包含的表示所述部件在所述操作指令对应的操作状态下的显示样式;以及根据获取到的显示样式在用户界面中显示所述部件。
在实施中,作为一种优选的实现方式,若所述部件包括至少两个子部件,所述注册信息还包括:用于表示所述部件所包含的各子部件之间的嵌套关系的第五信息;
其中,所述部件的属性信息包括所述部件所包含的各子部件的属性信息;所述第一信息包括分别表示所述部件所包含的各子部件的组成部分的信息;所述第二信息包括分别表示与所述部件所包含的各子部件相关联的业务数据的信息;所述第三信息包括分别表示所述部件所包含的各子部件在不同操作状态下的显示样式的信息;所述第四信息包括分别表示所述部件所包含的各子部件能够执行的各种行为的信息。
该方式下,第一处理模块62具体用于:
针对所述部件所包含的每个子部件,根据该子部件对应的属性信息、所述第一信息中表示该子部件的组成部分的信息和所述第二信息中表示该子部件相关联的业务数据的信息,生成该子部件的结构;以及根据所述第五信息和生成的所述部件所包含的各子部件的结构,生成所述部件的结构。
该方式下,第二处理模块63具体用于:
根据所述第四信息中包含的表示所述部件所包含的各子部件能够执行的各种行为的信息,生成所述部件所包含的各子部件能够执行的各种行为。
该方式下,第三处理模块64具体用于:
根据所述第三信息中包含的表示所述部件所包含的各子部件在不同操作状态下的显示样式,生成所述部件所包含的各子部件在不同操作状态下的显示样式,并调用第三信息中表示所述部件所包含的各子部件在未操作状态下的显示样式,在用户界面中显示所述部件。
该方式下,该装置还包括:
第四处理模块65,用于根据用户对所述部件的各子部件的操作指令,调用所述第四信息中与所述操作指令对应的各子部件需要执行的行为,并执行所调用的行为;根据用户对所述部件的各子部件的操作指令,获取所述第三信息中包含的分别表示所述部件所包含的各子部件在所述操作指令对应的操作状态下的显示样式;以及根据获取到的显示样式在用户界面中显示所述部件。
本发明实施例提供的装置所实现的功能可以应用于现有的UISDK,以使UISDK能够为用户提供自行设计和定义所设计的界面中的各个部件的功能,用户在自行设计过程中,只需要将所设计的部件的注册信息告知给UISDK,UISDK就能根据用户输入的注册信息,生成该部件的结构并在用户界面中显示该部件,从而用户在设计网页等用户界面时,不再受限于UISDK提供固有部件的束缚,使用户在进行UI开发,可以根据自身需要生成不同于UISDK所提供的固有部件的部件,提高了用户体验。
本领域内的技术人员应明白,本发明的实施例可提供为方法、系统、或计算机程序产品。因此,本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管已描述了本发明的优选实施例,但本领域内的技术人员一旦得知了基本创造性概念,则可对这些实施例作出另外的变更和修改。所以,所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。
显然,本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样,倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内,则本发明也意图包含这些改动和变型在内。

Claims (14)

1.一种生成用户界面中所包含的部件的方法,其特征在于,该方法包括:
获取并解析用户在用户界面开发过程中输入的用户所设计的部件的注册信息,所述注册信息包括:所述部件的属性信息、用于表示所述部件的组成部分的第一信息、用于表示与所述部件相关联的业务数据的第二信息、用于表示所述部件在不同操作状态下的显示样式的第三信息、和用于表示所述部件能够执行的各种行为的第四信息;
根据所述部件的属性信息、所述第一信息和所述第二信息,生成所述部件的结构;
根据所述第四信息,生成所述部件能够执行的各种行为;
根据所述第三信息,生成所述部件在不同操作状态下的显示样式,并调用所述第三信息中表示所述部件在未操作状态下的显示样式,在用户界面中显示所述部件。
2.如权利要求1所述的方法,其特征在于,在用户界面中显示所述部件之后,该方法还包括:
根据用户对所述部件的操作指令,调用所述第四信息中与所述操作指令对应的行为,并执行所调用的行为;
根据用户对所述部件的操作指令,获取所述第三信息中包含的表示所述部件在所述操作指令对应的操作状态下的显示样式;以及
根据获取到的显示样式在用户界面中显示所述部件。
3.如权利要求1所述的方法,其特征在于,若所述部件包括至少两个子部件,所述注册信息还包括:用于表示所述部件所包含的各子部件之间的嵌套关系的第五信息;
其中,所述部件的属性信息包括所述部件所包含的各子部件的属性信息;所述第一信息包括分别表示所述部件所包含的各子部件的组成部分的信息;所述第二信息包括分别表示与所述部件所包含的各子部件相关联的业务数据的信息;所述第三信息包括分别表示所述部件所包含的各子部件在不同操作状态下的显示样式的信息;所述第四信息包括分别表示所述部件所包含的各子部件能够执行的各种行为的信息。
4.如权利要求3所述的方法,其特征在于,根据所述部件的属性信息、所述第一信息和所述第二信息,生成所述部件的结构,包括:
针对所述部件所包含的每个子部件,根据该子部件对应的属性信息、所述第一信息中表示该子部件的组成部分的信息和所述第二信息中表示该子部件相关联的业务数据的信息,生成该子部件的结构;以及
根据所述第五信息和生成的所述部件所包含的各子部件的结构,生成所述部件的结构。
5.如权利要求3所述的方法,其特征在于,根据所述第四信息,生成所述部件能够执行各种行为,包括:
根据所述第四信息中包含的表示所述部件所包含的各子部件能够执行的各种行为的信息,生成所述部件所包含的各子部件能够执行的各种行为。
6.如权利要求3所述的方法,其特征在于,根据所述第三信息,生成所述部件在不同操作状态下的显示样式,并调用所述第三信息中表示所述部件在未操作状态下的显示样式,在用户界面中显示所述部件,包括:
根据所述第三信息中包含的表示所述部件所包含的各子部件在不同操作状态下的显示样式,生成所述部件所包含的各子部件在不同操作状态下的显示样式,并调用第三信息中表示所述部件所包含的各子部件在未操作状态下的显示样式,在用户界面中显示所述部件。
7.如权利要求3~6任一项所述的方法,其特征在于,在用户界面中显示所述部件之后,该方法还包括:
根据用户对所述部件的各子部件的操作指令,调用所述第四信息中与所述操作指令对应的各子部件需要执行的行为,并执行所调用的行为;
根据用户对所述部件的各子部件的操作指令,获取所述第三信息中包含的分别表示所述部件所包含的各子部件在所述操作指令对应的操作状态下的显示样式;以及
根据获取到的显示样式在用户界面中显示所述部件。
8.一种生成用户界面中所包含的部件的装置,其特征在于,该装置包括:
解析模块,用于获取并解析用户在用户界面开发过程中输入的用户所设计的部件的注册信息,所述注册信息包括:所述部件的属性信息、用于表示所述部件的组成部分的第一信息、用于表示与所述部件相关联的业务数据的第二信息、用于表示所述部件在不同操作状态下的显示样式的第三信息、和用于表示所述部件能够执行的各种行为的第四信息;
第一处理模块,用于根据所述部件的属性信息、所述第一信息和所述第二信息,生成所述部件的结构;
第二处理模块,用于根据所述第四信息,生成所述部件能够执行的各种行为;
第三处理模块,用于生成所述部件在不同操作状态下的显示样式,并调用所述第三信息中表示所述部件在未操作状态下的显示样式,在用户界面中显示所述部件。
9.如权利要求8所述的装置,其特征在于,该装置还包括:
第四处理模块,用于根据用户对所述部件的操作指令,调用所述第四信息中与所述操作指令对应的行为,并执行所调用的行为;根据用户对所述部件的操作指令,获取所述第三信息中包含的表示所述部件在所述操作指令对应的操作状态下的显示样式;以及根据获取到的显示样式在用户界面中显示所述部件。
10.如权利要求8所述的装置,其特征在于,若所述部件包括至少两个子部件,所述注册信息还包括:用于表示所述部件所包含的各子部件之间的嵌套关系的第五信息;
其中,所述部件的属性信息包括所述部件所包含的各子部件的属性信息;所述第一信息包括分别表示所述部件所包含的各子部件的组成部分的信息;所述第二信息包括分别表示与所述部件所包含的各子部件相关联的业务数据的信息;所述第三信息包括分别表示所述部件所包含的各子部件在不同操作状态下的显示样式的信息;所述第四信息包括分别表示所述部件所包含的各子部件能够执行的各种行为的信息。
11.如权利要求10所述的装置,其特征在于,所述第一处理模块具体用于:
针对所述部件所包含的每个子部件,根据该子部件对应的属性信息、所述第一信息中表示该子部件的组成部分的信息和所述第二信息中表示该子部件相关联的业务数据的信息,生成该子部件的结构;以及根据所述第五信息和生成的所述部件所包含的各子部件的结构,生成所述部件的结构。
12.如权利要求10所述的装置,其特征在于,所述第二处理模块具体用于:
根据所述第四信息中包含的表示所述部件所包含的各子部件能够执行的各种行为的信息,生成所述部件所包含的各子部件能够执行的各种行为。
13.如权利要求10所述的装置,其特征在于,所述第三处理模块具体用于:
根据所述第三信息中包含的表示所述部件所包含的各子部件在不同操作状态下的显示样式,生成所述部件所包含的各子部件在不同操作状态下的显示样式,并调用第三信息中表示所述部件所包含的各子部件在未操作状态下的显示样式,在用户界面中显示所述部件。
14.如权利要求10~13任一项所述的装置,其特征在于,该装置还包括:
第四处理模块,用于根据用户对所述部件的各子部件的操作指令,调用所述第四信息中与所述操作指令对应的各子部件需要执行的行为,并执行所调用的行为;根据用户对所述部件的各子部件的操作指令,获取所述第三信息中包含的分别表示所述部件所包含的各子部件在所述操作指令对应的操作状态下的显示样式;以及根据获取到的显示样式在用户界面中显示所述部件。
CN201410503422.0A 2014-09-26 2014-09-26 一种用户界面中所包含的部件的生成方法和装置 Expired - Fee Related CN104267954B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201410503422.0A CN104267954B (zh) 2014-09-26 2014-09-26 一种用户界面中所包含的部件的生成方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201410503422.0A CN104267954B (zh) 2014-09-26 2014-09-26 一种用户界面中所包含的部件的生成方法和装置

Publications (2)

Publication Number Publication Date
CN104267954A true CN104267954A (zh) 2015-01-07
CN104267954B CN104267954B (zh) 2018-02-16

Family

ID=52159478

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201410503422.0A Expired - Fee Related CN104267954B (zh) 2014-09-26 2014-09-26 一种用户界面中所包含的部件的生成方法和装置

Country Status (1)

Country Link
CN (1) CN104267954B (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106293685A (zh) * 2015-06-23 2017-01-04 阿里巴巴集团控股有限公司 组件生成方法及组件生成装置
CN108446117A (zh) * 2018-03-20 2018-08-24 苏州思必驰信息科技有限公司 在语音对话平台的产品中配置ui的方法及系统
CN112346619A (zh) * 2020-11-17 2021-02-09 珠海格力电器股份有限公司 组态软件控制方法和装置

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1627257A (zh) * 2003-06-19 2005-06-15 微软公司 用于创建模块化web应用的框架
CN101882074A (zh) * 2010-03-15 2010-11-10 浪潮集团山东通用软件有限公司 一种用于图形用户界面组合及布局的方法与系统
CN101963900A (zh) * 2009-07-23 2011-02-02 北京数码大方科技有限公司 Ui层的行为传播控制方法
CN102270125A (zh) * 2010-06-04 2011-12-07 中兴通讯股份有限公司 Web应用的开发装置及其开发方法
CN202177892U (zh) * 2011-06-04 2012-03-28 中国移动通信集团内蒙古有限公司 Web UI控件定制系统
CN102646038A (zh) * 2012-02-28 2012-08-22 广州市动景计算机科技有限公司 控件内容展现方法、控件内容展现装置以及移动终端

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1627257A (zh) * 2003-06-19 2005-06-15 微软公司 用于创建模块化web应用的框架
CN101963900A (zh) * 2009-07-23 2011-02-02 北京数码大方科技有限公司 Ui层的行为传播控制方法
CN101882074A (zh) * 2010-03-15 2010-11-10 浪潮集团山东通用软件有限公司 一种用于图形用户界面组合及布局的方法与系统
CN102270125A (zh) * 2010-06-04 2011-12-07 中兴通讯股份有限公司 Web应用的开发装置及其开发方法
CN202177892U (zh) * 2011-06-04 2012-03-28 中国移动通信集团内蒙古有限公司 Web UI控件定制系统
CN102646038A (zh) * 2012-02-28 2012-08-22 广州市动景计算机科技有限公司 控件内容展现方法、控件内容展现装置以及移动终端

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106293685A (zh) * 2015-06-23 2017-01-04 阿里巴巴集团控股有限公司 组件生成方法及组件生成装置
CN108446117A (zh) * 2018-03-20 2018-08-24 苏州思必驰信息科技有限公司 在语音对话平台的产品中配置ui的方法及系统
CN112346619A (zh) * 2020-11-17 2021-02-09 珠海格力电器股份有限公司 组态软件控制方法和装置
CN112346619B (zh) * 2020-11-17 2022-05-13 珠海格力电器股份有限公司 组态软件控制方法和装置

Also Published As

Publication number Publication date
CN104267954B (zh) 2018-02-16

Similar Documents

Publication Publication Date Title
WO2018228211A1 (zh) 应用转换方法、装置及设备
US9886268B1 (en) Dual programming interface
EP3304286B1 (en) Data binding dependency analysis
CN102221993B (zh) 复杂用户界面状态变更的声明性定义
CN106062711B (zh) 用于复合控件的方法、系统和计算机存储介质
US11194050B2 (en) Processing unit, software and method for controlling interactive components
CN105630939B (zh) 一种通用画布输入接口设计方法及装置
US11635977B2 (en) Enhanced target selection for robotic process automation
US20110072371A1 (en) Application programming interface for user interface creation
Chowdhury Mastering Visual Studio 2017
Barua et al. Mobile Applications Development: With Python in Kivy Framework
CN104267954A (zh) 一种用户界面中所包含的部件的生成方法和装置
Bishop Multi-platform user interface construction: a challenge for software engineering-in-the-small
US7984416B2 (en) System and method for providing class definitions in a dynamically typed array-based language
Swearngin et al. Genie: Input Retargeting on the Web through Command Reverse Engineering
Hu et al. An Event Based GUI Programming Toolkit for Embedded System
Stephens Start Here! Fundamentals of Microsoft. NET Programming
Gundecha et al. Learn Selenium: Build data-driven test frameworks for mobile and web applications with Selenium Web Driver 3
Fatima et al. Extending interaction flow modeling language (ifml) for android user interface components
Tsai et al. Pewss: A platform of extensible workflow simulation service for workflow scheduling research
Cimitile et al. Automatic Generation of Multi Platform Web Map Mobile Applications.
CN106445487B (zh) 用于控制交互式组件的处理单元、软件以及方法
KR102644170B1 (ko) 화면 구성 요소에 대한 선택과 좌표 정보 수집을 지원하는 방법
Matsui et al. MDD for Smartphone Application with Smartphone Feature Specific Model and GUI Builder
RU2799988C2 (ru) Система и способ динамической визуализации элементов программного обеспечения

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant
CF01 Termination of patent right due to non-payment of annual fee

Granted publication date: 20180216

Termination date: 20190926

CF01 Termination of patent right due to non-payment of annual fee