CN112988136A - 一种用户界面编辑方法及装置 - Google Patents

一种用户界面编辑方法及装置 Download PDF

Info

Publication number
CN112988136A
CN112988136A CN202110274185.5A CN202110274185A CN112988136A CN 112988136 A CN112988136 A CN 112988136A CN 202110274185 A CN202110274185 A CN 202110274185A CN 112988136 A CN112988136 A CN 112988136A
Authority
CN
China
Prior art keywords
target
editing
user interface
interface element
code
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.)
Granted
Application number
CN202110274185.5A
Other languages
English (en)
Other versions
CN112988136B (zh
Inventor
严东东
邬亮
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Zitiao Network Technology Co Ltd
Original Assignee
Beijing Zitiao Network Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beijing Zitiao Network Technology Co Ltd filed Critical Beijing Zitiao Network Technology Co Ltd
Priority to CN202110274185.5A priority Critical patent/CN112988136B/zh
Publication of CN112988136A publication Critical patent/CN112988136A/zh
Application granted granted Critical
Publication of CN112988136B publication Critical patent/CN112988136B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/33Intelligent editors
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • YGENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02PCLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
    • Y02P90/00Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
    • Y02P90/30Computing systems specially adapted for manufacturing

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)
  • Stored Programmes (AREA)

Abstract

本公开提供了一种用户界面编辑方法及装置,首先获取针对目标应用的用户界面编辑请求;然后,当所述用户界面编辑请求为针对所述目标应用的用户界面中目标用户界面元素的编辑请求时,确定所述目标用户界面元素对应的代码依赖关系;最后,基于所述目标用户界面元素对应的代码依赖关系,对所述目标用户界面元素对应的目标编辑对象进行编辑。本公开实施例通过代码依赖关系及针对用户界面元素的编辑信息,对目标用户界面元素进行编辑,从而实现对用户界面的深度自定义。

Description

