A method for generating display code for a front-end control library

Abstract

The present invention discloses a method for generating display code for a front-end control library. The method uses code analysis to detect potentially useless properties and event declarations of controls in the control library for optimization, and combines the remaining properties and event information with template generation to automatically complete the display code of the control library, displaying the internal property settings of the controls and their corresponding visual effects for testing by testers. Utilizing the present invention, no documentation or manual information is required. Instead, the method automatically detects potentially invalid code in the code for further optimization through code analysis, extracts other properties and events of the controls to be displayed, and combines them with predefined template code to generate control display code, thereby accelerating the testing of control functions.

Description

Technical Field

[0001] The present invention relates to the field of front-end control code detection, and in particular to a method for generating display code for a front-end control library. Background Art

[0002] 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 create preset controls.

[0003] For example, Chinese patent document CN113590585A discloses a control library including a plurality of controls, each of which has a unique identification code, and each of which has corresponding styles, properties, events, and data structures.

[0004] Chinese patent document publication number CN113326044A discloses a development method based on a control library. In the design interface, a new real-time dashboard can be created or imported and exported in file format; the dashboard content can be built through the visual control library of the design interface, and the dashboard content can be adjusted at any time according to needs; by selecting a control, the relevant properties of the control can be configured; in the running interface, a mapping relationship between resources and controls can be established by dragging, so that the control can display real-time data or assign functions to the control; double-clicking the control title pops up a drawer to view or modify the resource information bound to the control.

[0005] During and after writing a front-end control library, it's often necessary to write use cases for the controls in the library to fully test their visual effects. Manually writing test cases is not only cumbersome but also prone to focusing on a single function while overlooking other features of the entire control. Furthermore, in real-world cases, it's common to find that after multiple rounds of code iteration and feature additions, many deprecated and invalid property and event declarations appear. Summary of the Invention

[0006] The present invention provides a method for generating display code for a front-end control library. The method does not require documents and manual information. Instead, it automatically detects possible invalid code in the code through a code analysis method for further optimization, extracts other information such as properties and events of the control to be displayed, and combines it with predefined template code to generate control display code, thereby accelerating the testing of control functions.

[0007] A method for generating display code for a front-end control library includes the following steps:

[0008] (1) Obtain the metadata of all classes in the namespace of the control library to be displayed through code analysis, filter and process the metadata of these classes, obtain the name and other information of the custom control class to be detected, and output them to Table 1;

