Research on Intelligent BS Forms Drag-and-Drop Layout Generation Technology

B/S architecture is a new type of Web architecture developed from C/S architecture, which has the advantages of good compatibility, easy maintenance and low performance limitations compared with C/S architecture [20]. The client and server of the C/S architecture achieve point-to-point bidirectional communication through the TCP protocol, and data transmission is relatively safe. However, the client usually does not have cross-platform, and needs to be developed separately according to different operating systems, and there may be an incompatibility between different operating systems or different versions of the client, which not only increases the development cost but also creates a bad experience for users. At the same time, the client runs on the local computer, both to perform local services and share some of the server’s data processing work. For tasks that involve complex processes and large quantities, the computer must have enough resources to invoke it. Therefore, some of the work is complex, numerical calculations or page rendering effect requires high software on the computer hardware configuration has certain requirements, low configuration of the computer may not be able to run the software, or in the continuous iteration and update of the software after the elimination. Finally, the C/S architecture cannot automatically update the client after the software upgrade, requiring users to manually download the new version or incremental installation, which inadvertently increases the burden on users. Therefore, this paper does not choose to use C/S architecture to develop intelligent dynamic forms.

The B/S architecture addresses the pain point problems in the C/S architecture by using the browser as a simplified version of the client, whose working principle is shown in Figure 1. During the user’s use of the browser, if new resources are needed, the browser sends an HTTP message carrying request parameters to the server, which parses the request according to the parameters, calls the relevant functions to process the request, and performs add, read, update, and delete operations on the database as needed. Finally, after receiving the new page resource file from the server, the browser re-renders the page. From Figure 1, it is easy to see that the browser only performs data requests and page parsing, and does not perform any additional data processing work. Therefore, the browser requires less configuration on the client side, and users do not need to manually update the version.

Figure 1.

Working Principle of B/S Architecture

The structure and content of the dynamic form are simulated by the virtual table data model [21]. The design of the form can be divided by function into the form definition part and the data reporting part, in which the form definition part is the structural basis of the table, while the data reporting part is built on the basis of the form definition as a unit of the existing form to report data storage.

2.2.2

Data reporting

In the data model of the virtual table, this part serves to provide space for data reporting for the existing virtual table, so that the dynamic form can be used effectively. The structure of data reporting is shown in Figure 2, including the virtual table reporting cycle dictionary table, the original virtual table record table, and the virtual table record data item table.

Figure 2.

Virtual data reporting structure

The reporting period of a virtual table is defined by the reporting period dictionary table, such as daily, monthly, and yearly, thus targeting the management and statistics of reporting on dynamic forms by time and using the time items defined in the reporting period dictionary to control the reporting time period. A record in the virtual table record metadata table describes the date of the virtual table’s data reporting, the reporting person and other information, while a set of records in the virtual table record data item table is used to store the virtual table’s data reported this time. To create a record for a virtual table data report, there must be a record in the virtual table record metadata table and a set of related records in the virtual table record data item table.

2.2.3

Optimised storage of reported data

In the process of use, the data reported by the user in the reporting data table is stored in a huge amount of dynamically generated data reports in the reporting data table. Insert the number of records is determined by the number of indicators of the form, and the reporting cycle of the form will determine how often these records will be recorded once again. It is not feasible to use only one table in the database for such a heavy data storage task, and storing the data reported by each dynamic form separately can solve such a problem to a certain extent.

In the record data item table, the growth of the data volume is caused by the data reporting of a form, the number of database entries occupied by the data reporting of a data form is determined by the number of fields of the dynamic form, and the period of reporting determines the frequency of reporting of the dynamic form. In order to make the data volume between each record data item table as average as possible, it is necessary to determine the situation in which the reported data of a new dynamic form is stored in four record data item tables. The algorithm predicts the incremental data volume of each record data item table after a period of time for the four scenarios. Here the method of calculating the variance is used to find out the method to make the increase in the data volume of each data table the closest to the average value in order to determine the new virtual table stored in the data table.

The reporting frequency of the forms is divided into daily, monthly, and annual periods. In order to facilitate consideration of the linear increase in the table of recorded data items, assuming a periodicity ratio of p, the periodicity ratio can be set to 1 for the daily forms, 130 for the monthly reports and 1365 for the yearly reports.

The number of fields in the form will determine the number of records occupied in a particular record data item table for a single report. Assuming that the number of fields in the form is e, and also assuming that the four record data item tables are X, Y, Z, and M, and that the number of forms stored in the record data item table is n, the data expression for the incremental data for X can be derived as: 1X′=∑k=1nekpk

The same can be done for Y′, Z′, and M′.

When a user adds a new form, the data increment for that new form can be deduced from the reporting period and the number of indicators: 2N′=ep

In order to calculate the variance, the mean of the five increments needs to be calculated: 3P=X′+Y′+Z′+M′+N′5

The incremental variance obtained by storing the reported data from the currently added form in the four record data item tables can now be calculated for each of the four scenarios: 4RX=(X′+N′−P)2+(Y′−P)2+(Z′−P)2+(M′−P)2 5RY=(X′−P)2+(Y′+N′−P)2+(Z′−P)2+(M′−P)2 6RZ=(X′−P)2+(Y′−P)2+(Z′+N′−P)2+(M′−P)2 7RM=(X′−P)2+(Y′−P)2+(Z′−P)2+(M′+N′−P)2