一种用户界面编辑方法及装置
技术领域
本公开涉及计算机技术领域,具体而言,涉及一种用户界面编辑方法及装置。
背景技术
用户界面(User Interface,UI)是指对软件的人机交互、操作逻辑、界面美观的整体设计,是系统和用户之间进行交互和信息交换的媒介,它可以实现信息的内部形式与人类可以接受形式之间的转换。合理利用UI能够有效提高用户操作系统的效率。对于不同类型的用户,通常会对UI有着不同的需求,为了提高用户在使用功能时的效率,有必要对UI进行个性化设置。
通常,应用可以提供几种预设的规则供用户进行UI编辑,但预设的规则数量有限,在功能较多、涉及领域较广的应用,如在线集成开发环境(web integrity developenvironment,WebIDE)中,仅靠预设的规则难以满足各种用户的需求,需要一种能够对UI进行深度编辑的方法。
发明内容
本公开实施例至少提供一种用户界面编辑方法及装置。
第一方面,本公开实施例提供了一种用户界面编辑方法,包括:
获取针对目标应用的用户界面编辑请求;
当所述用户界面编辑请求为针对所述目标应用的用户界面中目标用户界面元素的编辑请求时,确定所述目标用户界面元素对应的代码依赖关系;
基于所述目标用户界面元素对应的代码依赖关系,对所述目标用户界面元素对应的目标编辑对象进行编辑。
一种可选的实施方式中,所述基于所述目标用户界面元素对应的代码依赖关系,以及获取的针对所述目标用户界面元素的编辑信息,对所述目标用户界面元素对应的目标编辑对象进行编辑,包括:
基于所述目标用户界面元素对应的代码依赖关系,确定所述目标用户界面元素对应的目标编辑对象;
基于所述用户界面编辑请求指示的编辑信息,或者基于用户输入的编辑信息,对所述目标编辑对象进行编辑。
一种可选的实施方式中,所述基于所述目标用户界面元素对应的代码依赖关系,确定所述目标用户界面元素对应的目标编辑对象,包括:
在基于所述代码依赖关系,确定所述目标用户界面元素对应的目标模块代码不被任一模块代码依赖的情况下,将所述目标模块代码作为所述目标编辑对象。
一种可选的实施方式中,所述基于所述目标用户界面元素对应的代码依赖关系,确定所述目标用户界面元素对应的目标编辑对象,包括:
在基于所述代码依赖关系,确定所述目标用户界面元素对应的目标模块代码被预设数量个模块代码依赖的情况下,将所述目标模块代码对应的原型对象作为所述目标编辑对象。
一种可选的实施方式中,所述基于所述目标用户界面元素对应的代码依赖关系,确定所述目标用户界面元素对应的目标编辑对象,包括:
在所述代码依赖关系与预设的目标条件匹配的情况下,将所述目标用户界面元素对应的文档对象模型节点作为所述目标编辑对象。
一种可选的实施方式中,所述基于所述用户界面编辑请求指示的编辑信息,或者基于用户输入的编辑信息,对所述目标编辑对象进行编辑,包括:
在所述目标模块代码作为所述目标编辑对象的情况下,基于所述编辑信息,对所述目标模块代码中,所述目标用户界面元素对应的待编辑代码进行删除或修改。
一种可选的实施方式中,所述基于所述用户界面编辑请求指示的编辑信息,或者基于用户输入的编辑信息,对所述目标编辑对象进行编辑,包括:
在所述目标模块代码对应的原型对象作为所述目标编辑对象的情况下,基于所述目标模块代码中所述目标用户界面元素对应的待编辑代码,在所述原型对象上建立目标替换函数;所述目标替换函数具有与所述待编辑代码相同的代码数据以及函数名;
基于所述编辑信息,对所述原型对象上建立的所述目标替换函数进行编辑。
一种可选的实施方式中,所述基于所述用户界面编辑请求指示的编辑信息,或者基于用户输入的编辑信息,对所述目标编辑对象进行编辑,包括:
在所述目标用户界面元素对应的文档对象模型节点作为所述目标编辑对象的情况下,基于所述编辑信息的指示的编辑类型,确定目标编辑工具;
利用所述目标编辑工具,基于所述编辑信息对所述文档对象模型节点进行编辑。
一种可选的实施方式中,所述方法还包括:
当所述用户界面编辑请求为针对所述目标应用的新增用户界面元素的编辑请求时,基于获取的编辑信息建立目标用户界面元素的目标文档对象模型节点;
将所述目标文档对象模型节点添加至所述目标应用对应的文档对象模型中。
第二方面,本公开实施例还提供一种用户界面编辑装置,包括:
获取模块,用于获取针对目标应用的用户界面编辑请求;
确定模块,用于当所述用户界面编辑请求为针对所述目标应用的用户界面中目标用户界面元素的编辑请求时,确定所述目标用户界面元素对应的代码依赖关系;
编辑模块,用于基于所述目标用户界面元素对应的代码依赖关系,对所述目标用户界面元素对应的目标编辑对象进行编辑。
一种可选的实施方式中,所述编辑模块具体用于:
基于所述目标用户界面元素对应的代码依赖关系,确定所述目标用户界面元素对应的目标编辑对象;
基于所述用户界面编辑请求指示的编辑信息,或者基于用户输入的编辑信息,对所述目标编辑对象进行编辑。
一种可选的实施方式中,所述编辑模块在基于所述目标用户界面元素对应的代码依赖关系,确定所述目标用户界面元素对应的目标编辑对象时,具体用于:
在基于所述代码依赖关系,确定所述目标用户界面元素对应的目标模块代码不被任一模块代码依赖的情况下,将所述目标模块代码作为所述目标编辑对象。
一种可选的实施方式中,所述编辑模块在基于所述目标用户界面元素对应的代码依赖关系,确定所述目标用户界面元素对应的目标编辑对象时,具体用于:
在基于所述代码依赖关系,确定所述目标用户界面元素对应的目标模块代码被预设数量个模块代码依赖的情况下,将所述目标模块代码对应的原型对象作为所述目标编辑对象。
一种可选的实施方式中,所述编辑模块在基于所述目标用户界面元素对应的代码依赖关系,确定所述目标用户界面元素对应的目标编辑对象时,具体用于:
在所述代码依赖关系与预设的目标条件匹配的情况下,将所述目标用户界面元素对应的文档对象模型节点作为所述目标编辑对象。
一种可选的实施方式中,所述编辑模块在基于所述用户界面编辑请求指示的编辑信息,或者基于用户输入的编辑信息,对所述目标编辑对象进行编辑时,具体用于:
在所述目标模块代码作为所述目标编辑对象的情况下,基于所述编辑信息,对所述目标模块代码中,所述目标用户界面元素对应的待编辑代码进行删除或修改。
一种可选的实施方式中,所述编辑模块在基于所述用户界面编辑请求指示的编辑信息,或者基于用户输入的编辑信息,对所述目标编辑对象进行编辑时,具体用于:
在所述目标模块代码对应的原型对象作为所述目标编辑对象的情况下,基于所述目标模块代码中所述目标用户界面元素对应的待编辑代码,在所述原型对象上建立目标替换函数;所述目标替换函数具有与所述待编辑代码相同的代码数据以及函数名;
基于所述编辑信息,对所述原型对象上建立的所述目标替换函数进行编辑。
一种可选的实施方式中,所述编辑模块在基于所述用户界面编辑请求指示的编辑信息,或者基于用户输入的编辑信息,对所述目标编辑对象进行编辑时,具体用于:
在所述目标用户界面元素对应的文档对象模型节点作为所述目标编辑对象的情况下,基于所述编辑信息的指示的编辑类型,确定目标编辑工具;
利用所述目标编辑工具,基于所述编辑信息对所述文档对象模型节点进行编辑。
一种可选的实施方式中,所述编辑模块还用于:
当所述用户界面编辑请求为针对所述目标应用的新增用户界面元素的编辑请求时,基于获取的编辑信息建立目标用户界面元素的目标文档对象模型节点;
将所述目标文档对象模型节点添加至所述目标应用对应的文档对象墨模型节点中。
第三方面,本公开实施例还提供一种计算机设备,包括:处理器、存储器和总线,所述存储器存储有所述处理器可执行的机器可读指令,当计算机设备运行时,所述处理器与所述存储器之间通过总线通信,所述机器可读指令被所述处理器执行时执行上述第一方面,或第一方面中任一种可能的实施方式中的步骤。
第四方面,本公开实施例还提供一种计算机可读存储介质,该计算机可读存储介质上存储有计算机程序,该计算机程序被处理器运行时执行上述第一方面,或第一方面中任一种可能的实施方式中的步骤。
关于上述用户界面编辑装置、计算机设备、及计算机可读存储介质的效果描述参见上述用户界面编辑方法的说明,这里不再赘述。
本公开实施例提供的用户界面编辑方法及装置,首先获取针对目标应用的用户界面编辑请求;然后,当所述用户界面编辑请求为针对所述目标应用的UI中目标用户界面元素的编辑请求时,确定所述目标用户界面元素对应的代码依赖关系;最后,基于所述目标用户界面元素对应的代码依赖关系,对所述目标用户界面元素对应的目标编辑对象进行编辑。本公开实施例通过代码依赖关系及针对用户界面元素的编辑信息,对目标用户界面元素进行编辑,从而实现对UI的深度自定义。
为使本公开的上述目的、特征和优点能更明显易懂,下文特举较佳实施例,并配合所附附图,作详细说明如下。
附图说明
为了更清楚地说明本公开实施例的技术方案,下面将对实施例中所需要使用的附图作简单地介绍,此处的附图被并入说明书中并构成本说明书中的一部分,这些附图示出了符合本公开的实施例,并与说明书一起用于说明本公开的技术方案。应当理解,以下附图仅示出了本公开的某些实施例,因此不应被看作是对范围的限定,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他相关的附图。
图1示出了本公开实施例所提供的一种用户界面编辑方法的流程图;
图2示出了本公开实施例所提供的一种用户界面编辑装置的示意图;
图3示出了本公开实施例所提供的一种计算机设备的示意图。
具体实施方式
为使本公开实施例的目的、技术方案和优点更加清楚,下面将结合本公开实施例中附图,对本公开实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本公开一部分实施例,而不是全部的实施例。通常在此处附图中描述和示出的本公开实施例的组件可以以各种不同的配置来布置和设计。因此,以下对在附图中提供的本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围,而是仅仅表示本公开的选定实施例。基于本公开的实施例,本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例,都属于本公开保护的范围。
在线集成开发环境(web integrity develop environment,WebIDE)是一种针对编程开发人员的在线集成开发环境,编程人员无需本地安装开发环境,只需打开浏览器就能立即开发,同时支持断点调试、版本管理、团队开发等功能。由于不同领域的软件开发人员对开发环境存在着不同的需求,使用同一套UI无法满足多种领域的软件开发,然而,WebIDE仅提供几种预设的UI编辑规则,无法实现UI的深度自定义。
基于上述研究,本公开提供了一种用户界面编辑方法,通过代码依赖关系及针对用户界面元素的编辑信息,对目标用户界面元素进行编辑,从而实现对UI的深度自定义。
针对以上方案所存在的缺陷,均是发明人在经过实践并仔细研究后得出的结果,因此,上述问题的发现过程以及下文中本公开针对上述问题所提出的解决方案,都应该是发明人在本公开过程中对本公开做出的贡献。
应注意到:相似的标号和字母在下面的附图中表示类似项,因此,一旦某一项在一个附图中被定义,则在随后的附图中不需要对其进行进一步定义和解释。
为便于对本实施例进行理解,首先对本公开实施例所公开的一种用户界面编辑方法进行详细介绍,本公开实施例所提供的用户界面方法的执行主体一般为具有一定计算能力的计算机设备,如终端设备。
下面以执行主体为终端设备为例对本公开实施例提供的用户界面编辑方法加以说明。
参见图1所示,为本公开实施例提供的用户界面编辑方法的流程图,所述方法包括步骤S101~S103,其中:
S101、获取针对目标应用的用户界面编辑请求。
该步骤中,终端设备可以检测并获取用户界面编辑请求,用户界面编辑请求中可以指示有编辑信息和/或编辑请求针对的用户界面元素。其中,用户界面元素可以是指页面中的UI控件,编辑信息可以包括编辑类型及具体的编辑指令,编辑类型可以包括新增、修改/删除。
其中,目标应用可以为WebIDE。WebIDE是运行在浏览器中的应用,其UI是一个网络页面,可以通过HTML、JavaScript和CSS来进行编辑。
S102、当所述用户界面编辑请求为针对所述目标应用的用户界面中目标用户界面元素的编辑请求时,确定所述目标用户界面元素对应的代码依赖关系。
其中,目标用户界面元素对应的代码依赖关系,可以包括依赖目标用户界面元素对应的模块代码的其他模块代码,若存在依赖目标用户界面元素对应的模块代码的其他代码,则依赖目标用户界面元素对应的模块代码的变化会影响其他模块代码。
S103、基于所述目标用户界面元素对应的代码依赖关系,对所述目标用户界面元素对应的目标编辑对象进行编辑。
该步骤中,可以基于目标用户界面元素对应的代码依赖关系,确定需要进行编辑的目标编辑对象,再根据获取到的针对目标用户界面元素的编辑信息,对目标编辑对象进行编辑。
这里,编辑信息可以是用户界面编辑请求指示的编辑信息,或者用户输入的编辑信息。
这里,由于对目标用户界面元素的模块代码进行修改会影响其他模块代码,需要适应修改被影响的其他模块代码,若存在依赖关系的模块代码过多,修改目标用户界面元素的模块代码后还需要对每个与目标用户界面元素的模块代码存在依赖的模块代码进行修改,工作量较大,因此,可以根据代码依赖关系,确定依赖目标模块代码的其他模块代码的数量,再根据依赖目标模块代码的数量确定目标编辑对象。
其中,目标编辑对象可以包括目标模块代码、目标模块代码对应的原型对象以及目标用户界面元素对应的文档对象模型节点。
对于目标用户界面元素对应的目标模块代码不被任一模块代码依赖的情况下,可以直接将目标模块代码作为目标编辑对象,对目标模块代码进行编辑,不需要对其他模块代码进行适应性修改,即可完成UI编辑。
具体的,可以在目标模块代码作为目标编辑对象的情况下,基于编辑信息,对目标模块代码中,目标用户界面元素对应的待编辑代码进行删除或修改。
对于目标用户界面元素对应的目标模块代码被预设数量个模块代码依赖的情况下,可以将目标模块代码对应的原型对象作为目标编辑对象。
这里,由于WebIDE的模块代码使用类进行组织,类是JavaScript的一个语法糖,其本质是一个对象,类的成员函数对应对象的原型对象上的一个函数属性,因此,可以通过在原型对象上新赋值一个同名函数属性,就可以覆盖原有的函数属性,从而实现对原型对象的修改,由于对象属于引用类型,修改了对象的原型对象,该修改也会对其他依赖的模块代码生效,从而实现不修改其他依赖的模块代码,也能使其他模块代码产生相同的效果。
具体的,可以在目标模块代码对应的原型对象作为目标编辑对象的情况下,基于目标模块代码中目标用户界面元素对应的待编辑代码,在原型对象上建立目标替换函数;目标替换函数具有与待编辑代码相同的代码数据以及函数名;再按照编辑信息的指示,对所述原型对象上建立的所述目标替换函数进行编辑。
对于目标用户界面元素的代码依赖关系复杂到一定程度的情况下,比如目标代码模块与其他代码模块之间具有较为复杂的耦合关系,即使对目标代码模块的原型对象进行修改,也不能保证其他相关的代码模块都能够得修改的效果,因此,可以将目标用户界面元素对应的文档对象模型节点作为目标编辑对象。
其中,文档对象模型(Document Object Model,简称DOM),是处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口,它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格。DOM分为HTML DOM和XML DOM两种。它们分别定义了访问和操作HTML/XML文档的标准方法,并将对应的文档呈现为带有元素、属性和文本的树结构(节点树),树结构中的节点称为文档对象模型节点。通过对文档对象模型节点进行编辑,能够实现对目标用户界面元素本身的编辑,而不影响其他用户界面元素。
具体的,可以在目标用户界面元素对应的文档对象模型节点作为目标编辑对象的情况下,基于编辑信息的指示的编辑类型,确定目标编辑工具;
利用目标编辑工具,基于编辑信息对文档对象模型节点进行编辑。
示例性的,可以利用层叠样式表(Cascading Style Sheets,CSS)选择器选取目标用户界面元素对应的文档对象模型节点,再确定编辑类型对应的目标编辑工具,比如,若编辑类型为删除或修改目标用户界面元素的样式,可以将CSS选择器作为目标编辑工具,然后对文档对象模型节点进行修改,重写需要修改的样式,比如,指令#menu{color:red}可以将菜单的颜色修改为红色。
其中,CSS是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。在CSS中,选择器是一种模式,用于选择需要添加样式的元素。比如,选择器’#menu’表示id为‘menu’的元素。这种模式一般被称为CSS选择器。CSS选择器不仅可以在CSS代码中使用,也可以在JavaScript(JS)代码中使用。
若编辑类型为删除或修改目标用户界面元素的结构,可以将JS作为目标编辑工具,利用JS代码中的DOM API,如指令document.querySelector(),选取与CSS选择器选取的目标用户界面元素对应的文档对象模型节点,再利用DOM相关接口对文档对象模型节点进行删除或操作。
比如,指令document.querySelector('#menu').innerHTML='my menu',可以将菜单的名称修改为my menu。
进一步的,当所述用户界面编辑请求为针对所述目标应用的新增用户界面元素的编辑请求时,可以基于编辑信息,建立目标用户界面元素的目标文档对象模型节点;目标文档对象模型节点可以通过调用DOM API进行创建,示例性的,可以使用const childNode=document.createElement('child')指令。
在创建新的目标文档对象模型节点后,可以根据目标文档对象模型节点的挂载位置,选取目标DOM的父元素文档对象模型节点,并将目标文档对象模型节点挂载在父元素文档对象模型节点上;若目标文档对象模型节点的挂载位置为全局挂载,则可以将其挂载到DOM的body上,使目标文档对象模型节点添加至目标应用对应的DOM中。
本公开实施例提供的用户界面编辑方法,首先获取针对目标应用的用户界面编辑请求;然后,当所述用户界面编辑请求为针对所述目标应用的UI中目标用户界面元素的编辑请求时,确定所述目标用户界面元素对应的代码依赖关系;最后,基于所述目标用户界面元素对应的代码依赖关系,对所述目标用户界面元素对应的目标编辑对象进行编辑。本公开实施例通过代码依赖关系及针对用户界面元素的编辑信息,对目标用户界面元素进行编辑,从而实现对UI的深度自定义。
本领域技术人员可以理解,在具体实施方式的上述方法中,各步骤的撰写顺序并不意味着严格的执行顺序而对实施过程构成任何限定,各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。
基于同一发明构思,本公开实施例中还提供了与用户界面编辑方法对应的用户界面编辑装置,由于本公开实施例中的装置解决问题的原理与本公开实施例上述用户界面编辑方法相似,因此装置的实施可以参见方法的实施,重复之处不再赘述。
参照图2所示,为本公开实施例提供的一种用户界面编辑装置的架构示意图,所述装置包括:
获取模块210,用于获取针对目标应用的用户界面编辑请求;
确定模块220,用于当所述用户界面编辑请求为针对所述目标应用的UI中目标用户界面元素的编辑请求时,确定所述目标用户界面元素对应的代码依赖关系;
编辑模块230,用于基于所述目标用户界面元素对应的代码依赖关系,对所述目标用户界面元素对应的目标编辑对象进行编辑。
本公开实施例通过代码依赖关系及针对用户界面元素的编辑信息,对目标用户界面元素进行编辑,从而实现对用户界面的深度自定义。
一种可选的实施方式中,所述编辑模块230具体用于:
基于所述目标用户界面元素对应的代码依赖关系,确定所述目标用户界面元素对应的目标编辑对象;
基于所述用户界面编辑请求指示的编辑信息,或者基于用户输入的编辑信息,对所述目标编辑对象进行编辑。
一种可选的实施方式中,所述编辑模块230在基于所述目标用户界面元素对应的代码依赖关系,确定所述目标用户界面元素对应的目标编辑对象时,具体用于:
在基于所述代码依赖关系,确定所述目标用户界面元素对应的目标模块代码不被任一模块代码依赖的情况下,将所述目标模块代码作为所述目标编辑对象。
一种可选的实施方式中,所述编辑模块230在基于所述目标用户界面元素对应的代码依赖关系,确定所述目标用户界面元素对应的目标编辑对象时,具体用于:
在基于所述代码依赖关系,确定所述目标用户界面元素对应的目标模块代码被预设数量个模块代码依赖的情况下,将所述目标模块代码对应的原型对象作为所述目标编辑对象。
一种可选的实施方式中,所述编辑模块230在基于所述目标用户界面元素对应的代码依赖关系,确定所述目标用户界面元素对应的目标编辑对象时,具体用于:
在所述代码依赖关系与预设的目标条件匹配的情况下,将所述目标用户界面元素对应的文档对象模型节点作为所述目标编辑对象。
一种可选的实施方式中,所述编辑模块230在基于所述编辑信息,对所述目标编辑对象进行编辑时,具体用于:
在所述目标模块代码作为所述目标编辑对象的情况下,基于所述编辑信息,对所述目标模块代码中,所述目标用户界面元素对应的待编辑代码进行删除或修改。
一种可选的实施方式中,所述编辑模块230在基于所述编辑信息,对所述目标编辑对象进行编辑时,具体用于:
在所述目标模块代码对应的原型对象作为所述目标编辑对象的情况下,基于所述目标模块代码中所述目标用户界面元素对应的待编辑代码,在所述原型对象上建立目标替换函数;所述目标替换函数具有与所述待编辑代码相同的代码数据以及函数名;
基于所述编辑信息,对所述原型对象上建立的所述目标替换函数进行编辑。
一种可选的实施方式中,所述编辑模块230在基于所述编辑信息,对所述目标编辑对象进行编辑时,具体用于:
在所述目标用户界面元素对应的文档对象模型节点作为所述目标编辑对象的情况下,基于所述编辑信息的指示的编辑类型,确定目标编辑工具;
利用所述目标编辑工具,基于所述编辑信息对所述文档对象模型节点进行编辑。
一种可选的实施方式中,所述编辑模块230还用于:
当所述用户界面编辑请求为针对所述目标应用的新增用户界面元素的编辑请求时,基于获取的编辑信息建立目标用户界面元素的目标文档对象模型节点;
将所述目标文档对象模型节点添加至所述目标应用对应的文档对象模型中。
基于同一技术构思,本公开实施例还提供了一种计算机设备。参照图3所示,为本公开实施例提供的计算机设备300的结构示意图,包括处理器301、存储器302、和总线303。其中,存储器302用于存储执行指令,包括内存3021和外部存储器3022;这里的内存3021也称内存储器,用于暂时存放处理器301中的运算数据,以及与硬盘等外部存储器3022交换的数据,处理器301通过内存3021与外部存储器3022进行数据交换,当计算机设备300运行时,处理器301与存储器302之间通过总线303通信,使得处理器301在执行以下指令:
获取针对目标应用的用户界面编辑请求;
当所述用户界面编辑请求为针对所述目标应用的用户界面中目标用户界面元素的编辑请求时,确定所述目标用户界面元素对应的代码依赖关系;
基于所述目标用户界面元素对应的代码依赖关系,对所述目标用户界面元素对应的目标编辑对象进行编辑。
一种可能的实施方式中,处理器301执行的指令中,所述基于所述目标用户界面元素对应的代码依赖关系,对所述目标用户界面元素对应的目标编辑对象进行编辑,包括:
基于所述目标用户界面元素对应的代码依赖关系,确定所述目标用户界面元素对应的目标编辑对象;
基于所述用户界面编辑请求指示的编辑信息,或者基于用户输入的编辑信息,对所述目标编辑对象进行编辑。
一种可能的实施方式中,处理器301执行的指令中,所述基于所述目标用户界面元素对应的代码依赖关系,确定所述目标用户界面元素对应的目标编辑对象,包括:
在基于所述代码依赖关系,确定所述目标用户界面元素对应的目标模块代码不被任一模块代码依赖的情况下,将所述目标模块代码作为所述目标编辑对象。
一种可能的实施方式中,处理器301执行的指令中,所述基于所述目标用户界面元素对应的代码依赖关系,确定所述目标用户界面元素对应的目标编辑对象,包括:
在基于所述代码依赖关系,确定所述目标用户界面元素对应的目标模块代码被预设数量个模块代码依赖的情况下,将所述目标模块代码对应的原型对象作为所述目标编辑对象。
一种可能的实施方式中,处理器301执行的指令中,所述基于所述目标用户界面元素对应的代码依赖关系,确定所述目标用户界面元素对应的目标编辑对象,包括:
在所述代码依赖关系与预设的目标条件匹配的情况下,将所述目标用户界面元素对应的文档对象模型节点作为所述目标编辑对象。
一种可能的实施方式中,处理器301执行的指令中,所述基于所述用户界面编辑请求指示的编辑信息,或者基于用户输入的编辑信息,对所述目标编辑对象进行编辑,包括:
在所述目标模块代码作为所述目标编辑对象的情况下,基于所述编辑信息,对所述目标模块代码中,所述目标用户界面元素对应的待编辑代码进行删除或修改。
一种可能的实施方式中,处理器301执行的指令中,所述基于所述用户界面编辑请求指示的编辑信息,或者基于用户输入的编辑信息,对所述目标编辑对象进行编辑,包括:
在所述目标模块代码对应的原型对象作为所述目标编辑对象的情况下,基于所述目标模块代码中所述目标用户界面元素对应的待编辑代码,在所述原型对象上建立目标替换函数;所述目标替换函数具有与所述待编辑代码相同的代码数据以及函数名;
基于所述编辑信息,对所述原型对象上建立的所述目标替换函数进行编辑。
一种可能的实施方式中,处理器301执行的指令中,所述基于所述用户界面编辑请求指示的编辑信息,或者基于用户输入的编辑信息,对所述目标编辑对象进行编辑,包括:
在所述目标用户界面元素对应的文档对象模型节点作为所述目标编辑对象的情况下,基于所述编辑信息的指示的编辑类型,确定目标编辑工具;
利用所述目标编辑工具,基于所述编辑信息对所述文档对象模型节点进行编辑。
一种可能的实施方式中,处理器301执行的指令中,所述方法还包括:
当所述用户界面编辑请求为针对所述目标应用的新增用户界面元素的编辑请求时,基于获取的编辑信息建立目标用户界面元素的目标文档对象模型节点;
将所述目标文档对象模型节点添加至所述目标应用对应的文档对象模型中。
本公开实施例还提供一种计算机可读存储介质,该计算机可读存储介质上存储有计算机程序,该计算机程序被处理器运行时执行上述方法实施例中所述的用户界面编辑方法的步骤。其中,该存储介质可以是易失性或非易失的计算机可读取存储介质。
本公开实施例还提供一种计算机程序产品,该计算机程序产品承载有程序代码,所述程序代码包括的指令可用于执行上述方法实施例中所述的用户界面编辑方法的步骤,具体可参见上述方法实施例,在此不再赘述。
其中,上述计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中,所述计算机程序产品具体体现为计算机存储介质,在另一个可选实施例中,计算机程序产品具体体现为软件产品,例如软件开发包(Software Development Kit,SDK)等等。
所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,上述描述的系统和装置的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。在本公开所提供的几个实施例中,应该理解到,所揭露的系统、装置和方法,可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,又例如,多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本公开各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解,本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本公开各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(Read-OnlyMemory,ROM)、随机存取存储器(Random Access Memory,RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
最后应说明的是:以上所述实施例,仅为本公开的具体实施方式,用以说明本公开的技术方案,而非对其限制,本公开的保护范围并不局限于此,尽管参照前述实施例对本公开进行了详细的说明,本领域的普通技术人员应当理解:任何熟悉本技术领域的技术人员在本公开揭露的技术范围内,其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化,或者对其中部分技术特征进行等同替换;而这些修改、变化或者替换,并不使相应技术方案的本质脱离本公开实施例技术方案的精神和范围,都应涵盖在本公开的保护范围之内。因此,本公开的保护范围应所述以权利要求的保护范围为准。

Claims (12)

1.一种用户界面编辑方法,其特征在于,包括:
获取针对目标应用的用户界面编辑请求;
当所述用户界面编辑请求为针对所述目标应用的用户界面中目标用户界面元素的编辑请求时,确定所述目标用户界面元素对应的代码依赖关系;
基于所述目标用户界面元素对应的代码依赖关系,对所述目标用户界面元素对应的目标编辑对象进行编辑。
2.根据权利要求1所述的方法,其特征在于,所述基于所述目标用户界面元素对应的代码依赖关系,对所述目标用户界面元素对应的目标编辑对象进行编辑,包括:
基于所述目标用户界面元素对应的代码依赖关系,确定所述目标用户界面元素对应的目标编辑对象;
基于所述用户界面编辑请求指示的编辑信息,或者基于用户输入的编辑信息,对所述目标编辑对象进行编辑。
3.根据权利要求2所述的方法,其特征在于,所述基于所述目标用户界面元素对应的代码依赖关系,确定所述目标用户界面元素对应的目标编辑对象,包括:
在基于所述代码依赖关系,确定所述目标用户界面元素对应的目标模块代码不被任一模块代码依赖的情况下,将所述目标模块代码作为所述目标编辑对象。
4.根据权利要求2所述的方法,其特征在于,所述基于所述目标用户界面元素对应的代码依赖关系,确定所述目标用户界面元素对应的目标编辑对象,包括:
在基于所述代码依赖关系,确定所述目标用户界面元素对应的目标模块代码被预设数量个模块代码依赖的情况下,将所述目标模块代码对应的原型对象作为所述目标编辑对象。
5.根据权利要求2所述的方法,其特征在于,所述基于所述目标用户界面元素对应的代码依赖关系,确定所述目标用户界面元素对应的目标编辑对象,包括:
在所述代码依赖关系与预设的目标条件匹配的情况下,将所述目标用户界面元素对应的文档对象模型节点作为所述目标编辑对象。
6.根据权利要求3所述的方法,其特征在于,所述基于所述用户界面编辑请求指示的编辑信息,或者基于用户输入的编辑信息,对所述目标编辑对象进行编辑,包括:
在所述目标模块代码作为所述目标编辑对象的情况下,基于所述编辑信息,对所述目标模块代码中,所述目标用户界面元素对应的待编辑代码进行删除或修改。
7.根据权利要求4所述的方法,其特征在于,所述基于所述用户界面编辑请求指示的编辑信息,或者基于用户输入的编辑信息,对所述目标编辑对象进行编辑,包括:
在所述目标模块代码对应的原型对象作为所述目标编辑对象的情况下,基于所述目标模块代码中所述目标用户界面元素对应的待编辑代码,在所述原型对象上建立目标替换函数;所述目标替换函数具有与所述待编辑代码相同的代码数据以及函数名;
基于所述编辑信息,对所述原型对象上建立的所述目标替换函数进行编辑。
8.根据权利要求5所述的方法,其特征在于,所述基于所述用户界面编辑请求指示的编辑信息,或者基于用户输入的编辑信息,对所述目标编辑对象进行编辑,包括:
在所述目标用户界面元素对应的文档对象模型节点作为所述目标编辑对象的情况下,基于所述编辑信息的指示的编辑类型,确定目标编辑工具;
利用所述目标编辑工具,基于所述编辑信息对所述文档对象模型节点进行编辑。
9.根据权利要求1所述的方法,其特征在于,所述方法还包括:
当所述用户界面编辑请求为针对所述目标应用的新增用户界面元素的编辑请求时,基于获取的编辑信息建立目标用户界面元素的目标文档对象模型节点;
将所述目标文档对象模型节点添加至所述目标应用对应的文档对象模型中。
10.一种用户界面编辑装置,其特征在于,包括:
获取模块,用于获取针对目标应用的用户界面编辑请求;
确定模块,用于当所述用户界面编辑请求为针对所述目标应用的用户界面中目标用户界面元素的编辑请求时,确定所述目标用户界面元素对应的代码依赖关系;
编辑模块,用于基于所述目标用户界面元素对应的代码依赖关系,对所述目标用户界面元素对应的目标编辑对象进行编辑。
11.一种计算机设备,其特征在于,包括:处理器、存储器和总线,所述存储器存储有所述处理器可执行的机器可读指令,当计算机设备运行时,所述处理器与所述存储器之间通过总线通信,所述机器可读指令被所述处理器执行时执行如权利要求1至9任一项所述的用户界面编辑方法的步骤。
12.一种计算机可读存储介质,其特征在于,该计算机可读存储介质上存储有计算机程序,该计算机程序被处理器运行时执行如权利要求1至9任一项所述的用户界面编辑方法的步骤。
CN202110274185.5A 2021-03-15 2021-03-15 一种用户界面编辑方法及装置 Active CN112988136B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110274185.5A CN112988136B (zh) 2021-03-15 2021-03-15 一种用户界面编辑方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110274185.5A CN112988136B (zh) 2021-03-15 2021-03-15 一种用户界面编辑方法及装置

Publications (2)

Publication Number Publication Date
CN112988136A true CN112988136A (zh) 2021-06-18
CN112988136B CN112988136B (zh) 2023-07-04

Family

ID=76335496

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110274185.5A Active CN112988136B (zh) 2021-03-15 2021-03-15 一种用户界面编辑方法及装置

Country Status (1)

Country Link
CN (1) CN112988136B (zh)

Citations (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2010076139A1 (en) * 2008-12-30 2010-07-08 International Business Machines Corporation Dynamic point and extend user interface
US20150178851A1 (en) * 2013-12-19 2015-06-25 Guidewire Software, Inc. Insurance product model relationships
CN105022757A (zh) * 2014-04-29 2015-11-04 腾讯科技(深圳)有限公司 网页修改方法及网页修改装置
JP2016042214A (ja) * 2014-08-13 2016-03-31 株式会社電通国際情報サービス 設計支援システム、設計支援方法、及び設計支援プログラム
CN106293753A (zh) * 2016-08-16 2017-01-04 网易(杭州)网络有限公司 编辑器的开发方法和装置,编辑方法及编辑器
CN108108194A (zh) * 2016-11-24 2018-06-01 腾讯科技(深圳)有限公司 用户界面编辑方法以及用户界面编辑器
CN109725973A (zh) * 2018-12-27 2019-05-07 北京天融信网络安全技术有限公司 一种数据处理方法和数据处理装置
CN111045645A (zh) * 2019-11-08 2020-04-21 贝壳技术有限公司 页面编辑方法、装置、电子设备及存储介质
CN111427577A (zh) * 2020-04-27 2020-07-17 北京每日优鲜电子商务有限公司 代码处理方法、装置及服务器
CN111813409A (zh) * 2020-07-02 2020-10-23 上海米哈游天命科技有限公司 一种交互界面的代码生成方法、装置、设备及存储介质

Patent Citations (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2010076139A1 (en) * 2008-12-30 2010-07-08 International Business Machines Corporation Dynamic point and extend user interface
US20150178851A1 (en) * 2013-12-19 2015-06-25 Guidewire Software, Inc. Insurance product model relationships
CN105022757A (zh) * 2014-04-29 2015-11-04 腾讯科技(深圳)有限公司 网页修改方法及网页修改装置
JP2016042214A (ja) * 2014-08-13 2016-03-31 株式会社電通国際情報サービス 設計支援システム、設計支援方法、及び設計支援プログラム
CN106293753A (zh) * 2016-08-16 2017-01-04 网易(杭州)网络有限公司 编辑器的开发方法和装置,编辑方法及编辑器
CN108108194A (zh) * 2016-11-24 2018-06-01 腾讯科技(深圳)有限公司 用户界面编辑方法以及用户界面编辑器
CN109725973A (zh) * 2018-12-27 2019-05-07 北京天融信网络安全技术有限公司 一种数据处理方法和数据处理装置
CN111045645A (zh) * 2019-11-08 2020-04-21 贝壳技术有限公司 页面编辑方法、装置、电子设备及存储介质
CN111427577A (zh) * 2020-04-27 2020-07-17 北京每日优鲜电子商务有限公司 代码处理方法、装置及服务器
CN111813409A (zh) * 2020-07-02 2020-10-23 上海米哈游天命科技有限公司 一种交互界面的代码生成方法、装置、设备及存储介质

Non-Patent Citations (5)

* Cited by examiner, † Cited by third party
Title
BANGZHONG CAO: "The solution of web font-end performance optimization", 《2017 10TH INTERNATIONAL CONGRESS ON IMAGE AND SIGNAL PROCESSING, BIOMEDICAL ENGINEERING AND INFORMATICS (CISP-BMEI)》, pages 1 - 7 *
JOSIP MARAS: "Extracting client-side web application code", pages 1 - 6, Retrieved from the Internet <URL:Extracting client-side web application code> *
海月: "Unity UI界面的设计(完整版)", pages 1 - 6, Retrieved from the Internet <URL:《https://blog.csdn.net/weixin_43673589/article/details/106532612》> *
褚晓伟: "基于Eclipse的可视化界面设计器的设计与实现", 《中国优秀硕士学位论文全文数据库 (信息科技辑)》, pages 138 - 170 *
雷慧: "基于深度学习的Web页面生成系统的设计与实现", 《中国优秀硕士学位论文全文数据库 (信息科技辑)》, pages 139 - 112 *

Also Published As

Publication number Publication date
CN112988136B (zh) 2023-07-04

Similar Documents

Publication Publication Date Title
Boduch React and react native
US20140173454A1 (en) Method and system for designing, deploying and executing transactional multi-platform mobile applications
De Farias et al. COMFIT: A development environment for the Internet of Things
Boduch et al. React and React Native: A complete hands-on guide to modern web and mobile development with React. js
US8839192B2 (en) System and method for presentation of cross organizational applications
CN113076096B (zh) 一种桌面应用程序开发方法、装置、设备及存储介质
US9817811B2 (en) Web server system, dictionary system, dictionary call method, screen control display method, and demonstration application generation method
US20230229406A1 (en) Page rendering method, apparatus, electronic device, computer-readable storage medium, and computer program product
WO2023078053A1 (zh) 一种代码生成方法、装置、计算机设备及存储介质
JP2008204369A (ja) シミュレータ開発システム及びシミュレータ開発方法
CN112988165A (zh) 基于Kubernetes的交互式建模方法、装置、电子设备及存储介质
CN113312046A (zh) 子应用页面处理方法、装置和计算机设备
CN114741071A (zh) 一种应用构建方法及装置
KR101552914B1 (ko) 웹 서버 어플리케이션 프레임워크 장치와 프레임워크를 이용한 웹 어플리케이션 처리 방법 및 이를 구현할 수 있는 컴퓨터로 읽을 수 있는 기록 매체
US11604662B2 (en) System and method for accelerating modernization of user interfaces in a computing environment
CN113934429A (zh) 一种设计稿的转换方法、装置、计算机设备和存储介质
CN115080046B (zh) 一种页面设计中多组件抽象关联融合方法和装置
CN115629763A (zh) 目标代码的生成方法、npu指令的显示方法及装置
CN112988136A (zh) 一种用户界面编辑方法及装置
CN104267954A (zh) 一种用户界面中所包含的部件的生成方法和装置
CN114090002A (zh) 前端界面构建方法、装置、电子设备和存储介质
Sheiko Cross-Platform Desktop Application Development: Electron, Node, NW. js, and React
CN106445487B (zh) 用于控制交互式组件的处理单元、软件以及方法
CN113608726B (zh) 代码生成方法、装置、电子设备及存储介质
Trivedi User interface implementation of environmental data integration system with React

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