CN111857718A - 列表的编辑方法、装置、设备及存储介质 - Google Patents

列表的编辑方法、装置、设备及存储介质 Download PDF

Info

Publication number
CN111857718A
CN111857718A CN202010743721.7A CN202010743721A CN111857718A CN 111857718 A CN111857718 A CN 111857718A CN 202010743721 A CN202010743721 A CN 202010743721A CN 111857718 A CN111857718 A CN 111857718A
Authority
CN
China
Prior art keywords
list
interface
editing
control
user
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
CN202010743721.7A
Other languages
English (en)
Other versions
CN111857718B (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.)
Netease Hangzhou Network Co Ltd
Original Assignee
Netease Hangzhou Network 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 Netease Hangzhou Network Co Ltd filed Critical Netease Hangzhou Network Co Ltd
Priority to CN202010743721.7A priority Critical patent/CN111857718B/zh
Publication of CN111857718A publication Critical patent/CN111857718A/zh
Application granted granted Critical
Publication of CN111857718B publication Critical patent/CN111857718B/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/38Creation or generation of source code for implementing user interfaces
    • AHUMAN NECESSITIES
    • A63SPORTS; GAMES; AMUSEMENTS
    • A63FCARD, BOARD, OR ROULETTE GAMES; INDOOR GAMES USING SMALL MOVING PLAYING BODIES; VIDEO GAMES; GAMES NOT OTHERWISE PROVIDED FOR
    • A63F13/00Video games, i.e. games using an electronically generated display having two or more dimensions
    • A63F13/60Generating or modifying game content before or while executing the game program, e.g. authoring tools specially adapted for game development or game-integrated level editor

Landscapes

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

Abstract

本申请提供一种列表的编辑方法、装置、设备及存储介质,其中,编辑方法包括:响应于用户对UI编辑器中转列表控件的选中操作,获取用户选中的节点以及该节点的所有子孙节点的布局描述数据,将布局描述数据另存为一个新的布局文件,并生成该布局文件对应的UI逻辑对象。将布局描述数据中的节点替换为列表控件,并将列表项的唯一标识赋值为UI编辑对象的标识,生成新的列表项,在UI编辑器中显示列表项的逻辑界面。上述编辑方法实现对列表界面中单独一个列表项的文件管理和编辑,为列表项的复用提供依据,从而提高列表界面的开发效率。

Description

