User Interface Code Generation Method, Device, Terminal, and Medium

Abstract

The present application discloses a method, apparatus, terminal, and medium for generating user interface code. The method includes: obtaining a domain object corresponding to a user interface; defining the domain object through annotations to obtain annotation information; generating interface component code corresponding to the user interface based on the user interface and the annotation information; generating interface method code corresponding to the user interface based on the annotation information and the interface component code; and determining target code corresponding to the user interface according to the interface component code and the interface method code. The purpose of the present application is to efficiently generate the code of the user interface, facilitating code maintenance and subsequent development by developers.

Description

Technical Field

[0001] This application relates to the field of user interface development, and particularly to a method, apparatus, terminal, and medium for generating user interface code. Background Art

[0002] Platform Independence refers to a characteristic in software or programming language design that enables a written program to run on multiple different hardware or operating system platforms without the need for special modification or recompilation for each platform. During the process of user interface development, cross-platform components can be built based on platform independence. The design of user interface (UI) business components is an important part of software development, which involves decomposing complex business logic into reusable UI components. The main idea of this design method is indeed based on in-depth analysis of the same business scenarios and identification of all possible situations and change points. For the subsequent work of developers, it is necessary to generate the code corresponding to the user interface.

[0003] However, the existing process of generating user interface code has the following deficiencies: As the application grows, the complexity of the user interface code also increases. When the business logic or design requirements change, updating and maintaining this code can become very time-consuming and error-prone; changes to the user interface usually require synchronous updates to the code in multiple places, increasing the likelihood of errors; when business requirements change rapidly, the existing code methods may not be able to respond quickly because each change involves code adjustments at multiple levels, from the user interface to the backend logic and then to the database structure, and this process can be very slow, so the speed of generating code will become very slow accordingly. Summary of the Invention

[0004] The main purpose of this application is to provide a method, apparatus, terminal, and medium for generating user interface code, aiming to efficiently and accurately generate user interface code based on class diagram annotations, facilitating code maintenance and subsequent development by developers.

[0005] To achieve the above objective, this application provides a method for generating user interface code, and the method includes:

[0006] Obtain the domain object corresponding to the user interface;

[0007] Define the domain object through annotations to obtain annotation information;

[0008] Generate the interface component code corresponding to the user interface based on the user interface and the annotation information;

[0009] Generate the interface method code corresponding to the user interface based on the annotation information and the interface component code;

[0010] Determine the target code corresponding to the user interface according to the interface component code and the interface method code.

[0011] Specifically, the obtaining of the domain object corresponding to the user interface includes:

[0012] Determine the page corresponding to the user interface, the page components corresponding to the page, and the page actions corresponding to the page according to the user interface;

[0013] Design the domain object based on the page, the page components, and the page actions, where the page includes at least one parent page and at least one sub - page, the domain object includes a domain class, domain fields, and association fields, the domain class includes at least one sub - domain class, the association fields are used to manage the sub - domain classes, the domain fields are included in the domain class, the domain class corresponds to the page, the page actions correspond to the domain fields, and the page components correspond to the domain fields.

[0014] Specifically, the annotations include a first annotation, a second annotation, and a third annotation, and the annotation information includes first annotation information, second annotation information, and third annotation information;

[0015] The defining of the domain object through annotations to obtain annotation information includes:

[0016] Define the attributes of the domain object through the first annotation to obtain the first annotation information, where the first annotation information is used to represent the attributes of the page component and the values corresponding to the attributes of the page component;

[0017] Define the associations of the domain object through the second annotation to obtain the second annotation information, where the second annotation information is used to represent the relationship between the sub - page and the parent page;

[0018] Define the operations of the domain object through the third annotation to obtain the third annotation information, where the third annotation information is used to represent the relationship between the method of the domain class corresponding to the page and the page action.

[0019] Specifically, the first annotation is represented by the following expression:

[0020] @DAttr({name=value})

[0021] Among them, @Dattr is the metadata tag of the first annotation. @Dattr is used to provide the first annotation information on the attributes of the domain class. The name in @DAttr({name=value}) is used to represent the name corresponding to the attribute of the page component, and the value in @DAttr({name=value}) is used to represent the value corresponding to the attribute of the page component.

[0022] Specifically, the second annotation is represented by the following expression:

[0023] @DAsso({name=value})

[0024] Among them, @Dasso is the metadata tag of the second annotation. @Dasso is used to define the association relationship between the current domain class in the domain class and the target domain class in the domain class. The name in @DAsso({name=value}) is the name of the sub-page corresponding to the target domain class, and the value in @DAsso({name=value}) is used to represent the current domain class corresponding to the sub-page.

[0025] Specifically, the third annotation is represented by the following expression:

[0026] @DOpt({name=value})

