How to write the WYSIWYG designer in C #

Design

　　Summary

This article discusses how to write a WYSIWYG designer using C #, analyzes the rationale of the designer, the technical problems that may be encountered, and how to invoke it. NET Framework to implement a designer.

　　Copyright notice

This article is Xdesigner Software studio writing, Xdesigner Software Studio owns this copyright, reproduced please specify the source, and retain the copyright notice.

　　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

The individual believes that a designer should implement a design document that is loaded and saved, that 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.
Document Object Model
For computer programs, the background determines the foreground, and the designer's background is the document Object model. I believe you have a good understanding of the Document Object model, we use JavaScript script in the Web page is to access the HTML Document Object model, we manipulate the XML document is to access the XML Document Object model.

This is the definition of the Document Object Model (excerpted from http://www.w3.org/DOM/) by the International Organization for global access.
The Document Object Model is a Platform-and language-neutral interface that would allow programs and scripts to Dynamicall Y access and update the content, structure and style of documents. The document can be further processed and the results of that processing can is incorporated back into the presented page. This is a overview of dom-related materials here and around the web.

In my own English level translation is as follows
A Document Object model is a language-neutral interface or platform that a program or script can use to access and update structured documents. These documents can be further processed and the processing results can be made into a valid page. This is the general view of the web about the principles of the Document Object model.

I personally think that for programming, the main content of the Document Object model is that, in the face of more complex documents, the use of object-oriented programming ideas, using a program in the world of objects to map every particular part of the document. When loading documents, you can parse the document and map its representations to objects, at which point the application can modify the data of those objects, and when you save the document, you can organize the object data to be saved to the document in a specific format. This allows the program to access documents by accessing the Document object, or modify the Document object to modify the document, thus implementing the processing of complex documents. The Document Object model is the standard operating mode for handling complex documents.

The designer handles complex documents, so you also need to use the Document Object model. The Document Object model can be divided into three parts: document base elements, document objects, and various types of document elements derived from the document base element.

The document base element is the most basic object of the entire Document Object model (just as the object type is the basis of a. NET object group) that defines a common interface for document elements, generally defined as abstract, and the type name can be designelement.

A Document object is the top-level object of the Document object model that contains the contents of the entire document, and its type name can be designdocument.

Various types of document elements, which are derived from document base element types, to describe the various actual elements in the document. You can define a document element that can hold other document elements, which are container elements. The Document object is actually the largest container element. Because container elements exist in the Document Object model, all objects consist of a tree structure called the Document Object tree, where the root node is the document object. Various document elements are active elements of the Document Object model, extended Document Object Model Most of the work is to extend these document elements, extension document elements need to extend their two functions, one is the document loading and saving, one is the document itself saved data.

The Document object model can be relevant to the user interface or irrelevant, for example, the XML Document Object model is UI-free. The Document object model of the designer is related to the user interface, so extending the document elements of the Document object model requires extending their ability to draw graphics so that designers can draw new types of document element graphics.

For the design Document Object model, the document base element can be defined in three aspects, document loading and saving, user interface-related interfaces, and maintaining the interface of the Document object tree.

Loading and saving of documents
Design documents can be saved as binary documents, plain text documents, and other formats, which are recommended for use in XML document formats. The advantage is

The design Document Object model and the XML Document Object model belong to the Document Object model, both the principle and the structure are very similar, the design document element and the XML document element can exist one by one corresponding relations. Therefore, it is natural to use XML documents to load and save design document objects, which is easy to implement.
XML documents are the International standard document format, very radical, other applications can easily use the designer generated files, simplifies the designer and other application system data interface.
There is already a standard XML document parser and an XML Document Object model, so you don't have to process XML documents yourself, simply call the standard library to load the XML Document Object model, and then build the design Document Object model according to the one by one corresponding relationship.
Using an XML document helps maintain compatibility between versions of the designer. As long as the XML document structure does not change significantly, the lower version of the designer can load the document generated by the high version of the designer, and the same high version of the designer will easily load the lower version of the designer-generated documentation. If you use binary file format, the designer needs to write a preprocessor for different versions of the design document, which is cumbersome and difficult to achieve upward compatibility.
When you save object data to an XML document, you save it in two ways, saving it to an XML attribute and saving it to an XML element. When you specify that an XML element is used to hold object data, when you save to an XML attribute, each property of the object is saved to the XML attribute of the specified name, and when you save it to an XML element, an XML child element with the specified name is added under the current XML node. The property value is then saved to an XML child element. The XML fragment generated in both of these ways is

<element attributename1= "value1" attributename2= "value2"/>

And

<element >
<attributename1>value1</attributename1>
<attributename2>value2</attributename2>
</element>

In these two ways, I suggest choosing the second, which is due to

If you save to an XML attribute, when the object property is more than that, the XML document that you output with the indentation will be wider, and the horizontal scroll bar will appear in the view, which is not conducive to reading. When you save to an XML element, the XML document is not very wide and easy to read.
If multiple lines of text are saved to an XML attribute, they are generally not saved in multiple lines of text and are not conducive to reading. When saving to an XML element, the saved text is close to the actual text and is easy to read.
If you save to an XML attribute, the Save mode can only be a property string, and the way you save it to an XML element is easy to extend.
Although XML documents are saved to XML attributes in a smaller way than they are saved as XML elements, the XML document format is designed to make it easier to save data and exchange data, regardless of whether the document is redundant, so we choose to save the way without caring about the size of the XML document. and the general design document content is not much, to the current computer hardware conditions do not care about the size of the XML document.
When the designer loads the design document from an XML document, the XML Document Object tree is generated first, and then the design Document object tree is generated based on one by one corresponding relationships, at which point the information saved from the XML element is required to determine that the XML element corresponds to that design document element, which the designer can judge from the XML element name. can also be judged from an XML attribute, here I use the XML element name to judge, first of all, for an XML element, to get its name is more convenient than to get a property value, followed by the XML name is inevitable, and certainly not empty, and XML attributes may be missing for some reason, XML names are more stable than XML attributes.

Based on the above understanding, when the XML document is used as the saving method, the design base element needs to define two virtual functions, one to load the object attribute data from the XML document and the other to save the object data to the XML document. While other document element objects overload these two functions as needed to implement their own operations to load and save object properties, you also need to save child element data to XML documents and load child elements from XML documents for container elements. Of course, in the practical application also need to define some auxiliary members to help load and save XML documents.

Designer-generated XML documents are typically saved in a file format, which can be stored in a database or uploaded to a variety of servers as needed. If you save it directly to the database, all of the designers in the application system are editing the same document version and can be applied immediately once you save it.

User interface-related interfaces
Designer needs to draw a document view, you need to design the Document Object model to provide support. Therefore, the basic elements of a document need to define two types of generic interfaces, one that is related to the drawing of documents, and one that handles the mouse keyboard event-related interfaces.

Drawing document-related interfaces
Most document elements need to draw content in the document view, so they need to overload the interface that draws the document, which has two functions, one that computes the size of the element, generally named Refreshsize, and the function that draws the element, generally named Refreshview.
The general designer specifies the size of the element, and the element itself does not need to calculate its size, but some elements may be automatically sized according to its contents, so the function refreshsize that computes the element size needs to be overloaded from the dynamic setting size. Automatically setting the size may only set the width or height of the element, or it may be set both its width and height. The same element may not be set automatically in one state, and the size needs to be set automatically in another state. All of these operations need to be done in the Refreshsize function.

General design elements need to be drawn in the document view, which requires overloading the Refreshview function, This function parameter contains a System.Drawing.Graphics object that the element needs to use to draw its own specific content, possibly drawing text, pictures, or other graphics.

When all the document elements implement an interface that is equivalent to drawing documents, a complete view of the design document is plotted under the designer's schedule. When you extend a designer, you need to overload the Refreshview and Refreshsize functions to implement a new display style when you need to specify the elements of a new display style, at which point the extended designer can display the new style's document view.

Handling Mouse Keyboard event-related interfaces
The main process of mouse events in the designer is that the document base element can define virtual functions that handle mouse events, and names can be Handlemousedown, Handlemousemove, and Handlemouseup.

To facilitate document element processing of mouse coordinates, the designer first converts the mouse cursor coordinates to the Handlemouse function of the document element, converting the coordinates of the mouse cursor in the view area to the relative coordinates within the document element, that is, relative to the upper-left corner of the element.

The designer relies on mouse events to implement the drag-and-drop operation of the design elements to achieve an interchangeable design experience. A typical application for mouse drag-and-drop operations is to use 8 control points to edit the boundary of an element. When an element boundary is rectangular, 8 control points are distributed over the midpoint of the four and four sides of the bounding rectangle of the element, and the mouse cursor style is modified when the mouse is moved to the 8 point, and when the mouse cursor is over a control point, the user presses the mouse button to start the mouse drag and drop operation. Drag-and-drop will display a dashed border, when the mouse button is released to drag the end of the operation, at this time the designer to modify the dragged elements of the rectangular boundary.

Some document elements do not have a standard mouse drag and drop operation, for example, for a container element, its internal mouse drag and drop does not move the object but instead draws a selection rectangle to select several child objects; for the table element, the mouse drag on the table line is the height of the table row and the width of the table column. , and the endpoint position is modified for the segment.

When the user accidentally presses the mouse button, or simply select an element and do not want to drag and drop the mouse, at this time you can use a parameter System.Windows.Forms.SystemInformation.DragSize to determine whether to drag and drop the mouse. When the mouse button pressed, the designer locked the mouse, if the mouse button pressed after the mouse movement distance beyond the range of dragsize, it means that the user is to drag and drop the mouse operation, at this time the real mouse drag and drop operation. If the mouse button from press to release when the mouse movement distance is always not beyond the range of dragsize, it means that the user does not have the intention of dragging and dragging the mouse. Such judgments allow the designer to tolerate some misuse of the user.

The designer also handles mouse double-click event handling, and for some elements that contain text, the user double-clicks the element, and a text entry box is displayed in Design view to directly edit the object's textual content. You can define an interface ilabeleditable, when the user double-clicks an element, the designer discovers that the element implements the Ilabeleditable interface, displays a text input box dynamically in Design view, and then calls the members of the interface to edit the object text directly.

Maintain Document Object Tree
The document base element defines a number of interfaces to be used to maintain the Document object tree. To define the Ownerdocument property to specify the document object in which the element is located, define the parent property to indicate the parents of the element, and define the Items property to indicate the child element list for that element. For container elements, you also maintain a list of its child elements.

As the root node of the document tree, the design document object is responsible for maintaining the whole object tree, including the whole loading and saving of the document, drawing the whole document, traversing the whole object tree structure entrance, and providing the interface for the script. It is the entry point to access the Document object tree.

Some of the more basic document element types
You can derive some of the more basic document element types from the document base element. These comparison-based document element types can include

The base type of the rectangle element, the type name is Designrectangleelement, and the bounds of most elements in the design document are rectangles, so defining the base type of the rectangle is a common basis for elements of these rectangular types. The rectangle element base type implements the ability to modify element position and size by using a 8 point control point, and the mouse drags the mouse over the object boundary to move the element position. The margin information between the content and the boundary is also defined.

Segment type, type name is designlineelement, design document Some elements are displayed as line segments, so defining the segment type as the base class for these element types, the segment type defines the position of the two endpoints, the display style of the segment, the label document, and so on. Mouse events are also overloaded, allowing the user to use the mouse to drag the two endpoints of a segment to modify the coordinates of the segment's endpoints. In addition, you will overload the hit operation to determine whether a coordinate is hitting a segment object, and if the specified point is less than one of the vertical distance of the line segment, and the point hits the line segment in the drag point on one of the segment's endpoints, it is not hit.

container element type, the type name is Designelementcontainer, the element can contain several child elements, it is derived from designrectangleelement, so its boundary is rectangular. The mouse drag-and-drop operation in the container is not a moving container, but dynamically draws a selection rectangle, when the drag-and-drop operation is completed, according to the selection rectangle to set the selected state of the child elements. There are two ways to select a child element according to the selection rectangle, one of which is if the child element boundary and the selection rectangle are glued, and the other is selected if the child element is completely inside the selection rectangle. The container element performs a rectangular overlay operation after the child element is drawn, and then calls the Refreshview member of the child element.

With the title container element, the type name is Designcaptioncontainer, the element is derived from the container element, can contain several child elements, but it has a title bar at the top, can display text, the user uses the mouse to drag the title bar can modify the position of the element. In addition, it implements the Ilabeleditable interface, which allows you to edit the title bar text directly when the user double-clicks the title bar.

Text elements, the type name is designtextelement, many document elements are simply display text content, then define the text elements as a common basis for these simple display text content elements. It derives from Designrectangleelement and also implements the Ilabeleditable interface for direct editing of text content. The text output angle control is also supported, where the text is drawn with an arbitrary angle of rotation at the center of the element as the origin. When you draw text elements with angled text, you need to temporarily modify the transformation matrix of the drawing object graphics to set the drawing angle.

Enhances the text element, the type name is Designtextelementext, the element derives from the designtextelement, and the text output format is enhanced, which supports line spacing and character spacing, as well as alignment of the right edge of the text. Displays for large pieces of text, including Chinese characters and English characters, and some programs do not align the right edge of the text. For example, ie, Notepad, and so on, because the Chinese characters and English characters are not the same width. The width of the contents of each line is different from the number of Chinese characters, so it is easy to make the text width different, so when the left edge of the text is aligned, its right edge is likely to be uneven. However, when MS Word displays a large piece of text, its text is aligned to the left and right edges, correcting the width of the text by inserting additional user-aware character spacing when the text is displayed. The enhanced text element uses this principle to align the right edge of the text.

Table elements, the type name is Designtableelement, and the table element is a complex container element that contains table rows (designtablerowelement), table columns (DESIGNTABLECOLUMNELEMETN), and cells ( Designtablecellelement) object in which cells can be laterally merged and vertically merged. Tables that contain table rows and cells are also container elements, and users cannot directly modify the cell size position, but only the height of the table row and the width of the table column to modify the cell's size position. A cell is also a container element, so you can place several child elements within a cell. In many cases, cells simply display simple text content, so cells define properties for displaying text content, and also implement ilabeleditable interfaces to facilitate direct editing of cell text content.

Picture element, the type name is Designimageelement, and it is derived from Designrectangleelement for simple display of a picture. Because the Picture object (System.Drawing.Image) uses an unmanaged resource, the picture element implements the System.IDisposable interface.

It also defines elements that simulate drawing windows underlying controls, including text labels, buttons, radio boxes, check boxes, text boxes, lists, the following lists, combo boxes, progress bars, and forms. You can easily simulate a form designer based on these elements.

Draw a document view
One of the main tasks of the designer is to draw a document view. The drawing process is typically

The designer control overloads its OnPaint member or bound Paint event.

When the operating system needs to repaint the designer control, it triggers its paint event.

The designer obtains the System.Drawing.Graphics object that the drawing graph uses and a clipping rectangle that represents the drawing area ClipRectangle, and then calls the Document object's Refreshview function as a parameter.

The Document object makes an initialization effort, then traverses the object tree structure, finds all the document elements that are glued to the clipping rectangle, and invokes their Refreshview function, allowing each element to draw its own content.

When all work is finished, the document view is drawn.

The designer draws a document is a problem is flashing, when the user scrolling view and update the view, the user interface is very easy to flicker, too much flicker will be more serious impact on the use of users. About the principle of flicker I have written an article to discuss it (click to view). Because the design document is a more complex document, drawing the entire document view is a lot of work and takes a long time to draw, so you need to use a variety of optimizations to reduce the drawing time and flicker.

A permanent way to blink is to use a double buffering technique. When you draw a graphic, you first draw the graphic into an in-memory BMP picture, and then draw the BMP picture to the user interface. This method minimizes flicker, and in. NET in the use of double buffering is also relatively simple. But I do not use double buffering technology, there are two reasons

Double buffering actually increases the workload of the entire drawing document and prolongs the drawing time. When the user scrolls the view, the view is "heavy" and the user interface is unresponsive.

Double buffering masks the deficiencies of the program. The developer can determine whether the drawing operation needs to be optimized and the effect is optimized based on the degree of flicker. But double buffering eliminates flicker, and developers have no immediate need to optimize drawing operations, fueling developers ' laziness. When the program draws a graphic slowly, it is hard to see the possible cause of the problem from the surface.

In fact, the designer does not use double buffering at development time, but uses double buffering when publishing.

Because the designer uses the rectangular coordinates method, therefore each element has the mutual covering relation, when has the large area coverage, when draws the document to need to be optimized for this situation to increase the speed of drawing the document, reduces the computer screen flicker. For the coverage of the optimization can be a rectangular overlay operation, for the rectangular overlay operation, I have another article on this description (click to view). When the designer draws an element, it first makes a rectangular overlay operation for the element, and the result of the operation is passed as a parameter of the Refreshview function, and when the content of the document element is more, it can reduce the plotting amount and improve the drawing speed according to the result of the rectangular overlay operation.

Design view should also provide zoom display, you can enlarge the Design view to more clearly show the details, you can reduce the design view to overall grasp the entire document. GDI + has a transformation matrix that makes it easy to zoom in on the Design view. However, all the mouse coordinate data must be scaled accordingly.

Design a View Control
The Design view control is the display interface of the designer in the user interface. It is a standard Windows control that derives from System.Windows.Form.UserControl. The user uses the mouse and keyboard to edit the document in the control, which overloads the onmousedown, OnMouseMove, and ONMOUSEUP members and wraps the mouse message for the design document object. Overloaded the OnPaint member to update the document view. Overloaded OnDoubleClick for textual content that attempts to edit document elements directly.

When the user sets an element to be the current element, the Design view control scrolls as needed so that the current element appears in the viewable area. If the current element size is less than the viewable region size, the processing is simpler, as long as the scroll position is computed based on the visual region size and the position of the element in the view. If the width or height of the element is greater than the width and height of the viewable area, additional judgment is required to avoid jumps when scrolling.

Eagle Eye Technology
A good designer should support Eagle Eye technology, the so-called Eagle Eye, popular is small map, it is generally placed in the program interface of a corner, its size is not large, the main function is to let people glance at a glance can generally understand the structure of the entire document, and through the mouse click Fast Scrolling document. As for Hawkeye, I have written an article devoted to it (click to view).

Summarize
Using the handy WYSIWYG designer is a complex program that requires rich related development experience, involving graphics, document object models, and other programming techniques, and is an organic mix of a variety of programming techniques that typically require tens of thousands of of lines of code to be implemented. Therefore, its technical threshold is relatively high, the general small companies do not have the ability to complete, even if some companies have the strength to develop, it will take several months, it may affect the normal project development of the company. But as various information systems become more flexible, they must be equipped with good designers, and if there is a powerful designer to use, processing this system configuration is a multiplier, so many developers have to face the technical problem of development designer.

In view of this, Xdesigner software studio with its own rich experience in the design of the designer developed Xdesignerlib, a designer middleware, that is, a designer semi-finished products, this middleware to achieve the WYSIWYG design of the entire basis of the designer, and provides a very full extension interface. Developers understand that Xdesignerlib can then implement a powerful designer by simply writing a simpler thousands of-line code. With Xdesignerlib, developers do not have to deal with very tedious low-level details, just understand the Xdesignerlib interface and extend it. In fact, the Xdesigner studio has developed a variety of designers are based on Xdesignerlib. For Xdesigner Software Studios and Xdesignerlib, please visit