用户界面实现方法、装置、存储介质及电子设备与流程

本申请涉及用户界面设计技术，特别是涉及一种用户界面实现方法、装置、存储介质及电子设备。

背景技术：

显示组件由各种各样的界面元素实现，并且，显示组件在获取到对界面元素的操作时，还需要更新显示组件以响应操作。

现有的用户界面设计技术中，为了追求设计效率，通常在显示组件中实现展示功能和界面元素定义功能。这样，展示功能和界面元素定义功能产生了耦合，降低了用户界面设计的可复用性，不利于故障的调试。

技术实现要素：

有鉴于此，本申请的主要目的在于提供一种用户界面实现方法，该方法可以对展示功能和界面元素定义功能进行解耦合，增加用户界面设计的可复用性，更有利于故障的调试。

为了达到上述目的，本申请提出的技术方案为：

第一方面，本申请实施例提供了一种用户界面实现方法，包括以下步骤：

界面管理组件获取界面更新事件；所述界面更新事件携带有事件类型和界面参数；

所述界面管理组件将所述事件类型和所述界面参数发送给事件处理组件，所述事件处理组件根据所述事件类型从数据库中获取预先实现的界面元素模板；

所述事件处理组件基于所述界面参数和所述界面元素模板实现界面元素，显示组件根据所述界面元素实时更新用户界面。

一种可能的实施方式中，所述显示组件根据所述界面元素实时更新用户界面的步骤包括：

所述显示组件通过所述界面管理组件监听所述事件处理组件的执行状态属性；

当所述执行状态属性为执行成功时，所述显示组件通过所述界面管理组件获取所述事件处理组件实现的所述界面元素；

所述显示组件根据所述界面元素更新用户界面。

一种可能的实施方式中，所述界面管理组件获取界面更新事件之前，所述方法还包括：

在所述界面管理组件中实现元素模型；

将所述界面管理组件的所述元素模型和所述显示组件的界面元素进行绑定。

一种可能的实施方式中，所述将所述界面管理组件的所述元素模型和所述显示组件的界面元素进行绑定的步骤，包括：

通过所述元素模型，设置与所述元素模型绑定的所述界面元素的元素属性。

第二方面，本申请实施例还提供一种用户界面实现装置，包括：

界面管理组件，用于获取界面更新事件；所述界面更新事件携带有事件类型和界面参数；还用于将所述事件类型和所述界面参数发送给事件处理组件；

事件处理组件，用于根据所述事件类型从数据库中获取预先实现的界面元素模板；还用于基于所述界面参数和所述界面元素模板实现界面元素；

显示组件，用于根据所述界面元素实时更新用户界面。

一种可能的实施方式中，所述显示组件，包括：

监听模块，用于通过所述界面管理组件监听所述事件处理组件的执行状态属性；

获取模块，用于当所述执行状态属性为执行成功时，通过所述界面管理组件获取所述事件处理组件实现的界面元素；

更新模块，用于根据所述界面元素更新用户界面。

一种可能的实施方式中，所述界面管理组件中实现了元素模型；

所述界面管理组件，还包括：

绑定模块，用于将所述元素模型和所述显示组件的界面元素进行绑定。

一种可能的实施方式中，所述界面管理组件，还包括：

属性设置模块，用于通过所述元素模型，设置与所述元素模型绑定的所述界面元素的元素属性。

第三方面，本申请实施例还提供一种计算机可读存储介质。具体方案为：

一种计算机可读存储介质，存储有计算机指令，所述指令被处理器执行时可实现上述第一方面及第一方面中任一种可能的实施方式的步骤。

第四方面，本申请实施例还提供一种电子设备。具体方案为：

一种电子设备，该电子设备包括：

处理器；

用于存储所述处理器可执行指令的存储器；

所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述指令以实现上述第一方面及第一方面中任一种可能的实施方式的步骤。

