CN116382691A - A front-end control library display code generation method - Google Patents

Abstract

The invention discloses a method for generating display codes of a front-end control library, which adopts a code analysis mode to detect useless attributes and event declarations possibly existing in the control library for optimization, and automatically completes the display codes of the control library in a mode of combining the rest attributes and event information with template generation, and displays the internal attribute settings of the control and the corresponding visual effects thereof for testing by testers. By utilizing the method, the device and the system, documents and manual information are not needed, the possible invalid codes appearing in the codes are automatically detected by a code analysis method for further optimization, other attributes, events and other information of the control to be displayed are extracted, and the control display codes are generated by combining the predefined template codes, so that the test of the control functions is accelerated.

Description

A front-end control library display code generation method

technical field

The invention relates to the field of front-end control code detection, in particular to a method for generating display codes of a front-end control library.

Background technique

The control library is a very simple and direct visual control warehouse. You can drag and drop the controls listed here into the scene editor or hierarchy manager to quickly complete the creation of preset controls.

For example, the Chinese patent document with publication number CN113590585A discloses a control library, which includes a plurality of controls, each of which has a unique identification code, and each control has a corresponding style, attribute, event and data structure.

The Chinese patent document with the publication number CN113326044A discloses a development method based on a control library. In the design interface, create a real-time kanban or import and export a real-time kanban in the form of a file; build the content of the kanban through the visual control library of the design interface, and it can be done at any time. Adjust the content of the kanban board according to the needs; select the control, and configure the relevant properties of the control; in the running interface, drag to establish the mapping relationship between the resource and the control, so that the control can display real-time data or give the control function; double-click the control title to pop up the drawer. View or modify resource information bound to this control.

During and after writing the front-end control library, in order to fully test the visual effects of the controls in the control library, it is often necessary to write use cases for the controls in the control library. Manually written test cases are not only cumbersome, but also prone to Concentrate on a single function while leaving out other functions for the entire control. And in actual cases, it can often be found that due to multiple rounds of iterations and addition of functions in the code, there are many discarded and actually invalid attribute and event declarations.

Contents of the invention

The present invention provides a front-end control library display code generation method, which does not require documents and manual information, but automatically detects possible invalid codes in the code through code analysis for further optimization, and extracts other attributes of the control to be displayed Combined with information such as events and events, combined with predefined template codes, control display codes are generated, thereby speeding up the testing of control functions.

A display code generation method for a front-end control library, comprising the following steps:

(1) Through code analysis, obtain the metadata of all classes in the namespace where the control library to be displayed is located, filter and process the metadata of these classes, obtain the name and other information of the custom control class that needs to be detected, and output to Form 1;

(2) Read the control information in Table 1, extract its attributes and event information, filter and process the extracted information, and detect whether its custom attributes and events are used in places other than definitions;

The unused attributes and events are regarded as possible invalid codes, and output to Form 2 for further inspection by testers;

(3) For the effective attributes and events detected in step (2), further extract their specific information for processing according to the specific settings of the template code, and output the acquired attributes and event information to be displayed to Form 3;

(4) Read the information in Table 1 and Table 3 as the environment information, combine the predefined template code, use the template engine to automatically generate the logic and display code of the main interface and control display interface, and form a complete front-end control library display project.

The present invention uses code analysis to detect useless attributes and event statements in the controls in the control library for optimization, and combines the rest of the attributes and event information with template generation to automatically complete the display code of the control library.

In step (1), other information refers to other information that has an impact on the generated code, including: type information of controls, and interrelationships between controls;

Among them, the type information of the control is classified by the base class and interface information inherited by the control, and the mutual relationship between the controls is judged by the name and inheritance relationship of the control.

Use the base class and interface information inherited by the control to classify the controls, so that different forms of template display can be adopted according to different types. Compared with the control used alone, the list display control can increase the data source contained in it and some operations on the data .

The relationship between the controls is judged by the name and inheritance relationship of the controls. The main control and other controls are displayed together in the template. Such as window controls and corresponding window button controls, tab container controls and tab controls are displayed together.

In step (1), screening and processing the metadata of these classes includes screening with the information of the class itself and screening with the information of the ancestors of the class;

Among them, screening with the information of the class itself includes: removing the virtual class; screening with the ancestor information of the class includes: judging whether it is a control to be displayed based on whether the class inherits from the general control base class, and judging whether it is a control to be displayed based on whether the class inherits from A control that presents a set of items distinguishes it from a container class control to a normal control.

After screening and processing, the extracted control information to be displayed will be output in the form of a table, allowing users to change the table as needed, customize the controls and other information to be displayed.

