CN114443024B - 实现不限制嵌套层级的可视化ui拖拽布局的方法及系统 - Google Patents

Abstract

本发明提供一种实现不限制嵌套层级的可视化UI拖拽布局的方法及系统，其中方法包括：根据视图协议及控件协议，定义不限制嵌套层级的配置描述协议；创建可视化渲染容器，所述视化渲染容器接收并渲染所述配置描述协议；判断渲染后的目标区域节点是否为layout布局类型；若是，则将拖拽节点的配置协议从原结构迁移到所述目标区域节点，并利用第三方组件监听原始协议数组及目标协议数组，待被监听的原始协议数组及目标协议数组发生回调事件后，调用所述可视化渲染容器对配置描述协议重新渲染；若否，则保留当前渲染结果。本发明提高了业务线的开发效率，满足现代企业快速变化的业务需求和追求低成本低效益诉求。

Description

实现不限制嵌套层级的可视化UI拖拽布局的方法及系统

技术领域

本发明涉及数据处理技术领域，特别是涉及一种实现不限制嵌套层级的可视化UI拖拽布局的方法及系统。

背景技术

随着Internet的快速发展，信息技术化的要求，企业越来越意识到，他们需要具有快速开发能力的低代码平台来帮助他们进行迅速的、高效的数字化转型，一个高效的低代码平台通常采用无代码开发，通过拖拽组件方式进行表单设计，普遍存在一个实现难点是拖拽式布局要想模拟原生DOM的方式实现各种各样的复杂布局，设计上既要抽象共性部分做到灵活适合大多数业务场景，又要屏蔽业务的复杂度，同时应该能支持核心扩展，基于这些问题，企业低代码平台迫切需要一种基于简洁高效的技术实现方案。

目前开发低代码平台实现可视化拖拽UI布局，常用的构建方案是定制一个个组件模块，通过可视化拖拽某个组件模块然后生成相应的页面代码或者页面描述协议，这些组件模块需要对业务有深刻理解进行产品沉淀，需要专业的产品开发，成本较大，而且在各种特殊业务布局过程中，例如业务需要支持多层组件嵌套，组件类型互斥拦截等等特殊业务需要，往往需要对组件模块进行重新编码扩展支持，不能做到开箱即用，对快速迭代的需求不能很好的满足，业务灵活性不够，在支持各种业务差异化的布局场景，往往需要进行二次定制开发，不能满足快速迭代的需求；当组件库庞大之后，各种局部重复且冗余的组件代码不利于重构，业务复杂性和业务共性不能很好分离，给维护带来巨大成本。

发明内容

为解决以上现有技术问题，本发明提供一种实现不限制嵌套层级的可视化UI拖拽布局的方法及系统，提高了业务线的开发效率，满足现代企业快速变化的业务需求和追求低成本低效益诉求。

本发明第一方面提供一种实现不限制嵌套层级的可视化UI拖拽布局的方法，包括：

根据视图协议及控件协议，定义不限制嵌套层级的配置描述协议；

创建可视化渲染容器，所述视化渲染容器接收并渲染所述配置描述协议；

判断渲染后的目标区域节点是否为layout布局类型；

若是，则将拖拽节点的配置协议从原结构迁移到所述目标区域节点，并利用第三方组件监听原始协议数组及目标协议数组，待被监听的原始协议数组及目标协议数组发生回调事件后，调用所述可视化渲染容器对配置描述协议重新渲染；

若否，则保留当前渲染结果。

进一步地，所述创建可视化渲染容器引擎，所述可视化渲染容器引擎接收并渲染所述配置描述协议，包括：

提取配置描述协议的content结构，并遍历content结构中的每个节点；

判断每个节点是否为layout布局类型节点；

若是，则通过所述可视化渲染容器对所述layout布局类型节点配置协议进行渲染；

若否，创建节点构造器，并对节点构造器创造得到的节点进行解析及渲染。

进一步地，所述对节点构造器创造得到的节点进行解析及渲染之后，还包括：

