A three-in-one form tool in the electronic form Series

Yuan Yongfu (http://www.xdesigner.cn)
The form tool I am developing is a three-in-one form tool (click to download its conceptual version). It also integrates the design functions of WinForm, HTML, and XSLT, and uses it, for the same form template, you can generate WinForm, HTML form, and XSLT form without modifying it.
WinForm
The form style designer is similar to the WinForm Form Designer of VS. NET. It stores the absolute coordinate information of the form elements, so it is easier to generate the WinForm interface based on the form template. The form Element type corresponds to the WinForm control type one by one. It is easy to process.
The form execution engine generates a WinForm interface based on the form design. The process is relatively simple. First, the form Document Object Model is used to load the form design document, and then all the form Element objects in the form document are traversed, generates a corresponding WinForm Control for each form Element Object and adds it to a container.
When the WinForm interface is generated, the form execution engine adds some features that are easy to use, for example, the focus attribute of each WinForm control is set based on the order of form elements in the design interface from left to right from top to bottom. When a text tag is generated, if a data input box following the text tag has a text link, the generated text tag control is bound to the data input box, when you click the text Label control, the focus is set to the data input box. The behavior is similar to the Label element in the HTML document.
When the WinForm interface is generated and put into operation, the form engine monitors the form data entered by the user. If the user modifies the form data, it checks the list of associated information between form elements in the Form document, execute the form Element dependency and the form element numeric expression as needed to achieve the dynamic characteristics of the form.
When a user saves data, the form engine traverses the control on the WinForm interface of the entire form to collect form data, fill the form data in an XML document based on the XPath attribute specified by the Data Reference attribute of each form element, and then provide the XML document containing the data to the application system. The application system can use this XML file for subsequent processing, such as saving or updating the database.
Because the form design document generated by the form tool adopts the XML format, other non. NET application system can dynamically generate various types of WinForm controls based on this XML file, and dynamically generate the form interface, thus expanding the application scope of form tools in the C/S system.

Html form
Although the form style designer uses drag-and-drop controls to design the user experience and uses absolute coordinates to set the positions of form elements, the form engine can still generate HTML documents based on form documents.

HTML typographical Style
The form elements in the HTML document can be located using absolute coordinates, that is, adding "position: absolute; left: xxx px; top: xxx px" to the style attribute of the element ", in this way, you can use absolute coordinates to locate HTML elements. This can easily generate HTML documents based on form documents, but this simple processing is not perfect. It may cause the following Disadvantages.

1. Forms with absolute coordinate positioning seriously interfere with the integration of form tools and application systems. In an application system, the form interface is usually displayed as part of the application system interface. There are many HTML elements not part of the form tool on the application system interface, the form elements with absolute coordinates can easily overwrite the non-form elements, making the interface of the application system unusable.
2. It is difficult to modify the HTML form code that uses absolute coordinates. In a few cases, the HTML form generated by the form tool needs to be manually fine-tuned. It is difficult to modify the HTML code of the form element if the absolute coordinate is used.
3. Dynamic Effects of some form pages cannot be implemented. If the form Element dependency exists in the Form document, the available states of some form elements depend on those of other form elements. The form tool can implement a special effect so that the visible state of some elements depends on other form elements. If absolute coordinates are used for definition, when some elements are invisible due to dependency, a large blank area may appear on the user interface, affecting the appearance of the user interface.

To solve the above problem, the form tool will generate an HTML form in streaming layout. The generated HTML code is very concise, and "position: absolute" is not used to use absolute positioning form elements.
Form documents use absolute coordinates to locate form elements, but HTML documents use streaming typographical styles. These two typographical styles are completely different, in the form tool, a special algorithm is used to convert absolute coordinate layout into a stream layout style, optimize the IE browser, and generate corresponding HTML elements for each form element. After testing, the HTML document display style generated by this processing method is very similar to the design style of the form. This solves the problem caused by the absolute coordinate method.
There is a special form Element type in the form element, that is, the single/check box button group. This form element contains several single/check boxes. This form element is edited as a whole during design, and is also created as a whole in the generated WinForm form. However, in the output HTML form, you need to split the internal project and output it separately to generate several <input type = "radio"> or <input type = "checkbox">, and these projects may not be continuous output.

Dynamic HTML page Effect
In the HTML form, the dependencies and numeric expressions of the form elements that have the same effect as those in the WinForm form must be implemented by using the JavaScript script. Therefore, form tools need to output JavaScript scripts to maintain the dynamic effect of forms when generating HTML forms.
Generally, form tools can piece together a JavaScript script for each form element based on the list of element link information in the form document, and then bind it to the event attribute of the HTML element. For example, you can add form-based code to the onblur event of the <input type = text> element, add the code for processing the form Element dependency in The onclick attribute of the <input type = checkbox> element. The generated HTML document contains a large number of JavaScript scripts. In this way, the dynamic Special Effects of HTML forms can be implemented, but there are still some shortcomings. Its main disadvantages are:

1. The size of the generated HTML document is greatly increased. The generated HTML code is bloated and difficult to read and process, which may lead to slow loading of large forms by the application system.
2. In a few cases, developers need to manually modify the form HTML document for fine-tuning. If the HTML document is filled with a large amount of incomplete JavaScript code, it is difficult to read and modify the HTML document.

According to common programming specifications, a large number of program codes with the same functions should not appear. In the form HTML code, a large number of JavaScript script codes that repeat the same function do not comply with the common programming specifications. This JavaScript code is difficult to maintain and is not manually modified in a centralized manner.
To solve these problems, we should minimize the JavaScript scripts generated in HTML documents. In addition, the functions to be implemented by the JavaScript script are extracted, the common JavaScript script is compiled, and separately saved to an external js file. In this way, the HTML document uses <script src = xxxx> to reference General JavaScript scripts. In addition, some control information is stored in extended attributes of HTML elements by using the non-strict features of HTML documents.
In this way, when a report tool generates an HTML form, it adds some extended attributes to some HTML elements, for example, the idlist extension attribute is used to describe that the specified number element is bound to the project. The form tool also uses common JavaScript Functions to achieve the dynamic effect of HTML forms. The generated HTML document does not contain much JavaScript code. The generated HTML code is very concise, small in size, and easy to read and modify. In addition, it is easy to maintain because JavaScript code is concentrated together.

Browser compatibility
After testing, the HTML form generated by the form tool can run normally in IE6.0, enabling automatic form Element dependency and In-form expression operations. However, in Firefox2.0, the form interface can be displayed normally, but it does not have any dynamic features and cannot execute the form Element dependency and In-form expression operations. It may be because Firefox only supports standard HTML, it does not support extended attributes. Therefore, we recommend that you use the form tool in IE6.0 or later. If no element dependency or expression is defined in the form, you can use other browsers.
XSLT forms are based on HTML forms, so this browser compatibility description is also applicable to XSLT forms.

XSLT form
Form tools can also generate XSLT forms, which are based on HTML forms. The XSLT form is first a standard XSLT document. The data of form documents can be saved as XML documents. The XSLT form generated using the form tool can use this data XML document to execute XSLT conversion and generate an HTML document for displaying data.
For example, for a form, the generated XML file segment is

<XFormValue Name = "DataBaseDemo2">
<Employees>
<Address> fosun Gate No. 245 </Address>
<BirthDate> 1968-12-8 </BirthDate>
<City> Beijing </City>
</Employees>
</XFormValue>

A text box is defined during form design. Its data reference is Employees/Address, and the XSLT segment generated by the form tool for this text box is

<Input type = "text">
<Xsl: attribute name = "value">
<Xsl: value-of select = "Employees/Address"/>
</Xsl: attribute>
</Input>

If you convert the XML and XSLT parts into XSLT, a string is generated.

<Input type = "text" value = "fosun Gate No. 245">

This string is the standard HTML code. This HTML code displays a text input box containing data in the browser.
In an application, convert form data XML documents and XSLT forms into XSLT to generate HTML pages that contain data. This process includes three technologies: XML, XSLT, and HTML, which are both international standards and cross-language cross-platform technologies. Therefore, form tools use HTML forms and XSLT forms as other non. the B/S system of NET provides support, such as asp, Java, and PHP.
The form tool can output XSLT code for the text box, single/check box, single/check box button group, list box and drop-down list. To construct a very flexible XSLT form.
In practical applications, the form tool can design the form in advance, generate HTML forms and XSLT forms, and save them in the specified position of the application system, such as a directory or database, the application system loads HTML forms or XSLT forms from a specified position, so that the forms designed by the form tool can be used in the application system. In this way, based on. NET form tools can work collaboratively with other B/S systems that use any technology (including asp, Jsp, J2ee, php, and so on, extend the application scope of the form tool in the B/S system to the maximum.

Next, let's talk about how to process form data.