In step (2), screening and processing the extracted information includes:

Restrict the declaration class of attributes and events. By default, only the attributes and events declared in this class are detected; the attributes and events inherited from other classes to be detected are marked for subsequent invalid code detection.

When detecting whether its custom attributes and events are used in places other than definitions, specifically detect whether they are used in the logic control code and style setting code of this control, the logic control code and style setting code of this control subclass. A good front-end control design should not save information that is completely irrelevant to display, so unused property and event declarations will be made as possibly invalid codes, requiring further testing by testers.

In step (3), further extracting its specific information for processing includes:

Add effective attributes and events that inherit from the custom base class; add general display attributes, including length, width, and background color; filter the types of attributes and events according to specific display needs to obtain attributes to be displayed.

The acquired attribute and event information to be displayed includes attribute type, attribute default value, event handler type, event handler function parameters, and the like. Users can change the table as needed, and customize the properties and events of the controls that need to be displayed.

In step (4), the predefined template code includes a main interface and a control display interface, wherein the main interface is responsible for an overall introduction and navigation to a specific control display interface, and the control display interface is responsible for displaying the style and function of a specific control;

The control display interface includes three parts: control, property control and event control. The property control part controls the style and function logic of the control by adjusting the properties. The event control part displays the triggering timing of the event by adding and removing the event display button and the event trigger display part. .

Compared with the prior art, the present invention has the following beneficial effects:

1. Based on the common problems and testing requirements in the front-end control library code, the present invention automatically detects possible invalid attributes and event statements in the custom control for testers to optimize, and combines the metadata extracted in the code analysis with the template method Automatically generate code to display the visual effect of the control for testers to use.

2. The present invention fully meets the user's self-defining requirements. In steps (1) and (3), the information is accessed in the form of a table, which can facilitate users to modify the content to be displayed. The template code defined in step (4) can be designed by the user based on the design principles of fully displaying styles and functions. Customize specific display methods.

Description of drawings

FIG. 1 is a flowchart of a method for generating display codes of a front-end control library according to the present invention.

Detailed ways

The present invention will be further described in detail below with reference to the accompanying drawings and embodiments. It should be noted that the following embodiments are intended to facilitate the understanding of the present invention, but do not limit it in any way.

A front-end control library display code generation method, which uses code analysis to detect possible useless attributes and event declarations in the controls in the control library for optimization, and combines the rest of the attributes and event information to generate templates. Automatically complete the display code of the control library, and display the internal property settings of the control and their corresponding visual effects for testers to test. Specifically, as shown in Figure 1, the following steps are included:

Step 1. Through code analysis, obtain the metadata of all classes in the specified namespace (the namespace where the control library to be displayed is located), filter and process the metadata of these classes, and obtain the name and name of the custom control class to be displayed. Other information, output to the table.

Step 2, optionally, the user can verify and modify the content of the form as needed.

Step 3: Read the table generated in step 1, extract the properties and event declarations in the controls that need to be displayed, check their validity, and output the properties and events that may be invalid.

Step 4: Perform further screening and processing on the detected attributes and events, extract their specific information and output them to the table.

Step 5, optionally, the user can verify and modify the content of the form as needed.

Step 6: Read the information in the table generated and modified in Step 2 and Step 5 as the environment information, combine the predefined template code, use the template engine to automatically generate the logic and display code of the main interface and the control display interface, and form a complete Front-end control library display project.

In the embodiment of the present invention, the actual application scenario is the WPF control library developed by the Windows client. In this embodiment, the NVelocity template engine is used to generate code, and an experiment is carried out for the open source project MahApps.Metro.

In this embodiment, all class metadata in the specified namespace (MahApps.Metro.Controls) are obtained through reflection, virtual classes are filtered out, and categories with Control and no Window in the ancestors are filtered out as the target display Controls are divided into container controls and non-container controls according to whether the ancestors have ItemsControl, and output to the table.

After reading in the verified and modified basic information of the control to be displayed, verify the declaration location of all properties and events in each custom control class, ignore the properties and events declared in the common base class, and mark the declaration in this class The properties and events of the custom base class will be inherited from the properties and events of the custom base class, and the style code and logic code of this class will be added to the inspection method of the properties and events of the modified base class. The specific detection method is to detect whether it is used in other places in the non-declaration and GETSET method in the cs file of the control class that needs to be verified, and to detect whether it is in the target type (TargetType) in all xaml files in the control library. It is used in the control's style template (Template) (such as as the source of property binding or set on this control or a child control in the template). Output detects potentially invalid attributes and events to a table.

