一种自动生成UI界面的方法及系统与流程

本发明涉及ui交互界面生成的技术领域,特别是一种自动生成ui界面的方法及系统。

背景技术:

现有技术中的ui界面生成仅支持界面的预设性生成(输入一个json生成一个界面),本发明支持动态生成界面,无需预先配置;现有技术中仅支持预设的ui组件,本发明不受预设组件限制支持自定义拓展ui组件;现有技术的通用性低,只支持预设模式下使用,本发明不受预设环境限制,可通用于任意平台、开发引擎等;现有技术没有完备的ui交互处理系统,不支持处理自定义的事件,只支持预设事件的处理,更多的为换肤功能,本发明聚焦ui交互的全流程,满足各类ui交互需要,适用于各类ui使用环境;所以现有技术对生成界面的局限性高,通常只针对某一功能界面,拓展困难,无法广泛使用。

技术实现要素:

为克服上述问题,本发明的目的是提供一种基于json生成统一的通用ui数据结构,然后通过ui数据解析生成ui界面的自动生成ui界面的方法。

本发明采用以下方案实现:一种自动生成ui界面的方法,所述方法包括以下步骤:

步骤s1、输入ui面板创建数据,将拆分好的组件ui数据中提取界面生成所需的数据,再根据数据类型选择解析器或拓展处理器进行界面的生成并注册到ui交互;

步骤s2、判断是否需要进行数据转换,是,则通过数据处理进行数据转换,否,则对数据进行分发;

步骤s3、等待ui界面用户交互,对ui数据进行处理操作;

步骤s4、判断是否出发ui界面关闭的事件,是则停止,否,则继续等待ui界面用户交互。

进一步的,根据权利要求1所述的一种自动生成ui界面的方法,其特征在于:所述步骤s1进一步包括以下步骤:

步骤s11、输入ui数据与注册事件;

步骤s12、解析ui数据中的数据类型;

步骤s13、判断是否包含该ui数据类型的解析器,是,则转发ui数据到解析器中,否,则判断是否包含该ui数据的拓展处理器,是,则转发ui数据到拓展处理器,否,则返回创建失败异常,停止;

步骤s14、创建数据处理控制器,将注册事件转发到ui事件处理;

步骤s15、将数据处理器转发到解析器或拓展处理器中进行ui创建处理,基于ui数据生成界面;

步骤s16、添加事件监听到ui事件处理中,返回ui根节点;

步骤s17、记录ui根节点与其他缓存到数据处理控制器中;

步骤s18、完成ui界面创建返回数据处理控制器,停止。

进一步的,所述步骤s2中的数据处理进一步包括以下步骤:

步骤s21、输入数据,判断数据的输入类型;

步骤s22、判断数据是否是json数据,是,则将json数据识别为json实例类型;否,则判断是否为json文件路径,是,则读取文件中的json数据,否,则停止;

步骤s23、创建一个新的ui数据,将json数据中的基础数据填充到ui数据中的对应字段值中;

步骤s24、无匹配字段的数据填充到ui数据的拓展字段队列中,判断是否是根节点数据,是,则记录为根节点ui数据;否,则添加到父节点ui数据的子数据中;

步骤s25、判断json数据是否包含子数据,是,则返回创建一个新的ui数据,否,则返回创建的根节点ui数据,停止。

进一步的,所述步骤s2中的数据分发进一步具体包括以下步骤:

步骤s26、输入ui面板创建数据,判断输入数据类型;

步骤s27、判断是否为json数据,是,则将json数据转为ui数据;否,则判断是否为json文件路径,是,则读取文件并将读取的json数据转为ui数据,否,则判断是否为ui数据类型,是,则解析ui数据,否,则停止;

步骤s28、解析ui数据,将ui数据与注册事件传递给ui创建处理中,ui创建处理返回ui控制器,对ui控制器进行记录;

步骤s29、判断是否为根节点数据,是,则记录控制器为面板控制器;否,则将控制器添加到父节点控制器的子控制器集合中;

进一步的,所述步骤s3进一步具体包括以下步骤:

步骤s31、ui交互界面用户进行交互,判断是否为数据保存事件,是,则判断数据处理控制器中是否记录了数据保存的触发事件,是,则获取ui面板的数据,并迭代获取所有子控件的数据,生成完整数据,执行记录的数据保存触发事件,传递生成的完成数据,停止;否,则判定为无效事件;

步骤s32、判断是否为数据保存事件,否,则判断是否为数据还原事件,是,则将创建时的初始数据应用到ui界面中,否,则判断是否为数据变更事件;

