C # Write WYSIWYG designer

Objective

With the continuous development of computer information systems, the system structure requirements more and more flexible, this flexibility is represented by the highly configurable program, may be the application of the workflow can be arbitrarily changed, the user interface can be arbitrarily changed, in the face of this constantly enhanced flexibility, it is impossible to modify the program code to achieve, The application system itself needs profound changes that require strong scalability and flexibility. It is also important that Z specifically use peripheral tools to modify the system configuration. A large part of these system peripherals customization tools are the WYSIWYG designers. such as workflow tools, WinForm or WebForm interface designers, and Report Designer are typical peripheral customization tools.

As is known to all, the WYSIWYG designer is a fairly complex program that requires complex graphical user interface programming, including graphic rendering, mouse keyboard events, and screen flicker. Second, it also has its background of data maintenance processing, including the user interface and data synchronization, data organization, and loading and saving the document processing. And these processes can be considered entangled, requiring very careful analysis of the design and careful coding.

This article is about how to implement a WYSIWYG designer. For this article, you can refer to another article by the author-how to use C # to write a text editor.

Designer type

The designer can be divided into two modes according to user interface and experience, one is based on Cartesian coordinates, the other is based on streaming layout. Microsoft's Visio is a typical rectangular coordinate method, while Word is a streaming style, and Vs.net's WebForm form designer is the combination of the two.

In the Cartesian designer, the design element is positioned in the Design view using XY coordinates, where the rectangle element typically specifies the position of its upper-left corner, and the designer needs to specify the location of the design element and sometimes its size. For a line segment, you specify the XY coordinates of two endpoints. As long as the designers set the position of each element to complete the design of the basic structure of the document, the rest is to set the content of each element.

In the streaming layout designer, design elements do not need to be specified, and are filled into design view (but sometimes other permutations) based on a general arrangement from left to right, from top to bottom. The position of the design element is dynamically computed. The streaming designer may also want to use the keyboard to enter text directly, and you need to display the cursor. The streaming layout designer can be thought of as a word processor.

The two designer user interfaces are different from the experience of using the therefore, its program processing is not the same, the rectangular coordinates designer has the design elements to cover each other, which affects the drawing, in addition to a large number of mouse drag and drop operation, you need to seriously handle mouse events, but keyboard events are not handled much. In the streaming layout designer, elements do not cover each other, so it is easy to draw, mouse events are not handled much, but keyboard events are handled more, and the cursor needs to be processed. But the two designers have a relatively large similarity to their document Object model.

In this article, the following only discusses the design of a rectangular coordinate method.

The functionality of the designer

One of the features that a designer should implement is:

The design document is loaded and saved, and the designer can save the current design to a document that can be saved to a file or saved to a database or to a server. The designer can load the document to reproduce the last design result completely.

The designer can quickly and accurately draw the document view, and when the view size exceeds the design area, the user interface should have scroll bars for scrolling.

Currently there is an interchange design experience, users can use the mouse drag and drop operation to change the size of the elements such as layout settings, the user changes the layout of elements or some properties, must immediately update the document view, and the update area should be as small as possible.

Support WYSIWYG design experience, when the designer needs graphics output, such as outputting pictures or printing, the Design view of the user in the designer should be consistent with the output graphics.

Try to minimize screen flicker. This requires optimization when drawing or updating a view, and completes the drawing operation as soon as possible.

If the designer needs to expand, the designer should provide enough extensibility to allow developers to add new features to the designer, allowing the designer to display a new style document view. The new document structure can also be processed when the document is loaded and saved.

If you need to be able to support VBA scripts, users can write VBA scripts to control the designer, including the document content of their design.