用.NET实现所见即所得的设计器

摘要

　　本文讨论了如何使用C#编写一个所见即所得的设计器,分析了设计器的基本原理,可能遇到的技术问题，以及如何调用.NET框架来实现一个设计器。

　　版权声明

　　本文是XDesigner软件工作室撰写，XDesigner软件工作室拥有本文版权，转载请注明出处，并保留本版权声明。

　　前言

　　随着计算机信息系统不断深入发展，其系统结构要求越来越灵活，这种灵活性就是表现为程序的高度可配置性，可能应用程序的工作流程可以随便改变，用户界面也可以随便改变，面对这种不断增强的灵活，是不可能通过修改程序代码来实现的，应用系统本身需要发生深刻变化，需要实现很强的扩展性和灵活性。此外z专门用于修改系统配置的外围工具也是非常重要的。这些系统外围定制工具很大一部分就是一些所见即所得的设计器。比如工作流编制工具，WinForm或WebForm界面设计器，而报表设计器也是典型的外围定制工具。

　　总所周知，所见即所得的设计器是个相当复杂的程序，首先它需要复杂的图形化用户界面编程，包括图形的绘制，鼠标键盘事件的处理，还要抗屏幕闪烁。其次还有它后台的数据维护处理，包括用户界面和数据的同步，数据的组织安排，以及加载和保存文档的处理。而且这些处理过程可以算是纠缠在一起，需要非常认真小心的分析设计，仔细编码。

　　本文就是探讨如何实现一个所见即所得的设计器。 关于本文，可以参考作者的另一篇文章-如何使用C#编写文本编辑器。

　　设计器类型

　　设计器按照用户界面和使用体验，可以分为两种模式，一种是基于直角坐标方式，另一种是基于流式排版方式。微软的Visio就是典型的直角坐标方式，而Word则是流式排版方式，而VS.NET的WebForm窗体设计器就是这两者的结合。

　　在直角坐标方式的设计器中，设计元素是使用XY坐标来在设计视图中定位的，对于矩形元素一般指定它的左上角的位置来定位，设计者需要指定设计元素的位置，有时还要设置它的大小。对于线段需要指定两个端点的XY坐标。设计者只要设置好了各个元素的位置大小就完成了设计文档的基本结构，剩下的就是设置各个元素各自的内容了。

　　在流式排版设计器中，设计元素是不需要指定位置的，是根据一般根据从左到右，从上到下的排列原则填充到设计视图中(但有时会变成其他排列原则)。设计元素的位置是动态计算的。流式设计器可能还要使用键盘直接输入文本，需要显示光标。流式排版设计器可以看作文字处理器。

　　这两种设计器用户界面和使用体验不一样，因此其程序处理的方式也不一样，直角坐标设计器存在设计元素间相互覆盖，这影响绘图，此外还需要大量的鼠标拖拽操作，需要认真处理鼠标事件，但键盘事件处理得不多。而流式排版设计器中元素不会相互覆盖，因此绘制起来方便点，鼠标事件处理不多，但键盘事件处理的多，此外还需要处理光标。但这两种设计器它的文档对象模型有比较大的类似性。

　　在本文中，以下只讨论直角坐标方式的设计器。

　　设计器的功能

　　个人认为一个设计器应当实现的功能有

　　·设计文档的加载和保存，设计器可以将当前设计的内容保存到一个文档中，这个文档可以保存到文件中，也可保存到数据库或某个服务器中。设计器可以加载文档来完全重现上次的设计结果。

　　·设计器可以快速准确的绘制文档视图，当视图大小超过设计区域时，用户界面应当出现滚动条来进行滚动操作。

　　·当前有互换式设计体验，用户可以使用鼠标拖拽操作来改变元素的位置大小等布局设置，用户改变了元素的布局或某些属性时，必须立即更新文档视图，而且更新区域应当尽量小。

　　·支持所见即所得的设计体验，当设计器需要进行图形输出，例如输出图片或打印时，用户在设计器中的设计视图应当和输出的图形保持一致。

