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

说明书

本发明提供一种Web应用开发工具的实现方法，涉及Web应用技术领域，本发明将传统的客户端开发转向了线上开发，开发人员可以随时随地的使用浏览器打开WebIDE进行开发，无需安装客户端软件。该WebIDE面向开发人员，从项目工程的视角设计，提供项目文件树展现、设计器、文件保存等功能。设计器提供拖拽式开发功能，默认提供源代、源码编辑工具、UI拖拽工具和代码机工具，其中前端Web组件拖拽工具基于UI组件库，实现前端Web页面的快速生成，代码机工具基于数据模型，实现代码的开发生成；提供扩展机制，支持自定义插件的灵活接入。

技术领域

本发明涉及涉及Web应用技术，尤其涉及一种Web应用开发工具的实现方法。

背景技术

大数据时代，面对海量的业务数据，如何快速实现数据的可视化展现，实现数据应用的快速开发成了当前的热点，在线应用开发工具被提出。

目前业界的在线开发工具有两类，一种是在线WebIDE，如Eclipse Che、CodingWebIDE，其核心是将桌面版IDE在线上基于浏览器实现，目标是面向开发人员，实现云端IDE、随时随地在线开发；另一种是轻应用定制工具，如阿里quick BI、魔镜等产品，该类产品提供了拖拽式开发界面，目标是面向最终用户（非开发人员），实现数据报表、图形图表类页面、应用的定制化开发。以上两类开发工具，各有自己的应用场景，第一种只是实现了线上IDE，缺少可视化的拖拽式快速开发功能；第二种虽然方便快捷的实现了业务数据的可视化展现，但却使得业务应用离散化，不方便对业务应用的整体把控。另一方面，这类开发工具大多是面向最终用户的，而对于开发者来说缺乏应用开发感觉，体验性不好。

在云计算和大数据快速发展的今天，如何能够快速的实现数据应用的快速开发、展示是开发者关注的重点，一款云端的、面向开发者的、具有拖拽式可视化开发的应用开发工具是开发者所期待的。

发明内容

为了解决以上技术问题，本发明提出了一种面向在线的、面向开发人员的、拖拽式的Web应用开发工具的实现方法，实现了所见即所得的效果。

本发明的技术方案是：

一种Web应用开发工具的实现方法，

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

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

其中，

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

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

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

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

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

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

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

function save(data){}