列表的编辑方法、装置、设备及存储介质
技术领域
本申请涉及计算机技术领域,尤其涉及一种列表的编辑方法、装置、设备及存储介质。
背景技术
用户界面(User Interface,UI)是游戏应用中的一种二维美术资源,是游戏玩家与应用程序进行人机交互、执行操作逻辑的界面。列表作为用户界面上的一种不可或缺的UI类型,表现为垂直或水平方向上的相同控件元素组合的重复展示。
目前,现有的游戏引擎或部分游戏编辑器中内置的UI编辑器,例如Unity、UE4中的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编辑器中显示列表项的逻辑界面。上述编辑方法实现对列表界面中单独一个列表项的文件管理和编辑,为列表项的复用提供依据,从而提高列表界面的开发效率。
附图说明
图1为本申请实施例提供的一种列表的编辑方法的流程图;
图2为本申请实施例提供的UI编辑器中的一种界面示意图;
图3为本申请实施例提供的UI编辑器中的一种界面示意图;
图4为本申请实施例提供的UI编辑器中的一种界面的示意图;
图5a至图5c为本申请实施例提供的二级嵌套列表在编辑模式下的一系列界面示意图;
图6为本申请实施例提供的二级嵌套列表结构的示意图;
图7为本申请实施例提供的UI编辑器中的一种界面示意图;
图8为本申请实施例提供的一种双层嵌套列表的引用结构示意图;
图9为本申请实施例提供的对双层嵌套列表执行删除逻辑的示意图;
图10为本申请实施例提供的一种列表的编辑装置的结构示意图;
图11为本申请实施例提供的电子设备的结构示意图。
通过上述附图,已示出本申请明确的实施例,后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本申请构思的范围,而是通过参考特定实施例为本领域技术人员说明本申请的概念。
具体实施方式
下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本申请保护的范围。
本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本申请的实施例例如能够以除了在这里图示或描述的那些以外的顺序实施。
此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
首先对本申请所涉及的名词进行解释:
UI布局:对一个UI的结构描述,内容以json文件形式独立存储。
节点:UI布局中的最小组成单元,描述的是一个控件类型实例化后的对象,每个节点都有一种特定的控件类型。
控件类型:组成UI的各个节点的类型,比如按钮、文本、输入框等都属于控件类型。
游戏编辑器:部分市面上的游戏所开放的可供玩家自主编辑游戏内容的平台。
编辑模式:进行自定义UI或者其他游戏逻辑、游戏内容编辑的模式,该模式下不会执行自定义游戏的逻辑。
运行模式:自定义游戏运行状态下的模式。
UI编辑器:市面上的游戏引擎或部分游戏编辑器内置的,提供UI布局编辑功能的功能模块。
滚动区域:一种UI控件类型,没有具体内容,仅包含对具体区域的滚动查看逻辑
列表:一种UI类型,表现为垂直/水平方向上的相同控件元素组合的重复展示,是滚动区域与多个列表项的组合形UI元素。
列表项:列表所重复展示的一个或一系列控件的组合。
列表长度:列表所重复展示的列表项数量。
栈式结构:一种特殊的数据结构,所有数据的存入或取出,只能在浮动的一端进行,严格按照先进后出原则存取。
本申请实施例提供的列表编辑方法,解决了市面游戏引擎上UI编辑中列表型节点逻辑缺乏、布局复杂的问题。基于列表UI中各列表项的编辑界面,在列表项中创建一个或多个列表控件,实现多级嵌套列表。支持用户直接选中当前UI布局中的某一列表节点直接转变为列表项,实现列表项的一体化封装,同时选中列表节点还可以通过编辑列表项控件快速进入该列表项的编辑界面,实现列表与列表项的关联性与编辑的连贯性。对于多级嵌套列表,可按照先进后出的顺序执行对列表类型UI的编辑操作。另外,还提供管理界面方便用户创建、二次编辑或删除列表界面,管理界面不支持列表项界面的删除,避免列表项引用丢失的问题。上述编辑方法为开发者更便利的创建、编辑、管理列表UI提供了依据。
下面以具体地实施例对本申请的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合,对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图,对本申请的实施例进行描述。
图1为本申请实施例提供的一种列表的编辑方法的流程图。本实施例提供的方法可应用于游戏编辑器所在的终端设备,该终端设备可以是智能手机、平板、AR设备等移动终端,该方法也可应用于游戏开发服务器。在其他实施例中,该方法还可应用于其他设备,对此本实施例不作任何限制。
如图1所示,该方法具体步骤如下:
步骤101、响应于用户对UI编辑器中转列表控件的选中操作,获取用户选中的节点以及节点的所有子孙节点的布局描述数据。
图2为本申请实施例提供的UI编辑器中的一种界面示意图,如图2所示,该界面包括列表UI的布局结构区域,控件列表区域,节点操作区域,节点属性区域,事件注册区域(图中仅示出该区域的标题框),列表UI的布局预览区域。
列表UI的布局结构区域用于编辑列表的布局结构(如列表的节点树)。
控件列表区域用于编辑备选节点控件,向用户提供常用的UI元素的控件。其中,备选节点控件可以包括:按钮、图片、文字、层、输入框、进度条、多选按钮、复选框、滑动条、裁剪节点等常用节点控件。若有需要,还可以在备选节点控件中增加其他常用控件类型或者自定义控件类型,本实施例此处不做具体限定。
节点操作区域用于编辑列表中当前选中节点,包括以下至少一种编辑操作:存储为模板、删除、复制、多选、转列表、取消等。节点属性区域用于编辑列表中当前选中节点的属性信息。事件注册区域用于为列表中当前选中节点注册逻辑事件,实现列表类型的UI布局与交互逻辑的关联。列表UI的布局预览区域用于预览用户选中的节点对应的一个或多个控件,例如图2中的图片控件以及文字控件。
示例性的,如图2所示,响应于用户对UI编辑器中当前界面上转列表控件的选中操作,获取用户选中的节点“layer”,以及“layer”的子节点“image”和“label”的布局描述数据,其中子节点“image”对应列表UI的预览区域中的图片控件,子节点“label”对应列表UI的预览区域中的文本控件。
本实施例中,节点的布局描述数据包括该节点以及该节点的所有子孙节点的属性信息以及各节点的事件注册信息。对于某一个节点而言,节点的属性信息包括节点的控件类型、控件名称等基础信息,节点的定位信息(例如锚点等),节点的尺寸信息(例如长度、宽度等),颜色信息等等。
应理解,每种控件类型的节点可编辑的属性可以不同。例如,对于图片控件的节点,属性信息包括图片的长度和宽度,对于文本控件的节点,属性信息还包括文本的字体属性。
步骤102、将布局描述数据另存为一个新的布局文件,并生成与新的布局文件对应的UI逻辑对象。
步骤103、将布局描述数据中的节点替换为列表控件,并将列表项的唯一标识赋值为UI逻辑对象的标识,生成新的列表项。
本实施例中,用户在UI编辑器中选中节点后,在节点操作区域中点击转列表控件,可将所选节点以及该节点的所有子孙节点转变为列表项,并在列表UI布局中将选中节点替换为列表控件,自动完成对生成的列表项的引用。
本实施例的UI编辑器所使用的UI布局描述方法可以是JSON文件,每个节点的描述方法都是一个字典,列表控件也是如此。示例性的,以一个水平列表节点的描述方法为例,该水平列表节点的描述方法(即布局文件)如下:
Figure BDA0002607615680000071
其中,template_guid字段描述的是这一列表项所对应的UI逻辑对象的唯一标识码;template字段描述的是该列表所对应的列表项,以文件路径及文件名的形式列出。
initCount字段描述的是列表的默认长度,长度是本实施例中的列表控件所具备的特有属性,通过这个数值型属性的封装,用户可以简单地修改列表的长度,无论是在编辑时手动输入,或是运行时通过触发器动作简单的设置,其中封装的逻辑,其实就是将所引用的列表项布局重复实例化的次数。
需要说明的是,本实施例的列表项可作为一个独立的UI布局,自然也有其UI逻辑对象和对应的UI布局文件存在。列表项的UI布局文件可作为独立的JSON文件存储于本地目录中。列表项的布局文件中不包含与游戏逻辑相关的信息,只是单纯的描述该列表项的布局信息,因此实现了UI布局与逻辑的解耦。
可选的,在一些实施例中,用户在UI编辑器中点击转列表控件,生成列表项,UI编辑器默认当前界面引用该生成的列表项,该引用关系是固定的。
可选的,在一些实施例中,列表项可以同时被多个列表界面复用。
为了避免出现列表项引用丢失的问题,本实施例的UI编辑器不支持用户单独删除列表项。UI编辑器对于列表UI的删除逻辑可参见下述实施例,此处不具体展开。
步骤104、在UI编辑器中显示列表项的编辑界面。
可选的,作为一种示例,图3为本申请实施例提供的UI编辑器中的一种界面示意图,如图3所示,该界面为列表项的编辑界面,该界面上还可以显示转列表成功的提示信息,该提示信息可以位于该列表项的布局预览区域内。
用户可以在列表项的编辑界面中进行以下至少一种UI编辑操作:查看该列表项布局的预览,查看列表项的布局结构,增加指定控件类型的节点,编辑节点的控件类型,编辑节点的属性信息,注册节点的逻辑事件等等。UI编辑器根据列表项的编辑界面中的UI编辑操作,更新列表项的布局文件和UI逻辑对象,以实现UI布局的编辑,以及布局中控件与逻辑事件的关联。
本实施例提供的列表的编辑方法,通过响应于用户对UI编辑器中转列表控件的选中操作,获取用户选中的节点以及该节点的所有子孙节点的布局描述数据,将布局描述数据另存为一个新的布局文件,并生成该布局文件对应的UI逻辑对象。将布局描述数据中的节点替换为列表控件,并将列表项的唯一标识赋值为UI编辑对象的标识,生成新的列表项,在UI编辑器中显示列表项的逻辑界面。上述编辑方法实现对列表界面中单独一个列表项的文件管理和编辑,为列表项的复用提供依据,从而提高列表界面的开发效率。
图4为本申请实施例提供的UI编辑器中的一种界面的示意图。仍以图2所示示例为例,当选中的节点“layer”转列表成功后,UI编辑器显示列表项的编辑界面,原节点被替换为同名的列表节点,用户在点选列表节点“layer”后,列表项的编辑界面的节点操作区域上新增编辑列表项控件,如图4所示。用户通过点击编辑列表项控件,可返回至图2所示的编辑界面,实现对该列表项的任一节点的属性信息等的修改。在完成对列表项的任一节点的修改操作后,用户再次点击节点操作区域的转列表控件,完成对该节点的转列表操作,更新该节点的布局文件。
可选的,作为一种示例,如图3所示,列表项的编辑界面上还包括保存编辑控件和取消编辑控件。在一种可能的实现方式中,响应于用户对保存编辑控件的操作,将在编辑界面上的修改进行保存,并退出列表项的编辑界面,回到列表UI布局编辑界面(即列表项的上一层界面),在列表UI布局编辑界面的布局预览区域将实时反映用户对某一列表控件或多个列表控件的修改。在另一种可能的实现方式中,响应于用户对取消编辑控件的操作,将在编辑界面上的修改取消,并退出列表项的编辑界面,回到列表UI布局编辑界面。
上述示例中,在列表项编辑模式下选中列表节点,可通过编辑列表项入口直接进入列表项的编辑,实现了列表与列表项的关联性与编辑的连贯性。
可选的,在一些实施例中,如图4所示,列表项的编辑界面的节点属性区域还开放了对列表类型的设置控件,对常见的几种列表类型进行封装,用户可通过下拉列表或者点选列表类型控件等形式,便捷地切换节点为备选的任意一种常见的列表类型,切换后UI编辑器自动完成节点尺寸、布局对齐等逻辑。
在上述实施例的基础上,可选的,上述列表项可以为多级嵌套列表,列表的编辑方法,还包括:响应于用户在列表项的编辑界面上的编辑操作,通过先进后出的方式更新列表项的布局文件和UI编辑逻辑。
下面以一个二级嵌套的列表项为例,对二级嵌套列表项的编辑方法进行说明。图5a至图5c分别示出了二级嵌套列表在编辑模式下的一系列界面示意图。如图5a所示,列表项的布局预览区域展示了一3×3的列表,具体的,由水平列表(含有3列)与垂直列表(含有3行)嵌套而成。需要说明的是,对于这种m×n的矩阵形式UI,可采取单层列表或者嵌套列表完成,前者方案更优,本实施例仅作最直观的嵌套列表说明。
图5a所示的UI逻辑对象“root_ui”在编辑状态下,水平列表节点“layer”的列表项数为3,即水平列表节点包括3列。用户点击图5a中节点操作区域的编辑列表项控件,编辑界面将进入名为“layer”的列表项(与节点同名)编辑状态,如图5b所示,布局结构区域包含名为“layer2”的列表节点以及名为“label”的文字控件。用户在完成对上述列表节点和/或文字控件的属性信息编辑后,可点击界面中的取消编辑控件或者保存编辑控件,UI编辑器将取消或保存用户对编辑界面上的修改,并退回至图5a所示的界面。
示例性的,用户点击图5b中节点操作区域的编辑列表项控件,编辑界面将进入名为“layer2”的列表项(与节点同名)编辑状态,如图5c所示,用户可以在该界面编辑3×3矩阵中单个列表项的内容,例如,用户点选图5c中布局结构区域的节点“label”,并调整节点属性区域中的颜色控件,完成对文字控件的文字颜色的修改,修改完成后,用户可点击界面上保存编辑控件,UI编辑器将保存用户对“label”节点的文本颜色的调整,并退回至图5b所示的界面,该界面为名为“layer”的列表项编辑界面。需要说明的是,经上述编辑操作,图5b中3列控件上的文本颜色均更新为新的颜色,例如由白色调整为红色。
示例性的,用户还可以在图5b所示界面的布局结构区域点选“label”节点,该节点对应布局预览区域中3列图片控件上方的文字控件,用户可修改该文字控件的颜色,如图5c所示。在编辑完成后,点击界面上的保存编辑控件,完成对“label”节点的文本颜色的调整,例如由白色调整为绿色,并退回至图5b所示的界面,该界面为名为“layer”的列表项编辑界面。
经上述两次颜色调整,图5b中3列图片控件上的文本颜色修改为红色,3列图片控件上方的文本控件的文本颜色修改为绿色。在图5b所示界面上点击保存编辑控件,界面将退回至图5a,界面名为“root_ui”,此时图5a的布局预览区域中3×3图像控件上的文本颜色均更新为红色,3×3图像控件上方的3个文本控件的文本颜色均更新为绿色。可见,列表项内的修改已实时体现在各级列表的显示中。
本实施例示出了多级嵌套的列表设计方案,即列表项的内容可以继续转列表。为了实现多级嵌套列表的进出编辑管理与级别关系记忆,本实施例提出了一种栈式结构(先进后出)作为各级列表项的管理方法,进入列表项编辑(例如点击转列表控件或编辑列表项控件)就是入栈,退出列表项编辑(例如点击保存编辑控件或取消编辑控件)就是出栈。
UI布局编辑界面封装的接口可根据当前编辑UI逻辑对象,作全局的显示刷新,这是进出列表编辑的显示逻辑刷新依据,所以栈式结构需要做的就是在进出列表编辑时正确的更迭当前编辑UI。对于栈式结构,每当进入列表项编辑,便会根据列表节点的template_guid属性,获取对应的列表项UI逻辑对象作为新的当前编辑UI,并将其入栈缓存;每当退出列表项编辑,就会将栈顶对象出栈,并将新的栈顶对象作为当前编辑UI。
图6为本申请实施例提供的二级嵌套列表结构的示意图,表1为二级嵌套列表进入/推出编辑操作时各关键对象内容表。结合上述示例、图6以及表1所示,UI逻辑对象“root_ui”中名为“layer”的节点是列表节点,其引用的是名为“layer”的UI逻辑对象(列表项逻辑对象),当用户点击编辑列表项时,基于列表节点“layer”的template_guid属性,向UI编辑器的数据管理模块查询得到其UI逻辑对象“layer”,继而通过UI逻辑对象“layer”获得布局文件数据并展示,并将“layer”入栈。同理,当用户点击界面上的节点“layer2”,该节点也是一个列表节点,其引用的是名为“layer2”的列表项逻辑对象,基于类似的操作,将“layer2”入栈并展示。当用户点击界面上的取消编辑控件或者保存编辑控件时,则将栈顶的UI逻辑对象出栈,并设置当前编辑UI为下一个栈顶内容,重新刷新展示界面。基于栈式结构,完成了嵌套式列表结构的进出编辑管理。
表1
Figure BDA0002607615680000111
Figure BDA0002607615680000121
需要说明的是,上述实施例中,对于多层嵌套列表,每层列表项之间的编辑是相互独立的,对某一层列表项的编辑结束后,将返回上一层列表项,确保了列表类型的UI编辑的准确性与便利性,避免了如Unity和UE4的单布局内结构过于复杂的情况出现。
图7为本申请实施例提供的UI编辑器中的一种界面示意图,如图7所示,管理界面包括新建界面控件,管理界面层级控件以及已有界面列表。用户可以在管理界面中实现新建界面、管理当前已有的自定义界面与一系列官方预设界面之间的层级关系、删除已有界面等UI级别的管理操作。
当用户需要对任一已有界面进行编辑时,通过点击管理界面上任一已有界面对应的控件,向UI编辑器发送对当前选中的界面的编辑指令。UI编辑器可响应于对选中界面的编辑指令,获取该界面的布局文件,将界面的布局信息显示在该界面的布局编辑界面中,例如点击管理界面上已有界面“new_ui@7”,进入如图2所示的布局编辑界面。
当用户需要对任一已有界面进行删除时,由于上述实施例中转列表操作的封装性,每个UI的每个列表控件对应一个列表项,会对该界面上布局的所有节点进行检查,以获得该界面所有引用的列表项界面,并将其逐一删除。这一机制同样适用于列表项界面的删除,也就是说对于多层嵌套结构的列表,也可以递归地删除所有引用的列表项。
示例性的,图8为本申请实施例提供的一种双层嵌套列表的引用结构示意图,如图8所示,节点1对应UI逻辑对象1,并在同一界面内关联列表节点1,通过列表节点1的模板项属性引用,关联到节点2;节点2对应UI逻辑对象2,并在同一界面内关联列表节点2,通过列表节点2的模板项属性引用,关联到节点3,节点3对应UI逻辑对象3。
图9为本申请实施例提供的对双层嵌套列表执行删除逻辑的示意图。如图9所示,执行双层嵌套列表的删除操作包括步骤如下:
步骤1、用户触发删除操作;
步骤2、响应于删除操作,准备删除UI逻辑对象1,引用列表项检查,触发删除UI逻辑对象2;
步骤3、响应于删除操作,准备删除UI逻辑对象2,引用列表项检查,触发删除UI逻辑对象3;
步骤4、响应于删除操作,准备删除UI逻辑对象3,检查无引用列表项,删除逻辑对象3,删除成功回调;
步骤5、引用列表项删除完毕,删除UI逻辑对象2,删除成功回调;
步骤6、引用列表项删除完毕,删除UI逻辑对象1,删除成功回调。
上述执行过程采用迭代式的引用检查与连锁删除逻辑,响应于用户对嵌套式列表的删除操作,逐一删除该列表UI内所有的列表项界面。
图10为本申请实施例提供的一种列表的编辑装置的结构示意图,如图10所示,本实施例提供的列表的编辑装置200,包括:
获取模块201,用于响应于用户对UI编辑器中转列表控件的选中操作,获取用户选中的节点以及所述节点的所有子孙节点的布局描述数据;
处理模块202,用于将所述布局描述数据另存为一个新的布局文件,并生成与所述新的布局文件对应的UI逻辑对象;
将所述布局描述数据中的节点替换为列表控件,并将列表项的唯一标识赋值为所述UI逻辑对象的标识,生成新的列表项;
显示模块203,用于在所述UI编辑器中显示所述列表项的编辑界面。
在一种可能的实现方式中,所述显示模块203,还用于:
在所述UI编辑器的界面上显示转列表成功的提示信息。
在一种可能的实现方式中,所述UI编辑器的界面上还包括:保存编辑控件和取消编辑控件;所述处理模块202,还用于:
响应于用户对所述保存编辑控件的操作,将在所述编辑界面上的修改进行保存,并退出所述列表项的编辑界面;
或者,
响应于用户对所述取消编辑控件的操作,将在所述编辑界面上的修改取消,并退出所述列表项的编辑界面。
在一种可能的实现方式中,所述列表项为多级嵌套列表,所述处理模块202,还用于:
响应于用户在所述列表项的编辑界面上的编辑操作,通过先进后出的方式更新所述列表项的布局文件和UI逻辑对象。
在一种可能的实现方式中,所述显示模块203,还用于在所述UI编辑器中显示管理界面;
所述管理界面中包括新建界面控件,管理界面层级控件,以及界面列表,所述界面列表中包括一个或多个已创建的列表界面。
本申请实施例提供的编辑装置用于执行前述方法实施例中的各个步骤,其实现原理和技术效果类似,在此不再赘述。
图11为本申请实施例提供的电子设备的结构示意图。如图11所示,该电子设备300包括:处理器301,存储器302,以及存储在存储器302上并可在处理器301上运行的计算机程序。
其中,处理器301运行计算机程序时实现前述方法实施例提供的列表的编辑方法。
另外,本申请实施例还提供一种计算机可读存储介质,计算机可读存储介质中存储有计算机程序,计算机程序被处理器执行时实现前述方法实施例提供的列表的编辑方法。
在本申请所提供的几个实施例中,应该理解到,所揭露的装置和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本申请各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用硬件加软件功能单元的形式实现。
上述以软件功能单元的形式实现的集成的单元,可以存储在一个计算机可读取存储介质中。上述软件功能单元存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)或处理器(processor)执行本申请各个实施例所述方法的部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(Read-Only Memory,ROM)、随机存取存储器(Random Access Memory,RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
本领域技术人员可以清楚地了解到,为描述的方便和简洁,仅以上述各功能模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能模块完成,即将装置的内部结构划分成不同的功能模块,以完成以上描述的全部或者部分功能。上述描述的装置的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。
应理解,本申请实施例中提及的处理器可以是中央处理单元(CentralProcessing Unit,CPU),还可以是其他通用处理器、数字信号处理器(Digital SignalProcessor,DSP)、专用集成电路(Application Specific Integrated Circuit,ASIC)、现成可编程门阵列(Field Programmable Gate Array,FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
还应理解,本申请实施例中提及的存储器可以是易失性存储器或非易失性存储器,或可包括易失性和非易失性存储器两者。其中,非易失性存储器可以是只读存储器(Read-Only Memory,ROM)、可编程只读存储器(Programmable ROM,PROM)、可擦除可编程只读存储器(Erasable PROM,EPROM)、电可擦除可编程只读存储器(Electrically EPROM,EEPROM)或闪存。易失性存储器可以是随机存取存储器(Random Access Memory,RAM),其用作外部高速缓存。通过示例性但不是限制性说明,许多形式的RAM可用,例如静态随机存取存储器(Static RAM,SRAM)、动态随机存取存储器(Dynamic RAM,DRAM)、同步动态随机存取存储器(Synchronous DRAM,SDRAM)、双倍数据速率同步动态随机存取存储器(Double DataRate SDRAM,DDR SDRAM)、增强型同步动态随机存取存储器(Enhanced SDRAM,ESDRAM)、同步连接动态随机存取存储器(Synchlink DRAM,SLDRAM)和直接内存总线随机存取存储器(Direct Rambus RAM,DR RAM)。
需要说明的是,当处理器为通用处理器、DSP、ASIC、FPGA或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件时,存储器(存储模块)集成在处理器中。
本领域技术人员在考虑说明书及实践这里公开的发明后,将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化,这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本申请未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的,本申请的真正范围和精神由下面的权利要求书指出。
应当理解的是,本申请并不局限于上面已经描述并在附图中示出的精确结构,并且可以在不脱离其范围进行各种修改和改变。本申请的范围仅由所附的权利要求书来限制。

Claims (12)

1.一种列表的编辑方法,其特征在于,包括:
响应于用户对UI编辑器中转列表控件的选中操作,获取用户选中的节点以及所述节点的所有子孙节点的布局描述数据;
将所述布局描述数据另存为一个新的布局文件,并生成与所述新的布局文件对应的UI逻辑对象;
将所述布局描述数据中的节点替换为列表控件,并将列表项的唯一标识赋值为所述UI逻辑对象的标识,生成新的列表项;
在所述UI编辑器中显示所述列表项的编辑界面。
2.根据权利要求1所述的方法,其特征在于,所述方法还包括:
在所述UI编辑器的界面上显示转列表成功的提示信息。
3.根据权利要求1或2所述的方法,其特征在于,所述UI编辑器的界面上还包括:保存编辑控件和取消编辑控件;所述方法还包括:
响应于用户对所述保存编辑控件的操作,将在所述编辑界面上的修改进行保存,并退出所述列表项的编辑界面;
或者,
响应于用户对所述取消编辑控件的操作,将在所述编辑界面上的修改取消,并退出所述列表项的编辑界面。
4.根据权利要求1所述的方法,其特征在于,所述列表项为多级嵌套列表,所述方法还包括:
响应于用户在所述列表项的编辑界面上的编辑操作,通过先进后出的方式更新所述列表项的布局文件和UI逻辑对象。
5.根据权利要求1所述的方法,其特征在于,所述方法还包括:
在所述UI编辑器中显示管理界面;所述管理界面中包括新建界面控件,管理界面层级控件,以及界面列表,所述界面列表中包括一个或多个已创建的列表界面。
6.一种列表的编辑装置,其特征在于,包括:
获取模块,用于响应于用户对UI编辑器中转列表控件的选中操作,获取用户选中的节点以及所述节点的所有子孙节点的布局描述数据;
处理模块,用于将所述布局描述数据另存为一个新的布局文件,并生成与所述新的布局文件对应的UI逻辑对象;
将所述布局描述数据中的节点替换为列表控件,并将列表项的唯一标识赋值为所述UI逻辑对象的标识,生成新的列表项;
显示模块,用于在所述UI编辑器中显示所述列表项的编辑界面。
7.根据权利要求6所述的装置,其特征在于,所述显示模块,还用于:
在所述UI编辑器的界面上显示转列表成功的提示信息。
8.根据权利要求6或7所述的装置,其特征在于,所述UI编辑器的界面上还包括:保存编辑控件和取消编辑控件;所述处理模块,还用于:
响应于用户对所述保存编辑控件的操作,将在所述编辑界面上的修改进行保存,并退出所述列表项的编辑界面;
或者,
响应于用户对所述取消编辑控件的操作,将在所述编辑界面上的修改取消,并退出所述列表项的编辑界面。
9.根据权利要求6所述的装置,其特征在于,所述列表项为多级嵌套列表,所述处理模块,还用于:
响应于用户在所述列表项的编辑界面上的编辑操作,通过先进后出的方式更新所述列表项的布局文件和UI逻辑对象。
10.根据权利要求6所述的装置,其特征在于,所述显示模块,还用于在所述UI编辑器中显示管理界面;
所述管理界面中包括新建界面控件,管理界面层级控件,以及界面列表,所述界面列表中包括一个或多个已创建的列表界面。
11.一种电子设备,其特征在于,包括:
处理器,存储器,以及存储在所述存储器上并可在所述处理器上运行的计算机程序;
其中,所述处理器运行所述计算机程序时实现如权利要求1至5中任一项所述的方法。
12.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质中存储有计算机程序,所述计算机程序被处理器执行时实现如权利要求1至5中任一项所述的方法。
CN202010743721.7A 2020-07-29 2020-07-29 列表的编辑方法、装置、设备及存储介质 Active CN111857718B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010743721.7A CN111857718B (zh) 2020-07-29 2020-07-29 列表的编辑方法、装置、设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010743721.7A CN111857718B (zh) 2020-07-29 2020-07-29 列表的编辑方法、装置、设备及存储介质

Publications (2)

Publication Number Publication Date
CN111857718A true CN111857718A (zh) 2020-10-30
CN111857718B CN111857718B (zh) 2024-04-09

Family

ID=72945601

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010743721.7A Active CN111857718B (zh) 2020-07-29 2020-07-29 列表的编辑方法、装置、设备及存储介质

Country Status (1)

Country Link
CN (1) CN111857718B (zh)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112668194A (zh) * 2020-12-31 2021-04-16 禾多科技(北京)有限公司 基于页面的自动驾驶场景库信息展示方法、装置和设备
CN112817585A (zh) * 2021-02-26 2021-05-18 厦门极致互动网络技术股份有限公司 一种基于Unity编辑器的Cocos2dx UI界面搭建方法
CN113750519A (zh) * 2021-09-09 2021-12-07 网易(杭州)网络有限公司 场景地形编辑方法、装置、电子终端和机器可读存储介质
CN115619905A (zh) * 2022-10-24 2023-01-17 北京力控元通科技有限公司 一种图元编辑方法、装置、电子设备及存储介质
WO2023232051A1 (zh) * 2022-06-01 2023-12-07 阿里巴巴(中国)有限公司 页面信息和广告图片展示方法、装置、设备及存储介质

Citations (18)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP0587394A1 (en) * 1992-09-08 1994-03-16 International Business Machines Corporation Graphical resource editor
US5848263A (en) * 1995-08-09 1998-12-08 Yamaha Corporation File conversion method and apparatus for LSI design data
US20050193361A1 (en) * 2004-02-27 2005-09-01 Vitanov Kamen B. System and method for presentation of wireless application data using repetitive UI layouts
US20090064039A1 (en) * 2007-09-04 2009-03-05 Apple Inc. List item layouts system and method
CN102193795A (zh) * 2010-03-12 2011-09-21 国际商业机器公司 布局变换装置、布局变换程序以及布局变换方法
US20150089404A1 (en) * 2013-09-20 2015-03-26 Chee Hong LIM Metadata-driven list user interface component builder
CN106339381A (zh) * 2015-07-07 2017-01-18 腾讯科技(深圳)有限公司 一种信息处理方法及装置
CN106843904A (zh) * 2017-02-20 2017-06-13 深圳市医诺智能科技发展有限公司 界面动态布局方法及其系统
CN107153528A (zh) * 2016-03-02 2017-09-12 阿里巴巴集团控股有限公司 混合模型列表项重用的方法及设备
CN107562455A (zh) * 2017-08-15 2018-01-09 武汉斗鱼网络科技有限公司 一种html中列表自适应布局方法及装置
US20180052815A1 (en) * 2016-08-19 2018-02-22 Cognex Corporation Apparatuses, systems, and methods for providing a visual program for machine vision systems
CN108469953A (zh) * 2018-03-13 2018-08-31 深圳市易聆科信息技术股份有限公司 一种页面表单的生成方法、服务器及存储介质
CN109582311A (zh) * 2018-11-30 2019-04-05 网易(杭州)网络有限公司 一种游戏中ui编辑的方法及装置、电子设备、存储介质
CN110109670A (zh) * 2019-05-16 2019-08-09 北京字节跳动网络技术有限公司 视图列表数据的处理方法、装置、电子设备及存储介质
CN110442330A (zh) * 2019-07-05 2019-11-12 五八有限公司 列表组件转换方法、装置、电子设备及存储介质
CN111126027A (zh) * 2019-12-25 2020-05-08 北京锐安科技有限公司 一种列表生成方法、装置、设备及介质
CN111273907A (zh) * 2020-02-12 2020-06-12 中国平安人寿保险股份有限公司 一种页面处理方法及相关设备
WO2020118485A1 (en) * 2018-12-10 2020-06-18 Citrix Systems, Inc. Method of Detecting User Interface Layout Issues for Web Applications

Patent Citations (18)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP0587394A1 (en) * 1992-09-08 1994-03-16 International Business Machines Corporation Graphical resource editor
US5848263A (en) * 1995-08-09 1998-12-08 Yamaha Corporation File conversion method and apparatus for LSI design data
US20050193361A1 (en) * 2004-02-27 2005-09-01 Vitanov Kamen B. System and method for presentation of wireless application data using repetitive UI layouts
US20090064039A1 (en) * 2007-09-04 2009-03-05 Apple Inc. List item layouts system and method
CN102193795A (zh) * 2010-03-12 2011-09-21 国际商业机器公司 布局变换装置、布局变换程序以及布局变换方法
US20150089404A1 (en) * 2013-09-20 2015-03-26 Chee Hong LIM Metadata-driven list user interface component builder
CN106339381A (zh) * 2015-07-07 2017-01-18 腾讯科技(深圳)有限公司 一种信息处理方法及装置
CN107153528A (zh) * 2016-03-02 2017-09-12 阿里巴巴集团控股有限公司 混合模型列表项重用的方法及设备
US20180052815A1 (en) * 2016-08-19 2018-02-22 Cognex Corporation Apparatuses, systems, and methods for providing a visual program for machine vision systems
CN106843904A (zh) * 2017-02-20 2017-06-13 深圳市医诺智能科技发展有限公司 界面动态布局方法及其系统
CN107562455A (zh) * 2017-08-15 2018-01-09 武汉斗鱼网络科技有限公司 一种html中列表自适应布局方法及装置
CN108469953A (zh) * 2018-03-13 2018-08-31 深圳市易聆科信息技术股份有限公司 一种页面表单的生成方法、服务器及存储介质
CN109582311A (zh) * 2018-11-30 2019-04-05 网易(杭州)网络有限公司 一种游戏中ui编辑的方法及装置、电子设备、存储介质
WO2020118485A1 (en) * 2018-12-10 2020-06-18 Citrix Systems, Inc. Method of Detecting User Interface Layout Issues for Web Applications
CN110109670A (zh) * 2019-05-16 2019-08-09 北京字节跳动网络技术有限公司 视图列表数据的处理方法、装置、电子设备及存储介质
CN110442330A (zh) * 2019-07-05 2019-11-12 五八有限公司 列表组件转换方法、装置、电子设备及存储介质
CN111126027A (zh) * 2019-12-25 2020-05-08 北京锐安科技有限公司 一种列表生成方法、装置、设备及介质
CN111273907A (zh) * 2020-02-12 2020-06-12 中国平安人寿保险股份有限公司 一种页面处理方法及相关设备

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
刘娅;: "在VC++6.0下构建可直接编辑的列表控件类", 电脑编程技巧与维护, no. 11 *
陈琼;梁忠;: "可视化智能XML编辑器的设计与实现", 福建电脑, no. 01 *

Cited By (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112668194A (zh) * 2020-12-31 2021-04-16 禾多科技(北京)有限公司 基于页面的自动驾驶场景库信息展示方法、装置和设备
CN112668194B (zh) * 2020-12-31 2021-10-22 禾多科技(北京)有限公司 基于页面的自动驾驶场景库信息展示方法、装置和设备
CN112817585A (zh) * 2021-02-26 2021-05-18 厦门极致互动网络技术股份有限公司 一种基于Unity编辑器的Cocos2dx UI界面搭建方法
CN112817585B (zh) * 2021-02-26 2022-09-09 厦门极致互动网络技术股份有限公司 一种基于Unity编辑器的Cocos2dx UI界面搭建方法
CN113750519A (zh) * 2021-09-09 2021-12-07 网易(杭州)网络有限公司 场景地形编辑方法、装置、电子终端和机器可读存储介质
WO2023232051A1 (zh) * 2022-06-01 2023-12-07 阿里巴巴(中国)有限公司 页面信息和广告图片展示方法、装置、设备及存储介质
CN115619905A (zh) * 2022-10-24 2023-01-17 北京力控元通科技有限公司 一种图元编辑方法、装置、电子设备及存储介质

Also Published As

Publication number Publication date
CN111857718B (zh) 2024-04-09

Similar Documents

Publication Publication Date Title
CN111857718A (zh) 列表的编辑方法、装置、设备及存储介质
TWI808393B (zh) 頁面處理方法、裝置、設備及儲存媒體
CN107908399B (zh) 一种页面开发方法及装置
US7661071B2 (en) Creation of three-dimensional user interface
CN109614424B (zh) 页面布局生成方法、装置、计算设备和介质
US8875032B2 (en) System and method for dynamic configuration of components of web interfaces
CN109408764B (zh) 页面区域划分方法、装置、计算设备和介质
CN111857717B (zh) Ui编辑方法、装置、设备及计算机可读存储介质
CN109614601A (zh) 基于web的表格处理方法、装置、设备及可读介质
CN115712413B (zh) 低代码开发方法、装置、设备及存储介质
CN113268226A (zh) 页面数据生成方法、装置、存储介质及设备
CN113032708A (zh) 一种无代码Web开发系统
CN113535165A (zh) 界面生成方法、装置、电子设备及计算机可读存储介质
US11430163B2 (en) Displaying a chart without rendering entirely obscured markers
CN113407284A (zh) 导航界面的生成方法、装置、存储介质及电子设备
CN110221832B (zh) 一种恢复系统用户界面呈现控制方法、系统及存储介质
CN115080016A (zh) 基于ue编辑器的扩展功能实现方法、装置、设备及介质
CN113656723A (zh) 网页视图的展示方法、装置
CN117707530A (zh) 应用程序页面的生成方法、装置、存储介质及电子设备
CN109783596B (zh) 一种基于Angular组件的ArcGIS地图配置预览方法
US10635458B2 (en) Systems and methods for generating a self-updating maintenance page
CN116400914A (zh) 一种基于数据模型快速构建web应用的方法
CN115827809A (zh) 一种地理信息系统gis应用的生成方法及装置
CN114419194A (zh) 生成搭配图像的方法及电子设备
CN113254455A (zh) 数据库的动态配置方法、装置、计算机设备及存储介质

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