CN110286990B - 用户界面展示方法、装置、设备及存储介质 - Google Patents

Abstract

本发明实施例提出一种用户界面展示方法、装置、设备及存储介质，其中方法包括：接收用户界面描述数据，所述用户界面描述数据中包含多个组件；加载对应所述用户界面描述数据的根模板；采用所述根模板渲染各个所述组件；所述渲染各个所述组件包括：页面层加载、组件层加载和子组件层渲染。本发明实施例能够提高用户界面呈现的效率。

Description

用户界面展示方法、装置、设备及存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及一种用户界面展示方法、装置、设备及存储介质。

背景技术

目前一般的页面展示引擎技术中，依次读取界面描述文件中的数据，并采用该数据显示用户界面(UI)。这种方式对用户界面呈现的效率较低。

发明内容

本发明实施例提供一种用户界面展示方法、装置、设备及存储介质，以至少解决现有技术中的以上技术问题。

第一方面，本发明实施例提供了一种用户界面展示方法，包括：

接收用户界面描述数据，所述用户界面描述数据中包含多个组件；

加载对应所述用户界面描述数据的根模板；

采用所述根模板渲染各个所述组件；所述渲染各个所述组件包括：页面层加载、组件层加载和子组件层渲染。

在一种实施方式中，所述页面层加载包括：

根据所述用户界面描述数据实现事件监听、指令处理及页面通用逻辑的初始化。

在一种实施方式中，所述组件层加载包括：

基于所述用户界面描述数据生成动态渲染组件，采用所述动态渲染组件加载各个所述组件。

在一种实施方式中，所述子组件层加载包括：

对所述加载的各个组件进行渲染。

在一种实施方式中，所述子组件层渲染还包括：

确定所述组件对应的事件及所述事件绑定的执行指令。

第二方面，本发明实施例提供了一种用户界面展示装置，包括：

接收模块，用于接收用户界面描述数据，所述用户界面描述数据中包含多个组件；

加载模块，用于加载对应所述用户界面描述数据的根模板；

渲染模块，用于采用所述根模板渲染各个所述组件；所述渲染各个所述组件包括：页面层加载、组件层加载和子组件层渲染。

在一种实施方式中，所述渲染模块包括：

页面层加载子模块，用于根据所述用户界面描述数据实现事件监听、指令处理及页面通用逻辑的初始化。

在一种实施方式中，所述渲染模块包括：

组件层加载子模块，用于基于所述用户界面描述数据生成动态渲染组件，采用所述动态渲染组件加载各个所述组件。

在一种实施方式中，所述渲染模块包括：

子组件层渲染子模块，用于对所述加载的各个组件进行渲染。

在一种实施方式中，所述子组件层渲染子模块还用于，确定所述组件对应的事件及所述事件绑定的执行指令。

第三方面，本发明实施例提供了一种用户界面展示设备，所述设备的功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。所述硬件或软件包括一个或多个与上述功能相对应的模块。

在一个可能的设计中，所述设备的结构中包括处理器和存储器，所述存储器用于存储支持所述设备执行上述用户界面展示方法的程序，所述处理器被配置为用于执行所述存储器中存储的程序。所述设备还可以包括通信接口，用于与其他设备或通信网络通信。

第四方面，本发明实施例提供了一种计算机可读存储介质，用于存储用户界面展示设备所用的计算机软件指令，其包括用于执行上述用户界面展示方法所涉及的程序。

上述技术方案中的一个技术方案具有如下优点或有益效果：

本发明实施例在接收到用户界面描述数据后，采用该数据对用户界面进行逐层渲染，能够提高用户界面呈现的效率。

上述概述仅仅是为了说明书的目的，并不意图以任何方式进行限制。除上述描述的示意性的方面、实施方式和特征之外，通过参考附图和以下的详细描述，本发明进一步的方面、实施方式和特征将会是容易明白的。

附图说明

在附图中，除非另外规定，否则贯穿多个附图相同的附图标记表示相同或相似的部件或元素。这些附图不一定是按照比例绘制的。应该理解，这些附图仅描绘了根据本发明公开的一些实施方式，而不应将其视为是对本发明范围的限制。

