从“图形可视化”到“图生代码”,低代码平台的新挑战

前言:

低代码平台最大的一个特点就是可视化,将代码采用可视化的方式展示管理。一时间拥有图形化界面的各类系统都挂上了低代码的标签。但更多的代码从业者在使用中却发现,在众多的低代码平台中都是“别人家的代码”其可视化主要是别人家的代码图形化做的好。而自身如果想实现图形化还是得从图形化入手再重新学习别人家的代码。 这其实对于当前的低代码提出了一个新的挑战,图形化究竟是灌输给大家一种适合图形化展示的代码组合和撰写方法,让大家去学习以便于做出更好的支持图形化展示的代码软件,还是从根本上构建一种图形化的工具体系成为事实代码标准,彻底分离设计与代码从业者。Onion 图生代码系列博文,将从这个问题入手,从图形表现以及代码设计方面去探讨,图形(可视化)与代码涉及的一些基础关系,并视图从“图生代码”这个角度去考虑怎么去规范“图形可视化设计”以及如何逻辑成为严谨的设计代码。

本文作为系列博文的开始,首先从现状做一个简要的分析。

一,常用视图

(1)表单

在可视化系统最初的应用中,都是以表单来作为载体的。其早期的形式也形成了一些智能表单、电子表单等应用直到现在很多主流的低代码系统仍然会保留这一基础的表单载体作为,工作流程的载体。

常用视图中,主要包括:

(1)输入组件,组件配置属性这期间会将展示、数据类型、校验进行分类整理

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

(2)布局组件,表单的布局通常成为表格。以行列方式根据数据顺序、重要性可操作性进行行列合并操作。

添加图片注释,不超过 140 字(可选)

(2)列表

列表是由“行”以及“格”来组成的,行是一个数据集合,格式是具体的一个数据表现。表单是一维数据的展现行则是集合数据的展现。而操作和展现上也更多的表现出了集合处理的特征。

添加图片注释,不超过 140 字(可选)

列表视图其集成度也更高,在领域以及实体应用上包含了更多的属性。

添加图片注释,不超过 140 字(可选)

集合属性操作示意

添加图片注释,不超过 140 字(可选)

集合功能应用

添加图片注释,不超过 140 字(可选)

(3)图表

在常用视图中,图表是一种特殊的存在。其往往会应用在独立系统的后期,作为数据更高维度的载体。使得数据的所有者能够对于系统、数据、过程、结果有更直观的概念。这些使用中,对于关键性数据的筛选、组织以及在关键点上能够增加关联事件,实现数据的“溯源”。其重在数据展现形式以及数据内在关联性设计。

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

(4)绘图

在常用视图中,有一个另类绘图类应用,自定义“绘图”这类应用在常用系统中应用比较少,但随着移动设备以及物联网设备带来的大量的触控类操作将自定义绘图提高了一个应用的登记。在后续的章节中也会但多作为一个部分来讲解。

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

二,动作逻辑

动作逻辑是让页面数据动起来连起来的关键部分,web应用中建立了很好的事件冒泡和处理机制。但其发展速度远远超过了应用的推进。在很大程度上与应用产生了割裂。这就需要再应用层有更好的贴近理论层设计来弥补裂痕。

(1)事件

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

(2)动作

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

三,代码设计

(1)元数据扩展定义:

在低代码平台中元数据的使用也是非常广泛,从前端可视化的组件的prop 属性定义,后端OR Maping数据库表映射,以及支撑系统模块关联关系,权限分配支撑等等都是基础性的元数据。而对于低代码平台及工具而言,其最主要的一个功能也是配置管理低代码组件的元数据信息。在业务组件发生需求变更时尽量通过修改元数配置的方式来改变组件的业务特性。

在模型(Module)类中中添加 @DBTable实现数据库表映射,或者在实体类中增加Aggregation聚合注解实现实体向聚合类的转换。

在控制器中(Controller)中添加Web路由注解@RequestMapping来完成Controller向web 容器的注入实现。

视图(View)中增加可被可视化设计器识别的视图注解代码。

添加图片注释,不超过 140 字(可选)

(1)视图注解

元数据转换匹配关系

添加图片注释,不超过 140 字(可选)

元数据编辑器

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

(2)web访问数据路由

添加图片注释,不超过 140 字(可选)