综上所述，本申请提出的一种用户界面实现方法、装置、存储介质及电子设备。本申请增加了界面管理组件和事件处理组件，使用界面管理组件获取界面更新事件，使用事件处理组件实现界面元素，最后使用显示组件更新用户界面。通过增加界面管理组件和事件处理组件，对展示功能和界面元素定义功能进行了解耦合。进一步的，使用事件处理组件实现界面元素，增加了用户界面设计的可复用性。通过加入界面管理组件和事件处理组件，将展示功能和界面元素定义功能的实现分立开，也更有利于故障的调试。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例提供的用户界面实现方法的流程示意图；

图2为用户界面实现方法中时更新用户界面的步骤的流程示意图；

图3为本申请实施例提供的一种用户界面实现装置的结构示意图；

图4为用户界面实现装置中显示组件的结构示意图；

图5为用户界面实现装置中界面管理组件的结构示意图；

图6a为用户界面中的界面元素的示意图；

图6b为界面管理组件中的元素模型的示意图；

图7为本申请实施例提供的另一种用户界面实现装置的结构示意图；

图8为本申请实施例提供的一种电子设备的结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例，例如能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含。例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其他步骤或单元。

本申请的核心发明点在于：增加了界面管理组件和事件处理组件，使用界面管理组件获取界面更新事件，使用事件处理组件实现界面元素，最后使用显示组件更新用户界面。通过加入界面管理组件和事件处理组件，对展示功能和界面元素定义功能进行了解耦合。进一步的，使用事件处理组件实现界面元素，增加了用户界面设计的可复用性。通过加入界面管理组件和事件处理组件，将展示功能和界面元素定义功能的实现分立开，也更有利于故障的调试。

本申请实施例提供的用户界面实现方法，可以在客户端实现，也可以在服务器端实现。无论在客户端实现，还是在服务器端实现，均获取客户端上的用户界面发来的界面更新事件，并通过显示组件更新客户端上的用户界面。

为使本申请的目的、技术方案和优点更加清楚，下面以具体实施例对本发明的技术方案进行详细说明。下面几个具体实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例不再赘述。

实施例一

图1为本申请实施例提供的用户界面实现方法的流程示意图，如图1所示，该实施例主要包括：

s101：界面管理组件获取界面更新事件；所述界面更新事件携带有事件类型和界面参数。

界面管理组件为预先实现的组件，界面管理组件是在显示组件的基础上抽象出来的，用于实现用户界面中每个界面元素的元素模型，界面管理组件与显示组件绑定。

界面管理组件获取客户端发来的界面更新事件，用户对客户端的用户界面进行操作时，会触发并发送界面更新事件，根据进行的操作对用户界面进行更新，因此，界面更新事件为用户界面被操作时触发的事件，收到界面更新事件后，本申请实施例提供的用户界面实现方法开始执行，进行对用户界面的更新操作。示例性的，更新用户界面操作的操作类型可以包括：刷新用户界面、刷新界面元素、添加界面元素、删除界面元素等。

为了响应界面更新事件进行用户界面的更新操作，需要获知更新用户界面操作的操作类型，因此，事件类型表征了更新用户界面操作的操作类型。为了完成用户界面的更新操作，还需要获取具体更新的界面元素和具体的更新参数，因此，界面参数表征了具体更新的界面元素和具体的更新参数。示例性的，当界面元素为表格中的一行，更新用户界面操作的操作类型为删除界面元素时，需要获知待删除的行在表格中的行号，此时，界面参数为待删除的行在表格中的行号。

s102：所述界面管理组件将所述事件类型和所述界面参数发送给事件处理组件，所述事件处理组件根据所述事件类型从数据库中获取预先实现的界面元素模板。

为了对展示功能和界面元素定义功能实现解耦，本申请实施例提供了专门的事件处理组件，事件处理组件专门用于根据界面更新事件实现界面元素。

因此，界面管理组件将界面更新时间携带的事件类型和界面参数发送给事件处理组件。事件管理组件根据事件类型，获取预先实现的界面元素模板。