[0027] Among them, @DOpt is the metadata tag of the third annotation. @DOpt is used to define the relationship between the method of the domain class corresponding to the page and the page action. The name in @DOpt({name=value}) is used to represent the name of the page action, and the value in @DOpt({name=value}) is used to represent the method name in the domain class corresponding to the page action.

[0028] Specifically, the design of the domain object based on the page, the page component, and the page action includes:

[0029] Based on the page action, by calling the reflectMtd mapping function, the domain field corresponding to the page action is obtained;

[0030] Based on the page component, by calling the reflectField mapping function, the domain field corresponding to the page component is obtained;

[0031] Based on the page, by calling the reflectCls mapping function, the domain class corresponding to the page is obtained.

[0032] To achieve the above object, the present application also provides a user interface code generation device, and the device includes:

[0033] The first unit is used to obtain a domain object corresponding to a user interface;

[0034] The second unit is used to define the domain object through an annotation to obtain annotation information;

[0035] The third unit is used to generate interface component code corresponding to the user interface based on the user interface and the annotation information;

[0036] The fourth unit is used to generate interface method code corresponding to the user interface based on the annotation information and the interface component code;

[0037] The fifth unit is used to determine target code corresponding to the user interface according to the interface component code and the interface method code.

[0038] To achieve the above object, the present application further provides a terminal, including a memory storing multiple instructions; the processor loads the instructions from the memory to execute the steps in any one of the methods provided by the present application.

[0039] To achieve the above object, the present application further provides a medium, the medium stores multiple instructions, and the instructions are suitable for being loaded by a processor to execute the steps in any one of the methods provided by the present application.

[0040] A method, device, terminal, and medium for generating user interface code provided by the present application may first obtain a domain object corresponding to a user interface; define the domain object through an annotation to obtain annotation information; then, generate interface component code corresponding to the user interface based on the user interface and the annotation information; then, generate interface method code corresponding to the user interface based on the annotation information and the interface component code; finally, determine target code corresponding to the user interface according to the interface component code and the interface method code.

[0041] The present application can efficiently and accurately generate code for a user interface based on class diagram annotations, facilitating code maintenance and subsequent development by developers. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] Figure 1 It is a schematic flowchart provided by an embodiment of the present application;

[0043] Figure 2 It is a schematic structural diagram of a user interface code generation device provided by an embodiment of the present application;

[0044] Figure 3 It is a schematic structural diagram of a terminal provided by an embodiment of the present application. DETAILED DESCRIPTION

[0045] Next, the technical solutions in the embodiments of the present application will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative efforts belong to the scope of protection of the present application.

[0046] Since the existing user interface code generation process has the following deficiencies: as the application grows, the complexity of the user interface code also increases. When the business logic or design requirements change, updating and maintaining these codes can be very time-consuming and error-prone; changes to the user interface usually require synchronous updates to the code in multiple places, increasing the likelihood of errors; when the business requirements change rapidly, the existing code methods may not be able to respond quickly because each change involves code adjustments at multiple levels, from the user interface to the backend logic and then to the database structure, and this process can be very slow, so the speed of generating code will become very slow.

[0047] Therefore, the embodiments of the present application provide a user interface code generation method, device, terminal, and medium to solve practical technical problems.

[0048] In some embodiments, the device can be specifically integrated in an electronic device, and the electronic device can be a device such as a terminal or a server.

[0049] In some embodiments, the server can also be implemented in the form of a terminal.

[0050] Among them, the server can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN (Content Delivery Network), and big data and artificial intelligence platforms.

[0051] Among them, the terminal can be a smart phone, a tablet computer, a notebook computer, a desktop computer, a smart speaker, a smart watch, etc., but is not limited thereto. The terminal and the server can be directly or indirectly connected through wired or wireless communication methods, and the present application does not make any restrictions here.

[0052] The following will be described in detail respectively. It should be noted that the serial numbers of the following embodiments do not limit the preferred order of the embodiments.

[0053] An embodiment of the present application provides a method for generating user interface code. The method can efficiently and accurately generate the code of the user interface based on class diagram annotations, facilitating developers to perform code maintenance and subsequent development.

[0054] As Figure 1 , the specific process of the method can be as follows:

[0055] S110. Obtain the domain object corresponding to the user interface.

[0056] In some embodiments, the obtaining of the domain object corresponding to the user interface includes the step contents of S111 to S112 as shown below:

[0057] S111. Determine the page corresponding to the user interface, the page components corresponding to the page, and the page actions corresponding to the page according to the user interface.