[0009] (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 where they are defined;

[0010] Unused properties and events are considered as possible invalid codes and output to Table 2 for further inspection by the tester;

[0011] (3) For the valid attributes and events detected in step (2), further extract their specific information according to the specific settings of the template code and process them, and output the acquired attribute and event information to be displayed to Table 3;

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

[0013] The present invention uses code analysis to detect useless properties and event declarations in controls in a control library for optimization, and automatically completes the display code of the control library by combining the remaining properties and event information with template generation.

[0014] In step (1), other information refers to other information that affects the generated code, including: type information of controls and the relationship between controls;

[0015] The type information of the control is classified by the base class and interface information inherited by the control, and the relationship between the controls is determined by the name and inheritance relationship of the control.

[0016] Controls are classified using the base class and interface information they inherit, making it easier to adopt different forms of template display according to different types. Compared with controls used alone, list display controls can add the data source they contain and some operations on the data.

[0017] The relationship between controls is determined by their names and inheritance relationships. The main control is displayed together with other controls in the template, such as a window control and its corresponding window button control, or a tab container control and its tab control.

[0018] In step (1), screening and processing the metadata of these classes includes screening based on the information of the class itself and screening based on the ancestor information of the class;

[0019] Among them, filtering based on the information of the class itself includes: removing virtual classes; filtering based on the ancestor information of the class includes: judging whether the class is a control to be displayed based on whether it inherits from a common control base class, and distinguishing it into a container control and a common control based on whether the class inherits from a control that presents a group of items.

[0020] 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 and customize the controls and other information to be displayed.

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

[0022] Limit the declaration class of properties and events. By default, only properties and events declared in this class will be detected. Properties and events inherited from other classes to be detected will be marked for subsequent invalid code detection.

[0023] When checking whether custom properties and events are used outside of their definitions, specifically check whether they are used in the control logic and style code of this control, or in the control subclasses' logic and style code. Good front-end control design should not store information that is completely unrelated to display, so unused property and event declarations may be considered invalid code, requiring further testing by testers.

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

[0025] Add valid properties and events that inherit from the custom base class; add common display properties, including length, width, and background color; filter the types of properties and events according to specific display needs to obtain the properties to be displayed.

[0026] The acquired property and event information to be displayed includes the property type, the property default value, the event handler type, the event handler function parameters, etc. Users can modify the table as needed to customize the properties and events of the control to be displayed.

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

[0028] The control display interface consists of three parts: control, property control and event control. The property control part controls the style and functional logic of the control by adjusting the properties. The event control part displays the triggering timing of the event by adding and removing event display buttons and event trigger display parts.

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

[0030] 1. Based on common problems and testing requirements in the front-end control library code, the present invention automatically detects potentially invalid properties and event declarations in custom controls for testers to optimize, and combines the metadata extracted from code analysis with templates to automatically generate code to display the visual effects of controls for testers to use.

[0031] 2. The present invention fully meets the user's customization needs. In steps (1) and (3), the information is stored and accessed in the form of a table, which can facilitate the user to modify the content to be displayed. The template code defined in step (4) can be customized by the user based on the design principle of fully displaying the style and function. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] Figure 1 The present invention is a flowchart of a method for generating code for a front-end control library display. DETAILED DESCRIPTION

[0033] The present invention will be described in further detail below with reference to the accompanying drawings and examples. It should be noted that the following examples are intended to facilitate understanding of the present invention and do not have any limiting effect on the present invention.

[0034] A method for generating display code for a front-end control library uses code analysis to detect potentially useless properties and event declarations in the control library for optimization, and automatically completes the display code of the control library by combining the remaining properties and event information with template generation. It displays the internal property settings of the control and its corresponding visual effects for testers to test. Specifically, Figure 1 As shown, the following steps are included:

[0035] Step 1: Get the metadata of all classes in the specified namespace (the namespace where the control library to be displayed is located) through code analysis, filter and process the metadata of these classes, obtain the name and other information of the custom control class to be displayed, and output them to a table.

[0036] Step 2: Optionally, the user can verify and modify the table content as needed.

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

[0038] Step 4: Further screen and process the detected valid attributes and events, extract their specific information and output them to a table.

[0039] Step 5: Optionally, the user can verify and modify the table content as needed.

[0040] Step 6, read the information in the table generated and modified in steps 2 and 5 as environmental information, combine it with the predefined template code, and use the template engine to automatically generate the logic and display code of the main interface and control display interface to form a complete front-end control library display project.

[0041] In the embodiment of the present invention, the actual application scenario is a WPF control library developed for a Windows client. In this embodiment, the NVelocity template engine is used to generate code, and experiments are conducted on the open source project MahApps.Metro.

[0042] In this embodiment, all class metadata in the specified namespace (MahApps.Metro.Controls) is obtained by reflection, virtual classes are filtered out, and categories with Control in their ancestors but no Window are selected as target display controls. They are then divided into container class controls and non-container class controls based on whether their ancestors have ItemsControl, and the controls are output to a table.

[0043] After reading in the basic information of the control to be displayed for verification and modification, all properties and events in each custom control class are verified at their declaration locations. Properties and events declared in the common base class are ignored, properties and events declared in this class are marked, and properties and events inherited from the custom base class are added to the verification methods of the properties and events of this class. The specific detection method is to check in the cs file of the control class that needs to be verified whether it is used in other places other than declaration and GETSET methods. In all xaml files in the control library, check whether it is used in the style template (Template) with the target type (TargetType) of this control (such as as the source of property binding or set on this control or a sub-control in the template). Output the detected potentially invalid properties and events to a table.

[0044] For the properties that are valid for detection, along with common attributes such as length, width, and background color, other properties of types such as int, double, bool, brush, color, datetime, thickness, datetime, and custom enumeration types are selected according to the template settings as the properties to be displayed and output to the table. For each valid event in the custom control class, the parameters of the event handler's invoke function are obtained through reflection and output to the table.

[0045] After reading in 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 templates mainly include the main interface XAML code template, the main interface CS code template, the control interface XAML code template and the control interface CS code template. The main interface setting navigates 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 properties. In this part, different properties 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, and registers the function for event display through a checkbox. The function displays the number of times the function is triggered by controlling the text after the checkbox. For a container control with a group of items inside, set its ItemsSource to a string list, and add the function for users to add and delete strings to ItemsSource.

[0046] The embodiments described above provide a detailed description of the technical solutions and beneficial effects of the present invention. It should be understood that the above are only specific embodiments of the present invention and are not intended to limit the present invention. Any modifications, supplements and equivalent substitutions made within the scope of the principles of the present invention should be included in the scope of protection of the present invention.

Claims

1. A method for generating a display code for a front-end control library, characterized in that: The steps include: (1) Obtain the metadata of all classes in the namespace of the control library to be displayed through code analysis, filter and process the metadata of these classes, obtain the name and other information of the custom control class to be detected, and output them to Table 1; Other information refers to other information that affects code generation, including: control type information and the relationships between controls. Control type information is classified by the base class and interface information inherited by the control, and the relationships between controls are determined by the control name and inheritance relationship. Screening and processing the metadata of these classes includes screening based on the class's own information and screening based on the class's ancestor information; Among them, filtering based on the information of the class itself includes: removing virtual classes; filtering based on the ancestor information of the class includes: judging whether the class is a control to be displayed based on whether it inherits from a common control base class, and distinguishing it into a container control and a common control based on whether the class inherits from a control that presents a group of items; (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 where they are defined; Unused properties and events are considered as possible invalid codes and output to Table 2 for further inspection by the tester; The extracted information is filtered and processed, including: limiting the declaration class of attributes and events, by default only detecting attributes and events declared in this class; marking attributes and events inherited from other classes to be detected for subsequent invalid code detection; When detecting whether its custom properties and events are used in places other than their definitions, specifically detect whether they are used in the logic control code and style setting code of this control, or in the logic control code and style setting code of this control's subclass; (3) For the valid attributes and events detected in step (2), further extract their specific information according to the specific settings of the template code and process them, and output the acquired attribute and event information to be displayed to Table 3; (4) Read the information in Table 1 and Table 3 as environmental information, combine it with the predefined template code, and use the template engine to automatically generate the logic and display code of the main interface and the control display interface to form a complete front-end control library display project.

2. The method for generating a front-end control library display code according to claim 1, wherein: In step (3), further extracting its specific information for processing includes: Add valid properties and events that inherit from the custom base class; add common display properties, including length, width, and background color; filter the types of properties and events according to specific display needs to obtain the properties to be displayed.

3. The method for generating a front-end control library display code according to claim 1, wherein: In step (3), the acquired attributes and event information to be displayed include the attribute type, the attribute default value, the event handler type, and the event handler function parameters.

4. The method for generating a front-end control library display code according to claim 1, wherein: In step (4), the predefined template code includes a main interface and a control display interface, wherein the main interface is responsible for the overall introduction and navigation to the specific control display interface, and the control display interface is responsible for displaying the style and function of the specific control; The control display interface consists of three parts: control, property control and event control. The property control part controls the style and functional logic of the control by adjusting the properties. The event control part displays the triggering timing of the event by adding and removing event display buttons and event trigger display parts.

Images