为节点绑定拖拽事件，并监听所述拖拽事件。

进一步地，所述监听所述拖拽事件之后，还包括：

建立钩子接口，以增加业务扩展的判断条件。

本发明第二方面提供一种实现不限制嵌套层级的可视化UI拖拽布局的系统，包括：

协议定义模块，用于根据视图协议及控件协议，定义不限制嵌套层级的配置描述协议；

渲染模块，用于创建可视化渲染容器，所述视化渲染容器接收并渲染所述配置描述协议；

判断模块，用于判断渲染后的目标区域节点是否为layout布局类型；若是，则将拖拽节点的配置协议从原结构迁移到所述目标区域节点，并利用第三方组件监听原始协议数组及目标协议数组，待被监听的原始协议数组及目标协议数组发生回调事件后，调用所述可视化渲染容器对配置描述协议重新渲染；若否，则保留当前渲染结果。

进一步地，所述渲染模块，还用于：

提取配置描述协议的content结构，并遍历content结构中的每个节点；

判断每个节点是否为layout布局类型节点；

若是，则通过所述可视化渲染容器对所述layout布局类型节点配置协议进行渲染；

若否，创建节点构造器，并对节点构造器创造得到的节点进行解析及渲染。

进一步地，所述渲染模块，还用于：

为节点绑定拖拽事件，并监听所述拖拽事件。

进一步地，所述渲染模块，还用于：

建立钩子接口，以增加业务扩展的判断条件。

本发明第三方面提供一种电子装置，包括处理器、存储器以及存储在所述存储器中且被配置为由所述处理器执行的计算机程序，所述处理器执行所述计算机程序时实现如上述第一方面中任意一项所述的实现不限制嵌套层级的可视化UI拖拽布局的方法。

本发明第四方面提供一种计算机可读存储介质，所述计算机可读存储介质包括存储的计算机程序，其中，在所述计算机程序运行时控制所述计算机可读存储介质所在设备执行如上述第一方面中任意一项所述的实现不限制嵌套层级的可视化UI拖拽布局的方法。

与现有技术相比，本发明实施例的有益效果在于：

本发明提供一种实现不限制嵌套层级的可视化UI拖拽布局的方法及系统，其中方法包括：根据视图协议及控件协议，定义不限制嵌套层级的配置描述协议；创建可视化渲染容器，所述视化渲染容器接收并渲染所述配置描述协议；判断渲染后的目标区域节点是否为layout布局类型；若是，则将拖拽节点的配置协议从原结构迁移到所述目标区域节点，并利用第三方组件监听原始协议数组及目标协议数组，待被监听的原始协议数组及目标协议数组发生回调事件后，调用所述可视化渲染容器对配置描述协议重新渲染；若否，则保留当前渲染结果。本发明通过定义一种不限制嵌套层级的配置描述协议，以及专门处理该描述协议的可视化渲染容器引擎来实现可视化UI拖拽布局，屏蔽了各个组件之间的复杂性，保留最简洁的相对描述关系，配合预留可插入业务判断的拖拽钩子来实现业务的差异化，该可视化UI拖拽布局方式，既能解决标准场景的可视化拖拽布局需求，又能支持复杂差异化的业务场景，基于该技术方法，大大提高了业务线的开发效率，满足现代企业快速变化的业务需求和追求低成本低效益诉求。

附图说明

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

图1是本发明某一实施例提供的一种实现不限制嵌套层级的可视化UI拖拽布局的方法的流程图；

图2是本发明另一实施例提供的一种实现不限制嵌套层级的可视化UI拖拽布局的方法的流程图；

图3是本发明某一实施例提供的一种实现不限制嵌套层级的可视化UI拖拽布局的系统的装置图；

图4是本发明某一实施例提供的一种电子设备的结构图。

具体实施方式

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

应当理解，文中所使用的步骤编号仅是为了方便描述，不对作为对步骤执行先后顺序的限定。

应当理解，在本发明说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本发明。如在本发明说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。

