[发明专利]一种Web应用开发工具的实现方法

权利要求书

1.一种Web应用开发工具的实现方法，其特征在于，

提供面向开发者的、以项目代码为视角的WebIDE，提供项目代码树展现组件和源码编辑器，提供组件适配接口，实现开发工具的集成和应用代码的保存操作；提供前端拖拽开发工具，基于前端组件库，实现前端代码的快速拖拽式开发，并提供前端组件的注册接口；提供代码生成机功能，基于数据模型，实现代码的快速生成；

主要包括WebIDE、UI拖拽工具以及代码机工具实现方式；

其中，

1）WebIDE由工程文件树和设计器组成，代码文件存储到代码仓库中

1.1）工程文件树采用树形组件将项目中文件展现出来，双击树中文件，将其文件代码展现在代码编辑器中；右键单击树中文件，选择设计工具，将文件代码解析后以该设计工具展现；

1.2）WebIDE的设计器默认以代码编辑器打开，并集成UI拖拽工具和代码机；同时WebIDE支持自定义开发工具的接入，提供统一的插件适配层接口，UI拖拽开发工具和代码机都是基于该接口实现的对接；

2）UI拖拽工具

UI拖拽工具基于前端组件模板库，提供源码拖拽式开发功能；该工具提供页面样式模板，基于样式模板提供列表、图表、日期、按钮的前端组件，每个前端组件为一段HTML代码片段，工具提供拖拽的方式，通过拖拽组件，将组件对应的HTML代码片段增加到页面对应的HTML代码中；

2.1）前端组件

每个前端组件对应一段HTML代码片段，用于实现该组件的HTML代码，同时包含该HTML所对应JS、CSS代码，及所依赖的JS、CSS类库；

2.2）拖拽式开发

鼠标拖拽组件到编辑器的代码上，HTML代码片段会被插入到光标所在的位置上，同时将组件对应的JS和CSS片段放到对应的JS、CSS文件的最后;最后判断该组件是否有对应的JS、CSS依赖库，若有则判断该JS、CSS库是否已经在HTML页面中，若不存在，则将其加到HTML页面代码中；

2.3）前端组件扩展机制

UI拖拽工具提供组件的扩展机制，支持自定义组件的注册功能，每个组件包含HTML代码文件、JS代码文件和CSS代码文件，同时需要提供该组件的注册模型信息，模型如下：

组件ID、文件路径、依赖的JS库；

3）代码机工具实现方式

代码机工具提供列表、表单的代码生成功能，使用Freemarker模板引擎，基于数据模型，快速生成程序代码，包含前端页面代码、后端Java代码和配置文件代码；

WebIDE中的插件适配层接口实现方式具体如下：

a）树组件提供右键监听事件，各接入开发工具实现该监听事件；

b）WebIDE采用IFrame的方式来加载各开发工具，响应组件树对应事件，加载开发工具到设计器中；

c）WebIDE提供统一的代码保存接口，开发工具调用该接口实现代码保存；

function save(data){}

data为json字符串，数据模型为{“info”:[“filepath”: “”, “content”: “”]；

代码机工具实现方式中，

1）数据模型

数据模型有：数据表模型，包含列名、字段的类型、列的说明和是否为主键；Java Bean对象模型，包含Bean名称、Java字段名称、Java字段类型；页面模型，包含表单字段是否展示、表单字段展现类型、是否为查询条件；

该工具提供可视化的数据模型注册功能，开发者可以在界面上将数据模型信息录入，后台自动解析将其转换为XML模型；

2）Freemarker模板

基于Freemarker技术实现列表文件、表单文件和配置文件代码模板，存储到工具包中；

代码生成依次调用各文件的Freemarker模板，然后根据XMLSchema模型，获取所需要的数据模型信息，然后调用Freemarker模板引擎将其将其组装为最终的代码文件；该工具提供各种文件默认的路径规则，最终的生成文件按照路径规则进行存放。