CN110286896A - 可视化编辑方法、装置、设备及存储介质 - Google Patents

可视化编辑方法、装置、设备及存储介质 Download PDF

Info

Publication number
CN110286896A
CN110286896A CN201910584261.5A CN201910584261A CN110286896A CN 110286896 A CN110286896 A CN 110286896A CN 201910584261 A CN201910584261 A CN 201910584261A CN 110286896 A CN110286896 A CN 110286896A
Authority
CN
China
Prior art keywords
editing
code
interface
area
component
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
CN201910584261.5A
Other languages
English (en)
Other versions
CN110286896B (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.)
Baidu Online Network Technology Beijing Co Ltd
Shanghai Xiaodu Technology Co Ltd
Original Assignee
Beijing Baidu Netcom Science and 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 Baidu Netcom Science and Technology Co Ltd filed Critical Beijing Baidu Netcom Science and Technology Co Ltd
Priority to CN201910584261.5A priority Critical patent/CN110286896B/zh
Publication of CN110286896A publication Critical patent/CN110286896A/zh
Priority to JP2019203681A priority patent/JP6986186B2/ja
Priority to US16/691,216 priority patent/US11392752B2/en
Application granted granted Critical
Publication of CN110286896B publication Critical patent/CN110286896B/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
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/106—Display of layout of documents; Previewing
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/137—Hierarchical processing, e.g. outlines
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G06F40/146—Coding or compression of tree-structured data
    • 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/33—Intelligent editors
    • 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

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Health & Medical Sciences (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Artificial Intelligence (AREA)
  • User Interface Of Digital Computer (AREA)
  • Stored Programmes (AREA)

Abstract

本发明实施例提出一种可视化编辑方法、装置、设备及存储介质，其中方法包括：显示编辑界面；在所述编辑界面处于页面展现状态下，所述编辑界面显示结构展现区和编辑区，所述结构展现区包括采用界面展现语言描述的各组件的框架结构和层级关系，所述编辑区包括所述组件的可编辑属性；响应于组件选择操作，在所述结构展现区所显示的框架结构和层级关系中选择目标组件；响应于对所述目标组件的编辑操作，在所述编辑区编辑所述目标组件的属性的逻辑描述代码。本发明实施例能够提高代码编辑效率。

Description

可视化编辑方法、装置、设备及存储介质
技术领域
本发明涉及计算机技术领域，尤其涉及一种可视化编辑方法、装置、设备及存储介质。
背景技术
现有的代码编辑方法一般采用顺序编辑的方式进行编辑，没有提供根据框架和层级关系进行编辑的方法，导致代码编辑过程不方便、编辑及修改的效率低下。
发明内容
本发明实施例提供一种可视化编辑方法、装置、设备及存储介质，以至少解决现有技术中的以上技术问题。
第一方面，本发明实施例提供了一种可视化编辑方法，包括：
显示编辑界面；
在所述编辑界面处于页面展现状态下，所述编辑界面显示结构展现区和编辑区，所述结构展现区包括采用界面展现语言描述的各组件的框架结构和层级关系，所述编辑区包括所述组件的可编辑属性；
响应于组件选择操作，在所述结构展现区所显示的框架结构和层级关系中选择目标组件；
响应于对所述目标组件的编辑操作，在所述编辑区编辑所述目标组件的属性的逻辑描述代码。
在一种实施方式中，还包括：
在所述编辑界面处于页面展现状态下，所述编辑界面还显示全局控件管理区，所述全局控件管理区用于进行代码管理、资源管理和风格管理的至少一种。
在一种实施方式中，还包括：
在所述编辑界面处于代码编辑状态下，所述编辑界面显示当前编辑的组件的逻辑描述代码。
在一种实施方式中，还包括：
在所述编辑界面显示设备选择控件和模拟画面展现区域；
响应于对所述设备选择控件的操作，确定所选择的设备信息；
在所述模拟画面展现区域，展现当前编辑的逻辑描述代码与所述设备信息适配的模拟呈现效果。
在一种实施方式中，还包括：
在所述编辑界面显示代码导出控件；
响应于对所述代码导出控件的操作，将当前编辑的逻辑描述代码导出为所述界面展现语言所定义格式的代码，并将所述代码保存到指定存储位置。
在一种实施方式中，还包括：
显示模板选择界面，所述模板选择界面包括可选择的布局模板、新创建控件及上传代码选项。
第二方面，本发明实施例还提出一种可视化编辑装置，包括：
显示模块，用于显示编辑界面；在所述编辑界面处于页面展现状态下，所述编辑界面显示结构展现区和编辑区，所述结构展现区包括采用界面展现语言描述的各组件的框架结构和层级关系，所述编辑区包括所述组件的可编辑属性；
目标组件选择模块，用于响应于组件选择操作，在所述结构展现区所显示的框架结构和层级关系中选择目标组件；
编辑模块，用于响应于对所述目标组件的编辑操作，在所述编辑区编辑所述目标组件的属性的代码。
在一种实施方式中，在所述编辑界面处于页面展现状态下，所述编辑界面还显示全局控件管理区，所述全局控件管理区用于进行代码管理、资源管理和风格管理的至少一种。
在一种实施方式中，在所述编辑界面处于代码编辑状态下，所述编辑界面显示当前编辑的组件的逻辑描述代码。
在一种实施方式中，所述显示模块还用于，在所述编辑界面显示设备选择控件和模拟画面展现区域；
所述装置还包括：模拟呈现模块，用于响应于对所述设备选择控件的操作，确定所选择的设备信息；在所述模拟画面展现区域，展现当前编辑的逻辑描述代码与所述设备信息适配的模拟呈现效果。
在一种实施方式中，所述显示模块还用于，在所述编辑界面显示代码导出控件；
所述装置还包括：
导出模块，用于响应于对所述代码导出控件的操作，将当前编辑的逻辑描述代码导出为所述界面展现语言所定义格式的代码，并将所述代码保存到指定存储位置。
在一种实施方式中，所述显示模块还用于，显示模板选择界面，所述模板选择界面包括可选择的布局模板、新创建控件及上传代码选项。
第三方面，本发明实施例提供了一种可视化编辑设备，所述设备的功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。所述硬件或软件包括一个或多个与上述功能相对应的模块。
在一个可能的设计中，所述设备的结构中包括处理器和存储器，所述存储器用于存储支持所述设备执行可视化编辑方法的程序，所述处理器被配置为用于执行所述存储器中存储的程序。所述设备还可以包括通信接口，用于与其他设备或通信网络通信。
第四方面，本发明实施例提供了一种计算机可读存储介质，用于存储可视化编辑设备所用的计算机软件指令，其包括用于执行上述可视化编辑方法所涉及的程序。
上述技术方案中的一个技术方案具有如下优点或有益效果：
本发明实施例为代码编辑提供可视化编辑界面，显示采用界面展现语言描述的各组件的框架结构和层级关系；当接收组件选择操作时，从该框架结构和层级关系中选择目标组件，并根据对该目标组件的编辑操作编辑对应的逻辑描述代码。通过这种方式，提高了代码编辑效率。
上述概述仅仅是为了说明书的目的，并不意图以任何方式进行限制。除上述描述的示意性的方面、实施方式和特征之外，通过参考附图和以下的详细描述，本发明进一步的方面、实施方式和特征将会是容易明白的。
附图说明
在附图中，除非另外规定，否则贯穿多个附图相同的附图标记表示相同或相似的部件或元素。这些附图不一定是按照比例绘制的。应该理解，这些附图仅描绘了根据本发明公开的一些实施方式，而不应将其视为是对本发明范围的限制。
图1为本发明实施例的一种可视化编辑方法实现流程图；
图2为本发明实施例的一种可视化编辑方法中，展现模拟呈现效果的实现流程图；
图3为本发明实施例的一种可视化编辑方法中，逻辑描述代码导出的实现流程图；
图4A为本发明实施例的一种可视化编辑方法中，编辑界面处于页面展现状态的示意图；
图4B为本发明实施例的一种可视化编辑方法中，编辑界面处于代码编辑状态的示意图；
图4C为本发明实施例的一种可视化编辑方法中，模板选择界面的示意图；
图5为本发明实施例的一种可视化编辑装置结构示意图一；
图6为本发明实施例的一种可视化编辑装置结构示意图二；
图7为本发明实施例的一种可视化编辑设备结构示意图。
具体实施方式
在下文中，仅简单地描述了某些示例性实施例。正如本领域技术人员可认识到的那样，在不脱离本发明的精神或范围的情况下，可通过各种不同方式修改所描述的实施例。因此，附图和描述被认为本质上是示例性的而非限制性的。
本发明实施例主要提供了可视化编辑方法和装置，下面分别通过以下实施例进行技术方案的展开描述。
如图1为本发明实施例的一种可视化编辑方法实现流程图，包括：
S11：显示编辑界面；
在所述编辑界面处于页面展现状态下，所述编辑界面显示结构展现区和编辑区，所述结构展现区包括采用界面展现语言描述的各组件的框架结构和层级关系，所述编辑区包括所述组件的可编辑属性；
S12：响应于组件选择操作，在所述结构展现区所显示的框架结构和层级关系中选择目标组件；
S13：响应于对所述目标组件的编辑操作，在所述编辑区编辑所述目标组件的属性的逻辑描述代码。
上述编辑界面可以处于页面展现状态和代码编辑状态，用户可以采用点击等方式选择编辑界面处于何种状态。
在一种可能的实施方式中，在所述编辑界面处于页面展现状态下，所述编辑界面还显示全局控件管理区，所述全局控件管理区用于进行代码管理、资源管理和风格管理的至少一种。
在所述编辑界面处于代码编辑状态下，所述编辑界面显示当前编辑的组件的代码。
编辑界面处于上述两种状态时，均可以展现模拟呈现效果，并且均支持逻辑描述代码导出。
如图2为本发明实施例的一种可视化编辑方法中，展现模拟呈现效果的实现流程图，包括：
S21：在所述编辑界面显示设备选择控件和模拟画面展现区域；
S22：响应于对所述设备选择控件的操作，确定所选择的设备信息；
S23：在所述模拟画面展现区域，展现当前编辑代码与所述设备信息适配的模拟呈现效果。
如图3为本发明实施例的一种可视化编辑方法中，逻辑描述代码导出的实现流程图，包括：
S31：在所述编辑界面显示代码导出控件；
S32：响应于对所述代码导出控件的操作，将当前编辑的代码导出为所述界面展现语言所定义格式的代码，并将所述代码保存到指定存储位置。
上述界面展现语言可以为DPL(DuerOS Presentation Language，DuerOS展现语言)。上述的代码可以具体为DPL文件。利用可视化编辑器中执行该方法，可以编辑得到采用DPL描述的文件。如图4A和4B为编辑界面的两种显示示意图。在图4A中，编辑界面处于页面展现状态；在图4B中，编辑界面处于代码编辑状态。
如图4A所示，在编辑界面处于页面展现状态时，可以进行如下操作：
1)将可以展现的属性，通过页面展现框图直接呈现。
例如，图4A所示下半部分的左侧显示了清晰的框架结构和层级关系；下半部分的中间位置直接提示用户可以修改的属性，在文本框内可以进行编辑。
如图4A的框架结构和层级关系中，显示了包括页面展现框图的分支呈现。图4A显示了2个处于第一层级的容器(Container)组件，Container组件可以嵌套其他子组件。
其中，第一个Container组件嵌套图像(Image)组件、ScrollView(滑动窗口)组件、以及一个作为子组件的Container组件。该作为子组件的Container组件包括头部(Header)组件和3个文本(Text)组件。
第二个Container组件嵌套Image组件和Header组件。
图4A下半部分的的中间位置显示了一个Container组件的可修改属性，包括数据(data)属性、容器头部(firstItem)属性和容器尾部(lastItem)属性。
2)下半部分的最右侧为全局属性，选择全局属性后显示影响全局的代码框架，比如文件，风格，资源，用户的修改将会修改全局的展现状态。
3)选择不同的设备。例如，用户点击顶部的设备选择控件，下方将会展现不同的模拟呈现效果(各个设备的屏幕类型可能不同)。
4)导出代码。右上角为代码导出控件，用户可以点击该控件导出代码。
如图4B所示，在编辑界面切换为编辑界面后，底部可以全部为代码编辑的操作区间。在该操作区间内可以修改代码。
在一种可能的实施方式中，本发明实施例提出的方法还包括：
显示模板选择界面，所述模板选择界面包括可选择的布局模板、新创建控件及上传代码选项。
图4C为本发明实施例的模板选择界面示意图。用户可以在模板选择界面进行以下操作：
1)从头开始创建新的展现形式。例如，响应于对“从头开始创建”控件的选择操作，跳转到创建新展现形式的页面。
2)上传代码文件或资源文件等。例如，响应于对“上传代码(DPL导出的JSON文件)”的选择操作，跳转到上传代码文件或资源文件的页面。
3)选择系统默认的展现形式或模版。例如，响应于对某个模板的选择操作，加载所选择的模板。
在模板选择界面，用户可以选择喜欢的布局模板来创建技能，可以上传代码文件或者从头开始创建技能。布局模板包括多种，例如简单图片、长文本、短文本、图文混合。
采用可视化编辑器的优势包括：
1.将复杂的前端编辑界面通过流程化的框图展现，层级结构清晰，并且可点击直接编辑，操作方便。
2.可以选择不同的设备，从而可以模拟不同设备的展现效果，并且每次编辑可以实时展现不同设备的模拟显示效果。
3.支持展现框架图和代码选择呈现，极大提升开发效率。
4.支持代码导出，内置丰富的模板。
5.将核心逻辑部分的模块拆分，选择后直接代码编辑。
本发明实施例还提出一种可视化编辑装置。参见图5，图5为本发明实施例的一种可视化编辑装置结构示意图一，包括：
显示模块510，用于显示编辑界面；在所述编辑界面处于页面展现状态下，所述编辑界面显示结构展现区和编辑区，所述结构展现区包括采用界面展现语言描述的各组件的框架结构和层级关系，所述编辑区包括所述组件的可编辑属性；
目标组件选择模块520，用于响应于组件选择操作，在所述结构展现区所显示的框架结构和层级关系中选择目标组件；
编辑模块530，用于响应于对所述目标组件的编辑操作，在所述编辑区编辑所述目标组件的属性的代码。
在一种可能的实施方式中，在所述编辑界面处于页面展现状态下，所述编辑界面还显示全局控件管理区，所述全局控件管理区用于进行代码管理、资源管理和风格管理的至少一种。
在一种可能的实施方式中，在所述编辑界面处于代码编辑状态下，所述编辑界面显示当前编辑的组件的逻辑描述代码。
在一种可能的实施方式中，所述显示模块还用于，在所述编辑界面显示设备选择控件和模拟画面展现区域；
图6为本发明实施例的一种可视化编辑装置结构示意图二，如图6所示，上述装置还包括：
模拟呈现模块640，用于响应于对所述设备选择控件的操作，确定所选择的设备信息；在所述模拟画面展现区域，展现当前编辑的逻辑描述代码与所述设备信息适配的模拟呈现效果。
在一种可能的实施方式中，所述显示模块510还用于，在所述编辑界面显示代码导出控件；
如图6所示，在一种可能的实施方式中，所述装置还包括：
导出模块650，用于响应于对所述代码导出控件的操作，将当前编辑的逻辑描述代码导出为所述界面展现语言所定义格式的代码，并将所述代码保存到指定存储位置。
在一种可能的实施方式中，所述显示模块510还用于，显示模板选择界面，所述模板选择界面包括可选择的布局模板、新创建控件及上传代码选项。
本发明实施例各装置中的各模块的功能可以参见上述方法中的对应描述，在此不再赘述。
本发明实施例还提出一种可视化编辑设备，如图7为本发明实施例的可视化编辑设备结构示意图，包括：
存储器11和处理器12，存储器11存储有可在处理器12上运行的计算机程序。所述处理器12执行所述计算机程序时实现上述实施例中的可视化编辑方法。所述存储器11和处理器12的数量可以为一个或多个。
所述设备还可以包括：
通信接口13，用于与外界设备进行通信，进行数据交换传输。
存储器11可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatilememory)，例如至少一个磁盘存储器。
如果存储器11、处理器12和通信接口13独立实现，则存储器11、处理器12和通信接口13可以通过总线相互连接并完成相互之间的通信。所述总线可以是工业标准体系结构(ISA，Industry Standard Architecture)总线，外部设备互连(PCI，PeripheralComponent Interconnect)总线或扩展工业标准体系结构(EISA，Extended IndustryStandardArchitecture)等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图7中仅用一条粗线表示，并不表示仅有一根总线或一种类型的总线。
可选的，在具体实现上，如果存储器11、处理器12和通信接口13集成在一块芯片上，则存储器11、处理器12和通信接口13可以通过内部接口完成相互间的通信。
在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。
此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或隐含地包括至少一个该特征。在本发明的描述中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。
流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本发明的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本发明的实施例所属技术领域的技术人员所理解。
在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行系统、装置或设备(如基于计算机的系统、包括处理器的系统或其他可以从指令执行系统、装置或设备取指令并执行指令的系统)使用，或结合这些指令执行系统、装置或设备而使用。就本说明书而言，“计算机可读介质”可以是任何可以包含、存储、通信、传播或传输程序以供指令执行系统、装置或设备或结合这些指令执行系统、装置或设备而使用的装置。计算机可读介质的更具体的示例(非穷尽性列表)包括以下：具有一个或多个布线的电连接部(电子装置)，便携式计算机盘盒(磁装置)，随机存取存储器(RAM)，只读存储器(ROM)，可擦除可编辑只读存储器(EPROM或闪速存储器)，光纤装置，以及便携式只读存储器(CDROM)。另外，计算机可读介质甚至可以是可在其上打印所述程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得所述程序，然后将其存储在计算机存储器中。
应当理解，本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。
本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。
此外，在本发明各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读存储介质中。所述存储介质可以是只读存储器，磁盘或光盘等。
以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到其各种变化或替换，这些都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。

