How to use C # To write a WYSIWYG designer

ArticleDirectory

• Document loading and saving
• User Interface Interfaces
• Maintain Document Object Tree

Summary

This article discusses how to use C # To compile a WYSIWYG designer, analyzes the basic principle of the designer, possible technical problems, and how to call it.. NET Framework to implement a designer.

Copyright Notice

This article is written by the xdesigner software studio. The xdesigner software studio has the copyright to this Article. repost the article to indicate the source and retain this copyright statement.

Preface

With the development of computer information systems, the system structure requirements become more and more flexible.ProgramHighly configurable, the workflow of the application can be changed at will, and the user interface can be changed at will. In the face of this increasing flexibility, it is impossible to modify the programCodeTo achieve this, the application system itself needs to be profoundly changed, and requires strong scalability and flexibility. In addition, it is also very important that Z is used to modify the system configuration. A large part of these system peripheral customization tools are WYSIWYG designers. For example, the workflow preparation tool, winform or webform interface designer, and the report designer is also a typical peripheral Customization Tool.

The WYSIWYG designer is a very complex program. First, it requires complex graphical user interface programming, including drawing graphics and processing mouse and keyboard events, it also protects against flickering screens. There is also data maintenance and processing in the background, including user interface and data synchronization, data organization and arrangement, and processing of loading and saving documents. In addition, these processing processes can be considered entangled. Therefore, we need to carefully analyze the design and code carefully.

This article describes how to implement a WYSIWYG designer. For more information about this article, see the author's article-how to use C # To compile a text editor.

Designer type

The designer can be divided into two modes based on the user interface and user experience. One is based on Cartesian coordinates, and the other is based on Streaming layout. Microsoft's Visio is a typical Cartesian coordinate method, while word is a stream typographical method, and vs. Net's webform Form Designer is a combination of the two.

In the Cartesian coordinate designer, the design element uses XY coordinates to locate in the design view. For a rectangular element, it is usually located by specifying its position in the upper left corner, the designer needs to specify the position of the design element and sometimes set its size. Specify the XY coordinates of two endpoints for a line segment. The designer only needs to set the location and size of each element to complete the basic structure of the design document. The rest is to set the content of each element.

In the streaming typographical designer, the design element does not need to specify the position, which is generally based on left to right, from top to bottom the arrangement principle is filled into the design view (but sometimes it becomes another arrangement principle ). The position of the design element is calculated dynamically. The streaming designer may also need to input text directly on the keyboard and display the cursor. Stream typographical designerCompositionWord processor.

The user interface and user experience of the two designers are different, so the program processing method is different. The Cartesian coordinate designer has design elements that overlap with each other, which affects the drawing, in addition, a large number of mouse drag operations are required, and mouse events must be handled carefully, but not many Keyboard Events are handled. The elements in the streaming typographical designer do not overlap with each other. Therefore, it is easy to draw and there are not many mouse events to handle, but there are many Keyboard Events to handle. In addition, you also need to process the cursor. However, the document object models of the two designers are similar.

In this article, we will only discuss the design of Cartesian coordinates.

Functions of the designer

I personally think that a designer should implement the following functions:

1. Design document loading and saving. The designer can save the content of the current design to a document. This document can be saved to a file or saved to a database or a server. The designer can load documents to completely reproduce the previous design results.
2. The designer can quickly and accurately draw a document view. When the view size exceeds the design area, a scroll bar should appear on the user interface for scrolling.
3. Currently, there is a interchangeable design experience. You can drag and drop the mouse to change layout settings such as the element location and size. When you change the element layout or some attributes, you must update the document view immediately, the update area should be as small as possible.
4. Supports WYSIWYG design experience. When the designer needs to output images or prints images, the design view in the designer should be consistent with the output image.
5. Minimize screen flashes. This requires optimization when drawing a graph or updating a view to complete the painting operation as soon as possible.
6. If the designer needs to be extended, the designer should provide sufficient scalability. developers can add new features based on the designer, allows the designer to display the document view of the new style. The new document structure can also be processed when the document is loaded and saved.
7. If you need to support VBA scripts, you can write a VBA script to control the designer, including the document content.

