today, in order to adapt to the changing needs, dynamic form designers emerge. It is mainly to meet the changing interface and improve the speed of development. For example: Some page customers may not be able to determine the page layout, the location of the control, in which case the display or not display, etc. may need to be changed at any time. The dynamic form designer can be used in a project to address these needs without changing the source code many times. Now share my design ideas of dynamic form designer and learn together.
Want to make a form designer, first of all to determine whether to do C/s or b/s. I consider the future direction of development is C/s to B/s conversion, so the choice of B/s direction, and do b/s than do C/s to be simple very much. Before you make a form designer, you need to implement a variety of controls to design the various properties of each control. So I chose to encapsulate the various controls in ext and make the controls that I needed.
First of all, say the function:
1. Includes some commonly used controls: text, hyperlinks, button, file upload, picture, text input box, multi-line text input box, date, Time, list box (ListBox), drop-down list box (divided into: can be paged and non-paged two kinds), check box, radio list, check list, Gridlist form. Of course, the designer should be easy to expand, and it will be very convenient to add the other controls when needed.
2. The control can be easily manipulated (cut, paste, copy, delete, position size adjustment).
3. It is very convenient to set the properties of the control. This requires changes to the control, as far as possible do not need to change the code, in the design to do a change can achieve the purpose.
4. Since some controls may need to implement some special functions, it is necessary to provide an interface for writing JS code.
(1) Text: Text control is very easy, mainly on the text control style and whether to hide the settings.
After saving, the effect of the interview:
2. Hyperlinks: Hyperlinks need to be able to set open the connection address, and open the way (this page opens, the new form opens, the mode form opens)
After saving, the effect of the interview:
3.button: The main way is to set the click button to run the method
In the scripting interface, the ability to write JS code. After saving, the following effects such as:
4. File upload: Ability to set the type of upload file, whether to upload multiple files, etc.
The effect of a post-save interview:
5. check box
Effect:
6. Picture:
Effect:
7. Input box: You need to be able to specify the type of data that can be entered, and can proactively verify
Effect
8. Multi-line text box
Effect:
9. Date input box: Need to be able to set the date format
Effect
10. Time input box: need to format the date
Effect:
The controls above are simple basic controls.
Next is the control that interacts with the data. These controls have the following requirements:
1. can set static number
2. The data can be read dynamically from the database through the specified parameters.
3. Can set the parameters of the query.
4. Can set the display of the field and display the way and can achieve linkage
1. List control (ListBox)
Set static data
To set Dynamic Data:
Effect:
2. Drop-down list box
3. A drop-down list box that dynamically reads the data to be paged
Effect:
4. Single-selection list
static data
Dynamic Data
Effect:
5. Check List
Effect:
6.grildList list (can set the AJAX address of the query, the number of parameters, the displayed column)
Effect
. NET Web development platform-form designer One (Web Edition)