Claims (14)

1.一种可视化编辑方法，其特征在于，包括：
显示编辑界面；
在所述编辑界面处于页面展现状态下，所述编辑界面显示结构展现区和编辑区，所述结构展现区包括采用界面展现语言描述的各组件的框架结构和层级关系，所述编辑区包括所述组件的可编辑属性；
响应于组件选择操作，在所述结构展现区所显示的框架结构和层级关系中选择目标组件；
响应于对所述目标组件的编辑操作，在所述编辑区编辑所述目标组件的属性的逻辑描述代码。
2.根据权利要求1所述的方法，其特征在于，还包括：
在所述编辑界面处于页面展现状态下，所述编辑界面还显示全局控件管理区，所述全局控件管理区用于进行代码管理、资源管理和风格管理的至少一种。
3.根据权利要求1所述的方法，其特征在于，还包括：
在所述编辑界面处于代码编辑状态下，所述编辑界面显示当前编辑的组件的逻辑描述代码。
4.根据权利要求1、2或3所述的方法，其特征在于，还包括：
在所述编辑界面显示设备选择控件和模拟画面展现区域；
响应于对所述设备选择控件的操作，确定所选择的设备信息；
在所述模拟画面展现区域，展现当前编辑的逻辑描述代码与所述设备信息适配的模拟呈现效果。
5.根据权利要求1、2或3所述的方法，其特征在于，还包括：
在所述编辑界面显示代码导出控件；
响应于对所述代码导出控件的操作，将当前编辑的逻辑描述代码导出为所述界面展现语言所定义格式的代码，并将所述代码保存到指定存储位置。
6.根据权利要求1、2或3所述的方法，其特征在于，还包括：
显示模板选择界面，所述模板选择界面包括可选择的布局模板、新创建控件及上传代码选项。
7.一种可视化编辑装置，其特征在于，包括：
显示模块，用于显示编辑界面；在所述编辑界面处于页面展现状态下，所述编辑界面显示结构展现区和编辑区，所述结构展现区包括采用界面展现语言描述的各组件的框架结构和层级关系，所述编辑区包括所述组件的可编辑属性；
目标组件选择模块，用于响应于组件选择操作，在所述结构展现区所显示的框架结构和层级关系中选择目标组件；
编辑模块，用于响应于对所述目标组件的编辑操作，在所述编辑区编辑所述目标组件的属性的代码。
8.根据权利要求7所述的装置，其特征在于，
在所述编辑界面处于页面展现状态下，所述编辑界面还显示全局控件管理区，所述全局控件管理区用于进行代码管理、资源管理和风格管理的至少一种。
9.根据权利要求7所述的装置，其特征在于，
在所述编辑界面处于代码编辑状态下，所述编辑界面显示当前编辑的组件的逻辑描述代码。
10.根据权利要求7、8或9所述的装置，其特征在于，所述显示模块还用于，在所述编辑界面显示设备选择控件和模拟画面展现区域；
所述装置还包括：
模拟呈现模块，用于响应于对所述设备选择控件的操作，确定所选择的设备信息；在所述模拟画面展现区域，展现当前编辑的逻辑描述代码与所述设备信息适配的模拟呈现效果。
11.根据权利要求7、8或9所述的装置，其特征在于，所述显示模块还用于，在所述编辑界面显示代码导出控件；
所述装置还包括：
导出模块，用于响应于对所述代码导出控件的操作，将当前编辑的逻辑描述代码导出为所述界面展现语言所定义格式的代码，并将所述代码保存到指定存储位置。
12.根据权利要求7、8或9所述的装置，其特征在于，所述显示模块还用于，显示模板选择界面，所述模板选择界面包括可选择的布局模板、新创建控件及上传代码选项。
13.一种可视化编辑设备，其特征在于，所述设备包括：
一个或多个处理器；
存储装置，用于存储一个或多个程序；
当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如权利要求1-6中任一所述的方法。
14.一种计算机可读存储介质，其存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-6中任一所述的方法。
CN201910584261.5A 2019-06-28 2019-06-28 可视化编辑方法、装置、设备及存储介质 Active CN110286896B (zh)

