CN113791772B - 一种可视化编辑器及使用方法 - Google Patents

一种可视化编辑器及使用方法 Download PDF

Info

Publication number
CN113791772B
CN113791772B CN202110994978.4A CN202110994978A CN113791772B CN 113791772 B CN113791772 B CN 113791772B CN 202110994978 A CN202110994978 A CN 202110994978A CN 113791772 B CN113791772 B CN 113791772B
Authority
CN
China
Prior art keywords
item
items
button
module
interaction
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
Application number
CN202110994978.4A
Other languages
English (en)
Other versions
CN113791772A (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.)
Chengdu Mockplus Technology Co ltd
Original Assignee
Chengdu Mockplus 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 Chengdu Mockplus Technology Co ltd filed Critical Chengdu Mockplus Technology Co ltd
Priority to CN202110994978.4A priority Critical patent/CN113791772B/zh
Publication of CN113791772A publication Critical patent/CN113791772A/zh
Application granted granted Critical
Publication of CN113791772B publication Critical patent/CN113791772B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & 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

一种可视化编辑器及使用方法
技术领域
本发明涉及编辑器领域，具体涉及一种可视化编辑器及使用方法。
背景技术
在原型设计中，多项目复合组件是拥有多个文本条目的组件，如选项卡、树、分段控件等，对于多项类型复合组件来说，要使多项目复合组件具有可扩展性，则需要对其各个组成元素进行封装，其结果是复杂的，如果按常规的一步一步进入内部，找到需要更改内容的组件，然后再通过常规的方式进行内容的修改，虽然能达到目的，但操作不方便，操作时间过长。而复杂的封装具有以下几大问题：操作复杂，需要花费很多时间才能编辑内容或调整样式；无法做到调整条目顺序、设置默认选项等操作。
发明内容
本发明所要解决的技术问题是针对现有技术的不足，提供一种可视化编辑器及使用方法。操作简单，可方便地对复合组件进行工整地展示，只需简单操作即可进行编辑、增加和删除操作，并可以调整条目的顺序，增加交互，丰富编辑器的内容，使编辑器更具有可塑造性。
本发明解决上述技术问题的技术方案如下：
一种可视化编辑器，包括展示模块、调整模块、编辑模块和交互模块；
所述展示模块，用于通过筛选方式对复合组件进行查找，得到所述复合组件的条目，对所述条目进行展示；
所述调整模块，用于对所述条目的排序进行调整；
所述编辑模块，用于对所述条目进行添加、修改和删除操作；
所述交互模块，用于对所述条目关联交互事件。
本发明的有益效果是：操作简单，可方便地对复合组件进行工整地展示，只需简单操作即可进行编辑、增加和删除操作，并可以调整条目的顺序，增加交互，丰富编辑器的内容，使编辑器更具有可塑造性。
进一步，所述条目包括文本、图标和图像；
所述展示模块，具体用于根据预设优先级对所述文本、所述图标和所述图像按照树型结构进行展示；通过接收外部设备的展开信号对所述条目进行展开，得到多个子条目，再次通过接收外部设备的折叠信号对所述子条目进行折叠。
采用上述进一步方案的有益效果是：采用树型结构展开可方便地对复合组件进行工整地展示，折叠与展开的展示方式更利于查看多条目内容。
进一步，所述调整模块包括上移按钮和下移按钮；所述调整模块具体用于：通过拖曳方式调整所述条目的顺序；或通过所述上移按钮对所述条目进行上移操作，通过所述下移按钮对所述条目进行下移操作。
采用上述进一步方案的有益效果是：简单操作即可调整条目的顺序。
进一步，所述编辑模块包括新增按钮和删除按钮；
所述编辑模块具体用于：通过所述新增按钮在所述条目的最后一项生成输入框添加新条目；
根据所述条目的类型，通过接收外部设备的修改信号对文本进行修改，或通过图标和图像替换的方式修改所述条目；
通过所述删除按钮或键盘Delete键对所述条目进行删除。
采用上述进一步方案的有益效果是：简单操作即可进行编辑、增加和删除操作。
进一步，所述对所述条目关联交互事件具体包括：根据所述条目的索引关联交互事件；所述交互事件包括属性变更和页面跳转。
采用上述进一步方案的有益效果是：增加交互，丰富编辑器的内容，使编辑器更具有可塑造性。
本发明还提供一种可视化编辑器的使用方法，包括以下步骤：
通过筛选方式对复合组件进行查找，得到所述复合组件的条目；并对所述条目进行展示；
对所述条目的排序进行调整；
对所述条目进行添加、修改和删除操作；
对所述条目关联交互事件。
进一步，所述条目包括文本、图标和图像；
所述对对所述条目进行展示，具体包括：
根据预设优先级对所述文本、所述图标和所述图像按照树型结构进行展示；通过接收外部设备的展开信号对所述条目进行展开，得到多个子条目，再次通过接收外部设备的折叠信号对所述子条目进行折叠。
进一步，所述对所述条目的排序进行调整具体包括：
通过拖曳方式调整所述条目的顺序；或通过所述上移按钮对所述条目进行上移操作，通过所述下移按钮对所述条目进行下移操作。
进一步，所述对所述条目进行添加、修改和删除操作，具体包括：
通过所述新增按钮在所述条目的最后一项生成输入框添加新条目；
根据所述条目的类型，选择通过接收外部设备的修改信号对文本进行修改，或者直接通过图标和图像替换的方式修改所述条目；
通过所述删除按钮或键盘Delete键对所述条目进行删除。
进一步，所述对所述条目关联交互事件，具体包括：
根据所述条目的索引关联交互事件；
所述交互事件包括属性变更和页面跳转。
附图说明
图1为本发明一实施例提供的一种可视化编辑器的功能模块示意图；
图2为本发明一实施例提供的一种可视化编辑器的界面示意图；
图3为本发明一实施例提供的一种可视化编辑器使用方法的流程示意图。
具体实施方式
以下结合附图对本发明的原理和特征进行描述，所举实例只用于解释本发明，并非用于限定本发明的范围。
实施例一
如图1所示，一种可视化编辑器，包括展示模块、调整模块、编辑模块和交互模块；
所述展示模块，用于通过筛选方式对复合组件进行查找，得到所述复合组件的条目，对所述条目进行展示；
所述调整模块，用于对所述条目的排序进行调整；
所述编辑模块，用于对所述条目进行添加、修改和删除操作；
所述交互模块，用于对所述条目关联交互事件。
其中，复合组件按复合组件的内容结构来分析，可以分为文本、图标和图像三种类型。
本实施例中，操作简单，可方便地对复合组件进行工整地展示，只需简单操作即可进行编辑、增加和删除操作，并可以调整条目的顺序，增加交互，丰富编辑器的内容，使编辑器更具有可塑造性。
优选的，作为本发明的一个实施例，所述条目包括文本、图标和图像；
所述展示模块，具体用于根据预设优先级对所述文本、所述图标和所述图像按照树型结构进行展示；通过接收外部设备的展开信号对所述条目进行展开，得到多个子条目，再次通过接收外部设备的折叠信号对所述子条目进行折叠。
其中，按照从文本、图标到图像的优先级对条目内容进行展示，找到的第一个确定当前值编辑器内容的类型为文本、图标、图像中的一种，并把对应内容显示到可视化编辑器上。对于树型结构的复合组件，按层级结构显示为树型结构，并提供将复合组件以树型结构按分支关系在值编辑面板展示，展开的子条目的详细内容显示在可视化编辑器的右侧面板上。
上述实施例中，采用树型结构展开可方便地对复合组件进行工整地展示，折叠与展开的展示方式更利于查看多条目内容。
优选的，作为本发明的一个实施例，所述调整模块包括上移按钮和下移按钮；所述调整模块具体用于：通过拖曳方式调整所述条目的顺序；或通过所述上移按钮对所述条目进行上移操作，通过所述下移按钮对所述条目进行下移操作。
其中，通过可视化编辑器顶部的上移和下移按钮，或直接拖拽条目到对应的顺序位置，根据目标条目的索引，计算条目在所属列表类复合组件中新的索引位置，调整所选条目在同级列表中的位置。
上述实施例中，简单操作即可调整条目的顺序。
优选的，作为本发明的一个实施例，所述编辑模块包括新增按钮和删除按钮；
所述编辑模块具体用于：通过所述新增按钮在所述条目的最后一项生成输入框添加新条目；
根据所述条目的类型，通过接收外部设备的修改信号对文本进行修改，或通过图标和图像替换的方式修改所述条目；
通过所述删除按钮或键盘Delete键对所述条目进行删除。
其中，可通过可视化编辑器的顶部的新增按钮，或在最后一项编辑新增条目，以条目的最后一项数据为模板，对当前的列表增加一个新条目，并启用新条目的编辑状态以供输入文本内容，并编辑替换其图标与图像。
其中，对于编辑条目，如果是文本，则直接在值编辑界面上可双击或回车显示输入框，并直接定位焦点到输入框中，输入内容回车后即可实时更新对应条目中的文本内容；如果是图标，直接启用图标库面板，当在图标库面板上选择图标后，立即应用图标到编辑器上所选条目对应的复合组件和子组件上；如果是图像，则操作同图标一致。
上述实施例中，简单操作即可进行编辑、增加和删除操作。
优选的，作为本发明的一个实施例，所述对所述条目关联交互事件具体包括：根据所述条目的索引关联交互事件；所述交互事件包括属性变更和页面跳转。
上述实施例中，增加交互，丰富编辑器的内容，使编辑器更具有可塑造性。
实施例二
为了便于理解，本实施例以一个较为具体的例子对一种可视化编辑器进行说明。如图2所示，一种可视化编辑器，向上箭头表示上移按钮，向下箭头表示下移按钮，用于调整条目顺序；加号表示添加按钮，垃圾框图标表示删除按钮，双击条目文字可形成输入框，对条目进行修改。选择条目后可对条目进行展开和折叠。在条目后可通过拖曳方式添加索引关联交互事件。
实施例三
本实施例提供一种可视化编辑器的使用方法，如图3所示，包括以下步骤：
通过筛选方式对复合组件进行查找，得到所述复合组件的条目；并对所述条目进行展示；
对所述条目的排序进行调整；
对所述条目进行添加、修改和删除操作；
对所述条目关联交互事件。
优选的，作为本发明的一个实施例，所述条目包括文本、图标和图像；
所述对对所述条目进行展示，具体包括：
根据预设优先级对所述文本、所述图标和所述图像按照树型结构进行展示；通过接收外部设备的展开信号对所述条目进行展开，得到多个子条目，再次通过接收外部设备的折叠信号对所述子条目进行折叠。
优选的，作为本发明的一个实施例，所述对所述条目的排序进行调整具体包括：
通过拖曳方式调整所述条目的顺序；或通过所述上移按钮对所述条目进行上移操作，通过所述下移按钮对所述条目进行下移操作。
优选的，作为本发明的一个实施例，所述对所述条目进行添加、修改和删除操作，具体包括：
通过所述新增按钮在所述条目的最后一项生成输入框添加新条目；
根据所述条目的类型，选择通过接收外部设备的修改信号对文本进行修改，或者直接通过图标和图像替换的方式修改所述条目；
通过所述删除按钮或键盘Delete键对所述条目进行删除。
优选的，作为本发明的一个实施例，所述对所述条目关联交互事件，具体包括：
根据所述条目的索引关联交互事件；
所述交互事件包括属性变更和页面跳转。
以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。
作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本发明实施例方案的目的。
另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以是两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