术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。

术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。

第一方面。

请参阅图1，本发明一实施例提供一种实现不限制嵌套层级的可视化UI拖拽布局的方法，包括：

S10、根据视图协议及控件协议，定义不限制嵌套层级的配置描述协议。

S20、创建可视化渲染容器，所述视化渲染容器接收并渲染所述配置描述协议。

在本发明实施例的一具体实施方式中，所述步骤S20包括：

提取配置描述协议的content结构，并遍历content结构中的每个节点；

判断每个节点是否为layout布局类型节点；

若是，则通过所述可视化渲染容器对所述layout布局类型节点配置协议进行渲染；

若否，创建节点构造器，并对节点构造器创造得到的节点进行解析及渲染。

优选地，所述对节点构造器创造得到的节点进行解析及渲染之后，还包括：

为节点绑定拖拽事件，并监听所述拖拽事件。

建立钩子接口，以增加业务扩展的判断条件。

S30、判断渲染后的目标区域节点是否为layout布局类型。

S40、若是，则将拖拽节点的配置协议从原结构迁移到所述目标区域节点，并利用第三方组件监听原始协议数组及目标协议数组，待被监听的原始协议数组及目标协议数组发生回调事件后，调用所述可视化渲染容器对配置描述协议重新渲染。

S50、若否，则保留当前渲染结果。

本发明提供的方法提高了业务线的开发效率，满足现代企业快速变化的业务需求和追求低成本低效益诉求。

请参阅图2，在本发明另一具体实施例中，本发明提供一种实现不限制嵌套层级的可视化UI拖拽布局的方法，包括：

1、定义一套配置协议(viewCtrls),伪代码结构如下(展示多嵌套层级的协议结构)：

2、创建可视化渲染容器引擎uicanvas，引擎接收viewCtrls配置协议后进入渲染流程。

渲染容器引擎uicanvas通过代理(proxy)监听viewCtrl的协议结构对象是否被更新，发现更新则进入以下步骤流程：

1)、步骤一：提取viewCtrls协议content结构，遍历处理每个content内部节点；

2)、步骤二：判断节点是否layout布局类型；

是：将单独对layout节点部分的配置协议再次调用渲染容器uicanvas，即对该节点进入步骤一的处理；

否：进入步骤三；

3)、步骤三：创建节点构造器controlRender；

4)、步骤四：解析该节点类型，渲染为相应的可视化组件；

5)、步骤五：为节点绑定拖拽事件，监听拖拽事件，但拖拽节点进入其他节点的边界区域(通常是超过50％面积区域)，进行判断操作；

6)、步骤六：进行节点判定，这里预留钩子接口，可以加入业务扩展判定条件，比如说更新接口钩子update()，是uicanvas对viewCtrl进行了代理proxy监听，新节点拖拽进入更新了viewCtrl协议对象，这里就通过调用预留的钩子接口update(()＝>{return‘符合业务逻辑’？true:false})来触发业务逻辑控制，场景可以是1、拦截某些控件类型不能拖拽，2、对进入布局组件的控件进行装饰器包装，加入特殊处理等等，该流程以判断节点区域是否layout布局类型做简单说明。

7)、步骤七：判断拖拽目标区域节点是否layout类型；

是：将拖拽节点的配置协议从原结构迁移到拖拽目标节点的content区域，可以利用第三方draggable组件监听原始协议数组(原结构content区域)和目标协议数组(content区域)，在被监听的协议结构数组变更后会出发change事件，在change回调事件中判断变更协议后，通知uicanvas容器进行重新渲染，即重新进入步骤一；

否：不进入重新渲染，继续原渲染流程，保留当前渲染视图结果

8)、整个流程实现了不依赖重复定制，不限制嵌套层级的可视化UI拖拽布局的实现方法；

整个流程实现了不依赖重复定制，不限制嵌套层级的可视化UI拖拽布局的配置协议以及协议渲染引擎的实现方法，通过这种相对布局描述关系协议，抽象了共性部分做到灵活适合大多数业务场景，又要屏蔽业务的复杂度，同时判断条件钩子能支持核心的业务差异化扩展