By the definition of the variance, the variance of the smallest median value of the one can meet the data increment is closest to the average increment, so that the four record data item table utilisation continues to maintain the average. In practice, after using this method, the record data item table was collected in a particular year in different months of the comparison of the amount of data as shown in Figure 3. At the time of adding a new form, by determining the stored record data item table can determine its later reported data in a fixed position, and by comparing the existing data increment of each table with the data increment of the new form to find the minimum variance of the way to make the data increment of each table to maintain as much as possible the average. The comparison in the figure shows that by choosing the optimisation algorithm, the data growth of each record data item table can be maintained at a relatively average level, which ensures that the efficiency of storage space utilisation is maximised.

Figure 3.

Data increment chart of the data record tables

Creating a form page by dragging and dropping is one of the design highlights of this article. For some traditional form designers, the process of creating forms involves clicking the form elements with the mouse. For users, the operation of clicking has some limitations and cannot provide a visually intuitive effect. Therefore, this paper uses the drag and drop method. The operation will not be very hard when dragging and dropping components. There is a component transition effect, which allows users to more intuitively see how the form is created on the page to generate.

The entire form template layout is to use the mouse to click and drag the form components to move to the form design area, and then drag the upper and lower positions to achieve the visible form component drag and drop functionality of the idea and design is the most critical part of the custom form system. Component drag and drop is the mouse in the drag and drop operation. By changing the element’s position value from the top of the page and the left side of the page, this paper can be used to drag and drop controls to set up a designated area.

In the PC browser, from the point of view of using native JavaScript to analyse, the drag and drop event is achieved by monitoring the mouse click event, using the three APIs mousedown, mousemove, mouseup, when the element that needs to be dragged and dropped to bind these events, the event object as a parameter to return to the function, when the mouse is pressed, record the, the start position and the end position are recorded, when the mouse is moved, the position is changed, and the position of the element is obtained by constantly calculating the difference of the movement, when the mouse is left, the binding operation is unbound, and the whole process of dragging and dropping is completed.

In actual development, the drag-and-drop event of form components is not only a simple positional movement, but also has the restriction of the drag-and-drop target area, so the drag-and-drop of form elements has its corresponding drag-and-drop rules. A comprehensive analysis of the native JavaScript drag and drop method mentioned above is not suitable for the development of this system. The page drag and drop operation is relatively rigid, which affects the development effect. Therefore, the drag and drop component Vue. Draggable is used to drag and drop form components, recording the target position before and after the drag.

The flow of component dragging in this paper can be seen in Figure 4. First, select the drag component, bind the drag click event, obtain the current drag position, and determine if it is compatible with mouse displacement. If so, calculate the mobile displacement difference, determine whether the current position can be placed, and if so, place the display. If the judgment is not satisfied, then perform the modification operation. Users can visually drag and drop the form element components to the target area to meet the system requirements and make the operation easier.

Figure 4.

Component drag and drop flow chart

Drag-and-drop dynamic forms are more informative than ordinary forms and require a higher degree of patience from users. Therefore, when designing the layout of drag-and-drop dynamic forms, we should consider how to improve the efficiency of users’ information entry, display information reasonably, conform to users’ cognition, and effectively reduce the pressure of users’ input.

Combined with the characteristics of this type of form, the evaluation index of drag-and-drop dynamic form layout is evaluated from two dimensions: objective and subjective. The objective evaluation is based on the efficiency indicators obtained by analysing the data obtained in the eye movement experiment, and the subjective evaluation is based on the satisfaction and cognitive load indicators obtained from the questionnaire survey.

In this experiment, dynamic forms are designed into three schemes, waterfall (A), grouping (B) and drag-and-drop (C), to study the evaluation of the layout mode in the specific interface design of dynamic forms through qualitative and quantitative methods, combined with questionnaires and eye-tracking techniques. The contents of the three schemes have consistency, and the experiment adopts a between-subjects design, dividing 150 subjects into three groups to operate three different schemes, namely, A, B, and C, and ensuring that each group has 25 boys and 25 girls. Scenarios, ensure that there are 25 boys and 25 girls in each group. Before the experiment, the experimenters introduced the purpose of the experiment, experimental procedures, precautions, and so on. During the experiment, the subjects filled in the form according to their situation until it was saved. At the end of the eye movement experiment, the subjects will fill in the SUS system usability scale and the NASA cognitive load scale. The SUS system usability scale mainly measures the user’s satisfaction with the layout design of the form, and the questions in the scale reflect the user’s satisfaction with the convenience of using the form, the usability of the form, and the ease of learning, and the scores obtained by the SUS are the satisfaction with the form. NASA Cognitive Load Scale The NASA Cognitive Load Scale has 6 dimensions to measure the cognitive load of users, and the weights of the 6 dimensions are calculated to determine the cognitive load of users when using the form.

The interface of the dynamic form drag-and-drop function studied and implemented in this paper is shown in Fig. 8, which adopts a raster layout with a component panel on the left and a form design panel on the right. In drag-and-drop, you can drag the raster layout component into the layout field and then place the container field in the layout field. This drag-and-drop feature can effectively increase the autonomy of users in form design, allowing them to design the form according to their preferences.

Figure 8.

Drag display

By using the B/S architecture to design dynamic forms and display their effects on the page. It is mainly divided into the background setting dynamic form and the preview of the dynamic form in the foreground.

The background setting dynamic form interface is shown in Figure 9. Take the genetic characteristics attribute as an example to set the attribute dynamically, which includes field code, field data type, unit of measure category, entry non-empty, reference code table, field display style, field said category and so on. The most important aspects are setting the reference code table and the display style for fields. The corresponding record group in the reference code table and the setting of the field display style will determine whether the multiple or one values mapped from the reference code table are represented on the page in the specified style.

Figure 9.

The background Settings the dynamic form interface

Dynamic preview of the foreground when all the attributes are set up, the user can browse the effect of the settings through the browse chart, and at any time, you can modify the field and other operations.