图1为本发明实施例的一种用户界面展示方法实现流程图；

图2为本发明实施例的一种用户界面展示方法的应用系统及终端设备的渲染示意图中；

图3为本发明实施例的一种用户界面展示装置结构示意图一；

图4为本发明实施例的一种用户界面展示装置结构示意图二；

图5为本发明实施例的一种用户界面展示设备结构示意图。

具体实施方式

在下文中，仅简单地描述了某些示例性实施例。正如本领域技术人员可认识到的那样，在不脱离本发明的精神或范围的情况下，可通过各种不同方式修改所描述的实施例。因此，附图和描述被认为本质上是示例性的而非限制性的。

本发明实施例主要提供了用户界面描述文件生成方法和装置，下面分别通过以下实施例进行技术方案的展开描述。

如图1为本发明实施例的一种用户界面展示方法实现流程图，包括：

S11：接收用户界面描述数据，所述用户界面描述数据中包含多个组件；

S12：加载对应所述用户界面描述数据的根模板；

S13：采用所述根模板渲染各个所述组件；所述渲染各个所述组件包括：页面层加载、组件层加载和子组件层渲染。

上述的用户界面描述数据可以是对用户界面描述文件进行解析及渲染后得到的数据，用户界面描述数据便于终端设备的界面展示。其中，用户界面描述文件可以采用DuerOS展现语言(DPL，DuerOS Presentation Language)编写，其中DuerOS是一种对话式人工智能操作系统。上述终端设备可以具体为有屏语音交互设备。本发明实施例提出的用户界面展示方法可以适用于有屏语音交互设备上的操作，或者是多轮对话交互中由云端主动要求外设开启语音交互的场景。本发明实施例提出的用户界面展示方法可以单独使用，也可以结合用户多轮会话场景使用。

在一种可能的实施方式中，对应用户界面描述数据的根模板为预先约定的DPL模板。当终端设备接收到渲染指令时，加载用户界面描述数据对应的DPL模板，DPL模板首先渲染一个用来专门渲染组件的加载(load)子组件，它的参数就是基于用户界面描述数据(如parsed json数据)。然后在load子组件中，基于parsed json调用render函数递归地渲染组件，最终生成所需的整个页面信息。

在一种可能的实施方式中，所述页面层加载包括：根据所述用户界面描述数据实现事件监听、指令处理及页面通用逻辑的初始化。

所述组件层加载包括：基于所述用户界面描述数据生成动态渲染组件，采用所述动态渲染组件加载各个所述组件。

所述子组件层加载包括：对所述加载的各个组件进行渲染。

所述子组件层渲染还可以包括：确定所述组件对应的事件及所述事件绑定的执行指令。

具体地，整个页面渲染被分为了三个层级：

(1)页面层加载(view层)：页面层，监听、处理指令和页面通用逻辑实现；

(2)组件层加载(load-component层)：基于parsed json数据，动态的生成子组件，基于特定属性引用对应组件；

(3)子组件层渲染(rendered-child-component层)：层级的最小单位，本身包含有组件级的通用事件和仅适用于自身的内部事件，基于与组件标识(ComponentID)属性，在与云端的交互中通知到相应事件是哪个对应的组件产生的。

本发明实施例提出的用户界面展示方法可以应用于如图2所示的应用场景中。如图2所示，本发明实施例的一种用户界面展示方法的应用系统及终端设备的渲染示意图中，该系统包括：云端设备和终端设备；

其中，云端设备可以包括对话式人工智能(AI，Artificial Intelligence)平台、聊天机器人对话系统(BOT)及服务器侧渲染器(SSR，Server Side Render)服务器；其中，SSR服务器上可以设置接解析器(Parser)。终端设备可以为有屏语音交互设备。