界面元素模板通常存储在数据库中，具体的，可以存储在客户端的存储器中、服务器端的存储器中或专门的云端存储器中。

s103：所述事件处理组件基于所述界面参数和所述界面元素模板实现界面元素，显示组件根据所述界面元素实时更新用户界面。

事件处理组件基于界面元素对界面元素模板进行设置，实现界面元素。显示组件根据事件处理组件实现的界面元素更新用户界面。从而做到了展示功能和界面元素定义功能的解耦合。使用事件处理组件实现界面元素，增加了用户界面设计的可复用性。通过加入界面管理组件和事件处理组件，将展示功能和界面元素定义功能的实现分立开，也更有利于故障的调试。

通过绑定事件处理组件和显示组件，可以使显示组件在事件处理组件实现界面元素时，根据界面元素实时更新用户界面。可以直接绑定事件处理组件和显示组件，也可以通过界面管理组件绑定事件处理组件和显示组件。

示例性的，当通过界面管理组件绑定事件处理组件和显示组件时，显示组件根据所述界面元素实时更新用户界面的步骤如图2所示，包括：

s201：显示组件通过所述界面管理组件监听所述事件处理组件的执行状态属性。

具体的，为事件处理组件配备执行状态属性，执行状态属性用于表征事件处理组件的运行状态。执行状态属性可以包括执行中、执行成功、执行失败或执行取消等状态：当事件处理组件正在进行界面元素的实现时，执行状态属性返回执行中状态；当事件处理组件实现界面元素完毕时，执行状态属性返回执行成功状态；当事件处理组件实现界面元素出现异常时，执行状态属性返回执行失败状态；当取消执行界面更新事件时，执行状态属性返回执行取消状态。界面管理组件获取事件处理组件的执行状态属性，通过执行状态属性获知事件处理组件的运行状态。显示组件通过界面管理组件监听事件处理组件的执行状态属性，当界面管理组件获取到事件处理组件的执行状态属性时，显示组件监听到事件处理组件的执行状态属性的变化，并获取事件处理组件的执行状态属性。

示例性的，可以采用键值观察(key-valueobserver，kvo)技术，实现对事件处理组件的执行状态属性的监听。kvo技术是一种轻量级的接口技术，可以提供简单易用的监听接口。

s202：当所述执行状态属性为执行成功时，所述显示组件通过所述界面管理组件获取所述事件处理组件实现的所述界面元素。

当界面管理组件获取到事件处理组件的执行状态属性时，获取事件处理组件返回的执行参数。具体的，不同的执行结果，事件处理组件返回不同的执行参数。当执行状态属性为执行成功时，事件处理组件将实现的界面元素作为返回数据；当执行结果为执行失败时，事件处理组件将故障信息作为返回数据；当执行状态属性为执行取消或执行中时，没有返回数据或返回数据为空。

当显示组件通过界面管理组件监听到事件处理组件的执行状态属性为执行成功时，显示组件通过界面管理组件获取事件处理组件的返回数据，此时返回数据为实现的界面元素。为了方便返回数据的获取，可以为事件处理组件配备返回数据属性，界面管理组件根据返回数据属性获取事件处理组件的返回数据，显示组件通过界面管理组件获取事件处理组件的返回数据。

这一过程看似繁琐，但是由不同组件分别独立完成各自的功能，真正实现了展示功能和界面元素定义功能的解耦合，尤其是对体量庞大、设计复杂的界面系统来说，本申请实施例提供的方法使各组件可以独立完成功能和独立测试，增加各组件的可复用性，提升开发效率。

s203：所述显示组件根据所述界面元素更新用户界面。

显示组件获取界面元素后，根据界面元素实时更新用户界面。

为了进一步分离用户界面的展示功能和界面元素的实现功能，本申请实施例提供的用户界面实现方法，在界面管理组件中实现元素模型，这里，元素模型是根据用户界面的界面元素抽象出来的，界面元素通过显示组件显示，展示用户界面，元素模型为界面元素的实现逻辑。