Priority Applications (3)

Application Number Priority Date Filing Date Title
CN201910584261.5A CN110286896B (zh) 2019-06-28 2019-06-28 可视化编辑方法、装置、设备及存储介质
JP2019203681A JP6986186B2 (ja) 2019-06-28 2019-11-11 可視化編集方法、装置、デバイス及び記憶媒体
US16/691,216 US11392752B2 (en) 2019-06-28 2019-11-21 Visualized editing method, device and apparatus, and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910584261.5A CN110286896B (zh) 2019-06-28 2019-06-28 可视化编辑方法、装置、设备及存储介质

Publications (2)

Publication Number Publication Date
CN110286896A true CN110286896A (zh) 2019-09-27
CN110286896B CN110286896B (zh) 2023-03-31

Family

ID=68020344

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910584261.5A Active CN110286896B (zh) 2019-06-28 2019-06-28 可视化编辑方法、装置、设备及存储介质

Country Status (3)

Country Link
US (1) US11392752B2 (zh)
JP (1) JP6986186B2 (zh)
CN (1) CN110286896B (zh)

Cited By (19)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110826720A (zh) * 2019-11-06 2020-02-21 合肥本源量子计算科技有限责任公司 一种界面的显示方法及装置、界面的切换方法及装置
CN110955418A (zh) * 2019-12-13 2020-04-03 中国南方电网有限责任公司 代码生成方法、装置、计算机设备和存储介质
CN111026384A (zh) * 2019-12-12 2020-04-17 中启能科技有限公司 对冷站机房的暖通逻辑流程进行编辑的方法和装置
CN111191412A (zh) * 2019-12-24 2020-05-22 远光软件股份有限公司 编辑公式的方法、装置、存储介质及终端
CN111258569A (zh) * 2020-01-09 2020-06-09 卓望数码技术（深圳）有限公司 网页组件编辑方法、装置、设备和计算机可读存储介质
CN112130852A (zh) * 2020-08-12 2020-12-25 当家移动绿色互联网技术集团有限公司 在线编辑平台的运行方法、装置及电子设备
CN112286546A (zh) * 2020-09-22 2021-01-29 长沙市到家悠享网络科技有限公司 应用程序更新方法、装置、设备
CN112306480A (zh) * 2020-10-16 2021-02-02 深圳市大富网络技术有限公司 一种可视化编程控制方法、系统、装置及计算机存储介质
CN112486493A (zh) * 2020-12-21 2021-03-12 京东方科技集团股份有限公司 应用程序的管理方法和装置、电子设备和可读存储介质
CN112685040A (zh) * 2021-01-22 2021-04-20 爱驰汽车有限公司 安卓系统中界面文件的生成方法、装置、设备及存储介质
CN112860247A (zh) * 2021-02-09 2021-05-28 恒安嘉新（北京）科技股份公司 一种模型组件的自定义生成方法、装置、设备及介质
CN113361246A (zh) * 2021-06-30 2021-09-07 北京高途云集教育科技有限公司 一种讲义生产方法、装置、计算机设备及存储介质
CN113377366A (zh) * 2021-07-09 2021-09-10 北京字跳网络技术有限公司 控件编辑方法、装置、设备、可读存储介质及产品
CN113867711A (zh) * 2021-10-21 2021-12-31 北京思明启创科技有限公司 一种代码块容器、可视化编程平台及方法
CN113946332A (zh) * 2021-08-23 2022-01-18 芯华章科技股份有限公司 基于gui界面显示属性的方法及存储介质
CN114625367A (zh) * 2022-03-11 2022-06-14 北京金堤科技有限公司 一种组件嵌套方法、装置、存储介质和电子设备
WO2023284312A1 (zh) * 2021-07-15 2023-01-19 上海商汤智能科技有限公司 工作流程的构建方法及装置、设备、计算机存储介质及计算机程序产品
CN117369789A (zh) * 2023-10-13 2024-01-09 镁佳(武汉)科技有限公司 基于可视化配置工具生成代码的方法及可视化显示界面
WO2024104385A1 (zh) * 2022-11-16 2024-05-23 北京字跳网络技术有限公司 视频编辑方法、装置、设备及介质

