随着计算机信息系统不断深入发展，其系统结构要求越来越灵活，这种灵活性就是表现为程序的高度可配置性，可能应用程序的工作流程可以随便改变，用户界面也可以随便改变，面对这种不断增强的灵活，是不可能通过修改程序代码来实现的，应用系统本身需要发生深刻变化，需要实现很强的扩展性和灵活性。此外z专门用于修改系统配置的外围工具也是非常重要的。这些系统外围定制工具很大一部分就是一些所见即所得的设计器。比如工作流编制工具，WinForm或WebForm界面设计器，而报表设计器也是典型的外围定制工具。
总所周知，所见即所得的设计器是个相当复杂的程序，首先它需要复杂的图形化用户界面编程，包括图形的绘制，鼠标键盘事件的处理，还要抗屏幕闪烁。其次还有它后台的数据维护处理，包括用户界面和数据的同步，数据的组织安排，以及加载和保存文档的处理。而且这些处理过程可以算是纠缠在一起，需要非常认真小心的分析设计，仔细编码。
本文就是探讨如何实现一个所见即所得的设计器。 关于本文，可以参考作者的另一篇文章－如何使用C#编写文本编辑器。
设计器类型
设计器按照用户界面和使用体验，可以分为两种模式，一种是基于直角坐标方式，另一种是基于流式排版方式。微软的Visio就是典型的直角坐标方式，而Word则是流式排版方式，而VS.NET的WebForm窗体设计器就是这两者的结合。
在直角坐标方式的设计器中，设计元素是使用XY坐标来在设计视图中定位的，对于矩形元素一般指定它的左上角的位置来定位，设计者需要指定设计元素的位置，有时还要设置它的大小。对于线段需要指定两个端点的XY坐标。设计者只要设置好了各个元素的位置大小就完成了设计文档的基本结构，剩下的就是设置各个元素各自的内容了。
在流式排版设计器中，设计元素是不需要指定位置的，是根据一般根据从左到右，从上到下的排列原则填充到设计视图中（但有时会变成其他排列原则）。设计元素的位置是动态计算的。流式设计器可能还要使用键盘直接输入文本，需要显示光标。流式排版设计器可以看作文字处理器。
这两种设计器用户界面和使用体验不一样，因此其程序处理的方式也不一样，直角坐标设计器存在设计元素间相互覆盖，这影响绘图，此外还需要大量的鼠标拖拽操作，需要认真处理鼠标事件，但键盘事件处理得不多。而流式排版设计器中元素不会相互覆盖，因此绘制起来方便点，鼠标事件处理不多，但键盘事件处理的多，此外还需要处理光标。但这两种设计器它的文档对象模型有比较大的类似性。
在本文中，以下只讨论直角坐标方式的设计器。
个人认为一个设计器应当实现的功能有：
对于计算机程序，后台决定前台，而设计器的后台就是文档对象模型。相信大家对文档对象模型有所了解，我们在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上的对文档对象模型原理的一般看法。
我个人认为，对于编程，文档对象模型其主要内容就是，面对比较复杂的文档，使用面向对象的编程思想，使用一个个程序世界中的对象来映射文档中的每一个特定的部分。加载文档时，可以解析文档，并把其表示的内容映射为一个个对象，此时应用程序可以修改这些对象的数据，当保存文档时，可以将这些对象数据组织起来按照特定的格式保存到文档中。这样程序就通过访问文档对象来访问文档，也可以修改文档对象来修改文档，如此实现了对复杂文档的处理。文档对象模型是处理复杂文档的标准操作模式。
设计器处理的是复杂的文档，因此也需要使用文档对象模型。文档对象模型可分为三大部分：文档基本元素，文档对象和各种类型的从文档基本元素派生出的文档元素。
#p#
文档基本元素是整个文档对象模型的最基础的对象（就像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属性则可能由于某种原因而缺失，XML名称比XML属性要稳定。
基于上述的认识，当采用XML文档作为保存方式时，设计基础元素需要定义两个虚函数，一个用于从XML文档加载对象属性数据，另一个要向XML文档保存对象数据。而其他文档元素对象则根据需要重载这两个函数来实现自己的加载和保存对象属性的操作，对于容器元素，还需要保存子元素数据到XML文档和从XML文档加载子元素。当然在实际应用中还要根据需要定义一些辅助成员来帮助加载和保存XML文档。
设计器生成的XML文档一般保存为文件形式，当然可以根据需要来保存的数据库里或者上传到各种服务器中。若直接保存到数据库中，则整个应用系统中所有的设计器编辑的都是同一个文档版本，而且一旦保存便可立即应用。
设计器需要绘制文档视图，则需要设计文档对象模型提供支持。因此文档基本元素需要定义两类通用接口，一个是和绘制文档相关的接口，一个是处理鼠标键盘事件相关的接口。
#p#
大部分文档元素需要在文档视图中绘制内容，因此它们需要重载绘制文档的接口，这类接口主要有两个函数，一个是计算元素大小的函数，一般命名为 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 接口，则在设计视图中动态的显示一个文本输入框，然后调用该接口的成员来直接编辑对象文本内容。
文档基础元素要定义不少接口来用于维护文档对象树。要定义 OwnerDocument 属性来指定元素所在的文档对象，要定义 Parent 属性来指明元素的父节点，定义 Items 属性来指明该元素的子元素列表。对于容器元素，还要维护它的子元素列表。
设计文档对象作为文档树的根节点，担负着维护整个对象树的重任，包括文档整体的加载保存，文档整体的绘制，遍历整个对象树结构入口，还要为脚本提供接口。它是访问文档对象树的入口点。
可以从文档基础元素上派生一些比较基础的文档元素类型。这些比较基础的文档元素类型可以包括：
◆矩形元素基础类型，类型名称为DesignRectangleElement , 设计文档中大部分元素的边界是矩形，因此定义矩形元素基础类型作为这些矩形类型的元素的共同基础。矩形元素基础类型实现了使用8个点的控制点来修改元素位置和大小的能力，鼠标在对象边界只那的鼠标拖拽操作就可移动元素位置。此外还定义了内容和边界之间的边距信息。
◆线段类型，类型名称为DesignLineElement, 设计文档某些元素是以线段方式显示的，因此定义线段类型作为这些元素类型的基础类，线段类型定义了两个端点的位置，线段的显示样式，标签文档等信息。此外还重载了鼠标事件，使得用户可以使用鼠标拖拽线段的两个端点来修改线段端点的坐标。此外还要重载命中操作，用于判断某个坐标是否命中线段对象，若指定点距离线段的垂直距离小于某个参数，和点在线段某个端点上的拖拽点中则命中线段，否则没命中。
◆容器元素类型，类型名称为DesignElementContainer , 该元素可以包含若干个子元素，它是从DesignRectangleElement 派生的，因此它的边界是矩形。鼠标在容器中的拖拽操作不是移动容器，而是动态绘制一个选择矩形，当完成拖拽操作时，就根据这个选择矩形来设置子元素的选中状态。根据选择矩形来选择子元素有两种方式，一种是，若子元素边界和选择矩形粘边就被选中，另一种是，若子元素完全在选择矩形内部时才被选中。容器元素在绘制子元素时就执行矩形覆盖操作后再调用子元素的RefreshView成员。
◆带标题容器元素，类型名称为 DesignCaptionContainer , 该元素派生自容器元素，可以包含若干个子元素，但它顶端有个标题栏，可以显示文本，用户使用鼠标拖拽这个标题栏可以修改元素的位置。此外它还实现了 ILabelEditable 接口，当用户双击标题栏时可以直接编辑标题栏文本。
#p#
◆文本元素，类型名称为DesignTextElement,很多文档元素只是简单的显示文本内容，则定义文本元素作为这些简单显示文本内容的元素的共同基础。它派生自DesignRectangleElement , 此外还实现了 ILabelEditable 接口用于直接编辑文本内容。此外还支持文本输出角度控制，此时绘制文本时将以元素中心为原点旋转任意角度进行绘制。文本元素绘制带角度的文本时需要临时修改图形绘制对象Graphics的转换矩阵来设置绘制角度。
◆增强文本元素，类型名称为DesignTextElementExt , 该元素派生自DesignTextElement, 对文本输出格式进行了强化，它支持行间距和字符间距，此外还进行了文本右边缘的对齐操作。显示对于大段文本时，尤其包含中文字符和英文字符，某些程序没有进行文本右边缘对齐操作。例如IE，记事本等，这是因为中文字符和英文字符宽度不一样。每一行文本的内容宽度由于中英字符的个数不一样，很容易导致文本宽度不一样，因此当文本左边缘对齐时，其右边缘很可能是参差不齐的。但MS Word显示大段文本时它的文本左右边缘都是对齐的，它通过在显示文本时插入额外的用户难以察觉字符间距来修正文本显示宽度。增强型文本元素就利用了这个原理来实现文本右边缘对齐。
◆表格元素，类型名称为DesignTableElement，表格元素是一种复杂的容器元素，它包含表格行（DesignTableRowElement)，表格列(DesignTableColumnElemetn)和单元格(DesignTableCellElement)对象，其中单元格可以进行横向合并和纵向合并。而表格包含的表格行和单元格也是容器元素，用户不能直接修改单元格的大小位置，而只能调解表格行的高度和表格列的宽度来修改单元格的大小位置。单元格也是容器元素，因此单元格内可以放置若干个子元素。在很多情况下单元格只是显示简单的文本内容，因此单元格定义了一些用于显示文本内容的属性，此外实现了 ILabelEditable 接口来方便直接编辑单元格文本内容。
◆图片元素，类型名称为 DesignImageElement , 它是从DesignRectangleElement 派生的，用于简单的显示一个图片。由于图片对象(System.Drawing.Image)使用了未托管资源，因此图片元素实现了 System.IDisposable 接口。
◆此外还定义了一些元素，这些元素可以模拟绘制Windows基础控件，包括文本标签，按钮，单选框，复选框，文本框，列表，下列列表，组合框，进度条和窗体。可以根据这些元素来很容易的模拟出一个窗体设计器。
设计器的主要工作之一就是绘制文档视图。其绘制过程一般是：
设计器控件重载它的OnPaint成员或绑定Paint事件。
当操作系统需要重新绘制设计器控件时会触发它的Paint事件。
设计器获得绘制图形使用的System.Drawing.Graphics对象和一个表示绘制区域的剪切矩形ClipRectangle，然后将其作为参数调用文档对象的RefreshView函数。
文档对象进行一个初始化工作，然后遍历对象树结构，找到所有和剪切矩形粘边的文档元素，调用它们的RefreshView函数，让各个元素绘制各自内容。
当所有工作完毕，则文档视图绘制完毕。
设计器绘制文档是遇到一个难题就是闪烁，当用户滚动视图和更新视图时，用户界面很容易出现闪烁，过多的闪烁会比较严重的影响使用者的使用。关于闪烁的原理我曾经写过一篇文章讨论了一下。由于设计文档是比较复杂的文档，绘制整个文档视图工作量大，绘制时间长，因此需要采用各种优化来减少绘制时间，减少闪烁。
对于闪烁有一个算是一劳永逸的办法就是使用双缓冲技术。在绘制图形时，首先将图形绘制到一个内存中的BMP图片上，然后将这个BMP图片绘制到用户界面上。这种方法可以最大程度的减少闪烁，而且在.NET中使用双缓冲也比较简单。但我不大使用双缓冲技术，有两个原因
双缓冲实际上增加了整个绘制文档的工作量，延长了绘图时间。当用户滚动视图时，会造成视图很“沉重”的感觉，用户界面响应迟钝。
双缓冲掩盖了程序的不足之处。开发人员可以根据闪烁程度来判断绘图操作是否需要优化，以及优化效果。但双缓冲消灭了闪烁，开发人员也就没有优化绘图操作的迫切需求，助长了开发人员的懒惰。程序绘制图形时缓慢不堪，而很难从表面看出问题的可能原因。
其实可以这样，设计器在开发时不使用双缓冲，但发布时则使用双缓冲。
由于设计器采用直角坐标方式，因此各个元素间存在相互覆盖的关系，当存在大面积的覆盖时，绘制文档时必需要针对这种情况进行优化处理来提高绘制文档的速度，减少计算机屏幕闪烁。针对覆盖现象而进行优化时可以进行矩形覆盖操作，对于矩形覆盖操作，本人有另一篇文章对此进行了说明。设计器绘制某个元素时，首先针对这个元素进行矩形覆盖运算，将运算结果作为RefreshView函数的某个参数来传入，当文档元素内容比较多时，可以根据这个矩形覆盖运算结果来减少绘制量，提高绘制速度。
设计视图还应提供缩放显示功能，可以放大设计视图来更清楚的显示细节，可以缩小设计视图来总体的把握整个文档。GDI+有个转换矩阵，可以很容易的实现设计视图的缩放显示。但此时所有的鼠标坐标数据都得进行相应的缩放处理。
设计视图控件是设计器在用户界面上的展示接口。它是一个标准的Windows控件，该控件派生自System.Windows.Form.UserControl。用户使用鼠标和键盘在这个控件里面编辑文档，它重载了OnMouseDown , OnMouseMove 和 OnMouseUp 成员，对鼠标消息进行了一下包装后供设计文档对象使用。重载了OnPaint 成员来更新文档视图。重载了 OnDoubleClick 来进行试图直接编辑文档元素的文本内容。
当用户设置某个元素为当前元素，则设计视图控件将根据需要来进行滚动以便当前元素出现在可视区域中。若当前元素大小小于可视区域大小，则处理比较简单，只要根据可视区域大小和元素在视图中的位置就可计算滚动位置。若元素宽度或高度大于可视区域的宽度和高度，则需要进行额外的判断，以避免滚动时发生跳跃。
#p#
一个好的设计器应当支持鹰眼技术，所谓鹰眼，通俗的讲就是小地图，它一般放置在程序界面的某个角落，它的面积不大，主要功能是让人瞥上一眼就能大体了解整个文档的结构，并能通过鼠标点击快速的滚动文档。关于鹰眼，本人写过一个文章专门讨论了它。
使用方便的所见即所得的设计器是一个复杂的程序，需要丰富的相关开发经验，它涉及到图形化，文档对象模型以及其他各种编程技术，是一个多种编程技术的有机混合,通常需要编写数万行的代码才能实现。因此其技术门槛比较高，一般的小公司没有能力完成，即使有些公司有实力开发，那也要花数月的时间，有可能影响公司正常的项目开发。但随着各种信息系统越来越灵活，它们必须配备良好的设计器，若有一个使用方便功能强大的设计器，则处理这种系统配置是事半功倍的，因此很多开发人员都不得不面对开发设计器这个技术难题。
有鉴于此，XDesigner软件工作室凭着自身丰富的设计器开发经验开发了XDesignerLib,一个设计器中间件，也就是一个设计器的半成品，这个中间件实现了所见即所得的设计器的全部基础，并提供了非常充分的扩展接口。开发人员了解了XDesignerLib以后就可以仅仅编写比较简单的几千行代码就能实现一个功能强大的设计器。借助XDesignerLib,开发人员不必处理非常繁琐的底层细节，只需了解XDesignerLib的接口，扩展它就行了。实事上XDesigner工作室已经开发的各种设计器都是基于XDesignerLib的。关于XDesigner软件工作室和XDesignerLib 。
本文是XDesigner软件工作室撰写，XDesigner软件工作室拥有本文版权，转载请注明出处，并保留本版权声明。