步骤s33、判断数据处理控制器中是否记录了数据变更的触发事件,是,则执行记录的数据变更触发事件,传递还原后的数据;否,则停止;

步骤s34、判断是否为数据变更事件,是,则判断是否有注册该变更数据的监听事件;否,则判断是否注册的拓展事件;

步骤s35、判断是否注册的拓展事件,是,则,执行注册的拓展事件,传递当前触发数据;否,则判定为无效事件;

步骤s36、判断是否有注册该变更数据的监听事件,是,则执行注册的该变更数据的监听事件传递变更数据,否,则判断数据处理控制器中是否记录了数据变更的触发事件;

步骤s37、判断数据处理控制器中是否记录了数据变更的触发事件,是,则获取ui面板的数据,并迭代获取所有子控件的数据,生成完整数据,执行记录的数据变更触发事件,传递生成的完整数据,停止;否,则停止。

本发明还提供了一种自动生成ui界面的系统,包括数据分发模块、数据处理模块、ui创建模块和ui交互事件模块;所述ui创建模块,即输入ui面板创建数据,将拆分好的组件ui数据中提取界面生成所需的数据,再根据数据类型选择解析器或拓展处理器进行界面的生成并注册到ui交互;所述数据分发模块和数据处理模块,即判断是否需要进行数据转换,是,则通过数据处理模块进行数据转换,否,则经数据分发模块对数据进行分发;所述ui交互事件模块,即等待ui界面用户交互,对ui数据进行处理操作;判断是否出发ui界面关闭的事件,是则停止,否,则继续等待ui界面用户交互。

进一步的,所述ui创建模块进一步具体包括:输入单元、解析单元、解析器单元、创建单元、转发单元、添加单元、记录单元和返回单元;所述输入单元,即输入ui数据与注册事件;所述解析单元,即解析ui数据中的数据类型;所述解析器单元,即判断是否包含该ui数据类型的解析器,是,则转发ui数据到解析器中,否,则判断是否包含该ui数据的拓展处理器,是,则转发ui数据到拓展处理器,否,则返回创建失败异常,停止;所述创建单元,即创建数据处理控制器,将注册事件转发到ui事件处理;所述转发单元,即将数据处理器转发到解析器或拓展处理器中进行ui创建处理,基于ui数据生成界面;所述添加单元,即添加事件监听到ui事件处理中,返回ui根节点;所述记录单元,即记录ui根节点与其他缓存到数据处理控制器中;所述返回单元,即完成ui界面创建返回数据处理控制器,停止。

进一步的,所述数据处理模块进一步包括:判断类型单元、数据判断单元、填充单元、根节点单元和子数据单元;所述判断类型单元,即输入数据,判断数据的输入类型;所述数据判断单元,即判断数据是否是json数据,是,则将json数据识别为json实例类型;否,则判断是否为json文件路径,是,则读取文件中的json数据,否,则停止;所述填充单元,即创建一个新的ui数据,将json数据中的基础数据填充到ui数据中的对应字段值中;所述根节点单元,即无匹配字段的数据填充到ui数据的拓展字段队列中,判断是否是根节点数据,是,则记录为根节点ui数据;否,则添加到父节点ui数据的子数据中;所述子数据单元,即判断json数据是否包含子数据,是,则返回创建一个新的ui数据,否,则返回创建的根节点ui数据,停止。

本发明的有益效果在于:本发明通过将json数据转换为统一的通用ui数据,通过ui数据实现ui界面的自动生成,并通过ui交互事件模块实现完备的ui交互流程;本发明通过json数据或动态构建的通用ui数据生成界面,减少了ui生产和开发消耗,缩短了ui开发周期,加快了开发进度;且使用本发明生产的ui界面具有统一的风格,更少的界面文件与代码,更易维护,后期维护成本更低;本发明中的ui交互事件模块提供了基础事件,且支持自定义事件的拓展,可以满足各类应用场景的需要。

附图说明

图1是本发明的方法流程示意图。

图2是本发明的系统原理框图。

图3为ui创建模块的流程框图。

图4为数据处理模块的流程框图。

图5为数据分发模块的流程框图。

图6为ui交互事件模块的流程框图。

具体实施方式

下面结合附图对本发明做进一步说明。

请参阅图1所示,本发明的一种自动生成ui界面的方法,所述方法包括以下步骤:

下面通过一具体实施例对本发明做进一步说明:

请参阅图5所示,数据分发模块;

该模块为本发明的主入口,通过提取传入的ui面板创建数据中的有效数据,调用数据处理模块转换为有效的ui数据,进而将ui数据与其它注册事件分发并传递给ui创建模块,实现ui的创建过程。