3、实现流程图：

细节解释：UI拖拽可以使用第三方draggable库实现，原理是利用html标准dom事件支持的拖拽api进行用户行为监听：

draggable：对DOM节点启用拖拽监听；ondragstart：DOM节点拖拽开始触发事件；ondragover：DOM节点移动到另一个开启draggable监听的容器触发事件；ondrop：DOM节点元素正在拖动触发事件；ondragend：DOM节点完成拖动后触发事件，通过这些浏览器api捕捉到用户把某个UI节点拖拽到不同区域位置的整个流程细节，在这个流程中加入可视化的渲染逻辑。

本发明提供的方法解决企业在不同业务上软件界面布局的交互需求差异化的难点，提出一种不限制嵌套层级的配置描述协议加上预留的业务判断钩子注入业务处理代码，以及专门处理该描述协议的可视化渲染容器引擎来实现可视化UI拖拽布局的技术实现方案，该方案屏蔽业务复杂性，能大幅度降低开发难度和减低开发成本，满足了企业对低代码平台用较低成本去进行组件创建和快速迭代的诉求，为企业带来更大优势。

第二方面。

本发明某一实施例提供一种实现不限制嵌套层级的可视化UI拖拽布局的系统，包括：

协议定义模块10，用于根据视图协议及控件协议，定义不限制嵌套层级的配置描述协议。

渲染模块20，用于创建可视化渲染容器，所述视化渲染容器接收并渲染所述配置描述协议。

在本发明实施例的一具体实施方式中，所述渲染模块20，还用于：

提取配置描述协议的content结构，并遍历content结构中的每个节点；

判断每个节点是否为layout布局类型节点；

若是，则通过所述可视化渲染容器对所述layout布局类型节点配置协议进行渲染；

若否，创建节点构造器，并对节点构造器创造得到的节点进行解析及渲染。

优选地，所述渲染模块20，还用于：

为节点绑定拖拽事件，并监听所述拖拽事件。

建立钩子接口，以增加业务扩展的判断条件。

判断模块30，用于判断渲染后的目标区域节点是否为layout布局类型；若是，则将拖拽节点的配置协议从原结构迁移到所述目标区域节点，并利用第三方组件监听原始协议数组及目标协议数组，待被监听的原始协议数组及目标协议数组发生回调事件后，调用所述可视化渲染容器对配置描述协议重新渲染；若否，则保留当前渲染结果。

本发明提供的系统提高了业务线的开发效率，满足现代企业快速变化的业务需求和追求低成本低效益诉求。

第三方面。

本发明提供了一种电子设备，该电子设备包括：

处理器、存储器和总线；

所述总线，用于连接所述处理器和所述存储器；

所述存储器，用于存储操作指令；

所述处理器，用于通过调用所述操作指令，可执行指令使处理器执行如本申请的第一方面所示的一种实现不限制嵌套层级的可视化UI拖拽布局的方法对应的操作。

在一个可选实施例中提供了一种电子设备，如图4所示，图4所示的电子设备5000包括：处理器5001和存储器5003。其中，处理器5001和存储器5003相连，如通过总线5002相连。可选地，电子设备5000还可以包括收发器5004。需要说明的是，实际应用中收发器5004不限于一个，该电子设备5000的结构并不构成对本申请实施例的限定。

处理器5001可以是CPU，通用处理器，DSP，ASIC，FPGA或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框，模块和电路。处理器5001也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，DSP和微处理器的组合等。

总线5002可包括一通路，在上述组件之间传送信息。总线5002可以是PCI总线或EISA总线等。总线5002可以分为地址总线、数据总线、控制总线等。为便于表示，图4中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

存储器5003可以是ROM或可存储静态信息和指令的其他类型的静态存储设备，RAM或者可存储信息和指令的其他类型的动态存储设备，也可以是EEPROM、CD-ROM或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。

