CN117742695B - 一种用于简化低代码组件可视化配置的方法 - Google Patents
一种用于简化低代码组件可视化配置的方法 Download PDFInfo
- Publication number
- CN117742695B CN117742695B CN202410179988.6A CN202410179988A CN117742695B CN 117742695 B CN117742695 B CN 117742695B CN 202410179988 A CN202410179988 A CN 202410179988A CN 117742695 B CN117742695 B CN 117742695B
- Authority
- CN
- China
- Prior art keywords
- component
- low
- attribute
- code
- dynamic
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 84
- 230000000007 visual effect Effects 0.000 title claims abstract description 13
- 230000003993 interaction Effects 0.000 claims abstract description 58
- 230000014509 gene expression Effects 0.000 claims abstract description 28
- 238000009877 rendering Methods 0.000 claims abstract description 28
- 230000007246 mechanism Effects 0.000 claims abstract description 5
- 230000003068 static effect Effects 0.000 claims description 31
- 238000012800 visualization Methods 0.000 claims description 13
- 238000013461 design Methods 0.000 claims description 8
- 238000011161 development Methods 0.000 description 5
- 230000006870 function Effects 0.000 description 5
- 206010010071 Coma Diseases 0.000 description 4
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000011160 research Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Landscapes
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
- Stored Programmes (AREA)
Abstract
本发明涉及计算机技术领域，本发明公开了一种用于简化低代码组件可视化配置的方法，该方法通过在函数组件的组件静态属性中建立一个属性数组，用于配置低代码组件的动态属性或交互方法，再通过全局状态管理器进行管理，将动态属性或交互方法展示为可配置项。本发明通过渲染表达式对动态属性或交互方法的统一访问，简化配置；使用代理机制解析渲染表达式，获取低代码组件的动态属性的实际值，避免状态直接暴露。
Description
技术领域
本发明涉及计算机技术领域，具体涉及一种用于简化低代码组件可视化配置的方法。
背景技术
随着低代码平台的兴起，组件化和可视化编程被广泛采用，但组件属性配置仍以代码形式为主，这降低了开发效率并对非程序员不够友好。目前市面大多数低代码平台的组件属性一般分为三大类：第一类为组件本身消费的属性，一般是在设计界面配置的值，可以是js表达式或者字符串值；第二类为组件暴露的属性，一般是组件在交互过程中产生的值，被称为动态属性，比如input组件产生的值；第三类为组件暴露的交互方法，可以和组件内部产生交互的api属性，比如input组件失去焦点的方法。
以上三类属性，只有第一类可以在设计界面可视化的进行配置，其余两类需要通过写代码的方式获取，不同平台有不同的实现方式，这样大大增加了配置的难度，且大量代码编写配置易产生错误，降低开发效率。因此有必要研究一种通用直观的可视化组件属性配置方案，以提高低代码平台的易用性和开发效率。
发明内容
针对现有技术问题，本发明提供一种用于简化低代码组件可视化配置的方法，实现低代码开发中组件全部属性和方法的可视化配置，无需编程。
为实现上述目的，本发明采用的技术方案如下：
一种用于简化低代码组件可视化配置的方法，包括：
步骤1、在低代码平台创建低代码组件；
步骤2、在React框架函数组件的组件静态属性配置低代码组件的静态属性，在组件静态属性新建一个属性数组，属性数组的元素为低代码组件的动态属性或交互方法；
步骤3、低代码平台接入全局状态管理器，在全局状态管理器中设置组件挂载方法；
步骤4、基于组件挂载方法，将低代码组件的动态属性或交互方法挂载至全局状态管理器；
步骤5、拖拽低代码组件至设计画布中，加载组件静态属性并可视化低代码组件的静态属性、动态属性和交互方法；
步骤6、绑定可视化中某一个静态属性或动态属性，或者调用可视化中某一个交互方法，生成渲染表达式；
步骤7、解析渲染表达式，通过代理机制从全局状态管理器中获取低代码组件的动态属性或交互方法的元数据。
进一步地，步骤3中，设置组件挂载方法包括：步骤a、在全局状态管理器中初始化一个状态变量，状态变量的键为组件名称、值为组件的动态属性或交互方法；步骤b、将状态变量作为参数传入低代码平台所有组件中。
进一步地，步骤4包括：步骤41、根据待挂载的低代码组件的组件名称从属性数组匹配出对应的动态属性或交互方法的元数据；步骤42、将组件名称赋值为状态变量的键，将对应的动态属性或交互方法的元数据赋值为状态变量的值，将赋值后的状态变量记为状态量并挂载至全局状态管理器。
进一步地，步骤3中，低代码平台的渲染器接入全局状态管理器。
进一步地，步骤2中，属性数组中元素的结构包括变量类型、变量名和低代码平台的设计器中展示的提示信息。
进一步地，渲染表达式的结构为上下文变量.[组件名称].[动态属性/交互方法]。
进一步地，步骤7中，解析渲染表达式，通过从Proxy代理从全局状态管理器中获取低代码组件的动态属性或交互方法的元数据，包括：步骤A、创建一个空对象作为代理对象，在代理对象上设置代理拦截；步骤B、访问代理对象的一个任意属性，将当前任意属性作为组件名称；步骤C、返回一个新代理对象，拦截新代理对象的属性访问；步骤D、获取拦截的属性访问，使用作为组件名称的任意属性和拦截的属性从全局状态管理器获取为当前组件名称的低代码组件的动态属性或交互方法的元数据。
与现有技术相比，本发明具有以下有益效果：
本发明通过在函数组件的组件静态属性中建立一个属性数组，用于配置低代码组件的动态属性或交互方法，再通过全局状态管理器进行管理，将动态属性或交互方法展示为可配置项。本发明通过渲染表达式对动态属性或交互方法的统一访问，简化配置；本发明使用代理机制解析渲染表达式，获取低代码组件的动态属性的实际值，避免状态直接暴露。
附图说明
图1为本发明方法流程图。
具体实施方式
技术名词解释：
React框架：一个用来构建用户界面的JavaScript开发框架。
dsl：领域专用语言。
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图，对本发明进一步详细说明。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
如图1所示，本发明提供的一种用于简化低代码组件可视化配置的方法，包括：
步骤1、在低代码平台创建低代码组件；
步骤2、在React框架函数组件的组件静态属性配置低代码组件的静态属性，在组件静态属性新建一个属性数组，属性数组的元素为低代码组件的动态属性或交互方法；
步骤3、低代码平台接入全局状态管理器，在全局状态管理器中设置组件挂载方法；
步骤4、基于组件挂载方法，将低代码组件的动态属性或交互方法挂载至全局状态管理器；
步骤5、拖拽低代码组件至设计画布中，加载组件静态属性并可视化低代码组件的静态属性、动态属性和交互方法；
步骤6、绑定可视化中某一个静态属性或动态属性，或者调用可视化中某一个交互方法，生成渲染表达式；
步骤7、解析渲染表达式，从全局状态管理器中获取低代码组件的动态属性或交互方法的元数据。
本发明通过在函数组件的组件静态属性中建立一个属性数组，用于配置低代码组件的动态属性或交互方法，再通过全局状态管理器进行管理，将动态属性或交互方法展示为可配置项。本发明通过渲染表达式对动态属性或交互方法的统一访问，简化配置；本发明使用代理机制解析渲染表达式，获取低代码组件的动态属性的实际值，避免状态直接暴露。
本发明以React框架实现描述，其他前端框架也可参考实现步骤，只需要替换其中部分工具为目标框架的工具即可。
本发明低代码组件的静态属性采用框架或平台已有配置，具体实现以各自平台实现为准，例如采用React框架函数组件的组件静态属性进行配置。低代码组件的动态属性或交互方法绑定到静态属性配置上，通过在组件静态属性新建一个属性数组，属性数组的元素为低代码组件的动态属性或交互方法。属性数组中元素的结构包括变量类型、变量名和低代码平台的设计器中展示的提示信息，如{ "type": "变量类型"， "code": "变量名"，"desc": "设计器中展示的提示信息" }，在加载低代码组件时便可拿到对应组件属性的元数据，在低代码平台的设计器中进行可视化配置，“type”和"code"可提示用户该属性的代码元数据，"desc"可提示用户该属性的使用事项或者一些自定义的提示内容，提高易用性。
本发明低代码平台的渲染器接入全局状态管理器，全局状态管理器可以是市面上任意可用方案。低代码平台的渲染器会根据低代码平台的设计器产生的组件树进行渲染，所有低代码组件会渲染在同一个节点下，只要全局状态管理器包裹根节点，即可实现不同低代码组件之间的属性共享。
本发明在全局状态管理器中设置组件挂载方法，设置组件挂载方法包括：步骤a、在全局状态管理器中初始化一个Map类型的状态变量，状态变量的键（key）为组件名称、值（value）为组件的动态属性或交互方法；步骤b、将状态变量作为参数传入低代码平台所有组件中。如此才能让低代码平台所有低代码组件消费和修改全局状态管理器中的数据。基于组件挂载方法，将低代码组件的动态属性或交互方法挂载至全局状态管理器进行管理，包括：根据待挂载的低代码组件的组件名称从属性数组匹配出对应的动态属性或交互方法的元数据；将组件名称赋值为状态变量的键（key），将对应的动态属性或交互方法的元数据赋值为状态变量的值（value），将赋值后的状态变量记为状态量并挂载至全局状态管理器。
在低代码平台的设计器中使用低代码组件时，拖拽低代码组件到设计画布中，此时会先加载并缓存组件资源（包括组件的属性配置）至本地，此处为现有技术，故不做赘述。组件资源加载完毕后由此获取到配置低代码组件的静态属性的组件静态属性，生成一份json格式的dsl，dsl中包含了对应低代码组件的组件名称，当第二次编辑组件时，根据组件名称获取到缓存的组件资源，进而渲染到面板中供用户选择。组件静态属性又包含配置低代码组件的动态属性或交互方法的属性数组，由此实现加载组件静态属性并可视化低代码组件的静态属性、动态属性和交互方法。
当用户在设计器中使用以上低代码组件的静态属性、动态属性和交互方法的可视化信息，绑定可视化中某一个静态属性或动态属性，或者调用可视化中某一个交互方法，生成渲染表达式，将生成渲染表达式写入dsl中。渲染表达式的结构为上下文变量.[组件名称].[动态属性/交互方法]，组件名称、动态属性/交互方法的值为全局状态管理器中存储的实际值，即对应状态量的值。使用所述渲染表达式获取值是为了隐藏组件状态，避免组件状态直接暴露。
完成可视化的页面设计后，低代码组件内部在消费渲染表达式的值，需要低代码平台的渲染器根据dsl进行渲染，将渲染表达式传给对应的低代码组件，低代码组件再通过渲染器的内核执行对应的渲染表达式，从而获取到实际的值。渲染表达式上下文变量.[组件名称].[动态属性/交互方法]（this.refs[组件名称].[动态属性/交互方法]）包含了组件名称以及对应的动态属性和交互方法，从全局状态管理器中取出状态量，再通过组件名称作为键关联，便可拿到挂载到全局状态管理器中实际的值。由于渲染表达式链路比较长，包含了this、refs两层，本发明通过从Proxy代理从全局状态管理器中获取实际的值，即低代码组件的动态属性或交互方法的元数据，如此可以隐藏全局状态管理器内部数据结构，保护全局状态管理器不被外界干扰，提高稳定性。
解析渲染表达式，通过从Proxy代理从全局状态管理器中获取低代码组件的动态属性或交互方法的元数据，包括：步骤A、创建一个空对象refs作为代理对象，在代理对象上设置代理拦截；步骤B、访问代理对象的一个任意属性，将当前任意属性作为组件名称；步骤C、返回一个新代理对象，拦截新代理对象的属性访问；步骤D、获取拦截的属性访问，使用作为组件名称的任意属性和拦截的属性从全局状态管理器获取为当前组件名称的低代码组件的动态属性或交互方法的元数据。创建的空对象refs不包含实际数据，仅作为代理对象。当第一次访问代理对象的属性时，外层代理会拦截到代理对象的一个任意属性，例如this.refs.comA，将当前任意属性comA作为组件名称，并返回一个内层代理对象，即一个新代理对象。拦截新代理对象的属性访问，如this.refs.comA.data，获取拦截的属性访问，内层代理使用comA和data并通过全局状态管理器查询
任意属性对应组件名称的低代码组件的动态属性或交互方法的元数据。本发明利用外层代理动态获取组件名称，内层代理再根据组件名称查询全局状态管理器的数据，两层代理实现了对状态管理的解耦访问。低代码组件可以方便使用this.refs来访问任意组件数据，而不依赖组件实例，也无需了解数据所在。可以自由修改全局状态管理器中的数据结构，对实现对渲染表达式访问的完全透明。
最后应说明的是：以上各实施例仅仅为本发明的较优实施例用以说明本发明的技术方案，而非对其限制，当然更不是限制本发明的专利范围；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围；也就是说，但凡在本发明的主体设计思想和精神上作出的毫无实质意义的改动或润色，其所解决的技术问题仍然与本发明一致的，均应当包含在本发明的保护范围之内；另外，将本发明的技术方案直接或间接的运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。
Claims (5)
1.一种用于简化低代码组件可视化配置的方法，其特征在于，包括：
步骤1、在低代码平台创建低代码组件；
步骤2、在React框架函数组件的组件静态属性配置低代码组件的静态属性，在组件静态属性新建一个属性数组，属性数组的元素为低代码组件的动态属性或交互方法；
步骤3、低代码平台接入全局状态管理器，在全局状态管理器中设置组件挂载方法；
步骤4、基于组件挂载方法，将低代码组件的动态属性或交互方法挂载至全局状态管理器；
步骤5、拖拽低代码组件至设计画布中，加载组件静态属性并可视化低代码组件的静态属性、动态属性和交互方法；
步骤6、绑定可视化中某一个静态属性或动态属性，或者调用可视化中某一个交互方法，生成渲染表达式；
步骤7、解析渲染表达式，通过代理机制从全局状态管理器中获取低代码组件的动态属性或交互方法的元数据；
步骤3中，设置组件挂载方法包括：步骤a、在全局状态管理器中初始化一个状态变量，状态变量的键为组件名称、值为组件的动态属性或交互方法；步骤b、将状态变量作为参数传入低代码平台所有组件中；
步骤4包括：步骤41、根据待挂载的低代码组件的组件名称从属性数组匹配出对应的动态属性或交互方法的元数据；步骤42、将组件名称赋值为状态变量的键，将对应的动态属性或交互方法的元数据赋值为状态变量的值，将赋值后的状态变量记为状态量并挂载至全局状态管理器。
2.根据权利要求1所述的一种用于简化低代码组件可视化配置的方法，其特征在于，步骤3中，低代码平台的渲染器接入全局状态管理器。
3.根据权利要求1所述的一种用于简化低代码组件可视化配置的方法，其特征在于，步骤2中，属性数组中元素的结构包括变量类型、变量名和低代码平台的设计器中展示的提示信息。
4.根据权利要求1所述的一种用于简化低代码组件可视化配置的方法，其特征在于，渲染表达式的结构为上下文变量.[组件名称].[动态属性/交互方法]。
5.根据权利要求4所述的一种用于简化低代码组件可视化配置的方法，其特征在于，步骤7中，解析渲染表达式，通过从Proxy代理从全局状态管理器中获取低代码组件的动态属性或交互方法的元数据，包括：步骤A、创建一个空对象作为代理对象，在代理对象上设置代理拦截；步骤B、访问代理对象的一个任意属性，将当前任意属性作为组件名称；步骤C、返回一个新代理对象，拦截新代理对象的属性访问；步骤D、获取拦截的属性访问，使用作为组件名称的任意属性和拦截的属性从全局状态管理器获取为当前组件名称的低代码组件的动态属性或交互方法的元数据。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410179988.6A CN117742695B (zh) | 2024-02-18 | 2024-02-18 | 一种用于简化低代码组件可视化配置的方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410179988.6A CN117742695B (zh) | 2024-02-18 | 2024-02-18 | 一种用于简化低代码组件可视化配置的方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN117742695A CN117742695A (zh) | 2024-03-22 |
| CN117742695B true CN117742695B (zh) | 2024-05-28 |
Family
ID=90279614
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202410179988.6A Active CN117742695B (zh) | 2024-02-18 | 2024-02-18 | 一种用于简化低代码组件可视化配置的方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117742695B (zh) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8245020B1 (en) * | 2008-05-13 | 2012-08-14 | Selectica, Inc. | Creating a partial instance of component in response to user specifying a value for a dynamic attribute of a selected component |
| CN112231608A (zh) * | 2020-10-30 | 2021-01-15 | 三峡机电工程技术有限公司 | 一种嵌入式Web组态图元的实现方法 |
| CN112445477A (zh) * | 2020-12-09 | 2021-03-05 | 浙江源创建筑智能科技有限公司 | 一种基于Vue的组件可视化系统及方法 |
| CN113641338A (zh) * | 2021-07-14 | 2021-11-12 | 广州市玄武无线科技股份有限公司 | 一种动态生成视图组件的方法及装置 |
| CN113791832A (zh) * | 2021-08-23 | 2021-12-14 | 浙江时空道宇科技有限公司 | 一种echart组件的数据源配置方法、装置、终端及存储介质 |
| CN116627402A (zh) * | 2023-07-19 | 2023-08-22 | 云筑信息科技(成都)有限公司 | 一种基于React在低代码平台中实现自定义组件配置化的方法 |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8132115B2 (en) * | 2003-02-27 | 2012-03-06 | Autodesk, Inc. | Dynamic properties for software objects |
| US20120030612A1 (en) * | 2010-07-30 | 2012-02-02 | Sap Ag | Dynamic property attributes |
-
2024
- 2024-02-18 CN CN202410179988.6A patent/CN117742695B/zh active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8245020B1 (en) * | 2008-05-13 | 2012-08-14 | Selectica, Inc. | Creating a partial instance of component in response to user specifying a value for a dynamic attribute of a selected component |
| CN112231608A (zh) * | 2020-10-30 | 2021-01-15 | 三峡机电工程技术有限公司 | 一种嵌入式Web组态图元的实现方法 |
| CN112445477A (zh) * | 2020-12-09 | 2021-03-05 | 浙江源创建筑智能科技有限公司 | 一种基于Vue的组件可视化系统及方法 |
| CN113641338A (zh) * | 2021-07-14 | 2021-11-12 | 广州市玄武无线科技股份有限公司 | 一种动态生成视图组件的方法及装置 |
| CN113791832A (zh) * | 2021-08-23 | 2021-12-14 | 浙江时空道宇科技有限公司 | 一种echart组件的数据源配置方法、装置、终端及存储介质 |
| CN116627402A (zh) * | 2023-07-19 | 2023-08-22 | 云筑信息科技(成都)有限公司 | 一种基于React在低代码平台中实现自定义组件配置化的方法 |
Non-Patent Citations (4)
| Title |
|---|
| A factor combination approach to developing style guides for mobile phone user interface;Wonkyu Park等;International Journal of Industrial Ergonomics;20110623;第41卷(第5期);第536-545页 * |
| K. Sartipi等.Alborz: An Interactive Toolkit to Extract Static and Dynamic Views of a Software System.14th IEEE International Conference on Program Comprehension (ICPC'06).2006,第1-4页. * |
| 基于D3和React的数据分析可视化组件设计与实现;郑璇;中国优秀硕士学位论文全文数据库 信息科技辑;20201015(第10期);I139-75 * |
| 基于SVG和Vue的数据过程可视化设计;林晨 等;计算机系统应用;20220414;第31卷(第4期);第130-136页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN117742695A (zh) | 2024-03-22 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP4812337B2 (ja) | フォームタイプを使用してフォームを生成する方法および装置 | |
| KR101331260B1 (ko) | 메타데이터를 이용하여 사용자 인터페이스를 렌더링하기위한 장치, 사용자 인터페이스를 생성하는 방법, 및 컴퓨터판독 가능 매체 | |
| TW202141300A (zh) | 頁面處理方法、裝置、設備及儲存媒體 | |
| US6957439B1 (en) | Method, system, and program for mapping objects in different language formats | |
| US10067957B1 (en) | Process for serializing and deserializing data described by a schema | |
| US7971194B1 (en) | Programming language techniques for client-side development and execution | |
| US6854123B1 (en) | Method, system, and program for mapping standard application program interfaces (APIs) to user interface APIs | |
| US20090077091A1 (en) | System for development and hosting of network applications | |
| US9471704B2 (en) | Shared script files in multi-tab browser | |
| CN109947422B (zh) | 一种基于领域驱动设计的业务实体实现方法及系统 | |
| JP7350923B2 (ja) | ディープラーニングフレームワークのオペレータ登録方法、装置、デバイス及び記憶媒体 | |
| US20080307490A1 (en) | Methods and apparatus for building and executing natural language workflow functions | |
| US20040268301A1 (en) | Adding new compiler methods to an integrated development environment | |
| CN111125440B (zh) | 一种基于Monad的持久层复合条件查询方法与存储介质 | |
| CN117093316B (zh) | 一种跨平台页面渲染系统、电子设备及存储介质 | |
| US9311111B2 (en) | Programming environment with support for handle and non-handle user-created classes | |
| KR20140116438A (ko) | 연산 순서의 그래픽 표현 기법 | |
| US20160342400A1 (en) | Compact Type Layouts | |
| CN117742695B (zh) | 一种用于简化低代码组件可视化配置的方法 | |
| CN115145559A (zh) | 一种基于Flutter的配置管理方法、装置及设备 | |
| US7567971B2 (en) | Generic symbol referencing mechanism | |
| JP4971096B2 (ja) | コーディング支援装置 | |
| US7590975B1 (en) | Mechanism for translation of data in an execution framework | |
| US10846202B2 (en) | Multi-language heap analyzer | |
| CN117406969A (zh) | 一种TypeScript类型声明的生成方法、系统、装置及介质 |
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 |