Families Citing this family (21)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112817505A (zh) * 2021-01-25 2021-05-18 深圳邦健生物医疗设备股份有限公司 软件信息界面显示方法、装置、存储介质及设备
CN113094035B (zh) * 2021-04-07 2024-02-06 中车青岛四方车辆研究所有限公司 一种图形化编辑列车数据库的实现方法、系统及设备
CN113032083A (zh) * 2021-04-21 2021-06-25 深圳市元征科技股份有限公司 数据显示方法、装置、电子设备及介质
CN113254016A (zh) * 2021-05-21 2021-08-13 四川金熊猫新媒体有限公司 界面生成方法、界面信息处理方法、设备及存储介质
CN113282268B (zh) * 2021-06-03 2023-03-14 腾讯科技（深圳）有限公司 音效配置方法和装置、存储介质及电子设备
CN113360154B (zh) * 2021-06-17 2024-10-15 腾讯云计算（北京）有限责任公司 一种页面构建方法、装置、设备和可读介质
CN113971129A (zh) * 2021-10-26 2022-01-25 北京字节跳动网络技术有限公司 一种用例生成方法、装置、设备及存储介质
CN114238072A (zh) * 2021-11-15 2022-03-25 中国软件评测中心(工业和信息化部软件与集成电路促进中心) Hil需求设计方法、装置、计算机设备和存储介质
CN114130017A (zh) * 2021-12-08 2022-03-04 腾讯科技（深圳）有限公司 基于游戏引擎的界面部署方法、装置、设备及存储介质
CN114494120B (zh) * 2021-12-20 2024-07-09 苏州镁伽科技有限公司 用于检测设备的算法编辑方法、装置及检测设备
CN114124735B (zh) * 2022-01-29 2022-06-07 南昌国讯信息技术股份有限公司 路由设计方法及电子设备
CN114153367B (zh) * 2022-02-10 2022-06-17 中国电子信息产业集团有限公司 快速替代连接关系的交互方法、设备及可读存储介质
CN114666817B (zh) * 2022-03-02 2024-08-23 三维通信股份有限公司 基站数据的配置方法和装置、存储介质及电子装置
CN114693103A (zh) * 2022-03-24 2022-07-01 阿里云计算有限公司 设备管理模型生成与设备管理方法、设备及存储介质
CN114860125A (zh) * 2022-05-17 2022-08-05 马上消费金融股份有限公司 流程图处理方法、装置、设备及介质
CN115202541B (zh) * 2022-07-18 2024-05-10 阿里巴巴（中国）有限公司 页面生成方法、装置、设备、存储介质及程序产品
CN118363589A (zh) * 2023-01-18 2024-07-19 腾讯科技（深圳）有限公司 一种页面处理方法、装置、设备、介质及产品
CN116501202A (zh) * 2023-03-20 2023-07-28 深圳绿米联创科技有限公司 区域配置方法、装置、设备及存储介质
CN117891448B (zh) * 2023-12-25 2024-07-26 广州巨隆科技有限公司 用于构建页面的可视化组件编辑方法、系统、设备及介质
CN117768510B (zh) * 2024-01-09 2024-06-18 中科物栖(南京)科技有限公司 图形化生成广播通信机制的方法、装置、设备和存储介质
CN118227102A (zh) * 2024-03-19 2024-06-21 北京东方金信科技股份有限公司 一种逻辑组件运行控制方法、装置、设备及介质

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106445520A (zh) * 2016-09-23 2017-02-22 北京赢点科技有限公司 一种可视化专题页面制作方法及装置
CN106569800A (zh) * 2016-10-17 2017-04-19 北京小米移动软件有限公司 前端界面生成方法及装置
CN107798084A (zh) * 2017-10-17 2018-03-13 广东广业开元科技有限公司 一种web前端页面的可视化编辑生成系统及装置
CN107992304A (zh) * 2017-12-29 2018-05-04 北京远特科技股份有限公司 一种生成显示界面的方法和装置
US20190026083A1 (en) * 2017-07-24 2019-01-24 Wix.Com Ltd. Custom back-end functionality in an online website building environment
CN109669688A (zh) * 2018-09-26 2019-04-23 深圳壹账通智能科技有限公司 基于可视化的软件开发方法、装置、终端设备及存储介质
CN109725901A (zh) * 2018-05-31 2019-05-07 中国平安人寿保险股份有限公司 前端代码的开发方法、装置、设备和计算机存储介质
CN109753284A (zh) * 2019-01-28 2019-05-14 百度在线网络技术（北京）有限公司 界面创建方法、装置及存储介质