Claims (2)

1.一种可视化编辑器，其特征在于，包括展示模块、调整模块、编辑模块和交互模块；
所述展示模块，用于通过筛选方式对复合组件进行查找，得到所述复合组件的条目，对所述条目进行展示；所述条目包括文本、图标和图像；
所述调整模块，用于对所述条目的排序进行调整；
所述编辑模块，用于对所述条目进行添加、修改和删除操作；
所述交互模块，用于对所述条目关联交互事件；
所述展示模块，具体用于根据预设优先级对所述文本、所述图标和所述图像按照树型结构进行展示；通过接收外部设备的展开信号对所述条目进行展开，得到多个子条目，再次通过接收外部设备的折叠信号对所述子条目进行折叠；
所述调整模块包括上移按钮和下移按钮；所述调整模块具体用于：通过拖曳方式调整所述条目的顺序；或通过所述上移按钮对所述条目进行上移操作，通过所述下移按钮对所述条目进行下移操作；
所述编辑模块包括新增按钮和删除按钮；
所述编辑模块具体用于：通过所述新增按钮在所述条目的最后一项生成输入框添加新条目；
根据所述条目的类型，通过接收外部设备的修改信号对文本进行修改，或通过图标和图像替换的方式修改所述条目；
通过所述删除按钮或键盘Delete键对所述条目进行删除；
所述对所述条目关联交互事件具体包括：根据所述条目的索引关联交互事件；所述交互事件包括属性变更和页面跳转。
2.一种可视化编辑器的使用方法，其特征在于，包括以下步骤：
通过筛选方式对复合组件进行查找，得到所述复合组件的条目；并对所述条目进行展示；所述条目包括文本、图标和图像；
对所述条目的排序进行调整；
对所述条目进行添加、修改和删除操作；
对所述条目关联交互事件；
所述对所述条目进行展示，具体包括：
根据预设优先级对所述文本、所述图标和所述图像按照树型结构进行展示；通过接收外部设备的展开信号对所述条目进行展开，得到多个子条目，再次通过接收外部设备的折叠信号对所述子条目进行折叠；
所述对所述条目的排序进行调整具体包括：
通过拖曳方式调整所述条目的顺序；或通过上移按钮对所述条目进行上移操作，通过下移按钮对所述条目进行下移操作；
所述对所述条目进行添加、修改和删除操作，具体包括：
通过新增按钮在所述条目的最后一项生成输入框添加新条目；
根据所述条目的类型，选择通过接收外部设备的修改信号对文本进行修改，或者直接通过图标和图像替换的方式修改所述条目；
通过删除按钮或键盘Delete键对所述条目进行删除；
所述对所述条目关联交互事件，具体包括：
根据所述条目的索引关联交互事件；
所述交互事件包括属性变更和页面跳转。
CN202110994978.4A 2021-08-27 2021-08-27 一种可视化编辑器及使用方法 Active CN113791772B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110994978.4A CN113791772B (zh) 2021-08-27 2021-08-27 一种可视化编辑器及使用方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110994978.4A CN113791772B (zh) 2021-08-27 2021-08-27 一种可视化编辑器及使用方法

