CN103809975B - The implementation method of intelligent cloud list - Google Patents

Abstract

The invention discloses a method for realizing an intelligent cloud form, and belongs to the technical field of WEB development. The method includes a form designer, and forms of different terminals share a set of business models; component inheritance; intelligent interaction between components and the designer; hierarchical storage of form elements; extended HTML attributes; dynamic data binding and other parts. Compared with the prior art, the implementation method of the intelligent cloud form of the present invention can adapt to the development of the mobile Internet and solve the problem of multi-terminal form customization. Personalized components, while providing flexibility, expand the scope of use of the system, and have good promotion and application value.

Description

How to implement smart cloud forms

technical field

The invention relates to the technical field of WEB development, in particular to a method for realizing an intelligent cloud form.

Background technique

With the rapid development of the mobile Internet, traditional desktop-oriented applications grow slowly, and more and more mobile applications have sprung up like mushrooms after rain.

At present, although there are some relatively mature form customization tools in the field of WEB development, they generally provide form customization solutions for desktops. It is impossible to customize forms for multiple different terminals (desktop and mobile) in one system at the same time, and realize Data sharing between different terminal forms.

Traditional form customization is to create tables dynamically. If a form is customized for the desktop and mobile, two tables will be created dynamically. When performing actual business operations, the same business data entered by different terminals will be stored in different tables, and data consistency cannot be discussed.

In addition, the needs of users are always changing, and it is difficult to meet the diverse needs of users simply relying on the limited components provided by various form customization tools, especially for systems that have been developed or released, and continue to add or modify components It will bring high development costs. Therefore, it is necessary to provide an effective component extension mechanism that allows users to customize personalized business components according to business needs.

Contents of the invention

The technical task of the present invention is to provide a multi-terminal-supporting and scalable intelligent cloud form realization method for the above-mentioned deficiencies in the prior art.

Technical task of the present invention is realized in the following manner: the realization method of intelligent cloud form, it is characterized in that:

The form designer is used to customize the forms of different terminals. The forms of different terminals share a set of business models. The forms of different terminal types include desktop forms and mobile forms;

The form designer has a large number of built-in components, each component is a separate JavaScript file, all components are inherited from the custom base class, and the components can be inherited and extended;

The component interacts intelligently with the form designer, and the component actively registers with the form designer. After the registration is completed, the form designer calls the initialization method of the component in turn, and the component and the form designer interact through custom events. ID naming;

The form elements are stored hierarchically, and the form elements are divided into three levels: form, area, and domain, corresponding to the business model, sub-business model, and business model item in the background business model;

Extended HTML attributes, extended attributes include: component ID, element type, whether to automatically create a table, associated business meaning, associated data binding, associated business model and business model mapping;

Dynamic data binding extension, specifying data binding rules for domains during the definition period, dynamically parsing the data rule binding data during the runtime, and dynamically binding to the foreground form fields after obtaining the analysis results.

In order to realize the form skinning function, the method can set a form skin style module, which is used to save the form skin style file and record the association relationship between the form and the skin.

Form publishing supports two methods, one is to dynamically build tables based on form elements, and the other is to establish associations between form elements and existing tables.

When the form designer is used to customize the forms of different terminals, after the first form is customized, a set of business models will be generated in the background correspondingly, and the business model is used to describe the dynamically created form table; when customizing other forms, it will no longer be dynamically generated The background business model, but establishes an association relationship between other forms and the aforementioned established business model, thereby indirectly using the dynamically created form table of the aforementioned first form.

In order to more intuitively reflect the differences between different terminals, when designing a form with the form designer, you can use the picture of the terminal device as the background.

Users can customize components, inherit custom base classes, define component HTML templates, initialization operations, mouse drag and drop event processing, and mouse double-click event processing.

When customizing a personalized version of the same component, implement code reuse by inheriting the component.

Compared with the prior art, the implementation method of the intelligent cloud form of the present invention has the following prominent beneficial effects:

(1) Support multi-terminal (desktop, mobile) form customization, providing a basis for mobile application form customization;

(2) Support component inheritance, allow users to customize components, and make up for the shortcomings of general form customization tool components that are closed and do not allow extended development;

(3) Provide a dynamic data binding extension mechanism, allowing users to customize data binding rules and analysis classes, which is convenient for users to carry out data binding according to specific business needs;

(4) Support the form skinning function, allowing users to pre-define the skin. After the form is customized, the overall style of the form can be adjusted through the skinning function to better achieve the effect of what you see is what you get.

Description of drawings

Accompanying drawing 1 is the schematic diagram that multi-terminal forms share a set of background business model in the embodiment;

Accompanying drawing 2 is the schematic diagram of component inheritance in the embodiment;

Accompanying drawing 3 is the intelligent interaction flow chart between component and form designer in the embodiment;

Accompanying drawing 4 is a block diagram of the hierarchical storage structure of form elements in the embodiment.

Detailed ways

The implementation method of the intelligent cloud form of the present invention will be described in detail below with specific embodiments with reference to the accompanying drawings.

Example:

The realization scheme of the realization method of intelligent cloud form of the present invention is as follows:

1) Multiple terminal forms share a set of business models

Explanation: To support multi-terminal forms, the problem of data consistency needs to be solved. The implementation scheme of the present invention is that multiple front-end terminal forms share a set of background business models. The present invention considers that the form belongs to the foreground, and needs a background business model corresponding to it, and the business model corresponds to the database table, thereby decoupling the foreground form and the background business table. As shown in Figure 1, after the desktop version of the form is customized, a set of business models will be generated in the background. The business model describes the dynamically created form table, and there is an association between the desktop version of the form and the business model. When the background business model is no longer dynamically generated, an association relationship is established between the mobile version of the form and the previously established business model, thereby indirectly using the form table dynamically created by the aforementioned desktop version of the form, which fundamentally solves the problem of data consistency sexual issues.

2) Component inheritance

Description: Components are the integration, encapsulation and extension of native HTML tags. Each component is a separate JavaScript file. When a component is added to the design area, what is actually added is an HTML fragment. As shown in Figure 2, all components inherit from the CFWidget class (custom base class), which includes four parts: HTML template, initialization operation, mouse drag-and-drop operation, and mouse double-click operation. Any component can be based on these four parts Free expansion, at the same time, if you want to customize the personalized version of the same component, you can inherit the component twice, reuse the existing implementation code, and only provide the personalized part.

An example of component inheritance looks like this:

// inherited component

CFText = $.inherit(CFWidget, overrides);

3) Intelligent interaction between components and designers

Description: When loading the form designer page, automatically load the component JavaScript source file of the specified terminal (desktop, mobile).

The last line of code for each component is:

// register component

CForm.reg(component class name);

This allows the component to be automatically registered with the designer.

The intelligent interaction process between components and designers is shown in Figure 3:

1. After all components are automatically registered, the designer will call the init method of each component in turn. The init method will automatically register the "drop (drop)" and "double click (dblClick)" events to the designer. The event registration method is:

// register drop event

this.builder.on("Current component ID_drop", operation);

// register double click event

this.builder.on("current component ID_dblClick", operation);

2. When the user is designing the form, he needs to drag the component from the component bar to the middle design area, drag the component to the appropriate position, and release the mouse.

3. The designer listens to the mouse release event, triggers the "drop" event registered by the component, dynamically renders the component template inside the component, and adds the HTML fragment corresponding to the component to the design area after rendering.

The drop event is triggered by:

// trigger drop event

this.builder.fireEvent(component ID + "_drop", [ target ]);

4. When the user sets the form field properties, the component needs to be double-clicked.

5. The designer listens to the mouse double-click event, triggers the "dblClick" event registered by the component, and then pops up the component property setting page.

The double-click event is triggered by:

// trigger double click event

this.builder.fireEvent(component ID + "_dblClick", [ target ]);