　　·尽量减少屏幕闪烁。这需要绘制图形或更新视图时需要进行优化，尽快完成绘制操作。

　　·若设计器需要进行扩展时，设计器应当提供足够的扩展能力，开发人员可以在这个设计器的基础上添加新的特性，使得设计器能显示新样式的文档视图。并且加载和保存文档时也能处理新的文档结构。

　　·若需要可以支持VBA脚本，用户可以编写VBA脚本来控制设计器，包括其设计的文档内容。

　　文档对象模型

　　对于计算机程序，后台决定前台，而设计器的后台就是文档对象模型。相信大家对文档对象模型有所了解，我们在WEB页面中使用JAVASCRIPT脚本时就是访问了HTML文档对象模型,我们操作XML文档就是访问XML文档对象模型。

　　W3C国际组织对文档对象模型是这样定义的(摘自 )

　　The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. This is an overview of DOM-related materials here at W3C and around the web.

　　以我个人的英文水平翻译如下

　　文档对象模型是一种语言中立的接口或平台，程序或脚本能利用它来访问和更新结构化的文档。这些文档可以被进一步的处理，处理结果可以组成一个有效页面。这是W3C对web上的对文档对象模型原理的一般看法。

　　我个人认为，对于编程，文档对象模型其主要内容就是，面对比较复杂的文档，使用面向对象的编程思想，使用一个个程序世界中的对象来映射文档中的每一个特定的部分。加载文档时，可以解析文档，并把其表示的内容映射为一个个对象，此时应用程序可以修改这些对象的数据，当保存文档时，可以将这些对象数据组织起来按照特定的格式保存到文档中。这样程序就通过访问文档对象来访问文档，也可以修改文档对象来修改文档，如此实现了对复杂文档的处理。文档对象模型是处理复杂文档的标准操作模式。

　　设计器处理的是复杂的文档，因此也需要使用文档对象模型。文档对象模型可分为三大部分:文档基本元素，文档对象和各种类型的从文档基本元素派生出的文档元素。

　　文档基本元素是整个文档对象模型的最基础的对象(就像Object类型是.NET对象集团的基础一样),它定义了文档元素的通用接口，一般定义为抽象类，类型名称可以为DesignElement 。

　　文档对象是文档对象模型的顶级对象，它包含了整个文档的内容，其类型名称可以为 DesignDocument 。

　　各种类型的文档元素，它是派生自文档基本元素类型，用于描述文档中各种实际存在的元素。其中可以定义一种文档元素，它们可以容纳其他的文档元素，这些元素就是容器元素。实际上文档对象就是最大的容器元素。由于文档对象模型中存在容器元素，因此所有的对象都组成一个树状结构，称为文档对象树，其中根节点就是文档对象。各种文档元素是文档对象模型的活跃分子，扩展文档对象模型大部分工作就是扩展这些文档元素,扩展文档元素需要扩展它们的两个功能，一个是文档的加载和保存，一个就是文档本身保存的数据。

　　文档对象模型可以和用户界面相关，也可以不相关，例如XML文档对象模型是无用户界面的。设计器的文档对象模型是和用户界面相关的，对此，扩展设计文档对象模型的文档元素时还需要扩展它们的绘制图形的能力以便设计器能绘制新型的文档元素图形。

　　对于设计文档对象模型，其文档基础元素可以定义的内容有三个方面，文档的加载和保存，用户界面相关的接口，维护文档对象树的接口。

　　文档的加载和保存

　　设计文档可以保存为二进制文档，纯文本文档和其他格式，在此推荐使用XML文档格式。其好处是

　　·设计文档对象模型和XML文档对象模型都属于文档对象模型，两者原理和结构上都有着很大的相似性，设计文档元素和XML文档元素可以存在一一对应的关系。因此使用XML文档加载和保存设计文档对象是很自然的，实现起来比较简单。