Family Cites Families (17)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JPH09237181A (ja) * 1996-02-29 1997-09-09 Toshiba Corp アプリケーション開発装置、及びアプリケーション開発方法
JPH11514769A (ja) * 1996-08-08 1999-12-14 アグラナット・システムス・インコーポレーテッド 埋め込み形ウェブサーバ
US7395505B1 (en) * 2003-03-17 2008-07-01 Tuvox, Inc. Graphical user interface for creating content for a voice-user interface
US7415672B1 (en) * 2003-03-24 2008-08-19 Microsoft Corporation System and method for designing electronic forms
US7168035B1 (en) * 2003-06-11 2007-01-23 Microsoft Corporation Building a view on markup language data through a set of components
US20050039108A1 (en) * 2003-08-15 2005-02-17 International Business Machines Corporation Fast tag entry in a multimodal markup language editor
US7849440B1 (en) * 2004-04-16 2010-12-07 The Mathworks, Inc. Real-time code preview for a model based development process
US20060026503A1 (en) * 2004-07-30 2006-02-02 Wireless Services Corporation Markup document appearance manager
JP2008203912A (ja) * 2007-02-16 2008-09-04 Hitachi Software Eng Co Ltd 画面作成装置及び方法並びにプログラム
JP2008269554A (ja) * 2007-03-29 2008-11-06 Hitachi Software Eng Co Ltd ソースコード生成装置
US7890333B2 (en) * 2007-06-20 2011-02-15 International Business Machines Corporation Using a WIKI editor to create speech-enabled applications
US10073679B2 (en) * 2014-09-26 2018-09-11 Oracle International Corporation Efficient and intuitive databinding for mobile applications
US9645910B1 (en) * 2015-03-12 2017-05-09 Amazon Technologies, Inc. Cross platform mobile HTML debugging
US10650093B2 (en) * 2016-09-15 2020-05-12 Oracle International Corporation Data structure processing for actionable notifications
US10282398B1 (en) * 2016-12-29 2019-05-07 Intuit, Inc. Editing tool for domain-specific objects with reference variables corresponding to preceding pages
US10671801B2 (en) * 2017-02-28 2020-06-02 Microsoft Technology Licensing, Llc Markup code generator
US10671357B2 (en) * 2017-06-05 2020-06-02 Apptimize Llc Preview changes to mobile applications at different display resolutions

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106445520A (zh) * 2016-09-23 2017-02-22 北京赢点科技有限公司 一种可视化专题页面制作方法及装置
CN106569800A (zh) * 2016-10-17 2017-04-19 北京小米移动软件有限公司 前端界面生成方法及装置
US20190026083A1 (en) * 2017-07-24 2019-01-24 Wix.Com Ltd. Custom back-end functionality in an online website building environment
CN107798084A (zh) * 2017-10-17 2018-03-13 广东广业开元科技有限公司 一种web前端页面的可视化编辑生成系统及装置
CN107992304A (zh) * 2017-12-29 2018-05-04 北京远特科技股份有限公司 一种生成显示界面的方法和装置
CN109725901A (zh) * 2018-05-31 2019-05-07 中国平安人寿保险股份有限公司 前端代码的开发方法、装置、设备和计算机存储介质
CN109669688A (zh) * 2018-09-26 2019-04-23 深圳壹账通智能科技有限公司 基于可视化的软件开发方法、装置、终端设备及存储介质
CN109753284A (zh) * 2019-01-28 2019-05-14 百度在线网络技术（北京）有限公司 界面创建方法、装置及存储介质

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
GENNADY GRYAZNOV等: "Development of the cross-platform mobile framework for integration with enterprise information systems", 《2012 7TH INTERNATIONAL FORUM ON STRATEGIC TECHNOLOGY (IFOST)》 *
李隆隆: "可视化页面编辑平台的设计与实现", 《CNKI优秀硕士学位论文全文库 信息科技辑》 *