Publications (2)

Publication Number Publication Date
CN113791772A CN113791772A (zh) 2021-12-14
CN113791772B true CN113791772B (zh) 2024-04-30

Family

ID=79182213

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110994978.4A Active CN113791772B (zh) 2021-08-27 2021-08-27 一种可视化编辑器及使用方法

Country Status (1)

Country Link
CN (1) CN113791772B (zh)

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1755721A (zh) * 2004-10-01 2006-04-05 微软公司 组件化和可扩展的工作流模型
CN109375977A (zh) * 2018-10-15 2019-02-22 郑州云海信息技术有限公司 一种实现页面表格编辑的方法及装置
CN109522390A (zh) * 2018-11-14 2019-03-26 山东大学 一种搜索结果展示方法和装置
CN110597506A (zh) * 2019-11-14 2019-12-20 南京百敖软件有限公司 一种前端应用可视化开发工具和使用方法
CN111324800A (zh) * 2020-02-12 2020-06-23 腾讯科技（深圳）有限公司 业务事项展示方法、装置和计算机可读存储介质
CN112817876A (zh) * 2021-04-19 2021-05-18 阿里云计算有限公司 一种代码诊断方法、装置、服务端、用户设备及存储介质

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7020618B1 (en) * 1999-10-25 2006-03-28 Ward Richard E Method and system for customer service process management

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1755721A (zh) * 2004-10-01 2006-04-05 微软公司 组件化和可扩展的工作流模型
CN109375977A (zh) * 2018-10-15 2019-02-22 郑州云海信息技术有限公司 一种实现页面表格编辑的方法及装置
CN109522390A (zh) * 2018-11-14 2019-03-26 山东大学 一种搜索结果展示方法和装置
CN110597506A (zh) * 2019-11-14 2019-12-20 南京百敖软件有限公司 一种前端应用可视化开发工具和使用方法
CN111324800A (zh) * 2020-02-12 2020-06-23 腾讯科技（深圳）有限公司 业务事项展示方法、装置和计算机可读存储介质
CN112817876A (zh) * 2021-04-19 2021-05-18 阿里云计算有限公司 一种代码诊断方法、装置、服务端、用户设备及存储介质