存储器5003用于存储执行本申请方案的应用程序代码，并由处理器5001来控制执行。处理器5001用于执行存储器5003中存储的应用程序代码，以实现前述任一方法实施例所示的内容。

其中，电子设备包括但不限于：移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。

第四方面。

本发明提供了一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，该程序被处理器执行时实现本申请第一方面所示的一种实现不限制嵌套层级的可视化UI拖拽布局的方法。

本申请的又一实施例提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，当其在计算机上运行时，使得计算机可以执行前述方法实施例中相应内容。

Claims (8)

1.一种实现不限制嵌套层级的可视化UI拖拽布局的方法，其特征在于，包括：

根据视图协议及控件协议，定义不限制嵌套层级的配置描述协议；

创建可视化渲染容器，所述可视化渲染容器接收并渲染所述配置描述协议，包括：提取配置描述协议的content结构，并遍历content结构中的每个节点；判断每个节点是否为layout布局类型节点；若是，则通过所述可视化渲染容器对所述layout布局类型节点配置协议进行渲染；若否，创建节点构造器，并对节点构造器创造得到的节点进行解析及渲染；

判断渲染后的目标区域节点是否为layout布局类型；

若是，则将拖拽节点的配置协议从原结构迁移到所述目标区域节点，并利用第三方组件监听原始协议数组及目标协议数组，待被监听的原始协议数组及目标协议数组发生回调事件后，调用所述可视化渲染容器对配置描述协议重新渲染；

若否，则保留当前渲染结果。

2.如权利要求1所述的一种实现不限制嵌套层级的可视化UI拖拽布局的方法，其特征在于，所述对节点构造器创造得到的节点进行解析及渲染之后，还包括：

为节点绑定拖拽事件，并监听所述拖拽事件。

3.如权利要求2所述的一种实现不限制嵌套层级的可视化UI拖拽布局的方法，其特征在于，所述监听所述拖拽事件之后，还包括：

建立钩子接口，以增加业务扩展的判断条件。

4.一种实现不限制嵌套层级的可视化UI拖拽布局的系统，其特征在于，包括：

协议定义模块，用于根据视图协议及控件协议，定义不限制嵌套层级的配置描述协议；

渲染模块，用于创建可视化渲染容器，所述可视化渲染容器接收并渲染所述配置描述协议，还用于：提取配置描述协议的content结构，并遍历content结构中的每个节点；判断每个节点是否为layout布局类型节点；若是，则通过所述可视化渲染容器对所述layout布局类型节点配置协议进行渲染；若否，创建节点构造器，并对节点构造器创造得到的节点进行解析及渲染；

判断模块，用于判断渲染后的目标区域节点是否为layout布局类型；若是，则将拖拽节点的配置协议从原结构迁移到所述目标区域节点，并利用第三方组件监听原始协议数组及目标协议数组，待被监听的原始协议数组及目标协议数组发生回调事件后，调用所述可视化渲染容器对配置描述协议重新渲染；若否，则保留当前渲染结果。

5.如权利要求4所述的一种实现不限制嵌套层级的可视化UI拖拽布局的系统，其特征在于，所述渲染模块，还用于：

为节点绑定拖拽事件，并监听所述拖拽事件。

6.如权利要求5所述的一种实现不限制嵌套层级的可视化UI拖拽布局的系统，其特征在于，所述渲染模块，还用于：

建立钩子接口，以增加业务扩展的判断条件。

7.一种电子装置，其特征在于，包括处理器、存储器以及存储在所述存储器中且被配置为由所述处理器执行的计算机程序，所述处理器执行所述计算机程序时实现如权利要求1至3中任意一项所述的实现不限制嵌套层级的可视化UI拖拽布局的方法。

8.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质包括存储的计算机程序，其中，在所述计算机程序运行时控制所述计算机可读存储介质所在设备执行如权利要求1至3中任意一项所述的实现不限制嵌套层级的可视化UI拖拽布局的方法。

Images