如何开发一个开发工具?

曾经完成过一个较为复杂的开发工具的项目，把一些体会写出来，供大家共享。这个开发工具主要用于银行前端，也就是我们在银行的柜台上看到柜员操作的系统。

开发工具的主要功能就是让系统开发人员能够按照银行交易的要求，在前端设计和开发银行交易、菜单定义、屏幕输入/输出界面，数据上下传格式（封包格式，这是同后台主机系统通讯必需的），设备输入/输出定义（包括磁条读写器、密码键盘、针式打印机、存折打印机等）、快捷键定义、系统参数设置等，此开发工具运行的效果图如下：

可以看出来，象 Visual Basic 这样的开发工具，如果不包括运行调试部分，大概包括以下部分：

1. 工程资源管理器
按照项目，分类别对一个项目内的所有资源(包括窗体、模块、类模块等)进行增/删/改，如果与 SourceSafe 集成，还可以Check IN/Check out 资源

2.窗体设计器与菜单编辑器
用来设计窗口及其属性，其所包含的控件和控件的属性，以及窗体上的菜单及其事件
打开 .frm 的窗体源文件就可以看到，VB的窗口被保存成具有层次的格式文件，有点象XML 文件

3.代码编辑器
一个具有智能提示和语法着色的代码编写器

4.菜单及各种工具栏
用来符助用户完成系统设置，资源管理、窗体的编辑、代码的编写/调试工作

5.其它
如帮助，对象浏览器，外接程序等…

按照以上的需求分类，分部分列出我们的实现方法：

1.工程资源管理器

这个好办，只要定义好你的开发工具要使用的资源种类，然后用一个 TreeView 就可以解决问题了
关于版本管理，可以有两种实现办法：
1) 如果你将资源保存在 Database(如 Sql Server) 或文件系统中，可以通过保存资源的多个版本和版本号(可能参照SourceSafe的实现),用户修改之前必须 Check in/Check Out，这种做法要求你自己实现”用户管理”(用户增删改/权限设置/登录/退出系统等）这个部分.

2) 另外一种办法是利用 Visual SourceSafe , SourceSafe 提供了一套丰富的接口可以调用，你可以将你的所有资源保存在 Sourcesafe 中，让 SourceSafe 来替你进行版本管理，注意，这里是把 SourceSafe 直接集成在你的程序中，而不是单独打开 SourceSafe ，Check out 文件后再由你的工具进行修改。使用 SourceSafe ，你将省去用户管理这部分工作，SourceSafe 自己带这部分功能。

建议，如果你的开发工具要实现多人协同开发的目的，则最好使用 DataBase (和你的开发工具是C/S架构) ，或者 SourceSafe (大家都用一个 SourceSafe Database)，这样有利于资源的版本一致性和管理的简便性。

2.窗体设计器和菜单编辑器

菜单编辑器比较简单，其实就是生成一个树而已，参照 VB 做一个对话框就可以了

窗体设计器是个比较难的东西，不但要让用户所见即所得的设计窗口及各种控件（工具箱：Label、Text、Option、CheckBox、Select、Tabel、Frame、Line、Image、Shape等)，这要设计窗体及控件的属性（类似于 VB 一样，要有一个属性编辑器）

我相信如果有人让你做这样的一个东东，90% 都想到了用 C/C++ 去实现，本人 C/C++ 不熟，只好剑走偏锋，拿出最拿手的 DHTML 来实现它，以下是具体步骤：

1) 利用 DHTML Edit Control

这个相当于一个窗体的 Container ，然后你可以用程序往里面塞各种各样的 HTML Code，显示出来的就是象 VB 的窗体编辑器那样的一个一个的 Control 。
注意，DHTML Edit Control必须设为浏览状态，这样才能捕获 Mouse 拖动/放大缩小等事件(DisplayChanged事件)，才能自定义右键的快捷菜单，正因为此，所以不能使用准的 IE 控件，使用它之后，就无法捕获事件.

2) 控件的实现

大家可以看到,VB 中的常用的控件，HTML 里都有： <Label />、<input type=”text”>、<input type=”radio”>、<img src=”…”>、<Select><option/></Select> 就可以实现大多数常用的控件，当用户点击工具箱中的一个控件种类时，使用 doc.body.insertAdjacentHTML “BeforeEnd”, “<button>确定</button>” 就可以画出一个 Button 控件.