4) Hierarchical storage of form elements

Explanation: As shown in Figure 4, the present invention abstracts form page elements into three levels: form, area, and domain, which respectively correspond to the business model, sub-business model, and business model item in the background business model. Form elements are stored hierarchically, and the front and back are decoupled from the model level, ensuring that a back-end business model can correspond to multiple form page elements in the foreground, which greatly improves flexibility.

5) Extended HTML attributes

Explanation: The present invention supports the extension of HTML attributes, and the extensible attributes include component ID, element type (form, area, domain), whether to automatically create a table, associated business meaning, associated data binding, associated business model, business model mapping, etc. . When the form is defined and saved, the background will parse the extended attributes in the HTML and persist it to the database in the form of basic data for use by the form at runtime.

6) Dynamic data binding

Note: For the convenience of end users, some data needs to be automatically bound when initializing the form, such as the name of the currently logged-in user. This invention meets this type of demand through predefined data binding rules and analysis classes. When customizing the form, specify the data rule to be bound for the field. At runtime, if dynamic data binding is required for the field, the parsing class corresponding to the data rule is dynamically executed, and the parsing result is dynamically bound to the foreground form field.

7) Form publishing

Two methods are supported, one is to dynamically build tables based on form elements, and the other is to establish associations between form elements and existing tables.

8) Form skinning

Description: This invention supports predefined form skin style files. When designing a form, you can choose from existing styles. When saving the form, the relationship between the form and the skin will be recorded. When the form is opened again next time, it will be based on this relationship. Dynamically load the corresponding skin style files to better realize what you see is what you get in form design.

Claims (7)

1. The realization method of intelligent cloud form, it is characterized in that: The form designer is used to customize the forms of different terminals, and the forms of different terminals share a set of business models; The form designer has a large number of built-in components, each component is a separate JavaScript file, all components are inherited from the custom base class, and the components can be inherited and extended; The component interacts intelligently with the form designer, and the component actively registers with the form designer. After the registration is completed, the form designer calls the initialization method of the component in turn, and the component and the form designer interact through custom events. ID naming; The form elements are stored hierarchically, and the form elements are divided into three levels: form, area, and domain, corresponding to the business model, sub-business model, and business model item in the background business model; Extended HTML attributes, extended attributes include: component ID, element type, whether to automatically create a table, associated business meaning, associated data binding, associated business model and business model mapping; Dynamic data binding extension, specifying data binding rules for domains during the definition period, dynamically parsing the data rule binding data during the runtime, and dynamically binding to the foreground form fields after obtaining the analysis results; Form skinning, supports predefined form skin styles, can dynamically switch styles during the definition period, and loads the corresponding style files during the runtime. 2. The method for realizing the intelligent cloud form according to claim 1, characterized in that: a form skin style module is provided for saving the form skin style file and recording the relationship between the form and the skin. 3. The implementation method of smart cloud form according to claim 1, characterized in that: form publishing supports two ways, one is to dynamically create a form based on form elements, and the other is to establish an association between form elements and existing forms. 4. The method for realizing the intelligent cloud form according to claim 1, 2 or 3, characterized in that: when the form designer is used to customize the forms of different terminals, after the first form is customized, a set of business will be correspondingly generated in the background model, the business model is used to describe the dynamically created form table; when customizing other forms, the background business model is no longer dynamically generated, but an association relationship is established between other forms and the aforementioned established business model, thereby indirectly using the aforementioned first A form table dynamically created by a form. 5. The method for realizing the smart cloud form according to claim 4, characterized in that: when designing the form with the form designer, the picture of the terminal device is used as the background respectively. 6. The realization method of the intelligent cloud form according to claim 4, characterized in that: the user can customize the component, inherit the self-defined base class, define the HTML template of the component, initialization operation, mouse drag and drop event processing, mouse double-click event deal with. 7. The implementation method of the smart cloud form according to claim 4, characterized in that: when customizing a personalized version of the same component, it is implemented by inheriting components to realize code reuse.