有效数据定义:传入的数据中可能包含为空的数据、无法识别的数据,我们将其进行过滤,其余的数据视为有效数据。

请参阅图4所示,数据处理模块;

该模块为数据分发模块提供数据转换的能力,实现将json数据或json文件路径转换为统一的ui数据。

请参阅图3所示,ui创建模块;

该模块为核心ui生成过程,将拆分好的组件ui数据中提取界面生成所需的数据,进而根据数据类型选择解析器或拓展处理器进行界面的生成并注册事件到ui交互事件模块。

拆分好的组件ui数据定义:在数据分发模块,会将一个完整的ui数据拆分成多个子组件ui数据进行分发,每个子组件ui数据对应一个生成控件。

所需数据定义:ui组件生成中需要使用的拓展参数数据,比如界面宽高等界面配置数据、数值改变按钮点击等ui交互的触发事件。

数据类型定义:每个ui数据中包含一个type字段来描述对应组件类型,每个组件中包含一个type字段与它进行对应匹配。

请参阅图6所示,ui交互事件模块;

该模块实现创建的ui界面提供ui交互能力实现数据保存事件、数据还原事件、数据变更事件、拓展事件等事件的处理过程,完成整个ui交互的需要。

事件的注册与触发流程定义:生成的ui界面中我们会对每个可交互的ui控件(按钮、输入框、选项等)进行事件的注册,比如当按钮注册的事件为数据保存事件时,按钮被点击将触发数据保存事件。

总之,本发明基于json生成统一的通用ui数据结构,然后通过ui数据解析生成ui界面。当收到ui交互指令时时触发处理事件,实现完备的ui交互系统。

请参阅图2所示,本发明还提供了一种自动生成ui界面的系统,包括数据分发模块、数据处理模块、ui创建模块和ui交互事件模块;所述ui创建模块,即输入ui面板创建数据,将拆分好的组件ui数据中提取界面生成所需的数据,再根据数据类型选择解析器或拓展处理器进行界面的生成并注册到ui交互;所述数据分发模块和数据处理模块,即判断是否需要进行数据转换,是,则通过数据处理模块进行数据转换,否,则经数据分发模块对数据进行分发;所述ui交互事件模块,即等待ui界面用户交互,对ui数据进行处理操作;判断是否出发ui界面关闭的事件,是则停止,否,则继续等待ui界面用户交互。

请参阅图3所示,所述ui创建模块进一步具体包括:输入单元、解析单元、解析器单元、创建单元、转发单元、添加单元、记录单元和返回单元;所述输入单元,即输入ui数据与注册事件;所述解析单元,即解析ui数据中的数据类型;所述解析器单元,即判断是否包含该ui数据类型的解析器,是,则转发ui数据到解析器中,否,则判断是否包含该ui数据的拓展处理器,是,则转发ui数据到拓展处理器,否,则返回创建失败异常,停止;所述创建单元,即创建数据处理控制器,将注册事件转发到ui事件处理;所述转发单元,即将数据处理器转发到解析器或拓展处理器中进行ui创建处理,基于ui数据生成界面;所述添加单元,即添加事件监听到ui事件处理中,返回ui根节点;所述记录单元,即记录ui根节点与其他缓存到数据处理控制器中;所述返回单元,即完成ui界面创建返回数据处理控制器,停止。

请参阅图4所示,所述数据处理模块进一步包括:判断类型单元、数据判断单元、填充单元、根节点单元和子数据单元;所述判断类型单元,即输入数据,判断数据的输入类型;所述数据判断单元,即判断数据是否是json数据,是,则将json数据识别为json实例类型;否,则判断是否为json文件路径,是,则读取文件中的json数据,否,则停止;所述填充单元,即创建一个新的ui数据,将json数据中的基础数据填充到ui数据中的对应字段值中;所述根节点单元,即无匹配字段的数据填充到ui数据的拓展字段队列中,判断是否是根节点数据,是,则记录为根节点ui数据;否,则添加到父节点ui数据的子数据中;所述子数据单元,即判断json数据是否包含子数据,是,则返回创建一个新的ui数据,否,则返回创建的根节点ui数据,停止。

以上所述仅为本发明的较佳实施例,凡依本发明申请专利范围所做的均等变化与修饰,皆应属本发明的涵盖范围。