Cited By (23)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110826720A (zh) * 2019-11-06 2020-02-21 合肥本源量子计算科技有限责任公司 一种界面的显示方法及装置、界面的切换方法及装置
CN111026384A (zh) * 2019-12-12 2020-04-17 中启能科技有限公司 对冷站机房的暖通逻辑流程进行编辑的方法和装置
CN110955418A (zh) * 2019-12-13 2020-04-03 中国南方电网有限责任公司 代码生成方法、装置、计算机设备和存储介质
CN111191412A (zh) * 2019-12-24 2020-05-22 远光软件股份有限公司 编辑公式的方法、装置、存储介质及终端
CN111258569A (zh) * 2020-01-09 2020-06-09 卓望数码技术（深圳）有限公司 网页组件编辑方法、装置、设备和计算机可读存储介质
CN112130852A (zh) * 2020-08-12 2020-12-25 当家移动绿色互联网技术集团有限公司 在线编辑平台的运行方法、装置及电子设备
CN112286546A (zh) * 2020-09-22 2021-01-29 长沙市到家悠享网络科技有限公司 应用程序更新方法、装置、设备
CN112306480A (zh) * 2020-10-16 2021-02-02 深圳市大富网络技术有限公司 一种可视化编程控制方法、系统、装置及计算机存储介质
CN112486493A (zh) * 2020-12-21 2021-03-12 京东方科技集团股份有限公司 应用程序的管理方法和装置、电子设备和可读存储介质
CN112685040B (zh) * 2021-01-22 2024-08-09 爱驰汽车有限公司 安卓系统中界面文件的生成方法、装置、设备及存储介质
CN112685040A (zh) * 2021-01-22 2021-04-20 爱驰汽车有限公司 安卓系统中界面文件的生成方法、装置、设备及存储介质
CN112860247A (zh) * 2021-02-09 2021-05-28 恒安嘉新（北京）科技股份公司 一种模型组件的自定义生成方法、装置、设备及介质
CN112860247B (zh) * 2021-02-09 2023-11-28 恒安嘉新（北京）科技股份公司 一种模型组件的自定义生成方法、装置、设备及介质
CN113361246A (zh) * 2021-06-30 2021-09-07 北京高途云集教育科技有限公司 一种讲义生产方法、装置、计算机设备及存储介质
CN113377366A (zh) * 2021-07-09 2021-09-10 北京字跳网络技术有限公司 控件编辑方法、装置、设备、可读存储介质及产品
CN113377366B (zh) * 2021-07-09 2024-03-12 北京字跳网络技术有限公司 控件编辑方法、装置、设备、可读存储介质及产品
WO2023284312A1 (zh) * 2021-07-15 2023-01-19 上海商汤智能科技有限公司 工作流程的构建方法及装置、设备、计算机存储介质及计算机程序产品
CN113946332A (zh) * 2021-08-23 2022-01-18 芯华章科技股份有限公司 基于gui界面显示属性的方法及存储介质
CN113867711A (zh) * 2021-10-21 2021-12-31 北京思明启创科技有限公司 一种代码块容器、可视化编程平台及方法
CN114625367A (zh) * 2022-03-11 2022-06-14 北京金堤科技有限公司 一种组件嵌套方法、装置、存储介质和电子设备
WO2024104385A1 (zh) * 2022-11-16 2024-05-23 北京字跳网络技术有限公司 视频编辑方法、装置、设备及介质
CN117369789A (zh) * 2023-10-13 2024-01-09 镁佳(武汉)科技有限公司 基于可视化配置工具生成代码的方法及可视化显示界面
CN117369789B (zh) * 2023-10-13 2024-06-11 镁佳(武汉)科技有限公司 基于可视化配置工具生成代码的方法及可视化显示设备