Document Object Model

For computer programs, the background determines the foreground, and the background of the designer is the Document Object Model. I believe you have some knowledge about the Document Object Model. When we use JavaScript scripts on the web page, we access the HTML Document Object Model. When we operate on XML documents, we access the XML Document Object Model.

W3C International defines the Document Object Model as follows (from 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 of documents. the document can be further processed and the results of that processing can be ininitialized back into the presented page. this is an overview of dom-related materials here at W3C and around the web.

My personal English translation is as follows:
The Document Object Model is a language-neutral interface or platform that can be used by programs or scripts to access and update structured documents. These documents can be further processed, and the processing results can form a valid page. This is W3C's general view of the principles of the Document Object Model on the web.

I personally think that for programming, the main content of the Document Object Model is to use object-oriented programming ideas in the face of complicated documents, use objects in a program world to map each specific part of the document. When a document is loaded, you can parse the document and map its content to objects. At this time, the application can modify the data of these objects. When saving the document, these object data can be organized and saved to the document in a specific format. In this way, the program accesses the document by accessing the document object, or you can modify the Document Object to modify the document, so as to process complex documents. The Document Object Model is a standard operation mode for processing complex documents.

The designer processes complex documents and therefore uses the Document Object Model. The Document Object Model can be divided into three parts: basic document elements, document objects, and various types of document elements derived from basic document elements.

The basic element of a document is the most basic object of the entire Document Object Model (just as the object type is.. Net object group), which defines a common interface for document elements, which is generally defined as an abstract class and the type name can be designelement.

A document object is a top-level object of the Document Object Model. It contains the content of the entire document. Its type name can be designdocument.

Document elements of various types, derived from the basic element types of documents, are used to describe various actually existing elements in documents. A document element can be defined to accommodate other document elements, which are container elements. In fact, the document object is the largest container element. Because the Document Object Model contains container elements, all objects constitute a tree structure called the Document Object Tree, where the root node is the document object. Various document elements are the active elements of the Document Object Model. Most of the work of extending the Document Object Model is to expand these document elements. To expand the document elements, you need to expand their two functions, one is the loading and saving of documents, and the other is the data stored in the documents themselves.

The Document Object Model can be related to or irrelevant to the user interface. For example, the XML Document Object Model does not have a user interface. The Document Object Model of the designer is related to the user interface, to expand the document elements of the design document object model, you also need to expand their drawing capabilities so that the designer can draw new document element graphics.

For the Document Object Model Design, the basic elements of the document can be defined in three aspects: file loading and storage, user interface interfaces, and maintenance interface of the Document Object Tree.

Document loading and saving

Design documents can be saved as binary documents, plain text documents and other formats. We recommend that you use the XML document format here. The advantage is that

1. Both the Design Document Object Model and the XML Document Object Model belong to the Document Object Model. The principles and structures of the two are similar. The design document elements and XML document elements can have a one-to-one correspondence relationship. Therefore, it is natural to use XML documents to load and save design document objects.
2. XML is an international standard document format, which is very open. Other applications can easily use the files generated by the designer to simplify the data interfaces of the designer and other application systems.
3. The standard XML document parser and XML Document Object Model already exist. Therefore, you do not need to process the XML document by yourself. You only need to call the standard library to load the XML Document Object Model, then generate the Design Document Object Model Based on the one-to-one relationship.
4. Using XML documents helps maintain compatibility between different versions of the designer. As long as the XML document structure remains unchanged, the lower-version designer can load the documents generated by the higher-version designer, the designer of the same higher version can easily load the documents generated by the designer of the lower version. If the binary file format is used, the designer needs to write the pre-processor for the design documents of different versions, which is troublesome and difficult to achieve Upward compatibility.

There are two ways to save object data to an XML document: Save to XML attributes and save to XML elements. When an XML element is specified to save object data, if it is saved to the XML Attribute, the data of each attribute of the object is saved to the XML Attribute of the specified name, when saved to an XML element, an XML sub-element with the specified name is added to the current XML node. Then, save the property value to the XML sub-element. The XML snippets generated in these two methods are

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

And

<Element>
<Attributename1> value1 </attributename1>
<Attributename2> value2 </attributename2>
</Element>

In the face of these two methods, I suggest selecting the second one for the reasons:

1. If the object is saved to the XML Attribute, the XML Document Output in indent mode will be wider when the object attributes are large. A horizontal scroll bar will appear during viewing, which is not conducive to reading. When saved to XML elements, the XML document is not very wide and easy to read.
2. If multi-line text is saved to the XML Attribute, it is generally not saved as multi-line text, which is not conducive to reading. When saved to an XML element, the saved text is similar to the actual text, which is easy to read.
3. If an XML Attribute is saved, only one attribute string can be saved, while the XML element can be easily extended.
4. Although the XML document generated by saving to XML attributes is smaller than the XML element, the XML document format is designed to facilitate data storage and exchange, it doesn't matter whether the document is redundant, so we don't have to care about the XML document size when selecting the storage method. In addition, there is not much content in the general design documents, so you do not need to care about the XML document size based on the current computer hardware conditions.

When the designer loads a design document from an XML document, it first generates the XML Document Object Tree, and then generates the design document object tree based on the one-to-one correspondence, in this case, you need to determine from the information saved by the XML element that corresponds to the design document element. The designer can determine from the XML element name or an XML Attribute, here, I use the XML element name for determination. First, it is easier to obtain the name of an XML element than to obtain an attribute value. Second, the XML name must exist and must not be empty, XML attributes may be missing for some reason. xml names are more stable than XML attributes.

Based on the above understanding, when an XML document is used as the storage method, two virtual functions need to be defined in the basic element of the design, one for loading object attribute data from the XML document, the other is to save the object data to the XML document. The element objects in other documents can be loaded and saved by the two functions as needed. For container elements, you also need to save the child element data to the XML document and load the child element from the XML document. Of course, in actual applications, we need to define some auxiliary members as needed to help load and save XML documents.

XML documents generated by the designer are generally saved as files. Of course, they can be stored in the database or uploaded to various servers as needed. If it is saved directly to the database, all the designers in the application system edit the same document version, and the application can be immediately applied once it is saved.

User Interface Interfaces

To draw a document view, the designer must design the Document Object Model to provide support. Therefore, the basic elements of the document need to define two types of common interfaces, one is the interface related to document drawing, and the other is the interface related to handling mouse and keyboard events.

Document plotting Interface

Most document elements need to be drawn in the document view. Therefore, they need to reload the interface for drawing documents. This type of interface mainly has two functions: one is the function for calculating the element size, which is generally named refreshsize, A function is used to draw elements. It is generally named refreshview.
Generally, the designer specifies the size of an element, which does not need to be calculated. However, some elements may automatically set the size based on their content, therefore, the refreshsize function for calculating the element size needs to be reloaded to automatically set the size. The automatic setting of the size may only set the width or height of the element, or set the width and height of the element at the same time. For the same element, the size may not be set automatically in one State, but for the other State, the size needs to be set automatically. All these operations must be completed in the refreshsize function.

The general design elements must be drawn in the document view. In this case, the refreshview function needs to be reloaded. This function parameter contains a system. drawing. graphics object. The element needs to use this graphics object to draw its own specific content, which may be text, image, or other graphics.

When all document elements implement the interface equivalent to document plotting, a complete design document view is drawn under the scheduling of the designer. In the extended designer, if you need to specify the elements of the new display style, you need to reload the refreshview and refreshsize functions to implement the new display style, the extended designer displays the document view of the new style.

Interface for handling mouse and keyboard events

The designer mainly processes mouse events. The basic elements of the document can define virtual functions for processing mouse events. The names can be handlemousedown, handlemousemove, and handlemouseup.

To make it easier for document elements to process mouse coordinates, the designer first converts the mouse and cursor coordinates when calling the handlemouse function of document elements, to convert the coordinates of the mouse cursor in the view area to the relative coordinates inside the document element, that is, the relative coordinates relative to the upper left corner of the element.

The designer relies on mouse events to drag and drop design elements to implement a interchangeable design experience. A typical application of the drag and drop operation is to use eight control points to edit the element boundary. When an element boundary is a rectangle, eight control points are distributed on the four corners of the boundary rectangle and the midpoint of the four edges, when the mouse moves to these 8 points, the mouse cursor style is modified. When the mouse cursor is at a certain control point, the user presses the mouse button to start dragging the mouse, the border drawn by a dotted line is displayed. When the mouse is removed, the drag operation ends. The designer modifies the border of the dragged element.

Some document elements do not carry out standard mouse drag operations. For example, for container elements, the internal mouse drag does not move the object, but draws a selection rectangle to select several child objects. For table elements, its online table dragging operation is to modify the height of the table row and the width of the table column, while the line segment is to modify the endpoint position.

When you accidentally press the mouse button or select an element without dragging the mouse, you can use the system parameter. windows. forms. systeminformation. dragsize to determine whether to drag the mouse. When you press the mouse button, the designer locks the mouse. if the distance between the mouse and the mouse is beyond the dragsize range, the user wants to drag the mouse, now, you can drag and drop the mouse. If the distance between pressing and releasing the mouse button is not within the dragsize range, it indicates that the user has no intention of dragging the mouse. Such judgment can allow the designer to tolerate user misoperations.

The designer also handles double-click event processing. For some elements that contain text, you can double-click the element to display a text input box in the design view to directly edit the text content of the object. You can define an interface ilabeleditable. When you double-click an element, the designer finds that the element implements the ilabeleditable interface and dynamically displays a text input box in the design view, then, the interface member is called to directly edit the object text content.

Maintain Document Object Tree

Many interfaces must be defined for basic document elements to maintain the Document Object Tree. To define the ownerdocument attribute to specify the document object where the element is located, define the parent attribute to specify the parent node of the element, and define the items attribute to specify the list of child elements of the element. For container elements, you also need to maintain its child element list.

As the root node of the Document Tree, document objects are designed to maintain the entire object tree, including loading and saving the entire document, drawing the entire document, and traversing the entire object tree structure portal, it also provides interfaces for scripts. It is the entry point for accessing the Document Object Tree.

Basic document Element Types

Some basic document element types can be derived from the basic document elements. These basic document element types can include

• The basic type of the rectangle element. The type name is "designrectangleelement". The boundary of most elements in the design document is a rectangle. Therefore, defining the basic type of the rectangle element serves as the common basis for the elements of these rectangle types. The basic type of the rectangle element enables you to use the control points of eight points to modify the element position and size. You can move the cursor to the element position by dragging the mouse at the object boundary. The margin information between the content and the boundary is also defined.

• The line segment type. The type name is designlineelement. Some elements in the design document are displayed as line segments. Therefore, the line segment type is defined as the basic class of these element types. The line segment type defines the positions of two endpoints, the display style and label document of a line segment. In addition, you can use the mouse to drag two endpoints of a line segment to modify the coordinates of the Line Segment endpoint. In addition, the hit operation must be reloaded to determine whether a coordinate hits a line segment object. If the vertical distance between a specified point and an offline segment is smaller than a certain parameter, and a point online segment. A line segment is hit in a drag-and-drop point on an endpoint. Otherwise, no line is hit.

• The type of the container element. The type name is designelementcontainer. This element can contain several child elements derived from the designrectangleelement, so its boundary is a rectangle. The drag operation of the mouse in the container is not to move the container, but to dynamically draw a selection rectangle. When the drag operation is complete, the selection rectangle is used to set the selection status of the child element. There are two ways to select a child element based on the selected rectangle. One is that if the child element boundary and the selected rectangular stick edge are selected, the other is, if the child element is selected only when the inside of the rectangle is selected. When a child element is drawn, the container element overwrites the rectangle and then calls the refreshview Member of the child element.

• The container element with the title and the type name is designcaptioncontainer. This element is derived from the container element and can contain several child elements, but it has a title bar at the top to display text, you can drag the title bar to modify the position of an element. In addition, it implements the ilabeleditable interface. When you double-click the title bar, you can directly edit the title bar text.

• Text element. The type name is "designtextelement". Many document elements simply display text content. Defining text elements serves as the common basis for these elements. It is derived from designrectangleelement and implements the ilabeleditable interface for directly editing text content. In addition, the text output angle control is also supported. When you draw a text, the image is rotated at any angle with the element center as the origin. When drawing a text element with an angle, you need to temporarily modify the conversion matrix of the graphic drawing object graphics to set the drawing angle.

• The enhanced text element with the type name "designtextelementext". This element is derived from designtextelement and enhanced the text output format. It supports line spacing and Character spacing, in addition, the right edge of the text is aligned. For large text segments, especially Chinese and English characters, some programs do not align the right edge of the text. For example, ie and notepad. This is because Chinese characters and English characters have different widths. The content width of each line of text varies depending on the number of Chinese and English characters. Therefore, when the left edge of the text is aligned, its right edge may be uneven. However, when MS Word is used to display a large text segment, the left and right edges of the text are aligned. It inserts additional characters that are difficult to detect when the text is displayed to adjust the text display width. Enhanced text elements use this principle to align the right edge of the text.

• A table element is a complex container element that contains table columns (designtablecolumnelemetn), table columns, and cell (designtablecellelement) objects, cells can be merged horizontally or vertically. The table contains table rows and cells as container elements. You cannot directly modify the size and position of cells. Instead, you can only adjust the height of table rows and the width of table columns to modify the size and position of cells. A cell is also a container element, so several child elements can be placed in the cell. In many cases, cells only display simple text content. Therefore, cells define attributes used to display text content. In addition, the ilabeleditable interface is implemented to conveniently edit the text content of cells.

• The image element with the type name: designimageelement. It is derived from the designrectangleelement and is used to display an image in a simple way. Because the image object (system. Drawing. Image) uses unmanaged resources, the image element implements the system. idisposable interface.

• Some elements are also defined. These elements can be used to simulate the drawing of Basic Windows controls, including text labels, buttons, single keys, 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.

Drawing Document view

One of the major tasks of the designer is to draw a document view. The rendering process is generally

1. The designer control reloads its onpaint member or binds the paint event.

2. The paint event is triggered when the operating system needs to re-draw the designer control.

3. The designer obtains the system. Drawing. graphics object used for drawing the image and a cut rectangle cliprectangle that represents the drawing area, and then calls the refreshview function of the document object as a parameter.

4. Initialize the Document Object, traverse the object tree structure, find all document elements that are glued to and cut the rectangle, call their refreshview function, and let each element draw their own content.

5. When all work is completed, the document view is drawn.

A problem encountered when the designer draws a document is flashing. When the user scrolls the view and updates the view, the user interface is easily flickering. Excessive flickering will seriously affect the user's use. I have written an article about the principle of flickering (click to view it ). Because the design document is a complex document, it takes a lot of work to draw the entire document view and takes a long time to draw. Therefore, various optimizations are required to reduce the drawing time and flash.

One way to flash is to use dual-buffer technology once and for all. When drawing a graph, first draw the graph to a BMP image in memory, and then draw the BMP image to the user interface. This method can minimize flickering, And it is relatively easy to use double buffering in. net. But I'm not using double buffering for two reasons.

1. Double Buffering actually increases the workload of drawing the entire document and prolongs the drawing time. When you scroll through a view, the view will be "heavy" and the user interface will be slow in response.

2. Double Buffering masks program deficiencies. Developers can determine whether the Drawing operation needs optimization and the effect based on the degree of flicker. However, the dual-buffer eliminates flickering, and developers do not have the urgent need to optimize the Drawing operation, which contributes to developers' laziness. The program draws graphics slowly, and it is difficult to see the possible causes from the surface.

As a matter of fact, the designer does not use dual buffering during development, but uses dual buffering during release.

Because the designer uses Cartesian coordinates, each element has a relationship that covers each other. When a large area of coverage exists, when drawing a document, you must optimize the process to improve the speed of drawing the document and reduce computer screen flickering. During the optimization of the coverage phenomenon, you can perform the rectangle overwriting operation. For the rectangle overwriting operation, I have another article to describe this (click to view ). When the designer draws an element, it first performs a rectangle overwrite operation on the element and uses the calculation result as a parameter of the refreshview function. When there are many elements in the file, you can use this rectangle to overwrite the result to reduce the number of images and increase the rendering speed.

The design view should also provide the zoom display function, which can zoom in the design view to display details more clearly, and narrow down the design view to grasp the entire document. GDI + has a conversion matrix that allows you to easily scale and display the design view. However, all the mouse coordinate data must be scaled accordingly.

Design View Controls

The design view control is the interface that the designer displays on the user interface. It is a standard Windows Control derived from system. Windows. Form. usercontrol. The user uses the mouse and keyboard to edit the document in this control. It reloads the onmousedown, onmousemove, and onmouseup members and packs the mouse message for the design document object. The onpaint member is overloaded to update the document view. Ondoubleclick is overloaded to directly edit the text content of the document element.

When you set an element as the current element, the design view control will scroll as needed so that the current element appears in the visible area. If the current element size is smaller than the visible area size, the processing is relatively simple. You can calculate the scroll position based on the visible area size and the position of the element in the view. If the width or height of an element is greater than the width and height of the visible area, additional judgment is required to avoid jumping during scrolling.

Eagleeye Technology

A good designer should support eagleeye technology. The so-called eagleeye is generally a small map. It is usually placed in a certain corner of the program interface, and its area is not large, the main function is to give people a glance at the structure of the entire document, and quickly scroll the document by clicking the mouse. I wrote an article about eagleeye (click to view it ).

Summary

Easy to use WYSIWYG designer is a complex program and requires rich development experience. It involves graphics, document object models, and other programming technologies, it is an organic mix of multiple programming technologies. It usually requires tens of thousands of lines of code. Therefore, the technical threshold is relatively high. Generally, small companies are unable to complete the process. Even if some companies have powerful development capabilities, it may take several months, which may affect the normal project development of the company. However, as various information systems become more and more flexible, they must be equipped with a good designer. If there is a user-friendly and powerful designer, processing such system configuration will get twice the result with half the effort, therefore, many developers have to face the technical difficulties of the Development designer.

In view of this, xdesigner software studio developed xdesignerlib based on its rich experience in designer development. A designer middleware is a semi-finished product of the designer, this middleware implements all the basics of the WYSIWYG designer and provides a very adequate extension interface. after understanding xdesignerlib, developers can compile thousands of simple lines of code to implement a powerful designer. With xdesignerlib, developers do not have to deal with complicated underlying details. They only need to understand the xdesignerlib interface and extend it. In fact, all the design tools developed by xdesigner are based on xdesignerlib. For details about xdesigner software studio and xdesignerlib, visit http://www.xdesigner.cn.

Xdesigner software studio 2006-8-21