THE END
1.AI驱动,自动生成UI界面ai生成ui界面这是一个由人工智能驱动,具有自动生成UI的答案引擎开源项目。 详细描述 "Morphic"是一个人工智能驱动的答案引擎,具有自动生成UI的特点。这个项目基于Next.js的App框架,使用了VercelAISDK进行文本流和自动生成UI,OpenAI作为生成模型,Tavily AI作为搜索API。同时,它还使用了shadcn/ui作为组件库,Radix UI作为无头组件原语https://blog.csdn.net/weixin_42684490/article/details/137796914
2.自然语言直接产生UI界面的工具终于来了!来自优设AIGC自然语言直接产生 UI 界面的工具终于来了!输入文字,直接生成界面,并且可以在 Figma 中编辑,看来可以提升不少设计效率 [爱你] 还没正式开放,不过未来可期~ #谷歌ai犯错致市值一夜蒸发7172亿# #ChatGPT官网https://weibo.com/1773655610/MscFt177c
3.推荐自动生成UI设计的AI软件,只用30秒即可!Ingradients 是人工智能工具提供 6K+ 渐变色材料,可用于网页设计、UI界面、海报等设计,帮助设计师提高作品的视觉效果。你只需选择喜欢的渐变颜色,点击查看下载,通过输入材料接收电子邮件,即可获得 png/jpg 格式的精美渐变材料。 以上就是小编为大家推荐的六款自动生成页面 UI 设计的 AI 软件,但是后面五款对于国内的设https://js.design/special/article/auto-generated-page-ui-design.html
4.艺赛旗申请一种UI界面生成方法等专利,能够自动生成风格多样的UI艺赛旗申请一种UI界面生成方法等专利,能够自动生成风格多样的UI界面 快报金融界灵通君 北京 0 打开网易新闻 体验效果更佳见识一下,巨型的黄貂鱼,是如何被外国人分割做什么美食的? 美食有毒 791跟贴 打开APP 美国主播模拟中美旷世大战,精锐尽出,谁才是真正世界老大? 史料科普 1902跟贴 打开APP 果然每个大嫂都https://m.163.com/v/video/VPIP11G4O.html
5.ai绘画界面自动生成素材网站图片免费下载共有205861个ai绘画界面自动生成相关内容为您呈现 Clippp AI绘画生成类APP 11 桥九 ai生成—国风绘画 11 旅途与图 AI生成-国风绘画 15 旅途与图 R闪闪闪 AIGC开放社区 阿夕AI 腾讯云 AI 代码 Chat 版智能助手,随时随地帮你解答代码相关问题。你摸鱼,我来肝!广告 https://www.zcool.com.cn/tag/ZODE3NTczMg==.html
6.UnityUI自动生成控件引用对于做UI的同学来说,日常获取界面下各种控件一定是一件很繁琐的事情吧,这个工具可以根据开发者在Editor里的设置,自动生成对应控件引用的代码段。 先从实际案例说起: 图1 Canvas下有一个简单界面(图1),包含了一个标题,一个副标题,一个文本输入框以及一个登陆按钮两个交互控件,现在要做一个登陆功能,用户输入用户https://www.jianshu.com/p/2d0908f278c3
7.AI指导你实现出色的UI界面设计尝试了两种算法模型后,我们发现对于想要用AI来辅助UI界面设计的情况,更推荐使用JS-UIbotics模型,它所输出的界面布局更规范,结构功能更清晰,能够大致搭建界面框架,节约后续设计的时间。 02 以“文”成图,效果如何? 能够通过文本描述自动生成界面是目前该软件的最大特点,与ChatGPT一样,在使用时需要掌握一些技巧和方法https://www.hxsd.com/information/3295/
8.基于深度学习的用户界面代码自动生成研究最后,在Web界面代码自动生成的研究领域,现存的公开数据集存在样本过于简单并且样本数量过少的缺陷,生成的界面样式单一、结构固定。为解决上述的问题,本文的主要工作以及创新点如下:(1)为了让深度学习模型能够生成更加丰富和多样的界面代码,本文创建了新的数据集,支持更多种类、更多数量、更多组合方式的UI组件生成。并在https://wap.cnki.net/lunwen-1021834094.nh.html
9.v0.dev,AI自动生成网页用户界面的工具AI生成前端React/UI组件,由Vercel推出 v0.dev 是由知名前端网站托管平台 Vercel 推出的由 AI 自动生成网页用户界面的工具,基于流行的 UI 框架 Shadcn UI 和 Tailwind CSS 生成直接可用的 React 组件代码。 v0的工作原理https://home.designshidai.com/8728.html
10.基于python视频中人脸自动生成马赛克代码6.Pyqt5图形界面实现 7.将py文件打包生成exe应用程序 8常见错误 9结束 1.实现背景 在一些采访视频中,为了保护采访者的安全与隐私,会给他们脸上打上马赛克,但是大多都是使用人工逐帧进行打码,会出现漏打或者打码不全等问题针对上述问题,我们采用人脸检测及识别技术,对视频中目标人脸进行识别、追踪并打码。基于Pyqt5和https://blog.51cto.com/u_16213595/11981639
11.FastAPI入门教程开发者无需手动解析原始请求数据,因为FastAPI能够根据定义的路由和Pydantic模型自动生成OpenAPI规范的接口文档。 自动接口文档生成 FastAPI能够自动生成详细的接口文档,支持两种流行的界面:Swagger UI和ReDoc。这些文档让API的使用者可以直观地了解每个端点的功能、请求参数、响应格式等信息,极大地促进了API的易用性和团队协作https://www.360doc.cn/article/360939_1130065345.html
12.战胜柯洁的深度学习,有可能取代设计师吗?优设网5. UI代码自动生成 2017 年 UIzard 开源了一款名叫 pix2code 的神经网络工具,它能将界面截图翻译成界面代码;2018 年 Airbnb 和微软相继发布了自己的最新研究成果,设计师可以通过草图直接生成界面代码,减少视觉稿设计、前端开发的工作量。基于草稿的界面生成主要原理是找到手绘控件和系统控件样式之间的规律,然后寻找草https://www.uisdc.com/deep-learning-design/
13.免费的UI界面在线设计工具,自动标注神器!Zeplin是一个专业的前端开发和UI界面在线设计工具,它可以将设计稿自动标注,同时生成代码片段和资源文件供开发使用。设计师只需上传UI设计稿,Zeplin就能自动标注文字、尺寸、颜色等信息,并且支持交互标注,如点击状态、悬停状态等。开发人员可以方便地查看并复制所需的CSS代码,大大提高了工作效率。 https://pixso.cn/designskills/free-ui-interface-online-design-tool/
14.最全无代码NoCode和低代码Low这些让您在开发应用程序方面领先一步,通常配有清晰的代码、漂亮的UI组件、管理仪表板和无缝界面。 Divjoy生成一个全栈React应用程序,内置登录页面、身份验证、数据库和托管配置。真的 Create React App官方支持的创建单页 React 应用程序的方式。它提供了一个没有配置的现代构建设 https://www.tanmer.com/blog/707
15.基于UI图像的Web前端代码自动生成基于UI图像的Web前端代码自动生成 葛进, 陆雪松*() Automatic generation of Web front-end code based on UI images Jin GE, Xuesong LU*() RichHTML 244 PDF 304 摘要/Abstract 摘要: 用户界面 (user interface, UI) 在应用程序与用户的交互中扮演了至关重要的角色. 当前移动互联网的普及, https://xblk.ecnu.edu.cn/CN/10.3969/j.issn.1000-5641.2023.05.009
16.炫酷的ui背景自动生成器一款炫酷的ui背景自动生成器,只需要单击网页中的按钮,即可观看背景图案和标题样式的变化!搭配出来的色系很漂亮,且非常实用。https://www.17sucai.com/pins/41504.html
17.Vue.NetCore:框架采用dotnetcore+vue+elementUI前后端分离,并且框架采用dotnetcore+vue+elementUI 前后端分离,并且支持前端、后台代码业务动态扩展,框架内置了一套有着20多种属性配置的代码生成器,可灵活配置生成的代码,代码生成器界面配置完成即可生成单表/主从表的增、删、改、查、导入、导出、上传、审核基础功能。只需要简单了解即可上手开发 暂无标签 C# MIT 发行版 https://toscode.mulanos.cn/vebin/Vue.NetCore
18.黑科技,推荐两款开源自动生成代码神器!腾讯云开发者社区2. 自动生成前端代码:teleportHQ 如果你觉得刚刚那个已经很厉害了,那接下,给大家介绍一个更牛的项目,大家可以先看几张效果图,大家看到了什么? 图片中,一位产品经理,在前面的白板上正在画草图,在后面的屏幕上,显示整个识别过程,并自动同步生成代码和UI界面预览。 https://cloud.tencent.com/developer/article/1764677
19.UI:基于vuedraggable.js+uni的可视化拖拽编程,自动生成element-ui ejs uniApp vue-context-menu say 一开始有这个想法,是因为在编写前端的时候对于我来讲,挺痛苦的,特别是制作小程序或uni时,由于我的电脑很烂,而手又贱,习惯调整一下高度啊啥的就保存一下看效果,结果很多时间都浪费在等上面,于是就想这说希望可以马上看到效果,最好是拖拽,又可以自动生成代码的工具,https://github.com/kong6001/dragUI