Also Published As

Publication number Publication date
CN113791772A (zh) 2021-12-14

Similar Documents

Publication Publication Date Title
CN102289342B (zh) 用于对象管理的用户接口和方法
KR101320919B1 (ko) 분할 화면을 통한 ｇｕｉ 제공방법 및 이를 적용한멀티미디어 기기
US6025844A (en) Method and system for creating dynamic link views
US6104401A (en) Link filters
US8868524B2 (en) Floating merge selection viewer
US8386919B2 (en) System for displaying an annotated programming file
US20040056903A1 (en) Directory management program, object display program, directory management method, and directory management apparatus
WO2016199018A1 (en) System and method for the generation of an adaptive user interface in a website building system
US11385772B2 (en) Attribute-based rules for displaying additional information
CN113900636A (zh) 一种自助化渠道业务流程开发系统及其开发方法
JP3448874B2 (ja) 文書処理装置および文書処理方法
CN113791772B (zh) 一种可视化编辑器及使用方法
JPH10214171A (ja) 情報処理装置
EP0415796A2 (en) Graphics user interface
JPH0991299A (ja) 階層的に関連した情報の生成方法及びコンピュータ制御ディスプレイシステム
CN115544405A (zh) 一种页面渲染方法、装置、电子设备及存储介质
Cisco Objective View Editor
Cisco Objective View Editor
JP3498733B2 (ja) 木構造表示編集装置
Cisco Objective View Editor
Cisco Objective View Editor
KR102507487B1 (ko) 문서를 구성하는 페이지들을 빠르게 편집할 수 있도록 지원하기 위한 전용 문서 파일을 생성하는 전자 장치 및 그 동작 방법
JP4127318B2 (ja) プログラム生成方法および装置
JPH0830426A (ja) データ処理装置
US7293252B2 (en) Case modelling

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