[0058] S112. Design the domain object based on the page, the page components, and the page actions. Wherein, the page includes at least one parent page and at least one sub-page, the domain object includes a domain class, domain fields, and association fields, the domain class includes at least one sub-domain class, the association fields are used to manage the sub-domain classes, the domain fields are included in the domain class, the domain class corresponds to the page, the page actions correspond to the domain fields, and the page components correspond to the domain fields.

[0059] In some embodiments, the domain object can be obtained by using the page class diagram design and the annotation class diagram design methods.

[0060] In some embodiments, the designing of the domain object based on the page, the page components, and the page actions includes the step contents of S1121 to S1123 as shown below:

[0061] S1121. Based on the page actions, call the reflectMtd mapping function to obtain the domain fields corresponding to the page actions.

[0062] S1122. Based on the page components, call the reflectField mapping function to obtain the domain fields corresponding to the page components.

[0063] S1123. Based on the page, call the reflectCls mapping function to obtain the domain class corresponding to the page.

[0064] S120. Define the domain object through annotations to obtain annotation information.

[0065] In some embodiments, the annotations include a first annotation, a second annotation, and a third annotation, and the annotation information includes first annotation information, second annotation information, and third annotation information.

[0066] In the domain class, design is carried out by using annotations. An annotation is also called metadata and is used to modify and explain data information such as packages, classes, methods, attributes, constructors, and local variables. In some embodiments, annotations can be set for three aspects: classes, methods, and attributes. That is, annotations can be divided into attribute annotations, association annotations, and operation annotations.

[0067] Specifically, by using the annotation to define the domain object, annotation information is obtained, including the step contents from S121 to S123 as follows:

[0068] S121. Use the first annotation to define the attributes of the domain object to obtain the first annotation information, where the first annotation information is used to characterize the attributes of the page component and the values corresponding to the attributes of the page component.

[0069] Specifically, the first annotation is represented by the following expression:

[0070] @DAttr({name = value})

[0071] Among them, @Dattr is the metadata marker of the first annotation. @Dattr is used to provide the first annotation information on the attributes of the domain class. name in @DAttr({name = value}) is used to characterize the name corresponding to the attributes of the page component, and value in @DAttr({name = value}) is used to characterize the value corresponding to the attributes of the page component.

[0072] S122. Use the second annotation to define the association of the domain object to obtain the second annotation information, where the second annotation information is used to characterize the relationship between the sub-page and the parent page.

[0073] Specifically, the second annotation is represented by the following expression:

[0074] @DAsso({name = value})

[0075] Among them, @Dasso is the metadata tag of the second annotation. @Dasso is used to define the association relationship between the current domain class in the domain class and the target domain class in the domain class. The name in @DAsso({name=value}) is the name of the sub-page corresponding to the target domain class, and the value in @DAsso({name=value}) is used to represent the current domain class corresponding to the sub-page.

[0076] S123. Through the third annotation, perform operation definition on the domain object to obtain the third annotation information, where the third annotation information is used to represent the relationship between the method of the domain class corresponding to the page and the page action.

[0077] Specifically, the third annotation is represented by the following expression:

[0078] @DOpt({name=value})

[0079] Among them, @DOpt is the metadata tag of the third annotation. @DOpt is used to define the relationship between the method of the domain class corresponding to the page and the page action. The name in @DOpt({name=value}) is used to represent the name of the page action, and the value in @DOpt({name=value}) is used to represent the method name in the domain class corresponding to the page action.

[0080] S130. Based on the user interface and the annotation information, generate the interface component code corresponding to the user interface.

[0081] In some embodiments, the generating the interface component code corresponding to the user interface based on the user interface and the annotation information includes the step contents of A1 to A6 as follows:

[0082] A1. Parse the annotation and the domain object:

[0083] Extract all necessary metadata from the domain class and its attributes, associations, and operations.

[0084] Read the annotation corresponding to @DAttr: Parse the key-value pairs in the @DAttr annotation, and extract information such as the type, initial value, validation rule, and style of each attribute.

[0085] Read the @DAsso annotation: Parse the key-value pairs in the @DAsso annotation, and extract the association relationship (such as "one-to-many", "many-to-many") and the target class and foreign key field of the association.

[0086] Construct a domain object graph: According to the annotation information, construct a domain object graph to clarify the relationships, attribute configurations, and association relationships between various domain classes.

[0087] A2. Create an HTML template:

[0088] Generate the static structure (HTML) of the user interface based on the domain object and annotation information.

[0089] Generate HTML elements: Generate corresponding HTML elements for each domain attribute according to the type attribute in @DAttr. For example, type = text may generate <input type＝"text"> , type = select may generate <select>。

[0090] Set the initial value: Set the initial value of the HTML element according to the value attribute in @DAttr. For example, value = "default" may be set to < / select> <input type＝"text"value＝"default"> .

