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

 　　摘要

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

　　版权声明

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

　　前言

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

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

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

　　设计器类型

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

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

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

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

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

　　设计器的功能

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

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

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

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

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

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

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

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

　　文档对象模型

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

　　W3C国际组织对文档对象模型是这样定义的(摘自 http://www.w3.org/DOM/ )

　　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