　　·XML文档是国际标准的文档格式，非常开方，其他应用程序很容易利用设计器生成的文件，简化了设计器和其他应用系统的数据接口。

　　·已经存在标准的XML文档解析器和XML文档对象模型，因此不需自己处理XML文档，只需调用标准库加载XML文档对象模型，然后按照一一对应的关系来生成设计文档对象模型。

　　·使用XML文档有利于保持设计器的各个版本间的兼容性。只要XML文档结构不发生大变化，低版本的设计器可以加载高版本的设计器生成的文档，同样高版本的设计器也很容易加载低版本的设计器生成的文档。若使用二进制文件格式，则设计器需要编写对于不同版本的设计文档的预处理器，比较麻烦而且很难做到向上兼容。

　　在保存对象数据到XML文档时，保存方式有两种，保存到XML属性和保存到XML元素。当指定某个XML元素用于保存对象数据时，若使用保存到XML属性时，会对对象每一个属性，将其数据保存到指定名称的XML属性中，而保存到XML元素时，会在当前的XML节点下新增一个指定名称的XML子元素。然后将属性值保存到XML子元素中。这两种方式生成的XML片断为

　　＜ELEMENT attributename2="value2" attributename1="value1" /＞

　　和

　　＜ELEMENT＞
　　　＜ATTRIBUTENAME1＞value1＜/ATTRIBUTENAME1＞
　　　＜ATTRIBUTENAME2＞value2＜/ATTRIBUTENAME2＞
　　＜/ELEMENT＞

　　面对这两种方式，我建议选择第二种，其原因有：

　　·若保存到XML属性，则当对象属性比较多是，使用缩进方式输出的XML文档将比较宽，在查看是会出现横向滚动条，不利于阅读。而保存到XML元素时，XML文档不会很宽，便于阅读。

　　·若多行文本保存到XML属性，则一般不会以多行文本的方式保存，不利于阅读。而保存到XML元素时，则保存的文本和实际的文本比较接近，便于阅读。

　　·若保存到XML属性，则保存方式只能是一个属性字符串，而保存到XML元素时则保存的方式很容易进行扩展。

　　·虽然保存到XML属性方式生成的XML文档比保存为XML元素的方式要小，但XML文档格式的设计目标是方便保存数据和交换数据，而不在乎文档是否冗余，因此我们选择保存方式时不必在乎XML文档的大小。而且一般设计文档的内容不很多，以目前计算机硬件条件无须在意XML文档大小。

　　当设计器从XML文档加载设计文档时， 首先生成XML文档对象树， 然后根据一一对应的关系来生成设计文档对象树，此时需要从XML元素保存的信息来判断该XML元素是对应于那种设计文档元素，设计器可以从XML元素名称来判断，也可以从某个XML属性来判断，在此我使用XML元素名称来判断，首先是针对一个XML元素，获得其名称比获得某个属性值要方便，其次是XML名称是必然存在的，肯定不为空，而XML属性则可能由于某种原因而缺失，XML名称比XML属性要稳定。

　　基于上述的认识，当采用XML文档作为保存方式时，设计基础元素需要定义两个虚函数，一个用于从XML文档加载对象属性数据，另一个要向XML文档保存对象数据。而其他文档元素对象则根据需要重载这两个函数来实现自己的加载和保存对象属性的操作，对于容器元素，还需要保存子元素数据到XML文档和从XML文档加载子元素。当然在实际应用中还要根据需要定义一些辅助成员来帮助加载和保存XML文档。

　　设计器生成的XML文档一般保存为文件形式，当然可以根据需要来保存的数据库里或者上传到各种服务器中。若直接保存到数据库中，则整个应用系统中所有的设计器编辑的都是同一个文档版本，而且一旦保存便可立即应用。

　　用户界面相关的接口

　　设计器需要绘制文档视图，则需要设计文档对象模型提供支持。因此文档基本元素需要定义两类通用接口，一个是和绘制文档相关的接口，一个是处理鼠标键盘事件相关的接口。