云端设备向终端设备发送用户界面描述数据，终端设备可以暂时将收到的用户界面描述数据保存在本地。当接收到来自云端设备的针对该用户界面描述数据的渲染指令(具体可以为renderSwanView)时，基于指令携带信息初始化或更新页面数据。将该指令作用于页面数据，生成View示例。之后，加载动态渲染组件，在该动态渲染组件中调用render函数生成子组件。如图2所示，本发明实施例逐层渲染组件，首先渲染组件1(componentID1)、组件2(componentID2)和组件2(componentID3)；之后，渲染组件1的子组件，即组件5(componentID5)和组件6(componentID6)。上述每个组件对应一个可执行事件列表(enableEventList)。在一种可能的实施方式中，可执行事件列表中包括一个以上键值对(Key-Value)。每个键值对中的Key表示该组件支持的事件，对应的Value为一个对象数据，表示这个事件被触发时应该执行的指令集合。

如图2所示，对于componentID3这一组件，其可执行事件列表采用以下的形式表示：

后续地，当监听到一个组件的enableEventList中的每个事件被触发时，执行该事件对应的指令。

本发明实施例可以将事件(event)分为了两部分执行效果：

(1)基于自身的事件性质执行产生效果：

比如：作用在可滑动列表组件的滑动(scroll)、滑动至预定索引(scrollToIndex)、跳转到相应页面(setPage)等事件。

(2)云端可以参与搭配的，并且能控制事件的执行效果：

比如：点击(click)、加载(loaded)、播放(play)、结束(end)等事件类型。

以上方式给云端与终端的交互带来很强大的灵活性。

用户界面描述数据中的单个组件，经过解析，会生成一个名为enableEventList的列表，列表中的每个key值，表明了这个组件支持的事件，对应的value值为一个对象数组，表明了这个事件执行时，应该触发的指令集合；

当DPL模板中某个组件对应的事件被触发时，会遍历检查该组件的enableEventList列表，然后执行对应事件的指令数组中的所有指令，通过这种方式，将DPL模板中通过云端数据渲染出的组件信息与组件基于自身支持的事件行为动态绑定，可以达成非常灵活和组合性非常强的交互功能。

以上可见，本发明实施例能够在终端设备上进行用户界面的分层渲染，同时支持了端上事件和云端事件的交互执行。

本发明实施例还提出一种用户界面展示装置。参见图3，图3为本发明实施例的一种用户界面展示装置结构示意图一，包括：

接收模块310，用于接收用户界面描述数据，所述用户界面描述数据中包含多个组件；

加载模块320，用于加载对应所述用户界面描述数据的根模板；

渲染模块330，用于采用所述根模板渲染各个所述组件；所述渲染各个所述组件包括：页面层加载、组件层加载和子组件层渲染。

图4为本发明实施例的一种用户界面展示装置结构示意图二，如图4所示，在一种可能的实施方式中，所述渲染模块330包括：

页面层加载子模块331，用于根据所述用户界面描述数据实现事件监听、指令处理及页面通用逻辑的初始化。

或者，所述渲染模块330可以包括：

组件层加载子模块332，用于基于所述用户界面描述数据生成动态渲染组件，采用所述动态渲染组件加载各个所述组件。

或者，所述渲染模块330可以包括：

子组件层渲染子模块331，用于对所述加载的各个组件进行渲染。

在一种可能的实施方式中，所述子组件层渲染子模块332还用于，确定所述组件对应的事件及所述事件绑定的执行指令。

本发明实施例各装置中的各模块的功能可以参见上述方法中的对应描述，在此不再赘述。

本发明实施例还提出一种用户界面展示设备，如图5为本发明实施例的用户界面展示设备结构示意图，包括：

存储器11和处理器12，存储器11存储有可在处理器12上运行的计算机程序。所述处理器12执行所述计算机程序时实现上述实施例中的用户界面描述文件生成方法。所述存储器11和处理器12的数量可以为一个或多个。

所述设备还可以包括：

通信接口13，用于与外界设备进行通信，进行数据交换传输。

存储器11可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatilememory)，例如至少一个磁盘存储器。

如果存储器11、处理器12和通信接口13独立实现，则存储器11、处理器12和通信接口13可以通过总线相互连接并完成相互之间的通信。所述总线可以是工业标准体系结构(ISA，Industry Standard Architecture)总线，外部设备互连(PCI，PeripheralComponent Interconnect)总线或扩展工业标准体系结构(EISA，Extended IndustryStandard Architecture)等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图5中仅用一条粗线表示，并不表示仅有一根总线或一种类型的总线。