Attributes that are effective for detection, plus common attributes such as length, width, background color, etc., filter other types of attributes such as int, double, bool, brush, color, datetime, thickness, datetime and custom enumeration types according to the template settings to be displayed Attributes, output to a table. For an event that is valid for detection in each custom control class, obtain the parameters of the invoke function of the event handler of the event through reflection, and output it to the table.

After reading all the verified and modified controls to be displayed, use them as the environment parameters of the template engine, and combine them with the predefined template code to generate the display code. In this implementation example, the code template mainly includes a main interface XAML code template, a main interface CS code template, a control interface XAML code template and a control interface CS code template. The main interface is set to navigate to each control to be displayed in the form of a navigation card. The general control code template setting is divided into three parts, the first part displays the control, and the second part displays the attributes. In this part, different attributes are input or selected in the form of text, selection box, etc. according to the type, and are bound to the control. The third part displays the event, registers the function displayed by the event through the check box, and the function displays the number of function triggers by controlling the text after the check box. For a container control with a group of items inside, set its ItemsSource to a list of strings, and add the function for users to add and delete strings to ItemsSource.

The embodiments described above have described the technical solutions and beneficial effects of the present invention in detail. It should be understood that the above descriptions are only specific embodiments of the present invention, and are not intended to limit the present invention. All within the scope of the principles of the present invention Any modifications, supplements and equivalent replacements should be included within the protection scope of the present invention.

Claims (8)

1. A front-end control library display code generation method, characterized in that, comprising the following steps: (1) Through code analysis, obtain the metadata of all classes in the namespace where the control library to be displayed is located, filter and process the metadata of these classes, obtain the name and other information of the custom control class that needs to be detected, and output to Form 1; (2) Read the control information in Table 1, extract its attributes and event information, filter and process the extracted information, and detect whether its custom attributes and events are used in places other than definitions; The unused attributes and events are regarded as possible invalid codes, and output to Form 2 for further inspection by testers; (3) For the effective attributes and events detected in step (2), further extract their specific information for processing according to the specific settings of the template code, and output the acquired attributes and event information to be displayed to Form 3; (4) Read the information in Table 1 and Table 3 as the environment information, combine the predefined template code, use the template engine to automatically generate the logic and display code of the main interface and control display interface, and form a complete front-end control library display project. 2. The display code generation method of the front-end control library according to claim 1, characterized in that, in step (1), other information refers to other information that has an impact on the generated code, including: type information of the control, information about the control interrelationships; Among them, the type information of the control is classified by the base class and interface information inherited by the control, and the mutual relationship between the controls is judged by the name and inheritance relationship of the control. 3. The front-end control library display code generation method according to claim 1, characterized in that, in step (1), screening and processing the metadata of these classes includes screening with the information of the class itself and using the information of the class ancestry information for screening; Among them, screening with the information of the class itself includes: removing the virtual class; screening with the ancestor information of the class includes: judging whether it is a control to be displayed based on whether the class inherits from the general control base class, and judging whether it is a control to be displayed based on whether the class inherits from A control that presents a set of items distinguishes it from a container class control to a normal control. 4. The front-end control library display code generation method according to claim 1, characterized in that, in step (2), screening and processing the extracted information includes: Restrict the declaration class of attributes and events. By default, only the attributes and events declared in this class are detected; the attributes and events inherited from other classes to be detected are marked for subsequent invalid code detection. 5. The front-end control library display code generation method according to claim 1, characterized in that, in step (2), when detecting whether its custom attributes and events are used in places other than definitions, specifically detect whether they are in It is used in the logic control code and style setting code of this control, and the logic control code and style setting code of the subclass of this control. 6. The front-end control library display code generation method according to claim 1, characterized in that, in step (3), further extracting its specific information for processing comprises: Add effective attributes and events that inherit from the custom base class; add general display attributes, including length, width, and background color; filter the types of attributes and events according to specific display needs to obtain attributes to be displayed. 7. The front-end control library display code generation method according to claim 1, characterized in that, in step (3), the acquired attribute and event information to be displayed includes the type of attribute, the default value of attribute, and the event processing of the event device type, event handler function parameters. 8. The front-end control library display code generation method according to claim 1, characterized in that, in step (4), the predefined template code includes a main interface and a control display interface, wherein the main interface is responsible for overall introduction and navigation to Specific control display interface, the control display interface is responsible for displaying the style and function of specific controls; The control display interface includes three parts: control, property control and event control. The property control part controls the style and function logic of the control by adjusting the properties. The event control part displays the triggering timing of the event by adding and removing the event display button and the event trigger display part. .

Images