@Controller @RequestMapping("/admin/org/deparment/") @MethodChinaName(cname = "部门管理", imageClass = "bpmfont bpmgongzuoliuzuhuzicaidan") @Aggregation(sourceClass = IDeparmentService.class, rootClass = Org.class) public interface IDeparmentAPI { @RequestMapping(method = RequestMethod.POST, value = "Persons") @GridViewAnnotation() @ModuleAnnotation(caption = "人员列表") @APIEventAnnotation(bindMenu = {CustomMenuItem.treeNodeEditor}) @ResponseBody public <K extends IPersonGrid> ListResultModel<List<K>> getPersons(String orgId); }

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

(3)动作事件注解

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

(4)常用注解

注解名称

用途

实例

@RequestMapping

直接使用的SpringMvc注解用于将当前方法标识为,web可访问

@RequestMapping(value = {"AggAPITree"}, method = {RequestMethod.GET, RequestMethod.POST})

@ModuleAnnotation

视图标识,在方法上标识改注解后会被模型编译器识别为视图模型将其内部对象渲染为视图。

@ModuleAnnotation(dynLoad = true, imageClass = "spafont spa-icon-moveforward", caption = "模块授权")

@ResponseBody

直接使用的SpringMvc注解,标识为JSON数据返回

@ResponseBody

@DialogAnnotation

添加该标识时,当前端路由到当前方法时,以独立窗口的方式返回

@DialogAnnotation(width = "850", height = "750")

@Aggregation

领域标识,在类注解中添加该标识,会被DSM引擎自动索引并根据注解中指定类型加载到相关的实体列表中

@Aggregation(type = AggregationType.customDomain,sourceClass = PersonService.class,rootClass = Person.class)

@*Domain

通用域标识

@OrgDomain@BpmDomain@VfsDomain@MsgDomain@NavDomain

@*TreeView

树形注解包括了,导航树、弹出字典树,折叠分组树等注解集合

@TreeViewAnnotation@NavTreeViewAnnotation@NavFoldingTreeViewAnnotation@PopTreeViewAnnotation

@GridViewAnnotation

数据列表注解

@GalleryView*Annotation

详情图形混合注解

@GalleryViewAnnotation@NavGalleryViewAnnotation

@*TabsViewAnnotation

Tab切换页

@TabsViewAnnotation@NavTabsViewAnnotation@NavFoldingTabsViewAnnotation

@PopMenuViewAnnotation

菜单导航

@PopMenuViewAnnotation

@NavGroupViewAnnotation

分组表单

@NavGroupViewAnnotation

@FormViewAnnotation

表单注解

@FormViewAnnotation

@*ButtonViewsViewAnnotation

按钮栏视图

@ButtonViewsAnnotation@NavButtonViewsAnnotation

常用视图注解

注解名称

视图类型

示例

@FormAnnotation

表单视图

@FormAnnotation(customMenu = {CustomFormMenu.Save, CustomFormMenu.Close}, customService = ColService.class)

@GridAnnotation

列表视图

@GridAnnotation(rowHeight = "4em", customMenu = {GridMenu.Reload, GridMenu.Add, GridMenu.Delete}, customService = {LocalFormulaService.class}, event = CustomGridEvent.editor)

@TreeAnnotation

树形视图

@TreeAnnotation(heplBar = true, caption = "选择人员", selMode =SelModeType.singlecheckbox)

@NavTreeAnnotation

树形导航视图

@NavTreeAnnotation(bottombarMenu = {CustomFormMenu.Save, CustomFormMenu.Close}, customService = AggWebSiteSelectService.class)

@GalleryAnnotation

图文列表视图

@GalleryAnnotation(customMenu = {GridMenu.Reload, GridMenu.Add, GridMenu.Delete})

@TabsAnnotation

Tab页视图

@TabsAnnotation(singleOpen = true)

@ButtonViewsAnnotation

按钮组导航

@ButtonViewsAnnotation(barLocation = BarLocationType.left, barVAlign = VAlignType.top, autoReload = false)

@NavGroupAnnotation

分组容器视图

@NavGroupAnnotation(bottombarMenu = {CustomFormMenu.Save, CustomFormMenu.Close})

@NavGalleryAnnotation

卡片导航

@NavGalleryAnnotation

@NavFoldingAnnotation

折叠页导航

@NavFoldingAnnotation(bottombarMenu = CustomFormMenu.Close)

