CN110569096A - 去代码化制作人机交互界面的系统、方法、介质及设备 - Google Patents
去代码化制作人机交互界面的系统、方法、介质及设备 Download PDFInfo
- Publication number
- CN110569096A CN110569096A CN201910769373.8A CN201910769373A CN110569096A CN 110569096 A CN110569096 A CN 110569096A CN 201910769373 A CN201910769373 A CN 201910769373A CN 110569096 A CN110569096 A CN 110569096A
- Authority
- CN
- China
- Prior art keywords
- resource file
- picture
- animation
- component
- effect
- 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
Links
Classifications
-
- 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
Abstract
本申请的去代码化制作人机交互界面的系统、方法、介质及设备,系统包括:一或多个可视化制作工具,用于接收指令以执行对形成人机交互界面的画面所需资源文件的构建动作,包括:制作与画面的静态效果相关的静态效果资源文件、与画面的动画效果相关的动态效果资源文件;制作记载动画效果同其触发器间关联的第一关联资源文件、记载画面间跳转所依据触发器间关联关系的第二关联资源文件、和记载UI组件与业务逻辑功能间关联关系的第三关联资源文件;资源存储系统,用于存储各该资源文件;UI框架引擎,用于解析资源存储系统中的各资源文件以将其内容呈现于所述画面;通过上述系统真正实现去代码化实现人机交互界面,有效降低代码量而节省大量成本。
Description
技术领域
本申请涉及软件开发技术领域,尤其涉及去代码化制作人机交互界面的系统、方法、介质及设备。
背景技术
在市场上目前关于“人机交互界面”或者说“应用程序的GUI(Graphics UserInterface)部分”的实现框架,有如下几大类:
传统和基础性的GUI框架,代表产品如下:1)Win32+WTL、MFC、.net FORM;2)QT\QML;3)HTML5+CSS3+JavaScript;4)Android JAVA Framework;5)WPF。
这类框架有这样的特点和问题:1)需要通过强编程语言(C#、C++、JAVA,)或弱编程语言(QML、HTML5、JavaScript)来实现界面功能,开发模式以编写程序代码为主,开发效率低下,质量控制困难;2)是针对软件工程师的开发框架,无法高效衔接视觉设计师和交互设计师的设计输出。
其它类的实现框架,例如专注某一特定功能范畴的GUI框架,代表产品如下:1)Flash+ActionScript、FLEX;2)EB GUIDE;3)CGI Studio;4)Kanzi;5)Mentor。
这类框架有这样的特点和问题:1)专注于某一特定功能范畴,比如EB GUIDE,擅长制作画面内和画面间的状态机,Flash+ActionScript擅长制作动画,Kanzi和Mentor擅长制作画面内的视觉效果;2)针对例如智能驾驶舱的人机交互界面和普通应用程序的GUI界面等画面关系复杂且交互应用复杂的应用来讲,使用该类框架实现将会有各种不足,还是需要用代码来实现某些界面功能。
发明内容
鉴于以上所述现有技术的缺点,本申请的目的在于提供去代码化制作人机交互界面的系统、方法、介质及设备,解决现有技术中GUI框架仍存在代码化、应用场景受限及能力不足等问题。
为实现上述目标及其他相关目标,本申请提供一种去代码化制作人机交互界面的系统,包括:一或多个可视化制作工具,用于接收指令以执行对形成人机交互界面的画面所需资源文件的构建动作,包括:制作与画面的静态效果相关的静态效果资源文件;制作与画面的动画效果相关的动态效果资源文件;制作记载画面的各种所述动画效果同其触发所依据的触发器间的关联关系的第一关联资源文件;制作记载画面间跳转所依据触发器间关联关系的第二关联资源文件;制作记载画面的UI组件与业务逻辑功能间关联关系的第三关联资源文件;UI框架引擎,用于解析静态效果资源文件、动态效果资源文件、第一关联资源文件、第二关联资源文件、及第三关联资源文件中的一种或多种以将其内容呈现于所述画面。
于本申请的一或多个实施例中,所述静态效果资源文件内容包含:画面的静态结构、及各种UI组件的外观属性值和行为属性值。
于本申请的一或多个实施例中,所述UI框架引擎,包括:UI框架组件库模块,用于解析所述静态效果资源文件并实现画面的各种静态效果。
于本申请的一或多个实施例中,所述动态效果资源文件包括:动画资源文件,其内容包含:UI组件的动画数据;以及画面状态资源文件,其内容包含:关于所述画面的各种外观状态的画面数据。
于本申请的一或多个实施例中,所述UI框架引擎包括:动画模块、及画面内状态模块;所述动画模块,用于解析所述动画资源文件并实现画面中的数值动画、轨迹动画、及关键帧动画中的一种或多种;所述画面内状态模块,用于解析所述画面状态资源文件并实现画面的各种外观状态。
于本申请的一或多个实施例中,所述动画模块及画面内状态模块,用于在第一关联资源文件所定义的触发器作用时,实现关联于所述触发器的动画和/或画面外观状态。
于本申请的一或多个实施例中,所述的系统所述UI框架引擎包括:画面间迁移模块,用于在第二关联资源文件所定义的触发器作用时,实现对应的画面间跳转。
于本申请的一或多个实施例中,所述触发器对应于触发事件;所述触发器在触发事件发生时作用。
于本申请的一或多个实施例中,所述业务逻辑功能包括:业务属性数据在画面上的呈现业务列表数据在画面上的呈现、以及通过在画面的操作下发业务命令中的一或多种;所述建立用于画面的UI组件与业务逻辑功能间关联关系,包括以下中的一或多种:1)建立业务属性数据和UI组件的属性值间的关联关系,以供至少实现UI组件的属性值随业务属性数据的变化而变化;2)建立业务列表数据和UI组件中UI列表组件的关联关系,以供至少实现UI列表组件的条目和/或内容随业务列表数据的变化而变化;3)建立业务UI组件的事件和业务命令间的关联关系,以供至少实现:当UI组件的事件发生时,利用关联的业务命令触发业务逻辑功能的执行。
于本申请的一或多个实施例中,业务属性数据和UI组件的属性值间的关联关系是双向的;其中,所述双向指的是:当业务属性数据变化而引起该UI组件的属性值变化,以催动UI画面的刷新;以及,当UI组件的属性值变化时,引起业务属性数据的变化。
为实现上述目标及其他相关目标,本申请提供一种去代码化制作人机交互界面的方法,包括:通过可视化制作工具执行对形成人机交互界面的画面所需资源文件的构建动作,包括制作与画面的静态效果相关的静态效果资源文件;制作与画面的动画效果相关的动态效果资源文件;制作记载画面的各种所述动画效果同其触发所依据的触发器间的关联关系的第一关联资源文件;制作记载画面间跳转所依据触发器间关联关系的第二关联资源文件;制作记载画面的UI组件与业务逻辑功能间关联关系的第三关联资源文件;解析该静态效果资源文件、动态效果资源文件、第一关联资源文件、第二关联资源文件、及第三关联资源文件,以将其内容呈现于所述画面。
为实现上述目标及其他相关目标,本申请提供一种计算机可读存储介质,存储有计算机程序,所述计算机程序被运行时实现所述的系统。
为实现上述目标及其他相关目标,本申请提供一种计算机设备,包括:一或多个存储器存储有计算机程序;一或多个处理器,用于运行所述计算机程序,以实现所述的系统。
如上所述,本申请的去代码化制作人机交互界面的系统、方法、介质及设备,系统包括:一或多个可视化制作工具,用于接收指令以执行对形成人机交互界面的画面所需资源文件的构建动作,包括:制作与画面的静态效果相关的静态效果资源文件、与画面的动画效果相关的动态效果资源文件;制作记载动画效果同其触发器间关联的第一关联资源文件、记载画面间跳转所依据触发器间关联关系的第二关联资源文件、和记载UI组件与业务逻辑功能间关联关系的第三关联资源文件;资源存储系统,用于存储各该资源文件;UI框架引擎,用于解析资源存储系统中的各资源文件以将其内容呈现于所述画面;通过上述系统真正实现去代码化实现人机交互界面,有效降低代码量而节省大量成本。
附图说明
图1显示为本申请实施例中去代码化制作人机交互界面的系统的结构示意图。
图2显示为本申请实施例中去代码化制作人机交互界面的方法的流程示意图。
图3显示为本申请实施例中计算机设备的结构示意图。
具体实施方式
以下通过特定的具体实例说明本申请的实施方式,本领域技术人员可由本说明书所揭露的内容轻易地了解本申请的其他优点与功效。本申请还可以通过另外不同的具体实施方式加以实施或应用系统,本说明书中的各项细节也可以基于不同观点与应用系统,在没有背离本申请的精神下进行各种修饰或改变。需说明的是,在不冲突的情况下,本申请中的实施例及实施例中的特征可以相互组合。
下面以附图为参考,针对本申请的实施例进行详细说明,以便本申请所属技术领域的技术人员能够容易地实施。本申请可以以多种不同形态体现,并不限定于此处说明的实施例。
为了明确说明本申请,省略与说明无关的电路部件,对于通篇说明书中相同或类似的构成要素,赋予了相同的参照符号。
在通篇说明书中,当说某电路部件与另一电路部件“连接”时,这不仅包括“直接连接”的情形,也包括在其中间把其它元件置于其间而“间接连接”的情形。另外,当说某种电路部件“包括”某种构成要素时,只要没有特别相反的记载,则并非将其它构成要素排除在外,而是意味着可以还包括其它构成要素。
当说某电路部件在另一电路部件“之上”时,这可以是直接在另一电路部件之上,但也可以在其之间伴随着其它电路部件。当对照地说某电路部件“直接”在另一电路部件“之上”时,其之间不伴随其它电路部件。
虽然在一些实例中术语第一、第二等在本文中用来描述各种元件,但是这些元件不应当被这些术语限制。这些术语仅用来将一个元件与另一个元件进行区分。例如,第一接口及第二接口等描述。再者,如同在本文中所使用的,单数形式“一”、“一个”和“该”旨在也包括复数形式,除非上下文中有相反的指示。应当进一步理解,术语“包含”、“包括”表明存在所述的特征步骤、操作、元件、组件、项目、种类、和/或组,但不排除一个或多个其他特征、步骤、操作、元件、组件、项目、种类、和/或组的存在、出现或添加。此处使用的术语“或”和“和/或”被解释为包括性的,或意味着任一个或任何组合。因此,“A、B或C”或者“A、B和/或C”意味着“以下任一个:A;B;C;A和B;A和C;B和C;A、B和C”。仅当元件、功能、步骤或操作的组合在某些方式下内在地互相排斥时,才会出现该定义的例外。
此处使用的专业术语只用于言及特定实施例,并非意在限定本申请。此处使用的单数形态,只要语句未明确表示出与之相反的意义,那么还包括复数形态。在说明书中使用的“包括”的意义是把特定特性、区域、整数、步骤、作业、要素及/或成份具体化,并非排除其它特性、区域、整数、步骤、作业、要素及/或成份的存在或附加。
表示“下”、“上”等相对空间的术语可以为了更容易地说明在附图中图示的一电路部件相对于另一电路部件的关系而使用。这种术语是指,不仅是在附图中所指的意义,还包括使用中的装置的其它意义或作业。例如,如果翻转附图中的装置,曾说明为在其它电路部件“下”的某电路部件则说明为在其它电路部件“上”。因此,所谓“下”的示例性术语,全部包括上与下方。装置可以旋转90°或其它角度,代表相对空间的术语也据此来解释。
虽然未不同地定义,但包括此处使用的技术术语及科学术语,所有术语均具有与本申请所属技术领域的技术人员一般理解的意义相同的意义。普通使用的字典中定义的术语追加解释为具有与相关技术文献和当前提示的内容相符的意义,只要未进行定义,不得过度解释为理想的或非常公式性的意义。
人机交互界面包括应用程序的图形用户接口(GUI)部分,是由多个图形化的画面组成,在这些画面间会发生各种跳转;并且,在画面中也存在着各种UI组件要素,有的是静态的,例如框线;有的是动态的,例如动态变化的UI组件要素。
现有技术的问题,例如传统UI框架开发效率低下的原因,在于依赖代码化实现;而如果能实现去代码化实现人机交互界面,则能省去大量代码从而有效提升开发效率。
如果要实现“去代码化实现人机交互界面”的目的,需要解决的问题有:
A)画面内的静态效果如何呈现?
B)画面内的动态变化如何呈现和如何自动触发?
C)画面间的跳转行为如何定义和如何自动触发?
D)画面元素如何和业务逻辑功能相关联?
本申请实施例中提供的方案,通过技术手段分别解决上述问题,从而实现真实有效的去代码化实现人机交互界面的目的。
如图1所示,展示本申请实施例中去代码化制作人机交互界面的系统的结构示意图。
如图所示,所述系统包括:一或多个可视化制作工具101、及UI框架引擎102。
在一或多个实施例中,所述可视化制作工具101可以是通过UI界面实现,展示于各种计算机设备的显示屏。
其中,所述计算机设备可以是电脑、笔记本电脑、平板电脑、智能手机或其它设备;所述显示屏可以是LCD、LED、OLED或其它类型。
所述可视化制作工具101,是用于替代现有技术中用户的代码编写工作。通过所述可视化制作工具101所提供的UI界面来接受用户操作,例如对UI界面中图形控件的点击、拖曳等,就能实现所需功能;相比于代码编写来实现功能,通过可视化制作工具101进行工作的直观度得到绝大提升,效率也得到相应的巨大提升。
为了实现人机交互界面的目的,即实现能呈现于在显示屏上的人机交互界面的目的,所述一或多个可视化制作工具101,用于接收指令以执行对形成人机交互界面的画面所需资源文件的构建动作。
在一或多个实施例中,为解决前述“画面内的静态效果如何呈现”问题,通过所述一或多个可视化制作工具101来制作与画面的静态效果相关的静态效果资源文件。
可选的,所述静态效果资源文件内容包含:画面的静态结构、及各种UI组件的外观属性值和行为属性值。
其中,所述UI组件包括按钮、列表、网格、面板、表单、对话框、列表等;相应的所述静态结构可以包含画面中各种UI组件的预定布局;所述外观属性值即表示各UI组件外观(例如颜色、形状、尺寸等中的一或多种)的参数值;所述行为属性值即表示各UI组件的行为(例如对话框显示文字等)的参数值。
用户可以通过操作所述一或多个可视化制作工具101将这些数据制作成静态效果资源文件。
所述UI框架引擎102,用于解析资源存储系统103中的各资源文件以将其内容呈现于所述画面。
可选的,对应于静态效果的呈现问题,所述UI框架引擎102包括UI框架组件库模块121,用于解析所述静态效果资源文件并实现画面的各种静态效果。
在一或多个实施例中,为解决前述“画面内的动态变化如何呈现和如何自动触发”问题,可通过所述一或多个可视化制作工具101制作的与画面的动画效果相关的动态效果资源文件,配合制作的记载画面的各种所述动画效果同其触发所依据的触发器间的关联关系的第一关联资源文件;进而,利用动态效果资源文件和第一关联资源文件的记载数据,在触发器的作用下,触发关联的动画效果。
具体的,所述动态效果资源文件包括:动画资源文件,其内容包含:UI组件的动画数据;以及画面状态资源文件,其内容包含:关于所述画面的各种外观状态的画面数据。
其中,UI组件的动画数据,可以理解的是,可以用于实现例如按钮按下、弹起等动画,由于相关例子较多,此处不展开一一描述;所述画面的各种外观状态的画面数据,可以理解的是,可以用于实现例如画面中例如颜色变化等动态变化,由于相关例子较多,此处不展开一一描述。
可选的,对应于上述画面动态变化的两种类型,所述动态效果资源文件也可以包括对应两种类型,即动画资源文件,其内容包含:UI组件的动画数据;以及画面状态资源文件,其内容包含:关于所述画面的各种外观状态的画面数据。
用户可以通过操作所述一或多个可视化制作工具101将这些数据制作成动态效果资源文件(即例如动画资源文件及画面状态资源文件)。
于本申请的一或多个实施例中,所述触发器对应于触发事件;所述触发器在触发事件发生时作用。
举例来说,用户在按钮图标上点击操作,触发器对应的触发事件即为“按钮按下”,触发按钮按下的动画。
相应的,为实现动态效果的呈现,所述UI框架引擎102可以分别对应动画资源文件和画面状态资源文件,具有动画模块122、及画面内状态模块123。
其中,所述动画模块122,用于解析所述动画资源文件并实现画面中的数值动画、轨迹动画、及关键帧动画中的一种或多种;
所述画面内状态模块123,用于解析所述画面状态资源文件并实现画面的各种外观状态。
并且,所述动画模块122及画面内状态模块123,用于在第一关联资源文件所定义的触发器作用时,实现关联于所述触发器的动画和/或画面外观状态。
用户可以通过操作所述一或多个可视化制作工具101来制作第一关联资源文件,其中包含每个动画、画面外观状态与相应触发的触发器之间的关系。
各所述触发器可以存在于一触发器系统124,当相应的触发事件发生时而作用,所述动画模块122或画面内状态模块123进行相应画面变化。
例如,“按钮按下”事件发生,对应的触发器A作用,触发器系统124或其它模块根据第一关联资源文件匹配到对应触发器及关联的动画,触发动画模块122进行动画资源文件的解析而获得该关联动画的动画数据,并据以实现相应“按钮按下”的动画在画面中。
或者,所述动画模块122和/或画面内状态模块123自行依据第一关联资源文件的内容来判断作用的触发器是否为已关联动画效果,如果是,则据以实现关联的动画效果的动画数据或画面数据,从而实现在画面中。
在一或多个实施例中,为解决前述“画面间的跳转行为如何定义和如何自动触发”问题,通过所述一或多个可视化制作工具101所制作的记载画面间跳转所依据触发器间关联关系的第二关联资源文件,进而利用和第一关联资源文件的记载数据就可以辨别作用的触发器,进而触发关联的动画效果。
相应的,可选的,所述UI框架引起对应包括画面间迁移模块125,用于在第二关联资源文件所定义的触发器作用时,实现对应的画面间跳转。
举例来说,所述画面间迁移模块125通过解析第二关联资源文件来辨别作用的触发器,例如用户在第一画面状态下按下“确认”按钮,从而触发跳转至所关联的第二画面状态。
需说明的是,本实施例中,用于触发画面间迁移跳转的触发器,也可以存在于前述的触发器系统124中。
可选的,由于画面的动态效果、静态效果、及画面迁移间需存在配合,因此,动画模块122、画面内状态模块123、及画面间迁移模块125可与该UI框架组件库模块121耦合,即能相互通信。
在一或多个实施例中,为解决前述“画面元素如何和业务逻辑功能相关联”问题,可以通过所述一或多个可视化制作工具101来制作记载画面的UI组件与业务逻辑功能间关联关系的第三关联资源文件;进而,利用第三关联资源文件的记载数据,令UI组件能随业务逻辑功能而进行变化,或业务逻辑功能所涉及的业务数据可以随UI组件的变化而变化。
具体来讲,可选的,所述业务逻辑功能包括:业务属性数据在画面上的呈现、业务列表数据在画面上的呈现、以及通过在画面的操作下发业务命令中的一或多种。
相应的,所述建立用于画面的UI组件与业务逻辑功能间关联关系,包括以下中的一或多种:
1)建立业务属性数据和UI组件的属性值间的关联关系,以供至少实现UI组件的属性值随业务属性数据的变化而变化。
可选的,业务属性数据和UI组件的属性值间的关联关系是双向的;其中,所述双向指的是:当业务属性数据变化而引起该UI组件的属性值变化,以催动UI画面的刷新;以及,当UI组件的属性值变化时,引起业务属性数据的变化。
举例来说,某种业务属性数据的值通过例如颜色图形标识的UI组件展示,随业务属性数据的值变化,颜色图形标识的颜色变化;可选的,在其它实施例中,也可以利用该双向关联关系,例如修改UI组件列表中显示的数值,例如设置某个运行参数,使得相应业务属性数据的值也随之变化,即设置成该运行参数。
2)建立业务列表数据和UI组件中UI列表组件的关联关系,以供至少实现UI列表组件的条目和/或内容随业务列表数据的变化而变化。
举例来说,当删除/添加业务列表数据中的条目、内容,相应的UI列表组件中的条目、内容可以被删除/添加。
3)建立业务UI组件的事件和业务命令间的关联关系,以供至少实现:当UI组件的事件发生时,利用关联的业务命令触发业务逻辑功能的执行。
根据上述可知,由UI组件与业务逻辑功能间关联关系而产生的画面变化中,可能涉及静态、动态、画面迁移等中的一或多种;因此,可以通过UI框架组件库模块121、动画模块122、画面内状态模块123、及画面间迁移模块125中的一个或多个来解析该第三关联资源文件以实现所需变化。
举例来说,当用户点击人机交互界面中对应某个业务逻辑功能的“运行”按钮时,产生业务命令,下发至应用层下的中间层,中间层中对应该业务逻辑功能的程序就运行以执行相应功能。
该静态效果资源文件、动态效果资源文件、第一关联资源文件、第二关联资源文件、及第三关联资源文件,建立后可以存储在一所述资源存储系统103中,以供被调用。
结合上述实施例可知,用户可以通过一或多个所述可视化制作工具101来自行制作各种资源文件,各种资源文件可以存储在资源存储系统103中;进而,通过UI框架引擎102来解析各种资源文件,从而实现人机交互图形界面中画面的实现,包含:画面的静态效果、动态效果、画面切换、及与业务逻辑功能结合。
在此过程中,用户不需要进行代码化工作来形成资源、或建立资源的绑定关系,真正实现去代码化制作人机交互界面。
以汽车智能驾驶舱系统(包括:仪表盘、抬头显示器、中控娱乐系统、虚拟控制屏系统)的人机交互界面的实现为例,根据经验,其总代码量在15万行左右,其中纯GUI部分的代码在10万行左右,其余部分是业务逻辑代码,到产品SOP质量阶段,总共工作量大约在300人月。如果借助于本申请的去代码化制作人机交互界面系统,则10万行左右的GUI部分代码将不再需要了,这样可以直接节省大约200人月的成本。带来的经济效益是显著的。
如图2所示,展示本申请实施例中去代码化制作人机交互界面的方法,该方法可以应用于图1实施例中的系统;由于原理与图1实施例基本相同,则本实施例中对具体技术细节不作重复赘述。
所述方法包括:
步骤S201:通过可视化制作工具执行对形成人机交互界面的画面所需资源文件的构建动作,包括:制作与画面的静态效果相关的静态效果资源文件;制作与画面的动画效果相关的动态效果资源文件;制作记载画面的各种所述动画效果同其触发所依据的触发器间的关联关系的第一关联资源文件;制作记载画面间跳转所依据触发器间关联关系的第二关联资源文件;制作记载画面的UI组件与业务逻辑功能间关联关系的第三关联资源文件;
步骤S202:解析该静态效果资源文件、动态效果资源文件、第一关联资源文件、第二关联资源文件、及第三关联资源文件,以将其内容呈现于所述画面。
该解析动作可以通过前述实施例中的UI框架引擎来实现。
本申请上述实施例中的去代码化制作人机交互界面的系统,可以通过专用的集成电路实现;也可以通过软件结合硬件电路实现,例如通过装载在计算机设备中的计算机程序实现,如服务器、台式机、笔记本电脑、智能手机、平板电脑等,通过硬件电路运行软件程序实现。
如图3所示,展示本申请实施例中的计算机设备的结构示意图。
在本实施例中,所述计算机设备300包括:一或多个存储器301、及一或多个处理器302。
所述一或多个存储器301,存储有计算机程序;
所述一或多个处理器302,用于运行所述计算机程序,以实现例如图1所示的去代码化制作人机交互界面的系统。
在可能的实现方式中,所述一或多个存储器301可以包括易失性存储器形式的计算机系统可读介质,例如随机存取存储器(RAM)和/或高速缓存存储器,还可以包括一个或多个非暂时的计算机可读存储介质诸如ROM、EEPROM、EPROM、闪存设备、磁盘等,和/或其组合。
在可能的实现方式中,所述一个或多个处理器302能够是任何合适的处理元件(例如处理器核、微处理器、ASIC、FPGA、控制器、微控制器等),并且能够是一个处理器或操作地连接的多个处理器。
另外需说明的是,上述实施例中去代码化制作人机交互界面的系统、各种资源文件的制作过程等实现,所涉及的计算机程序皆可以装载在计算机可读存储介质,所计算机可读存储介质可以是可以保持和存储由指令执行设备使用的指令的有形设备。计算机可读存储介质例如可以是、但不限于电存储设备、磁存储设备、光存储设备、电磁存储设备、半导体存储设备或者上述的任意合适的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括:便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、静态随机存取存储器(SRAM)、便携式压缩盘只读存储器(CD-ROM)、数字多功能盘(DVD)、记忆棒、软盘、机械编码设备、例如其上存储有指令的打孔卡或凹槽内凸起结构以及上述的任意合适的组合。这里所使用的计算机可读存储介质不被解释为瞬时信号本身,诸如无线电波或者其他自由传播的电磁波、通过波导或其他传输媒介传播的电磁波(例如,通过光纤电缆的光脉冲)、或者通过电线传输的电信号。
综上所述,本申请的去代码化制作人机交互界面的系统、方法、介质及设备,系统包括:一或多个可视化制作工具,用于接收指令以执行对形成人机交互界面的画面所需资源文件的构建动作,包括:制作与画面的静态效果相关的静态效果资源文件、与画面的动画效果相关的动态效果资源文件;制作记载动画效果同其触发器间关联的第一关联资源文件、记载画面间跳转所依据触发器间关联关系的第二关联资源文件、和记载UI组件与业务逻辑功能间关联关系的第三关联资源文件;资源存储系统,用于存储各该资源文件;UI框架引擎,用于解析资源存储系统中的各资源文件以将其内容呈现于所述画面;通过上述系统真正实现去代码化实现人机交互界面,有效降低代码量而节省大量成本
上述实施例仅例示性说明本申请的原理及其功效,而非用于限制本申请。任何熟悉此技术的人士皆可在不违背本申请的精神及范畴下,对上述实施例进行修饰或改变。因此,举凡所属技术领域中具有通常知识者在未脱离本申请所揭示的精神与技术思想下所完成的一切等效修饰或改变,仍应由本申请的权利要求所涵盖。
Claims (13)
1.一种去代码化制作人机交互界面的系统,其特征在于,包括:
一或多个可视化制作工具,用于接收指令以执行对形成人机交互界面的画面所需资源文件的构建动作,包括:制作与画面的静态效果相关的静态效果资源文件;制作与画面的动画效果相关的动态效果资源文件;制作记载画面的各种所述动画效果同其触发所依据的触发器间的关联关系的第一关联资源文件;制作记载画面间跳转所依据触发器间关联关系的第二关联资源文件;制作记载画面的UI组件与业务逻辑功能间关联关系的第三关联资源文件;
UI框架引擎,用于解析静态效果资源文件、动态效果资源文件、第一关联资源文件、第二关联资源文件、及第三关联资源文件中的一种或多种以将其内容呈现于所述画面。
2.根据权利要求1所述的系统,其特征在于,所述静态效果资源文件内容包含:画面的静态结构、及各种UI组件的外观属性值和行为属性值。
3.根据权利要求1所述的系统,其特征在于,所述UI框架引擎,包括:UI框架组件库模块,用于解析所述静态效果资源文件并实现画面的各种静态效果。
4.根据权利要求1所述的系统,其特征在于,所述动态效果资源文件包括:
动画资源文件,其内容包含:UI组件的动画数据;以及
画面状态资源文件,其内容包含:关于所述画面的各种外观状态的画面数据。
5.根据权利要求4所述的系统,其特征在于,所述UI框架引擎包括:动画模块、及画面内状态模块;
所述动画模块,用于解析所述动画资源文件并实现画面中的数值动画、轨迹动画、及关键帧动画中的一种或多种;
所述画面内状态模块,用于解析所述画面状态资源文件并实现画面的各种外观状态。
6.根据权利要求5所述的系统,其特征在于,所述动画模块及画面内状态模块,用于在第一关联资源文件所定义的触发器作用时,实现关联于所述触发器的动画和/或画面外观状态。
7.根据权利要求1所述的系统,其特征在于,所述UI框架引擎包括:画面间迁移模块,用于在第二关联资源文件所定义的触发器作用时,实现对应的画面间跳转。
8.根据权利要求1、6或8所述的系统,其特征在于,所述触发器对应于触发事件;所述触发器在触发事件发生时作用。
9.根据权利要求1所述的系统,其特征在于,所述业务逻辑功能包括:业务属性数据在画面上的呈现、业务列表数据在画面上的呈现、以及通过在画面的操作下发业务命令中的一或多种;
所述建立用于画面的UI组件与业务逻辑功能间关联关系,包括以下中的一或多种:
1)建立业务属性数据和UI组件的属性值间的关联关系,以供至少实现UI组件的属性值随业务属性数据的变化而变化;
2)建立业务列表数据和UI组件中UI列表组件的关联关系,以供至少实现UI列表组件的条目和/或内容随业务列表数据的变化而变化;
3)建立业务UI组件的事件和业务命令间的关联关系,以供至少实现:当UI组件的事件发生时,利用关联的业务命令触发业务逻辑功能的执行。
10.根据权利要求1所述的系统,其特征在于,业务属性数据和UI组件的属性值间的关联关系是双向的;其中,所述双向指的是:当业务属性数据变化而引起该UI组件的属性值变化,以催动UI画面的刷新;以及,当UI组件的属性值变化时,引起业务属性数据的变化。
11.一种去代码化制作人机交互界面的方法,其特征在于,包括:
通过可视化制作工具执行对形成人机交互界面的画面所需资源文件的构建动作,包括:制作与画面的静态效果相关的静态效果资源文件;制作与画面的动画效果相关的动态效果资源文件;制作记载画面的各种所述动画效果同其触发所依据的触发器间的关联关系的第一关联资源文件;制作记载画面间跳转所依据触发器间关联关系的第二关联资源文件;制作记载画面的UI组件与业务逻辑功能间关联关系的第三关联资源文件;
解析该静态效果资源文件、动态效果资源文件、第一关联资源文件、第二关联资源文件、及第三关联资源文件,以将其内容呈现于所述画面。
12.一种计算机可读存储介质,其特征在于,存储有计算机程序,所述计算机程序被运行时实现如权利要求1至10中任一项所述的系统。
13.一种计算机设备,其特征在于,包括:
一或多个存储器,存储有计算机程序;
一或多个处理器,用于运行所述计算机程序,以实现如权利要求1至10中任一项所述的系统。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201910769373.8A CN110569096B (zh) | 2019-08-20 | 2019-08-20 | 去代码化制作人机交互界面的系统、方法、介质及设备 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201910769373.8A CN110569096B (zh) | 2019-08-20 | 2019-08-20 | 去代码化制作人机交互界面的系统、方法、介质及设备 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN110569096A true CN110569096A (zh) | 2019-12-13 |
CN110569096B CN110569096B (zh) | 2022-10-18 |
Family
ID=68773954
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201910769373.8A Active CN110569096B (zh) | 2019-08-20 | 2019-08-20 | 去代码化制作人机交互界面的系统、方法、介质及设备 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN110569096B (zh) |
Cited By (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111209350A (zh) * | 2019-12-31 | 2020-05-29 | 优地网络有限公司 | 系统开发方法、装置、终端设备及存储介质 |
CN111339529A (zh) * | 2020-03-13 | 2020-06-26 | 杭州指令集智能科技有限公司 | 低代码的业务编排构件运行的管理框架与方法、计算设备及介质 |
CN111897615A (zh) * | 2020-08-06 | 2020-11-06 | 福建天晴在线互动科技有限公司 | 一种在界面中实现动画效果编辑的方法及其系统 |
WO2023220094A1 (en) * | 2022-05-10 | 2023-11-16 | Apple Inc. | Dynamically resizable content for electronic devices |
Citations (27)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN1997948A (zh) * | 2004-05-04 | 2007-07-11 | 费舍-柔斯芒特系统股份有限公司 | 过程配置和控制环境中的图形集成 |
CN102043611A (zh) * | 2009-10-23 | 2011-05-04 | Tcl集团股份有限公司 | 一种动态生成用户界面的系统及其实现方法 |
CN102122243A (zh) * | 2010-01-07 | 2011-07-13 | 炬力集成电路设计有限公司 | 生成应用程序界面的方法、系统和便携式电子设备 |
CN102360296A (zh) * | 2011-10-20 | 2012-02-22 | 北京金和软件股份有限公司 | 一种基于web的在线表单开发工具 |
CN102819425A (zh) * | 2011-02-01 | 2012-12-12 | 洛克威尔自动控制技术股份有限公司 | 便于自动控制的对显示画面的改进编排和自动导航 |
CN103399750A (zh) * | 2013-08-07 | 2013-11-20 | 北京奇虎科技有限公司 | 用户界面实现方法及装置 |
US20140049547A1 (en) * | 2011-02-01 | 2014-02-20 | Adobe Systems Incorporated | Methods and Systems for Representing Complex Animation using Style Capabilities of Rendering Applications |
US20140081967A1 (en) * | 2012-09-19 | 2014-03-20 | Deep River Ventures, Llc | Methods, Systems, and Program Products for Distinguishing Tags for a Resource |
JP2014134921A (ja) * | 2013-01-09 | 2014-07-24 | Mitsubishi Electric Corp | ユーザインタフェース設計装置及びユーザインタフェース装置 |
CN104199647A (zh) * | 2014-08-18 | 2014-12-10 | 中国建设银行股份有限公司 | 一种基于ibm主机的可视化系统及实现方法 |
WO2015000054A1 (en) * | 2013-07-02 | 2015-01-08 | Youi Labs Inc. | System and method for streamlining user interface development |
CN104714982A (zh) * | 2013-12-17 | 2015-06-17 | 阿里巴巴集团控股有限公司 | 一种网页的加载方法和系统 |
WO2015196828A1 (zh) * | 2014-06-27 | 2015-12-30 | 中兴通讯股份有限公司 | 一种动态更新应用界面的方法、终端及系统 |
CN105359091A (zh) * | 2013-06-18 | 2016-02-24 | 微软技术许可有限责任公司 | 用户界面合并试探法 |
US20160092211A1 (en) * | 2014-09-29 | 2016-03-31 | Radu-Florian Atanasiu | Visualizations of inter-entity calls |
WO2016051241A1 (en) * | 2014-09-29 | 2016-04-07 | Yandex Europe Ag | Method of and system for processing content of a web resource in a browser application |
CN105549980A (zh) * | 2015-12-29 | 2016-05-04 | 武汉斗鱼网络科技有限公司 | 一种安卓应用开发系统 |
CN105786506A (zh) * | 2016-02-26 | 2016-07-20 | 珠海金山网络游戏科技有限公司 | 一种用户界面自动生成的系统及方法 |
CN106097417A (zh) * | 2016-06-07 | 2016-11-09 | 腾讯科技(深圳)有限公司 | 主题生成方法、装置、设备 |
CN106201489A (zh) * | 2016-06-30 | 2016-12-07 | 乐视控股(北京)有限公司 | 一种页面编辑方法和装置 |
TW201727512A (zh) * | 2016-01-21 | 2017-08-01 | 簡聖霖 | 具有可視化編程功能的控制系統及其方法與內儲具有可視化編程功能的控制程式之電腦程式產品 |
CN108600848A (zh) * | 2018-03-15 | 2018-09-28 | 聚好看科技股份有限公司 | 智能电视以及在用户界面上显示内容的方法 |
CN108628608A (zh) * | 2018-04-16 | 2018-10-09 | 朗新科技股份有限公司 | 一种数据可视化的方法及装置 |
CN108846630A (zh) * | 2018-05-25 | 2018-11-20 | 广州衡昊数据科技有限公司 | 一种资源控制系统及方法 |
CN109242934A (zh) * | 2017-07-06 | 2019-01-18 | 阿里巴巴集团控股有限公司 | 一种动画代码的生成方法及设备 |
CN109597614A (zh) * | 2017-09-28 | 2019-04-09 | 华为技术有限公司 | 一种业务页面定制方法及系统 |
CN109739497A (zh) * | 2018-12-06 | 2019-05-10 | 深圳市中农网有限公司 | 页面开发方法、装置、计算机设备及存储介质 |
-
2019
- 2019-08-20 CN CN201910769373.8A patent/CN110569096B/zh active Active
Patent Citations (27)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN1997948A (zh) * | 2004-05-04 | 2007-07-11 | 费舍-柔斯芒特系统股份有限公司 | 过程配置和控制环境中的图形集成 |
CN102043611A (zh) * | 2009-10-23 | 2011-05-04 | Tcl集团股份有限公司 | 一种动态生成用户界面的系统及其实现方法 |
CN102122243A (zh) * | 2010-01-07 | 2011-07-13 | 炬力集成电路设计有限公司 | 生成应用程序界面的方法、系统和便携式电子设备 |
CN102819425A (zh) * | 2011-02-01 | 2012-12-12 | 洛克威尔自动控制技术股份有限公司 | 便于自动控制的对显示画面的改进编排和自动导航 |
US20140049547A1 (en) * | 2011-02-01 | 2014-02-20 | Adobe Systems Incorporated | Methods and Systems for Representing Complex Animation using Style Capabilities of Rendering Applications |
CN102360296A (zh) * | 2011-10-20 | 2012-02-22 | 北京金和软件股份有限公司 | 一种基于web的在线表单开发工具 |
US20140081967A1 (en) * | 2012-09-19 | 2014-03-20 | Deep River Ventures, Llc | Methods, Systems, and Program Products for Distinguishing Tags for a Resource |
JP2014134921A (ja) * | 2013-01-09 | 2014-07-24 | Mitsubishi Electric Corp | ユーザインタフェース設計装置及びユーザインタフェース装置 |
CN105359091A (zh) * | 2013-06-18 | 2016-02-24 | 微软技术许可有限责任公司 | 用户界面合并试探法 |
WO2015000054A1 (en) * | 2013-07-02 | 2015-01-08 | Youi Labs Inc. | System and method for streamlining user interface development |
CN103399750A (zh) * | 2013-08-07 | 2013-11-20 | 北京奇虎科技有限公司 | 用户界面实现方法及装置 |
CN104714982A (zh) * | 2013-12-17 | 2015-06-17 | 阿里巴巴集团控股有限公司 | 一种网页的加载方法和系统 |
WO2015196828A1 (zh) * | 2014-06-27 | 2015-12-30 | 中兴通讯股份有限公司 | 一种动态更新应用界面的方法、终端及系统 |
CN104199647A (zh) * | 2014-08-18 | 2014-12-10 | 中国建设银行股份有限公司 | 一种基于ibm主机的可视化系统及实现方法 |
US20160092211A1 (en) * | 2014-09-29 | 2016-03-31 | Radu-Florian Atanasiu | Visualizations of inter-entity calls |
WO2016051241A1 (en) * | 2014-09-29 | 2016-04-07 | Yandex Europe Ag | Method of and system for processing content of a web resource in a browser application |
CN105549980A (zh) * | 2015-12-29 | 2016-05-04 | 武汉斗鱼网络科技有限公司 | 一种安卓应用开发系统 |
TW201727512A (zh) * | 2016-01-21 | 2017-08-01 | 簡聖霖 | 具有可視化編程功能的控制系統及其方法與內儲具有可視化編程功能的控制程式之電腦程式產品 |
CN105786506A (zh) * | 2016-02-26 | 2016-07-20 | 珠海金山网络游戏科技有限公司 | 一种用户界面自动生成的系统及方法 |
CN106097417A (zh) * | 2016-06-07 | 2016-11-09 | 腾讯科技(深圳)有限公司 | 主题生成方法、装置、设备 |
CN106201489A (zh) * | 2016-06-30 | 2016-12-07 | 乐视控股(北京)有限公司 | 一种页面编辑方法和装置 |
CN109242934A (zh) * | 2017-07-06 | 2019-01-18 | 阿里巴巴集团控股有限公司 | 一种动画代码的生成方法及设备 |
CN109597614A (zh) * | 2017-09-28 | 2019-04-09 | 华为技术有限公司 | 一种业务页面定制方法及系统 |
CN108600848A (zh) * | 2018-03-15 | 2018-09-28 | 聚好看科技股份有限公司 | 智能电视以及在用户界面上显示内容的方法 |
CN108628608A (zh) * | 2018-04-16 | 2018-10-09 | 朗新科技股份有限公司 | 一种数据可视化的方法及装置 |
CN108846630A (zh) * | 2018-05-25 | 2018-11-20 | 广州衡昊数据科技有限公司 | 一种资源控制系统及方法 |
CN109739497A (zh) * | 2018-12-06 | 2019-05-10 | 深圳市中农网有限公司 | 页面开发方法、装置、计算机设备及存储介质 |
Cited By (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111209350A (zh) * | 2019-12-31 | 2020-05-29 | 优地网络有限公司 | 系统开发方法、装置、终端设备及存储介质 |
CN111339529A (zh) * | 2020-03-13 | 2020-06-26 | 杭州指令集智能科技有限公司 | 低代码的业务编排构件运行的管理框架与方法、计算设备及介质 |
CN111897615A (zh) * | 2020-08-06 | 2020-11-06 | 福建天晴在线互动科技有限公司 | 一种在界面中实现动画效果编辑的方法及其系统 |
WO2023220094A1 (en) * | 2022-05-10 | 2023-11-16 | Apple Inc. | Dynamically resizable content for electronic devices |
Also Published As
Publication number | Publication date |
---|---|
CN110569096B (zh) | 2022-10-18 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN110569096B (zh) | 去代码化制作人机交互界面的系统、方法、介质及设备 | |
CN107844297B (zh) | 一种数据可视化实现系统及方法 | |
US20230111594A1 (en) | Simplified website creation, configuration, and customization system | |
KR20190039564A (ko) | 동적 기능 열 맞춤화 | |
US20110258534A1 (en) | Declarative definition of complex user interface state changes | |
Paterno et al. | Authoring pervasive multimodal user interfaces | |
CN104267968A (zh) | 界面切换的方法和装置 | |
CN102799382A (zh) | 用户设备的系统栏的控制方法和用户设备 | |
CN110784753B (zh) | 互动视频播放方法及装置、存储介质、电子设备 | |
CN109471580B (zh) | 一种可视化3d课件编辑器及课件编辑方法 | |
CN106155639B (zh) | 一种操作界面的加载方法及装置 | |
US8572500B2 (en) | Application screen design allowing interaction | |
US9268875B2 (en) | Extensible content focus mode | |
CN114564252A (zh) | 一种低代码平台的事件配置方法、系统、设备及介质 | |
CN112685025A (zh) | 快速搭建前端页面的方法及系统 | |
WO2013109858A1 (en) | Design canvas | |
Dessart et al. | Animated transitions between user interface views | |
Dumas et al. | Strengths and weaknesses of software architectures for the rapid creation of tangible and multimodal interfaces | |
EP1632850A1 (en) | Method and system for generating and automatically storing the definitions of states related to the appearance and behavior of programming elements in a software application development tool | |
CN110990006A (zh) | 表单管理系统以及表单生成装置 | |
CN115617441A (zh) | 绑定模型和图元的方法、装置、存储介质及计算机设备 | |
US20110175908A1 (en) | Image Effect Display Method and Electronic Apparatus Thereof | |
US20180090174A1 (en) | Video generation of project revision history | |
CN112417346A (zh) | 渲染方法、装置、电子设备及存储介质 | |
CN113835835A (zh) | 一种创建一致性组的方法、装置、及计算机可读存储介质 |
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 | ||
GR01 | Patent grant | ||
GR01 | Patent grant |