[0091] Add placeholder text: Add placeholder text to the input box according to the placeholder attribute in @DAttr. For example, placeholder = "Please enter your username" may generate <input type＝"text"placeholder＝"请输入用户名"> .

[0092] Set labels: Generate corresponding labels for each input box according to the label attribute in @DAttr. For example, label = "Username" may generate <label for＝"username">Username< / label> .

[0093] Add CSS class names: Add CSS class names to the HTML elements according to the class attribute in @DAttr. For example, class = "form-control" may generate <input type＝"text"class＝"form-control"> .

[0094] Handle association relationships: Generate the HTML structure for displaying associated objects according to the @DAsso annotation. For example, if the Order class is associated with multiple Product classes, a table or dropdown list can be generated to display these products.

[0095] A3. Generate forms and layouts:

[0096] Generate the form structure and page layout based on the domain object and annotation information.

[0097] Specific steps:

[0098] Create form elements: Generate form elements (such as <form>Label), and include all relevant input fields.

[0099] Organizational layout: According to the layout information in the annotation (such as uiType = table or uiType = form), organize the form fields into a suitable layout structure. For example, use a table layout or a grouped layout to display multiple fields.

[0100] Add buttons and operations: According to the @DOpt annotation, generate buttons for triggering operations (such as submit button, cancel button). For example, onClick = saveUser may generate <button type＝"button"onclick＝"saveuser()">Save< / button> .

[0101] A4. Bind action listeners:

[0102] Add action listeners to elements that require interaction (such as buttons, forms).

[0103] Read the @DOpt annotation: Parse the action names (such as onClick, onSubmit) and corresponding method names in the @DOpt annotation.

[0104] Bind action handlers: Generate corresponding action listeners for each action and bind them to the corresponding HTML elements. For example, onClick = saveUser may generate document.getElementById('saveButton').addEventListener('click', saveUser);

[0105] Pass the action object: Ensure that the action handler function can receive the action object (such as event) for further processing inside the method (such as preventing the default behavior).

[0106] A5. Generate CSS styles:

[0107] Generate or reference the corresponding CSS file according to the style configuration in the annotation information to ensure that the interface components have the correct appearance.

[0108] Generate inline styles: Add inline styles to HTML elements according to the style attribute in @DAttr. For example, style = "width: 100%; height: 40px;" may generate <input type＝"text"style＝"width:100％；height:40px；"> .

[0109] Reference external CSS files: Reference the style classes in the external CSS file according to the class attribute in @DAttr. For example, class = "form-control" may reference the style of the form-control class.

[0110] Generate global styles: According to the project requirements, generate a global CSS file to define common style rules (such as fonts, colors, spacing, etc.).

[0111] A6. Generate JavaScript initialization code:

[0112] Generate initialization code for interface components to ensure that the state and bound actions can be correctly initialized when the page loads.

[0113] Initialize form data: According to the initial values in @DAttr, write code to initialize form data when the page loads. For example, value = "default" may be set when the page loads <input> for the value attribute of an element.

[0114] Bind action listeners: When the page loads, bind all action listeners to ensure that user interactions can trigger the corresponding action handlers.

[0115] Set default states: According to the configurations in the annotations, set the default states of the interface (such as showing / hiding certain elements, disabling certain buttons, etc.).

[0116] When loading, generate interface component code based on the JavaScript initialization code.

[0117] In some embodiments, necessary auxiliary tools and libraries can also be generated for interface components to ensure the maintainability and extensibility of the code.

[0118] Generate validation functions: According to the validation rules in @DAttr (such as required = true, minLength = 3), generate validation functions for input validation when the user submits a form.

[0119] Generate formatting functions: According to the format requirements in the annotations (such as date format, currency format), generate formatting functions for format conversion when displaying data on the interface.

[0120] Generate internationalization support: According to the project requirements, generate internationalization support code to ensure that the interface can display different text contents according to the user's language preferences.

[0121] In some embodiments, the generated interface component code can also be integrated with the backend logic and comprehensively tested.

[0122] Integrate the front and backend: Ensure that the generated front-end code can correctly call the backend API and the backend API can correctly respond to front-end requests.

[0123] Unit testing: Write unit tests for the generated interface components to ensure that each component works as expected. The tests should cover normal processes and exceptional situations.

[0124] Integration testing: Conduct integration testing to verify the smooth communication between the front end and the back end and ensure that the entire system works as expected.

[0125] UI testing: Use automation tools (such as Selenium, Cypress) to simulate user operations and check whether the generated interface components can correctly respond to user interactions.

[0126] S140. Generate interface method code corresponding to the user interface based on the annotation information and the interface component code.

[0127] Continuing the above embodiments, the generation of interface method code corresponding to the user interface based on the annotation information and the interface component code includes the step contents of B1 to B5 as follows:

[0128] B1. Parse annotation information:

[0129] Extract all necessary metadata from the domain class and its attributes, associations, and operations.

[0130] Read the third annotation information corresponding to @DOpt: Parse the key-value pairs in the @DOpt annotation, and extract the action name (such as onClick, onSubmit) and the corresponding method name or processing logic.

[0131] Extract method signature: Determine the method name, parameter list, and return type to be generated according to the value in @DOpt. For example, "onClick=saveUser" indicates that a method named saveUser needs to be generated.

[0132] Identify associated operations: If the @DOpt contains complex expressions (such as method signatures with parameters), parse these expressions to determine the specific implementation details of the method.

[0133] B2. Generate action processor functions:

[0134] Generate corresponding action processor functions for each user interaction action.

[0135] Create function declarations: Generate declarations of action processor functions according to the name and value in @DOpt. For example, "onClick=saveUser" will generate a function named saveUser.

[0136] Bind action listeners: In the interface component code, add action listeners to the corresponding HTML elements (such as buttons, forms). For example, use addEventListener or framework-specific action binding mechanisms (such as React's onClick property).

[0137] Pass the action object: Ensure that the action handler function can receive the action object (such as event) for further processing inside the method (such as preventing the default behavior).

[0138] B3. Implement the action processing logic:

[0139] Implement the specific business logic for each action handler function.

[0140] Collect user input: If the action involves form submission or other user input, write code to collect form data or obtain the values selected by the user. For example, use the FormData object or directly access the value property of DOM elements.

[0141] Call the backend API: According to the method name in @DOpt, call the corresponding backend API. For example, the saveUser method may send an HTTP request to the server to save user data. You can use libraries such as fetch, Axios, etc. to implement the API call.

[0142] Handle asynchronous operations: For operations involving network requests, use asynchronous programming patterns (such as async / await or Promise), and handle the success and failure cases. For example, catch possible errors in a try...catch block and provide appropriate error prompts.

[0143] Update the UI state: After the action processing is completed, update the state of the interface (such as displaying a success message, resetting the form, navigating to a new page, etc.). You can use JavaScript to manipulate the DOM, or update the state when using a framework (such as React's useState or Vue's reactive data).

[0144] B4. Validation and error handling:

[0145] Ensure that the data entered by the user meets the requirements and handle possible errors.

[0146] Input validation: According to the validation rules in the @DAttr annotation (such as required = true, minLength = 3), perform input validation before the action processing. You can use regular expressions, custom validation functions, etc. to check the validity of the user input.

[0147] Display error messages: If the validation fails, provide user-friendly error messages to help them correct their input. You can display error messages on the interface or highlight the problematic input fields.

[0148] Capture API errors: When calling the backend API, capture possible errors (such as network request failures, server error responses), and provide appropriate error messages to the user. You can use a catch block to handle errors and display error messages or a retry mechanism.

[0149] B5. Integrate front-end and back-end communication:

[0150] Ensure that the front-end code can correctly call the backend API and process the API's response data.

[0151] Generate API requests: Based on the method name in the @DOpt annotation, generate the corresponding API request code. For example, the saveUser method may call the / api / users / save interface. Ensure that the request URL, HTTP method (such as POST, PUT), request headers (such as Content-Type), and request body (such as JSON data) are correctly configured.

[0152] Process response data: Update the interface or trigger other actions based on the data in the API response. For example, refresh the page or display a success message after a successful save. You can use then or async / await to process the API's response data.

[0153] Manage state synchronization: If state synchronization between the front-end and back-end is required (such as real-time data updates), consider using WebSocket or other real-time communication technologies.

[0154] In some embodiments, based on the code after integrating front-end and back-end communication, generate the interface method code.

[0155] In some embodiments, it is also possible to optimize performance and the user experience, improving the performance of the code and the overall experience of the user.

[0156] Reduce unnecessary requests: Ensure that network requests are only sent when necessary, avoiding frequent API calls. You can use techniques such as throttle and debounce to optimize the handling of input actions.

[0157] Provide feedback: During asynchronous operations, provide the user with a loading indicator or progress bar to enhance the user experience. You can use a loading state or display a spinning icon to indicate the ongoing operation.

[0158] Cached Data: For frequently used data, consider using local caches (such as localStorage or sessionStorage) to reduce repeated requests. Cache strategies (such as TTL, LRU) can be used to manage the expiration of cached data.

[0159] In some embodiments, testing and debugging can also be performed to ensure that the generated interface method code works as expected and has no obvious errors.

[0160] Unit Testing: Write unit tests for the generated methods to ensure that each method works as expected. The tests should cover normal processes and exceptional cases. Testing frameworks such as Jest, Mocha, etc. can be used to write and run unit tests.

[0161] Integration Testing: Conduct integration testing to verify that the communication between the front end and the back end is smooth and ensure that the entire system works as expected. Tools such as Cypress, Puppeteer, etc. can be used to simulate user operations and test the complete interaction process.

[0162] UI Testing: Use automation tools (such as Selenium, Cypress) to simulate user operations and check whether the generated interface components and methods can correctly respond to user interactions. Ensure that all elements such as buttons, forms, etc. on the interface work properly.

[0163] S150. Determine the target code corresponding to the user interface according to the interface component code and the interface method code.

[0164] Embodiments of the present application can first obtain a domain object corresponding to a user interface; define the domain object through annotations to obtain annotation information; then, based on the user interface and the annotation information, generate interface component code corresponding to the user interface; then, based on the annotation information and the interface component code, generate interface method code corresponding to the user interface; finally, determine the target code corresponding to the user interface according to the interface component code and the interface method code.

[0165] In summary, the present application provides a method for generating user interface code, which can efficiently and accurately generate the code of the user interface based on class diagram annotations, facilitating code maintenance and subsequent development by developers.

[0166] To better implement the above method, embodiments of the present application also provide a user interface code generation device, which can be specifically integrated in an electronic device, and the electronic device can be a device such as a terminal, a server, etc. Among them, the terminal can be a device such as a mobile phone, a tablet computer, a smart Bluetooth device, a notebook computer, a personal computer, etc.; the server can be a single server or a server cluster composed of multiple servers.

[0167] For example, in this embodiment, taking the specific integration of the user interface code generation device in the terminal as an example, the method of the embodiment of the present application will be described in detail.

[0168] For instance, as Figure 2 shown, the user interface code generation device 200 may include a first unit 201, a second unit 202, a third unit 203, a fourth unit 204, and a fifth unit 205. The user interface code generation device 200 includes:

[0169] The first unit 201 is configured to obtain a domain object corresponding to the user interface;

[0170] The second unit 202 is configured to define the domain object through annotations to obtain annotation information;

[0171] The third unit 203 is configured to generate interface component code corresponding to the user interface based on the user interface and the annotation information;

[0172] The fourth unit 204 is configured to generate interface method code corresponding to the user interface based on the annotation information and the interface component code;

[0173] The fifth unit 205 is configured to determine target code corresponding to the user interface according to the interface component code and the interface method code.

[0174] In specific implementation, the above units can be implemented as independent entities, or can be arbitrarily combined to be implemented as the same or several entities. For the specific implementation of the above units, reference can be made to the foregoing method embodiments, which will not be elaborated herein.

[0175] As can be seen from the above, the embodiment of the present application can efficiently and accurately generate the code of the user interface based on class diagram annotations, facilitating developers to perform code maintenance and subsequent development.

[0176] The embodiment of the present application further provides an electronic device, which can be a device such as a terminal, a server, etc. Among them, the terminal can be a mobile phone, a tablet computer, a smart Bluetooth device, a notebook computer, a personal computer, etc.; the server can be a single server or a server cluster composed of multiple servers, etc.

[0177] In some embodiments, the product processing device can also be integrated in multiple electronic devices. For example, the product processing device can be integrated in multiple servers, and the user interface code generation method of the present application is implemented by multiple servers.

[0178] In this embodiment, taking the electronic device of this embodiment as a terminal as an example for detailed description. For instance, as Figure 3 As shown, it shows a schematic structural diagram of the terminal 300 involved in the embodiments of the present application. Specifically:

[0179] The terminal 300 may include a processor 301 with one or more processing cores, a memory 302 of one or more media, a power supply 303, an input module 304, a communication module 305, and other components. Those skilled in the art can understand that Figure 3 the structure of the terminal 300 shown in does not constitute a limitation on the terminal 300, and it may include more or fewer components than shown, or combine certain components, or have different component arrangements. Among them:

[0180] The processor 301 is the control center of the terminal 300, connecting various parts of the entire terminal 300 through various interfaces and lines. By running or executing software programs and / or modules stored in the memory 302, and by calling data stored in the memory 302, it executes various functions of the terminal 300 and processes data, thereby monitoring the terminal 300 as a whole. In some embodiments, the processor 301 may include one or more processing cores; in some embodiments, the processor 301 may integrate an application processor and a modem processor. Among them, the application processor mainly processes the operating system, user interface, application programs, etc., and the modem processor mainly processes wireless communication. It can be understood that the above-mentioned modem processor may not be integrated into the processor 301.

[0181] The memory 302 can be used to store software programs and modules. The processor 301 executes various functional applications and data processing by running the software programs and modules stored in the memory 302. The memory 302 may mainly include a program storage area and a data storage area. Among them, the program storage area may store the operating system, application programs required for at least one function (such as a sound playback function, an image playback function, etc.); the data storage area may store data created according to the use of the terminal 300. In addition, the memory 302 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one magnetic disk storage device, a flash memory device, or other volatile solid-state storage devices. Correspondingly, the memory 302 may also include a memory controller to provide the processor 301 with access to the memory 302.

[0182] The terminal 300 also includes a power supply 303 that powers each component. In some embodiments, the power supply 303 may be logically connected to the processor 301 through a power management system, so as to implement functions such as management of charging, discharging, and power consumption management through the power management system. The power supply 303 may also include any components such as one or more DC or AC power supplies, a recharge system, a power failure detection circuit, a power converter or inverter, and a power status indicator.

[0183] The terminal 300 may further include an input module 304, which can be used to receive input digital or character information, and generate keyboard, mouse, joystick, optical or trackball signal inputs related to user settings and function controls.

[0184] The terminal 300 may further include a communication module 305. In some embodiments, the communication module 305 may include a wireless module. The terminal 300 can perform short - range wireless transmission through the wireless module of the communication module 305, thereby providing users with wireless broadband Internet access. For example, the communication module 305 can be used to help users send and receive emails, browse web pages, and access streaming media, etc.

[0185] Although not shown, the terminal 300 may further include a display unit, etc., which will not be elaborated here. Specifically, in this embodiment, the processor 301 in the terminal 300 will load the executable files corresponding to the processes of one or more application programs into the memory 302 according to the following instructions, and the processor 301 will run the application programs stored in the memory 302 to achieve various functions as follows:

[0186] Obtain the domain object corresponding to the user interface;

[0187] Define the domain object through annotations to obtain annotation information;

[0188] Generate the interface component code corresponding to the user interface based on the user interface and the annotation information;

[0189] Generate the interface method code corresponding to the user interface based on the annotation information and the interface component code;

[0190] Determine the target code corresponding to the user interface according to the interface component code and the interface method code.

[0191] For the specific implementation of each of the above operations, reference can be made to the previous embodiments, which will not be elaborated here.

[0192] As can be seen from the above, the embodiments of the present application can efficiently and accurately generate the code of the user interface based on class diagram annotations, which is convenient for developers to maintain the code and perform subsequent development.

[0193] Those of ordinary skill in the art can understand that all or part of the steps in the various methods of the above embodiments can be completed by instructions, or by instructions controlling related hardware. The instructions can be stored in a medium and loaded and executed by a processor.

[0194] To this end, an embodiment of the present application provides a medium in which multiple instructions are stored, and these instructions can be loaded by a processor to execute the steps in any one of the user interface code generation methods provided by the embodiments of the present application. For example, the instructions can perform the following steps:

[0195] Obtain a domain object corresponding to the user interface;

[0196] Define the domain object through annotations to obtain annotation information;

[0197] Generate interface component code corresponding to the user interface based on the user interface and the annotation information;

[0198] Generate interface method code corresponding to the user interface based on the annotation information and the interface component code;

[0199] Determine the target code corresponding to the user interface according to the interface component code and the interface method code.

[0200] Among them, the medium may include: read-only memory (ROM, Read Only Memory), random access memory (RAM, Random Access Memory), magnetic disk or optical disc, etc.

[0201] According to one aspect of the present application, a computer program product or computer program is provided. The computer program product or computer program includes computer instructions, and the computer instructions are stored in a medium. The processor of the computer device reads the computer instructions from the medium, and the processor executes the computer instructions, so that the computer device executes the methods provided in the various optional implementation manners provided in the above embodiments.

[0202] Since the instructions stored in the medium can execute the steps in any one of the user interface code generation methods provided by the embodiments of the present application, the beneficial effects that can be achieved by any one of the user interface code generation methods provided by the embodiments of the present application can be realized. For details, see the previous embodiments and will not be repeated here.

[0203] The above has introduced in detail a user interface code generation method, device, terminal and medium provided by the embodiments of the present application. Specific examples are used in this article to elaborate on the principle and implementation manner of the present application. The description of the above embodiments is only used to help understand the method and its core idea of the present application; at the same time, for those skilled in the art, according to the idea of the present application, there will be changes in the specific implementation manner and application scope. In summary, the content of this specification should not be construed as a limitation to the present application.< / form>

Claims

1. A method for generating user interface code, characterized in that The method includes: Obtaining a domain object corresponding to the user interface; the obtaining of the domain object corresponding to the user interface includes: determining, according to the user interface, the page corresponding to the user interface, the page components corresponding to the page, and the page actions corresponding to the page; designing the domain object based on the page, the page components, and the page actions, where the page includes at least one parent page and at least one sub-page, the domain object includes a domain class, domain fields, and association fields, the domain class includes at least one sub-domain class, the association fields are used to manage the sub-domain classes, the domain fields are included in the domain class, the domain class corresponds to the page, the page actions correspond to the domain fields, and the page components correspond to the domain fields; Defining the domain object through annotations to obtain annotation information; the annotations include a first annotation, a second annotation, and a third annotation, and the annotation information includes first annotation information, second annotation information, and third annotation information; the defining of the domain object through annotations to obtain annotation information includes: defining the attributes of the domain object through the first annotation to obtain the first annotation information, where the first annotation information is used to characterize the attributes of the page components and the values corresponding to the attributes of the page components; defining the associations of the domain object through the second annotation to obtain the second annotation information, where the second annotation information is used to characterize the relationship between the sub-page and the parent page; defining the operations of the domain object through the third annotation to obtain the third annotation information, where the third annotation information is used to characterize the relationship between the method of the domain class corresponding to the page and the page actions; Generating interface component code corresponding to the user interface based on the user interface and the annotation information; Generating interface method code corresponding to the user interface based on the annotation information and the interface component code; Determining the target code corresponding to the user interface according to the interface component code and the interface method code.

2. The method according to claim 1, wherein The first annotation is represented by the following expression: @DAttr({name = value}) where @Dattr is the metadata tag of the first annotation, @Dattr is used to provide the first annotation information on the attributes of the domain class, name in @DAttr({name = value}) is used to characterize the name corresponding to the attribute of the page component, and value in @DAttr({name = value}) is used to characterize the value corresponding to the attribute of the page component.

3. The method according to claim 1, characterized in that The second annotation is represented by the following expression: @DAsso({name = value}) Among them, @Dasso is the metadata tag of the second annotation. @Dasso is used to define the association relationship between the current domain class in the domain class and the target domain class in the domain class. In @DAsso({name = value}), name is the name of the sub - page corresponding to the target domain class, and value in @DAsso({name = value}) is used to represent the current domain class corresponding to the sub - page.

4. The method according to claim 1, characterized in that The third annotation is represented by the following expression: @DOpt({name = value}) Among them, @DOpt is the metadata tag of the third annotation. @DOpt is used to define the relationship between the method of the domain class corresponding to the page and the page action. In @DOpt({name = value}), name is used to represent the name of the page action, and value in @DOpt({name = value}) is used to represent the method name in the domain class corresponding to the page action.

5. The method according to claim 1, characterized in that Designing the domain object based on the page, the page component, and the page action includes: Based on the page action, by calling the reflectMtd mapping function, obtaining the domain field corresponding to the page action; Based on the page component, by calling the reflectField mapping function, obtaining the domain field corresponding to the page component; Based on the page, by calling the reflectCls mapping function, obtaining the domain class corresponding to the page.

6. A user interface code generation device, characterized in that, The device includes: A first unit for obtaining the domain object corresponding to the user interface; obtaining the domain object corresponding to the user interface includes: according to the user interface, determining the page corresponding to the user interface, the page component corresponding to the page, and the page action corresponding to the page; designing the domain object based on the page, the page component, and the page action, where the page includes at least one parent page and at least one sub - page, the domain object includes a domain class, a domain field, and an association field, the domain class includes at least one sub - domain class, the association field is used to manage the sub - domain class, the domain field is included in the domain class, the domain class corresponds to the page, the page action corresponds to the domain field, and the page component corresponds to the domain field; A second unit for defining the domain object through annotations to obtain annotation information; the annotations include a first annotation, a second annotation, and a third annotation, and the annotation information includes first annotation information, second annotation information, and third annotation information; the defining the domain object through annotations to obtain annotation information includes: defining the attributes of the domain object through the first annotation to obtain the first annotation information, where the first annotation information is used to characterize the attributes of the page component and the values corresponding to the attributes of the page component; defining the association of the domain object through the second annotation to obtain the second annotation information, where the second annotation information is used to characterize the relationship between the sub-page and the parent page; defining the operations of the domain object through the third annotation to obtain the third annotation information, where the third annotation information is used to characterize the relationship between the method of the domain class corresponding to the page and the page action; A third unit for generating the interface component code corresponding to the user interface based on the user interface and the annotation information; A fourth unit for generating the interface method code corresponding to the user interface based on the annotation information and the interface component code; A fifth unit for determining the target code corresponding to the user interface according to the interface component code and the interface method code.

7. A terminal, characterized in that, It includes a processor and a memory, and the memory stores multiple instructions; the processor loads the instructions from the memory to execute the steps in the method according to any one of claims 1 to 5.

8. A medium, characterized in that, The medium stores multiple instructions, and the instructions are suitable for being loaded by the processor to execute the steps in the method according to any one of claims 1 to 5.

Images