界面管理组件的元素模型与显示组件中展示的界面元素一一对应，将所述界面管理组件的所述元素模型和所述显示组件的界面元素进行绑定。并且当在界面管理组件中实现元素模型时，事件处理组件生成的界面元素更新界面管理组件中的元素模型，通过界面管理组件与显示组件的绑定，更新显示组件中的界面元素，从而更新用户界面的展示效果。

界面元素的展示效果通过元素属性设置，在进行用户界面的设计和实现时，需要通过设置元素属性，设定界面元素的展示效果。当界面元素抽象得到为元素模型时，可以通过对元素模型进行设置，来设置与元素模型绑定的界面元素的元素属性。并可在界面管理组件中实现属性协议，通过属性协议规定界面元素的元素属性的设置方式。示例性的，对元素属性的进行设置，可以设定界面元素的大小、颜色、形状和文本等显示效果，还可以设定界面元素被操作时触发的界面更新事件。

一种可能的实施方式中，界面管理组件中还可以提供简洁易用的更新接口，客户端通过调用更新接口，发送界面更新事件。开发者在实现客户端界面更新事件的生成时，可以通过调用更新接口生成界面更新事件，并由客户端发送给界面管理模块。应用更新接口，开发者在生成界面更新事件时，无需关心界面更新事件的生成细节，仅需要关注界面更新事件的数据流，大大简化了开发过程。

实施例二

如图3所示，本申请实施例提供的一种用户界面实现装置300，包括：

界面管理组件301，用于获取界面更新事件；所述界面更新事件携带有事件类型和界面参数；还用于将所述事件类型和所述界面参数发送给事件处理组件；

事件处理组件302，用于根据所述事件类型从数据库中获取预先实现的界面元素模板；还用于基于所述界面参数和所述界面元素模板实现界面元素；

显示组件303，用于根据所述界面元素实时更新用户界面。

界面管理组件301分别连接事件处理组件302和显示组件303，界面管理组件301获取客户端发来的界面更新事件，并将界面更新事件中携带的事件类型和界面参数发送给事件处理组件302。事件处理组件302根据事件类型和界面参数实现界面元素。显示组件303根据界面元素实时更新用户界面。

一种可能的实施方式中，如图4所示，所述显示组件303，包括：

监听模块401，用于通过所述界面管理组件301监听所述事件处理组件302的执行状态属性；

获取模块402，用于当所述执行状态属性为执行成功时，通过所述界面管理组件301获取所述事件处理组件302实现的界面元素；

更新模块403，用于根据所述界面元素更新用户界面。

在显示组件303中，监听模块401连接界面管理组件301，通过界面管理组件301监听事件处理组件302的执行状态属性。监听模块401还连接获取模块402，当执行状态属性为执行成功时，触发获取模块402执行获取界面元素的操作。获取模块402还连接界面管理组件301，通过界面管理组件301获取事件处理组件302实现的界面元素。获取模块402还连接更新模块403，获取模块402将界面元素发送给更新模块403，由更新模块403根据界面元素更新用户界面。

一种可能的实施方式中，所述界面管理组件301中实现了元素模型；

如图5所示，所述界面管理组件301，还包括：

绑定模块501，用于将所述元素模型和所述显示组件的界面元素进行绑定。

示例性的，假设显示组件中的界面元素，包括：部件1、部件2、题头、题脚、单元1和单元2。包括上述界面元素的显示组件渲染得到的用户界面如图6a所示，对上述界面元素进行抽象得到元素模型，对部件元素进行抽象可以得到部件模型，对题头元素进行抽象可以得到题头模型，对题脚元素进行抽象可以得到题脚模型，对单元元素进行抽象可以得到单元模型。针对图6b所示的具体的用户界面，界面管理组件中抽象得到的元素模型包括：部件模型1、部件模型2、题头模型、题脚模型、单元模型1和单元模型2。

一种可能的实施方式中，所述界面管理组件301，还包括：

