CN106933563B - 一种页面流编辑器 - Google Patents
一种页面流编辑器 Download PDFInfo
- Publication number
- CN106933563B CN106933563B CN201511034330.3A CN201511034330A CN106933563B CN 106933563 B CN106933563 B CN 106933563B CN 201511034330 A CN201511034330 A CN 201511034330A CN 106933563 B CN106933563 B CN 106933563B
- Authority
- CN
- China
- Prior art keywords
- model
- page flow
- code
- editor
- module
- 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
Links
Images
Classifications
-
- 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)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
- Stored Programmes (AREA)
Abstract
一种页面流编辑器，包括：元模型获取模块，用于获取页面流编辑所需的元模型；页面流处理模块，用于在后台处理JS代码的编辑；页面流展示模块，用于提供图形化界面，展示编辑界面和图元。所述图形化界面为GEF框架与UI框架相结合的封装，将EMF模型与GEF框架相结合，使用EMF模型作为GEF编辑器中的模型层，提供基础的编辑扩展，并对展现层提供默认实现。本发明实现了图形化编程，开发便捷，逻辑处理直观、简洁、易于维护；降低了前端JS代码的开发难度，简单易于上手，即使初级前端开发工程师也能保证编写出技术难度较高的高质量代码，降低了开发成本。
Description
技术领域
本发明属于计算机软件技术领域，更具体地说，涉及一种图形化的JS代码编辑器。
背景技术
在传统ECP(Enterprise Cloud Platform，企业管理云平台)开发平台下，如远光软件的YG-ECP企业云平台，前端开发人员每开发一个新功能都需要编写大量的JS(Javascript)代码，效率无法提高，而且每个开发人员存在能力差异，导致编写出来的代码质量参差不齐，代码的复用性差。而且代码存在不直观的缺点，当发生人员调动等需要将代码转出情况时，接手人员要阅读大量程序代码，这使得程序维护复杂且代价昂贵。此外，一个优秀前端开发人员需要花费大量时间累积经验，人员培养周期长。尽管开发人员已尽量避免重复劳动，但是依然需要使用大量时间编写一些差异不大或者重复的代码，挤压了开发人员学习其他技能的学习时间。
发明内容
本发明的目的是提供一种图形化的JS代码编辑器，可以实现JS代码块内容的图形化编辑。
为了实现上述目的，本发明采取如下的技术解决方案：
一种页面流编辑器，包括：
元模型获取模块，用于获取页面流编辑所需的元模型；
页面流处理模块，用于在后台处理JS代码的编辑；
页面流展示模块，用于提供图形化界面，展示编辑界面和图元。
进一步地，所述图形化界面为GEF框架与UI框架相结合的封装，将EMF模型与GEF框架相结合，使用EMF模型作为GEF编辑器中的模型层，提供基础的编辑扩展，并对展现层提供默认实现。
进一步地，所述页面流处理模块包括：
模型解析模块，用于扫描JS代码块，获取代码块完整字符串及模型标识，并对代码块进行解析和生成模型；
模型校验模块，用于对通过模型解析模块所生成的模型进行校验；
代码生成模块，用于将通过模型解析模块所生成的模型生成代码。
进一步地，所述模型解析模块进一步包括：
扫描器，用于扫描JS代码；
模型规则解析器，用于解析模型的JS代码解析，定位模型所在的代码块；
模型解析器，用于将JS代码块解析为模型。
进一步地，所述代码解析和模型生成是通过如下步骤实现：
扫描器逐个字符扫描JS代码块，并根据解析需要获取指定位置字符；模型规则解析器根据规则判断代码块是否为开始，字符是否接受，代码块是否结束，获取代码块完整字符串及模型标识；模型解析器进行模型解析和生成。
进一步地，所述代码生成模块进一步包括，
节点访问者，用于生成节点模型的代码；
代码生成器，用于将模型生成JS代码；
进一步地，代码生成是通过如下步骤实现：
根据模型找到对应的代码生成器，根据传入的模型类型创建节点访问者；
节点访问者输出代码块的开始部分；
遍历模型的所有子节点，将子节点作为参数创建节点访问者；
节点访问者输出代码块的结束部分；
代码生成器输出代码块字符串。
进一步地，所述模型校验模块进一步包括，
模型校验器，用于对模型进行编译检查。
进一步地，所述模型校验通过如下步骤实现：
依据模型框架，根据实现页面流所对应的文件，找到对应的模型库，调用模型库绑定的模型校验器对文件进行校验；
模型校验器对模型进行校验，并在实现页面流所对应的文件上标记错误信息。
进一步地，所述页面流处理模块还包括模型转换器，用于实现文件模型与EMF模型之间的转换，将文件格式转换成编辑器可识别的对象。
进一步地，所述页面流处理模块还包括类接口描述器，用于管理某一种模型所有使用的模型解析器、代码生成器、模型转换器和模型校验器。
进一步地，所述页面流编辑器采用EMF模型框架事先定义编辑器中使用的页面流模型，采用IDE模型索引框架对页面流模型进行管理。
由以上技术方案可知，本发明实现了图形化编程，开发便捷，逻辑处理直观、简洁、易于维护，降低了开发成本；在代码编辑过程中，开发工程师可在页面流展示模块形成的图元界面上输入命令，页面流处理模块按照指定规则生成代码，统一规范了JS代码格式，保证了JS代码的质量。同时，本发明的页面流编辑器使用统一的模型框架规范了模型的结构，规范化模型管理。
附图说明
为了更清楚地说明本发明实施例，下面将对实施例或现有技术描述中所需要使用的附图做简单介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明实施例的模块框图；
图2为页面流处理模块的框图；
图3为模型解析流程图；
图4为模型赋值图元的界面示意图；
图5为服务端图元的界面示意图；
图6为生成的代码示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例，基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本实施例中，页面流编辑器采用EMF(Eclipse Modeling Framework，Eclipse模型框架)模型框架事先定义编辑器中使用的页面流模型，以规范化编辑过程中使用的模型结构；并在编辑器中采用IDE(Integrated Development Environment，集成开发环境)模型索引框架对页面流模型进行管理，以规范化模型管理，为编辑过程中模型的解析、保存、校验的统一提供基础，并且可以解耦各个实际模型之间的关系，增强模型间交互的便利性。
如图1所示，本实施例的页面流编辑器包括元模型获取模块、页面流处理模块、页面流展示模块。其中，元模型获取模块为页面流编辑提供元模型；页面流处理模块用于在后台处理JS代码的编辑，包括JS代码解析、文件模型与EMF模型间的互相转换、模型的编译检查等；页面流展示模块用于提供图形化界面，所述图形化界面为GEF(Graphical EditingFramework，图形编辑框架)框架与UI(User Interface，用户界面)框架相结合的封装，将预先定义的EMF模型与GEF框架相结合，使用EMF模型作为GEF编辑器中的模型层，提供基础的编辑扩展，并对展现层提供默认实现，包括平面布局展示、图元的悬挂、拖拽图元生成模型并展示等，即展示编辑界面和图元，使用UI框架实现界面代码的开发。
如图2所示，页面流处理模块包括模型解析模块、模型校验模块、代码生成模块、模型转换器、类接口描述器。
模型解析模块，用于扫描JS代码块，获取代码块完整字符串及模型标识，并对代码块进行解析和生成模型。所述模型解析模块进一步包括：扫描器(IScanner)，用于扫描JS代码；模型规则解析器(IEModelRuler)，用于解析模型的JS代码解析，定位模型所在的代码块；模型解析器(IEModelParser)，用于将JS代码块解析为模型。
模型校验模块，用于对将通过模型解析模块所生成的模型进行校验。所述模型校验模块进一步包括模型校验器(IEModelValidator)，用于对模型进行编译检查。
代码生成模块，用于将通过模型解析模块所生成的模型生成代码。所述代码生成模块进一步包括：节点访问者(IENodeVisitor)，用于生成节点模型的代码；代码生成器(IEModelCodeGenerator)，用于将模型生成JS代码。
模型转换器(IETranslator)，用于实现文件模型与EMF模型之间的转换，将文件格式转换成编辑器可识别的对象。其中，
页面流EMF模型转换至文件模型的步骤包括：提取编辑器中所有分支，建立分支图元与后续图元关系于顺序图；以开始图元为起点，注册所有主线图元与顺序图；遍历所有图元，针对异常图元特殊处理，更新顺序图；根据顺序图，将节点放入对应的页面流模型；模型转换器完成模型到文件的转换。
页面流文件模型转换至EMF模型的步骤包括：读取文件模型，提取异常图元子节点，注册到顺序图；提取分支图元，注册至与顺序图；构造出主线顺序图，保存异常图元；根据异常图元创建并生成且保存组合图元；根据顺序图，绘制主线图元的连线；提取分支图元信息，绘制独立的分支图元所在分支的完成图元及连线；将独立分支在主线上连线；将异常图元在主线上连线；模型转换器完成文件到模型的转换。
类接口描述器(IEDescription)，用于管理某一种模型所有使用的模型解析器、代码生成器、模型转换器和模型校验器。
本实施例的页面流编辑器可以实现JS代码的组件化与图元化，在编辑器中实现图元的悬挂、拖拽、平面布局展示，实现统一模型框架和索引框架对页面流的管理，规范模块化管理，以及实现页面流对异步控制流的支持。页面流处理模块中的各子模块可单独实现或相配合实现编辑功能，下面以一些具体使用例对本实施例页面流编辑器的功能实现进行说明。
a.模型解析功能
参照图3，当页面流处理模块在后台执行模型解析时，其通过扫描器、模型规则解析器及模型解析器三个子模块完成，该三个子模块各自完成的功能为：扫描器逐个字符扫描JS代码块，并根据解析需要获取指定位置字符；模型规则解析器确定代码块是否为开始，字符是否接受，代码块是否结束，获取代码块完整字符串及模型标识；模型解析器进行模型解析和生产。
模型解析的步骤如下：
对代码块进行逐个字符扫描；
根据规则判断当前字符是否为模型的开始，如是则将当前字符进行保存，如果否则返回前一步，继续循环扫描，直至找到模型的开始代码块；然后根据规则判断模型代码块是否结束，如果是则将代码交由模型解析器进行解析，如果否则返回前一步，继续循环扫描，直至找到模型的结束代码块；
模型解析器解析生成模型。
b.代码生成功能
当页面流处理模块在后台执行代码生成时，其通过代码生成器、节点访问者两个子模块实现，其步骤如下：
类接口描述其根据模型找到对应的代码生成器，根据传入的模型类型创建节点访问者；
节点访问者输出代码块的开始部分；
遍历模型的所有子节点，将子节点作为参数创建节点访问者；
节点访问者输出代码块的结束部分；
代码生成器输出代码块字符串。
c.模型校验功能
页面流处理模块在后台执行模型校验步骤如下：
类接口描述器依据模型框架，根据实现页面流所对应的文件，如要编辑的文件源代码等资源，找到对应的模型库，调用模型库绑定的模型校验器对文件进行校验；
模型校验器对模型进行校验，并在实现页面流所对应的文件上标记错误信息。
如图4和图5所示，为本实施例页面流编辑器模型赋值图元和客户端调用图元的界面示意图，开发人员只需在图形化界面中呈现的图元界面上填写相应内容，页面流处理模块即可在后台生产对应的代码，如图6所示。
本实施例的页面流编辑器使用统一的模型框架规范了模型的结构，使用统一的索引框架对页面流模型进行管理，规范化模型管理；在编辑过程中，开发工程师可在页面流展示模块形成的图元界面上输入命令，页面流处理模块按照指定规则生成代码，统一规范了JS代码格式，保证了JS代码的质量。本发明实现了图形化编程，开发便捷，逻辑处理直观、简洁、易于维护；降低了前端JS代码的开发难度，简单易于上手，即使初级前端开发工程师也能保证编写出技术难度较高的高质量代码，降低了开发成本。
对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对前述实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本发明中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于前述实施例，而是要符合与本发明所公开的原理和新颖特点相一致的最宽的范围。
Claims (10)
1.一种页面流编辑器，其特征在于，包括：
元模型获取模块，用于获取页面流编辑所需的元模型；
页面流处理模块，用于在后台处理JS代码的编辑，所述页面流处理模块包括用于扫码JS代码块并对代码块进行解析和生成模型的模型解析模块、用于校验模型的模型校验模块、用于将模型生成代码的代码生成模块以及用于实现文件模型与EMF模型之间转换的模型转换器；
所述模型转换器将页面流EMF模型转换至页面流文件模型时，首先提取编辑器中所有分支，建立分支图元与后续图元关系的顺序图；然后以开始图元为起点，在顺序图中注册所有主线图元；遍历顺序图中的所有图元，处理异常图元后更新顺序图；根据顺序图将节点放入对应的页面流模型，完成EMF模型到文件模型的转换；
所述模型转换器将页面流文件模型转换至页面流EMF模型时，首先读取文件模型，提取异常图元子节点并注册到顺序图；然后提取分支图元，注册至顺序图；构造出主线顺序图，保存异常图元；根据异常图元创建并生成组合图元然后保存；根据顺序图，绘制主线图元的连线；提取分支图元信息，绘制独立的分支图元所在分支的完成图元及连线；将独立分支在主线上连线，将异常图元在主线上连线，完成页面流文件模型到页面流EMF模型的转换；
页面流展示模块，用于提供图形化界面，展示编辑界面和图元。
2.根据权利要求1所述的页面流编辑器，其特征在于，所述图形化界面为GEF框架与UI框架相结合的封装，将EMF模型与GEF框架相结合，使用EMF模型作为GEF编辑器中的模型层，提供基础的编辑扩展，并对展现层提供默认实现。
3.根据权利要求1所述的页面流编辑器，其特征在于，所述模型解析模块进一步包括：
扫描器，用于扫描JS代码；
模型规则解析器，用于解析模型的JS代码解析，定位模型所在的代码块；
模型解析器，用于将JS代码块解析为模型。
4.根据权利要求3所述的页面流编辑器，其特征在于，所述代码解析和模型生成是通过如下步骤实现：
扫描器逐个字符扫描JS代码块，并根据解析需要获取指定位置字符；模型规则解析器根据规则判断代码块是否为开始，字符是否接受，代码块是否结束，获取代码块完整字符串及模型标识；模型解析器进行模型解析和生成。
5.根据权利要求1所述的页面流编辑器，其特征在于,所述代码生成模块进一步包括，
节点访问者，用于生成节点模型的代码；
代码生成器，用于将模型生成JS代码。
6.根据权利要求5所述的页面流编辑器，其特征在于,代码生成是通过如下步骤实现：
根据模型找到对应的代码生成器，根据传入的模型类型创建节点访问者；
节点访问者输出代码块的开始部分；
遍历模型的所有子节点，将子节点作为参数创建节点访问者；
节点访问者输出代码块的结束部分；
代码生成器输出代码块字符串。
7.根据权利要求1所述的页面流编辑器，其特征在于，所述模型校验模块进一步包括，
模型校验器，用于对模型进行编译检查。
8.根据权利要求7所述的页面流编辑器，其特征在于，所述模型校验通过如下步骤实现：
依据模型框架，根据实现页面流所对应的文件找到对应的模型库，调用模型库绑定的模型校验器对文件进行校验；
模型校验器对模型进行校验，并在实现页面流所对应的文件上标记错误信息。
9.根据权利要求1所述的页面流编辑器，其特征在于，所述页面流处理模块还包括，
类接口描述器，用于管理某一种模型所有使用的模型解析器、代码生成器、模型转换器和模型校验器。
10.根据权利要求1所述的页面流编辑器，其特征在于：所述页面流编辑器采用EMF模型框架事先定义编辑器中使用的页面流模型，采用IDE模型索引框架对页面流模型进行管理。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201511034330.3A CN106933563B (zh) | 2015-12-31 | 2015-12-31 | 一种页面流编辑器 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201511034330.3A CN106933563B (zh) | 2015-12-31 | 2015-12-31 | 一种页面流编辑器 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106933563A CN106933563A (zh) | 2017-07-07 |
| CN106933563B true CN106933563B (zh) | 2020-06-02 |
Family
ID=59444422
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201511034330.3A Active CN106933563B (zh) | 2015-12-31 | 2015-12-31 | 一种页面流编辑器 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106933563B (zh) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112416611A (zh) * | 2019-08-22 | 2021-02-26 | 北京国双科技有限公司 | 前端代码在后端实现的方法、装置、服务器及存储介质 |
Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102455910A (zh) * | 2010-10-15 | 2012-05-16 | 中国科学院沈阳自动化研究所 | 面向ic装备控制软件的gui平台化实现方法 |
Family Cites Families (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8260598B2 (en) * | 2004-09-20 | 2012-09-04 | The Mathworks, Inc. | Size vector sharing in code generated for variable-sized signals |
| CN100596143C (zh) * | 2006-03-06 | 2010-03-24 | 华为技术有限公司 | Web页面流中数据共享的方法和客户端设备 |
| CN101256492A (zh) * | 2008-03-31 | 2008-09-03 | 宋乃辉 | 一种进行模型驱动架构的软件开发方法及其系统 |
| JP2010198494A (ja) * | 2009-02-26 | 2010-09-09 | Panasonic Corp | ソフトウェア開発支援ツール |
| CN101727327B (zh) * | 2010-02-01 | 2015-04-29 | 浪潮软件股份有限公司 | 一种基于gef技术可视化jsp界面的开发方法 |
| CN102662651A (zh) * | 2012-03-08 | 2012-09-12 | 北京神州数码思特奇信息技术股份有限公司 | 可视化组件的生成方法和生成模块 |
| CN104317559A (zh) * | 2014-08-26 | 2015-01-28 | 国家电网公司 | 基于gmf的可视化建模平台 |
-
2015
- 2015-12-31 CN CN201511034330.3A patent/CN106933563B/zh active Active
Patent Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102455910A (zh) * | 2010-10-15 | 2012-05-16 | 中国科学院沈阳自动化研究所 | 面向ic装备控制软件的gui平台化实现方法 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106933563A (zh) | 2017-07-07 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110825362B (zh) | 低代码应用软件开发系统及方法 | |
| EP3433732B1 (en) | Converting visual diagrams into code | |
| CN107273117B (zh) | 一种编程友好型的敏捷代码自动生成系统 | |
| CN107291450B (zh) | 一种编程友好型的敏捷代码自动生成方法 | |
| CN115617327A (zh) | 低代码页面搭建系统、方法及计算机可读存储介质 | |
| WO2006122494A1 (fr) | Procede et systeme de description et de mise au point d'un systeme d'application a comportement dynamique | |
| CN104407863A (zh) | 抽象控件模型编程装置和方法 | |
| US20240160410A1 (en) | Application Development Platform, Micro-program Generation Method, and Device and Storage Medium | |
| CN115639980A (zh) | 一种低代码平台可拖拽的前端逻辑编排方法及装置 | |
| JP2017535887A (ja) | コンピュータ実行可能なモデルリバースエンジニアリング方法及び装置 | |
| CN115495069B (zh) | 基于模型驱动的煤炭工业软件流程实现方法、装置及设备 | |
| CN112083919A (zh) | 一种基于yaml模板的目标服务代码生成方法及装置 | |
| CN115202668A (zh) | 一种面向服务编排的基于ast生成工作流服务的方法 | |
| CN111857709A (zh) | React组件和Flutter组件的映射方法、装置、电子设备及存储介质 | |
| Bucaioni et al. | Reference architectures modelling and compliance checking | |
| CN104081347A (zh) | 运算次序的图形表示 | |
| Savic et al. | Preliminary experience using JetBrains MPS to implement a requirements specification language | |
| CN106933563B (zh) | 一种页面流编辑器 | |
| CN109740138A (zh) | 一种实现思维导图软件中图片文件可编辑的方法 | |
| CN113655996A (zh) | 一种基于需求模型的企业级系统生成方法 | |
| Giachetti et al. | Integration of domain-specific modelling languages and UML through UML profile extension mechanism. | |
| CN115061690A (zh) | 一种自动化代码生成方法以及装置 | |
| CN115756433A (zh) | 代码平台的迁移方法、装置、电子设备及可读存储介质 | |
| US20220075796A1 (en) | Architecture for data map converters | |
| CN114895880A (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 |