Also Published As

Publication number Publication date
US20200410044A1 (en) 2020-12-31
JP2021009663A (ja) 2021-01-28
US11392752B2 (en) 2022-07-19
JP6986186B2 (ja) 2021-12-22
CN110286896B (zh) 2023-03-31

Similar Documents

Publication Publication Date Title
CN110286896A (zh) 可视化编辑方法、装置、设备及存储介质
CN110347953A (zh) 页面生成方法、装置、计算机设备及存储介质
CN105389299B (zh) 一种页面生成方法及装置
KR101890831B1 (ko) 전자책 서비스 제공방법 및 그를 위한 컴퓨터 프로그램
CN106681730B (zh) 便于普通设计师创造vr内容的系统及方法
US8669998B1 (en) Selection of colors
US20120246562A1 (en) Building a customized story
CN106681698A (zh) 动态列表的生成方法及装置
CN109893852A (zh) 界面信息处理方法及装置
CN103186632A (zh) 一种运维表单定制的方法及装置
CN113010062A (zh) 生成设计方案的方法、装置及电子设备
CN107977203A (zh) 存储装置、应用程序控件以及用户界面的创建方法
CN108108194A (zh) 用户界面编辑方法以及用户界面编辑器
CN107784002A (zh) 一种网页的页面元素生成方法及装置
CN109582153A (zh) 信息输入方法及装置
CN115495069A (zh) 基于模型驱动的煤炭工业软件流程实现方法、装置及设备
CN111694563B (zh) 针对用户界面模式的可视化设计系统及其方法
US10095681B2 (en) System and user interfaces for customizing a template editor
CN116382659B (zh) 一种无代码开发平台的数据定义方法
CN113362477A (zh) 一种3d数据采集与监视控制系统及其场景编辑方法
CN117456052A (zh) 基于canvas的图形编辑方法及装置
KR102613143B1 (ko) 텍스트-비디오 생성 방법, 장치, 설비 및 매체
CN115145565A (zh) 一种基于规则引擎的数据可视化大屏布局方法与装置
CN115691772A (zh) 运营可视化系统及相应计算机设备和存储介质
CN107368306A (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
TA01 Transfer of patent application right
TA01 Transfer of patent application right

Effective date of registration: 20210521

Address after: 100085 Baidu Building, 10 Shangdi Tenth Street, Haidian District, Beijing

Applicant after: BAIDU ONLINE NETWORK TECHNOLOGY (BEIJING) Co.,Ltd.

Applicant after: Shanghai Xiaodu Technology Co.,Ltd.

Address before: 100085 Baidu Building, 10 Shangdi Tenth Street, Haidian District, Beijing

Applicant before: BAIDU ONLINE NETWORK TECHNOLOGY (BEIJING) Co.,Ltd.

GR01 Patent grant
GR01 Patent grant