属性设置模块502，用于通过所述元素模型，设置与所述元素模型绑定的所述界面元素的元素属性。

一种可能的实施方式中，如图7所示，事件处理组件302还连接有云端存储器701的接口，从云端存储器701中获取界面元素模板。

本申请实施例提供的用户界面实现装置通过增加界面管理组件和事件处理组件，对展示功能和界面元素定义功能进行了解耦合，使用事件处理组件实现界面元素，增加了用户界面设计的可复用性，将展示功能和界面元素定义功能的实现分立开，也更有利于故障的调试。

实施例三

一种计算机可读介质，所述计算机可读存储介质存储指令，所述指令在由处理器执行时使得所述处理器执行本申请实施例提供的任一种用户界面实现方法的步骤。实际应用中，所述的计算机可读介质可以是上述实施例中描述的设备/装置/系统中所包含的，也可以是单独存在，而未装配入该设备/装置/系统中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或多个程序被执行时，实现根据参考本申请实施例提供的任一种用户界面实现装置进行本申请实施例提供的任一种用户界面实现方法的步骤。

根据本申请公开的实施例，计算机可读存储介质可以是非易失性的计算机可读存储介质，例如可以包括但不限于：便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、便携式紧凑磁盘只读存储器(cd-rom)、光存储器件、磁存储器件，或者上述的任意合适的组合，但不用于限制本申请保护的范围。在本申请公开的实施例中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

本申请所述的方法步骤除了可以用数据处理程序来实现，还可以由硬件来实现，例如，可以由逻辑门、开关、专用集成电路(asic)、可编程逻辑控制器和嵌微控制器等来实现。因此这种可以实现本申请所述方法的硬件也可以构成本申请。

实施例五

本申请实施例还提供一种电子设备，可以是计算机或服务器，其中可以集成本申请实施例提供的任一种用户界面实现装置。如图8所示，其示出了本申请实施例提供的电子设备800。

该电子设备可以包括一个或者一个以上处理核心的处理器801、一个或一个以上用于存储所述处理器801可执行指令的存储器802。该电子设备还可以包括电源803、输入输出单元804。本领域技术人员可以理解，图8中并不构成对电子设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

其中：

处理器801是该电子设备的控制部分，利用各种接口和线路连接各个部分，从存储器802中读取所述可执行指令，通过运行或执行存储在存储器802中的指令以实现本申请实施例提供的任一种用户界面实现方法的步骤。

存储器802可用于存储软件程序，即本申请实施例提供的任一种用户界面实现方法中涉及的程序。

处理器801通过运行存储在存储器802的软件程序，从而执行各种功能应用以及数据处理。存储器802可包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据电子设备需要使用的数据等。此外，存储器802可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器802还可以包括存储器控制器，以提供处理器801对存储器802的访问。

电子设备还包括给各个部件供电的电源803，优选的，电源803可以通过电源管理系统与处理器801逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源803还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

该服务器还可包括输入输出单元804，比如可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入；比如可用于显示由用户输入的信息或提供给用户的信息以及服务器的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。

本申请实施例提供的任一种用户界面实现方法、装置、存储介质及电子设备均基于相同的设计构思，并且本申请任一个实施例中的技术手段可以进行自由组合，组合得到的技术手段仍在本申请的保护范围之内。

本申请附图中的流程图和框图，示出了按照本申请公开的各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或者代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应该注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同附图中所标准的顺序发生。例如，两个连接地表示的方框实际上可以基本并行地执行，它们有时也可以按照相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或者流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

本领域技术人员可以理解，本申请的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合，即使这样的组合或结合没有明确记载于本申请中。特别地，在不脱离本申请精神和教导的情况下，本申请的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合，所有这些组合和/或结合均落入本申请公开的范围。

本申请中应用了具体实施例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思路，并不用于限制本申请。对于本领域的技术人员来说，可以依据本申请的思路、精神和原则，在具体实施方式及应用范围上进行改变，其所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。