@NavMenuBarAnnotation

菜单页导航

@NavMenuBarAnnotation

常用注解列表实例

注解名称

用途

示例

GridAnnotation

列表视图配置

@GridAnnotation(rowHeight = "4em", customService = {LocalFormulaService.class}, event = CustomGridEvent.editor)

PageBar

分页栏

@PageBar(pageCount = 100)

ToolBarMenu

工具栏

@ToolBarMenu

MenuBarMenu

菜单栏

@MenuBarMenu

BottomBarMenu

底部工具栏

@BottomBarMenu

常用注解列表行子域示例

注解名称

用途

实例

@GridRowCmd

表格行按钮

@GridRowCmd(tagCmdsAlign = TagCmdsAlign.left, menuClass = {DBColAction.class})

@RowHead

行头配置

@RowHead(selMode = SelModeType.none, gridHandlerCaption = "删除|排序", rowHandlerWidth = "10em", rowNumbered = false)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/14628.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何解决vcruntime140.dll丢失问题,详细介绍5种靠谱的解决方法

vcruntime140.dll是Microsoft Visual C Redistributable Package的一部分&#xff0c;它为使用Visual C编译器开发的应用程序提供必要的运行时环境。该DLL文件包含了大量应用程序运行时需要调用的库函数&#xff0c;这些函数是实现C标准库、异常处理机制、RTTI&#xff08;运行…

图搜索算法教程(个人总结版)

图搜索算法是一类用于遍历或搜索图结构的算法&#xff0c;广泛应用于网络分析、路径规划、人工智能等领域。常见的图搜索算法包括深度优先搜索&#xff08;DFS&#xff09;、广度优先搜索&#xff08;BFS&#xff09;、Dijkstra算法、A*算法等。本文将详细介绍这些图搜索算法的…

创建JSON数据包

在C语言中&#xff0c;JSON不是一种内置的数据类型&#xff0c;因此你需要使用第三方库来创建和解析JSON数据。一个流行的库是cJSON&#xff0c;它允许你以C语言的方式操作JSON数据。 以下是一个使用cJSON库创建类似于你给出的JSON数据包的示例&#xff1a; 首先&#xff0c;…

go-zero 实战(5)

引入Prometheus 用 Prometheus 监控应用 1. 用 docker 启动 Prometheus 编辑配置位置&#xff0c;我将 prometheus.yaml 和 targets.json 文件放在了 /opt/prometheus/conf目录下 prometheus.yaml global:scrape_interval: 15s # 抓取间隔evaluation_interval: 15s # 评估…

【代码随想录 二叉树】二叉树前序、中序、后序遍历的迭代遍历

文章目录 1. 二叉树前序遍历&#xff08;迭代法&#xff09;2. 二叉树后序遍历&#xff08;迭代法&#xff09;3. 二叉树中序遍历&#xff08;迭代法&#xff09; 1. 二叉树前序遍历&#xff08;迭代法&#xff09; 题目连接 &#x1f34e;因为处理顺序和访问顺序是一致的。所…

前端工程化-babel、corejs、postcss

出处&#xff1a;前端工程化-babel、corejs、postcss | 刘维_个人博客_编程秘籍_开发技巧_入门到精通_生活感悟 (ldlw.site) 一. babel和corejs的作用到底是什么 脑子里面的想法 es6 -> es5 es6里面其实有两种东西 语法 新特性 转的语法 const a 1 const b &#xf…

Shader GLSL 3D旋转函数