这里面有几个比较特殊的控件:
a) Table 控件
HTML 里的 Table 和 VB 里的 Table 不太一样，HTML 里的 Table 是指定行数和列数的，而 VB 里的 Table 在开发时(Design-Time)时只有两行（Title+内容行)，而在运行的时候根据显示内容的多少，行数是不固定的。
做法是用 HTML Table 实现 Table 控件（比较考验 DHTML 的功力了)

b) Shape 控件
Shape 就是形状，指矩形（圆角和方角），(椭)圆等，标准的 HTML 里没法画这些东西，使用VML(Vector Markup Language)来实现

控件中采用的一些关键技术：
a) 合理设置 ContentEditable 属性
b) Behavior 技术
c) HTML Control等

注：以上的一些 DHTML 特性只有在 IE 5.5 以上版本才支持，所以一定要将 IE 升级到 5.5 以上版本。

3)窗体的保存

即然是 HTML ，就可以直接保存 HTML SourceCode 就可以，但我们的窗体解释器并不是一个浏览器，所以我们要转成格式化的，可以识别的格式，使用 IE 的 DOM 模型，取出放在上面的所有控件，保存成 XML 文件.

如果用户要修改已保存的窗体，则是上面一个过程的逆向，利用 XSL 把 XML 转成 HTML ，或者用程序解释 XML ，Render 成 HTML

4)属性的设置

每个控件有不同的属性，这个属性有些是和 HTML 相同的，有些是不同的，如果我要定义一个 Button ，要求它带有一个特殊的属性 Tag ，则在生成此控件时，要这样做：
doc.body.insertAdjacentHTML “BeforeEnd”, “<button>确定</button>”
Tag 属性并不是 HTML Button 的标准属性，但你这样设置并不是错误的，利用 DOM 也能随便取出或设置 Tag 属性的值。

此控件的所有属性取出来，列在一个可编辑 Grid 里，放在屏幕的右边，就实现了属性编辑器的功能，要注意两边的同步，如改变了控件的Width、Height 等属性后，在窗体编辑器中要反映出来，同样道理，当用 Mouse 把控件拖动，移动时也要更新属性列表中相关的值。要同步的值还有字体、颜色，风格（3D or flat)等。

3 代码编辑器

本为是想自己写一个可以语法着色的代码编辑器，后来找到一个非常好用的控件：CodeMax ，这个控件可以根据语言设置的不同，自动将内容语法着色，绝佳的一个控件。

由于项目进度紧，我们没有实现一种自定义的编程语言，而是利用了标准的 C 语言作为我们的代码，用 CodeMax 这个控件，我们没有写一行代码，就实现了绝好的代码编辑器。

可以调用 VC6 的 CL.exe 来帮你完成代码的语法检查、编译工作，将 CL.EXE 的输出重定向到一个文件中，然后可以检查此文件来获得到语法检查、编译的信息，并可以利用行号来在开发工具中定位到程序中具体行，便于开发人员 Debug。

4.菜单及工具栏

这些东西比较好做，我们用的是 ActiveBar ，最好的工具栏控件，连资源管理器和属性编辑器的 Dock 功能都是它来实现的，功能很强大，开发 Windows 应用程序首选的工具栏控件。

5.帮助，对象浏览器，外接程序等…

帮助比较好做，HTML Help Workshop ，我们没有对象浏览器，也没有外接程序

=============================================================================

以上只是对实现一个开发工具的开发端（不包括运行端）的技术要点做了一些说明，详细的实现过程就比较多了，那是系统详细设计的内容，不便公布吐舌笑脸

另外，如何实现一种自定义的开发语言，是一个很有意思的话题，如果有时间，再和大家探讨，交流心得。

附：一些有用的资源

1. MSDN Library
DHTML Reference ，实现 DHTML Form Designer 的必备，在 http://msdn.microsoft.com 中有一个贺卡设计器 Card Designer ，就是用 DHTML 来实现的，和 Form Designer 的设计思想是一致的，值得参考

2. DHTML Edit Control 及其例程

3. ActiveBar 例程

已读: 1,217

如何开发一个开发工具?

相关

“如何开发一个开发工具?”的36个回复

分类目录