可选的，在具体实现上，如果存储器11、处理器12和通信接口13集成在一块芯片上，则存储器11、处理器12和通信接口13可以通过内部接口完成相互间的通信。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或隐含地包括至少一个该特征。在本发明的描述中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。

流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本发明的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本发明的实施例所属技术领域的技术人员所理解。

在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行系统、装置或设备(如基于计算机的系统、包括处理器的系统或其他可以从指令执行系统、装置或设备取指令并执行指令的系统)使用，或结合这些指令执行系统、装置或设备而使用。就本说明书而言，“计算机可读介质”可以是任何可以包含、存储、通信、传播或传输程序以供指令执行系统、装置或设备或结合这些指令执行系统、装置或设备而使用的装置。计算机可读介质的更具体的示例(非穷尽性列表)包括以下：具有一个或多个布线的电连接部(电子装置)，便携式计算机盘盒(磁装置)，随机存取存储器(RAM)，只读存储器(ROM)，可擦除可编辑只读存储器(EPROM或闪速存储器)，光纤装置，以及便携式只读存储器(CDROM)。另外，计算机可读介质甚至可以是可在其上打印所述程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得所述程序，然后将其存储在计算机存储器中。

应当理解，本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。

本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。

此外，在本发明各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读存储介质中。所述存储介质可以是只读存储器，磁盘或光盘等。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到其各种变化或替换，这些都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。

Claims (8)

1.一种用户界面展示方法，其特征在于，包括：

接收用户界面描述数据，所述用户界面描述数据中包含多个组件；

加载对应所述用户界面描述数据的根模板；

采用所述根模板按照页面渲染的三个层级逐层渲染各个所述组件；所述渲染各个所述组件包括：页面层加载、组件层加载和子组件层渲染；

其中，所述页面层加载、所述组件层加载和所述子组件层渲染为所述页面渲染的三个层级，所述页面层加载为所述页面渲染的第一个层级，所述组件层加载为所述页面渲染的第二个层级，所述子组件层渲染为所述页面渲染的第三个层级；所述页面层加载包括：根据所述用户界面描述数据实现事件监听、指令处理及页面通用逻辑的初始化；所述组件层加载包括：基于所述用户界面描述数据生成动态渲染组件，采用所述动态渲染组件加载各个所述组件。

2.根据权利要求1所述的方法，其特征在于，所述子组件层加载包括：

对所述加载的各个组件进行渲染。

3.根据权利要求2所述的方法，其特征在于，所述子组件层渲染还包括：

确定所述组件对应的事件及所述事件绑定的执行指令。

4.一种用户界面展示装置，其特征在于，包括：

接收模块，用于接收用户界面描述数据，所述用户界面描述数据中包含多个组件；

加载模块，用于加载对应所述用户界面描述数据的根模板；

渲染模块，用于采用所述根模板按照页面渲染的三个层级逐层渲染各个所述组件；所述渲染各个所述组件包括：页面层加载、组件层加载和子组件层渲染；

其中，所述页面层加载、所述组件层加载和所述子组件层渲染为所述页面渲染的三个层级，所述页面层加载为所述页面渲染的第一个层级，所述组件层加载为所述页面渲染的第二个层级，所述子组件层渲染为所述页面渲染的第三个层级；所述渲染模块包括：页面层加载子模块，用于根据所述用户界面描述数据实现事件监听、指令处理及页面通用逻辑的初始化，所述渲染模块包括：组件层加载子模块，用于基于所述用户界面描述数据生成动态渲染组件，采用所述动态渲染组件加载各个所述组件。

5.根据权利要求4所述的装置，其特征在于，所述渲染模块包括：

子组件层渲染子模块，用于对所述加载的各个组件进行渲染。

6.根据权利要求5所述的装置，其特征在于，所述子组件层渲染子模块还用于，确定所述组件对应的事件及所述事件绑定的执行指令。

7.一种用户界面展示设备，其特征在于，所述设备包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如权利要求1-3中任一所述的方法。

8.一种计算机可读存储介质，其存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-3中任一所述的方法。

Images