mat4 rotationMatrix(vec3 axis, float angle) {axis = normalize(axis);float s = sin(angle);float c = cos(angle)

类和对象的基本概念

类和对象的基本概念 C和C中struct区别类的封装封装访问权限总结struct和class的区别 将成员变量设置为private C和C中struct区别 C语言struct只有变量C语言struct 既有变量&#xff0c;也有函数 类的封装 封装 把变量&#xff08;属性&#xff09;和函数&#xff08;操作&a…

交换机部分综合实验

实验要求 1.内网IP地址使用172.16.0.0/16 2.sw1和sW2之间互为备份; 3.VRRP/mstp/vlan/eth-trunk均使用; 4.所有pc均通过DHcP获取Ip地址; 5.ISP只配置IP地址; 6.所有电脑可以正常访问IsP路由器环回 实验拓扑 实验思路 1.给交换机创建vlan&#xff0c;并将接口划入vlan 2.在SW1和…

Unity Render Streaming 云渲染 外网访问

初版&#xff1a; 日期&#xff1a;2024.5.20 前言&#xff1a;临时思路整理&#xff0c;后期会详细补充 环境&#xff1a; 1. 阿里云服务器 需要安装好nodejs 、npm 2. windows电脑&#xff0c;需安装好 nodejs 、npm 3.Unity 2021.3.15f1 4.Unity Render Streaming …

31.GDB介绍及简单使用

文章目录 基本用法查看汇编代码Text User Interface(TUI)refernece 欢迎访问个人网络日志&#x1f339;&#x1f339;知行空间&#x1f339;&#x1f339; GDB 是 GNU Debugger的缩写&#xff0c;是GNU软件系统中的标准调试器&#xff0c; 很多类UNIX系统都可以使用GDB&#xf…

【论文解读】Overview of the Scalable Video Coding Extension of the H.264/AVC Standard

介绍 该篇论文是一篇关于H.264/AVC标准可扩展视频编码(SVC)扩展的综述论文,由Heiko Schwarz、Detlev Marpe和Thomas Wiegand撰写,发表在《IEEE Transactions on Circuits and Systems for Video Technology》2007年9月第17卷第9期上。 论文解读 摘要: H.264/AVC视频编…

乡村振兴的农业供给侧结构性改革:优化农业产业结构,提升农产品质量,满足市场需求,实现美丽乡村产业振兴

一、引言 乡村振兴战略是我国当前及未来一段时间内的重大战略部署&#xff0c;旨在推动农业农村现代化&#xff0c;实现城乡融合发展。在乡村振兴战略中&#xff0c;农业供给侧结构性改革是核心任务之一。通过优化农业产业结构、提升农产品质量、满足市场需求&#xff0c;不仅…

韩国云主机远程故障怎么排查?

韩国云主机远程故障可能是由于多种原因引起的&#xff0c;包括网络问题、服务器故障、安全设置、客户端问题等。下面是针对韩国云主机远程故障的排查步骤和解决方法&#xff1a; 检查网络连接 1.使用 ping 命令 在本地计算机上使用 ping 命令检查与云主机之间的网络连接。如果无…

AI巨头争相与Reddit合作:为何一个古老的论坛成为AI训练的“宝藏”?

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

debian nginx upsync consul 实现动态负载

1. consul 安装 wget -O- https://apt.releases.hashicorp.com/gpg | sudo gpg --dearmor -o /usr/share/keyrings/hashicorp-archive-keyring.gpg echo "deb [signed-by/usr/share/keyrings/hashicorp-archive-keyring.gpg] https://apt.releases.hashicorp.com $(lsb_r…

MariaDB 给指定列值自动加密(持久数据加触发器)

文章目录 代码插入时&#xff0c;自动加密更新时&#xff0c;自动加密查看触发器数据操作示例update数据取出解密取 注意一次尝试&#xff0c;看加密后数据长度 参考链接&#xff1a; 一篇非常好的讲解触发器的文章&#xff1a;示例、原理MySQL/MariaDB触发器。 用触发器自动加…

前端工程化07-常见的包管理工具npm、yarn、cnpm、npx、pnpm

8、包管理工具 8.1、包管理工具概述 npm包管理工具、在安装node的时候这个东西就已经安装过了&#xff0c;通过npm去管理包的时候这个时候回有一个配置文件叫做package.json,他是以json的方式来书写对应的一个配置文件&#xff0c;这个配置文件是可以添加特别多的一些字段的&…

input输入多行文本,保存为.dot文件和对应的.txt文件

需求 不管是上面的dot还是这个dot 变成 input输入文本按“# ꧂ ꧁”结束保存在dot文本文件夹下&#xff0c;用txt保存每个文件文件名&#xff1a; 编号. 第二行有字文字 时间戳 代码 首先&#xff0c;我会创建一个Python脚本&#xff0c;它将接受用户的输入&#xff0c;直到…

案例题(第二版)

案例题目 信息系统架构设计 基本概念 信息系统架构&#xff08;ISA&#xff09;是对某一特定内容里的信息进行统筹、规划、设计、安排等一系列的有机处理的活动。特点如下 架构是对系统的抽象&#xff0c;它通过描述元素、元素的外部可见属性及元素之间的关系来反映这种抽象…