　　绘制文档相关接口

　　大部分文档元素需要在文档视图中绘制内容，因此它们需要重载绘制文档的接口，这类接口主要有两个函数，一个是计算元素大小的函数，一般命名为 RefreshSize , 一个是绘制元素的函数,一般命名为RefreshView。

　　一般设计者指定元素的大小，元素本身不需要计算其大小，但某些元素可能是根据其内容自动设置大小，因此需要重载计算元素大小的函数RefreshSize来自动设置大小。自动设置大小可能只是设置元素的宽度或高度，也可能是同时设置其宽度和高度。同一个元素，可能在一种状态下不会自动设置大小，而在另外一种状态下需要自动设置大小。所有的这些操作都需要在RefreshSize函数中完成。

　　一般的设计元素都需要在文档视图中绘制内容，这时需要重载RefreshView函数，这个函数参数包含了一个System.Drawing.Graphics对象，元素需要使用这个Graphics对象来绘制自己特定的内容，可能是绘制文本，图片或其他图形。

　　当所有的文档元素都实现了绘制文档相当的接口，则在设计器的调度下，一个完整的设计文档视图就绘制出来了。而扩展设计器时，若需要指定新显示样式的元素时，需要重载RefreshView和RefreshSize函数来实现新的显示样式，此时扩展的设计器就能显示新样式的文档视图。

　　处理鼠标键盘事件相关接口

　　设计器中主要处理鼠标事件，文档基础元素可以定义一些处理鼠标事件的虚函数，名称可以为 HandleMouseDown , HandleMouseMove 和 HandleMouseUp 。

　　为了方便文档元素处理鼠标坐标，设计器在调用文档元素的HandleMouse函数时，首先将鼠标光标坐标进行转换，要将鼠标光标在视图区域中的坐标转换为文档元素内部的相对坐标，即相对于元素左上角的相对坐标。

　　设计器要依靠鼠标事件来实现设计元素的拖拽操作以实现互换式设计体验。关于鼠标拖拽操作典型的应用就是使用8个控制点来编辑元素边界。当一个元素边界是矩形时，会在元素的边界矩形的四个角和四个边的中点上分布8个控制点，当鼠标移动到这8个点时会修改鼠标光标样式，当鼠标光标在某个控制点上时，用户按下鼠标按键则开始进行鼠标拖拽操作，拖拽时会显示一个虚线绘制的边框，当松开鼠标按键则拖拽操作结束，此时设计器修改拖拽的元素的矩形边界。

　　某些文档元素并不进行标准的鼠标拖拽操作，例如对于容器元素，其内部的鼠标拖拽不移动对象而是画出一个选择矩形来选择若干个子对象;对于表格元素，它的表格线上的鼠标拖拽操作是修改表格行的高度和表格列的宽度;而对于线段则是修改端点位置。

　　当用户不小心按下鼠标按键，或只是选择某个元素而并不想进行鼠标拖拽操作，此时可以使用一个参数 System.Windows.Forms.SystemInformation.DragSize 来判断是否进行鼠标拖拽。当鼠标按键按下时，设计器就锁定鼠标，若鼠标按键按下后鼠标移动距离超出了 DragSize 的范围时，则表示用户是想进行鼠标拖拽操作的，此时开始真正的鼠标拖拽操作。若鼠标按键从按下到松开时鼠标移动距离始终没超出 DragSize 的范围，则表示用户没有进行鼠标拖拽操作的意图。这样的判断可以让设计器容忍用户的一些误操作。

　　设计器还要处理鼠标双击事件处理，对于某些包含文本的元素，用户双击该元素，则在设计视图中显示个文本输入框来直接编辑对象的文本内容。可以定义一个接口 ILabelEditable , 当用户双击某个元素，设计器发现该元素实现了 ILabelEditable 接口，则在设计视图中动态的显示一个文本输入框，然后调用该接口的成员来直接编辑对象文本内容。