User interface code generation method and device, terminal and medium

Abstract

The invention discloses a user interface code generation method and device, a terminal and a medium. The method comprises the steps of obtaining a domain object corresponding to a user interface; defining the domain object through annotations to obtain annotation information; generating an interface component code corresponding to the user interface based on the user interface and the annotation information; generating an interface method code corresponding to the user interface based on the annotation information and the interface component code; and determining a target code corresponding to the user interface according to the interface component code and the interface method code. The method aims at efficiently generating the codes of the user interface, and developers can conveniently carry out code maintenance and follow-up development.

Description

Technical Field

[0001] The present application relates to the field of user interface development, and in particular to a method, device, terminal and medium for generating user interface code. Background Art

[0002] Platform independence refers to a feature of software or programming language design that allows the written program to run on a variety of different hardware or operating system platforms without the need for special modifications or recompilation for each platform. In the process of user interface development, cross-platform components can be built based on platform independence. User interface (UI) business component design is an important part of software development, involving the decomposition of 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 scenario and identifying all possible situations and change points. For the subsequent work of developers, the corresponding code of the user interface needs to be generated.

[0003] However, the existing user interface code generation process includes the following shortcomings: 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 may become very time-consuming and error-prone; changes in the user interface usually require synchronous updates of codes in multiple places, increasing the possibility of errors; when business requirements change rapidly, the existing code method may not be able to respond quickly, because each change involves code adjustments at multiple levels, from the user interface to the backend logic to the database structure. This process may be very slow, so the speed of code generation will become very slow. Summary of the invention

[0004] The main purpose of the present application is to provide a user interface code generation method, device, terminal and medium, which aims to efficiently and accurately generate user interface code based on class diagram annotations, so as to facilitate developers to perform code maintenance and subsequent development.

[0005] To achieve the above object, the present application provides a method for generating a user interface code, the method comprising:

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

[0007] By annotation, the domain object is defined to obtain annotation information;

[0008] Based on the user interface and the annotation information, generate an interface component code corresponding to the user interface;

[0009] Based on the annotation information and the interface component code, generate an interface method code corresponding to the user interface;

[0010] According to the interface component code and the interface method code, a target code corresponding to the user interface is determined.

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

[0012] According to the user interface, determining a page corresponding to the user interface, a page component corresponding to the page, and a page action corresponding to the page;

[0013] Based on the page, the page components and the page actions, the domain object is designed, wherein the page includes at least one parent page and at least one child page, the domain object includes a domain class, a domain field and an associated field, the domain class includes at least one sub-domain class, the associated 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.

[0014] Specifically, the annotation includes 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 domain object is defined through annotation to obtain annotation information, including:

[0016] By using the first annotation, defining the attributes of the domain object to obtain the first annotation information, wherein 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] By using the second annotation, the domain object is associated and defined to obtain the second annotation information, wherein the second annotation information is used to characterize the relationship between the child page and the parent page;

[0018] The domain object is operationally defined through the third annotation to obtain the third annotation information, wherein 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.

[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 domain object is designed based on the page, the page component and the page action, including:

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

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

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

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

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

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

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

[0036] A fourth unit is used to generate an 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 the target code corresponding to the user interface according to the interface component code and the interface method code.

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

[0039] To achieve the above objectives, the present application also provides a medium, wherein the medium stores a plurality of instructions, wherein the instructions are suitable for a processor to load to execute the steps in any one of the methods provided in the present application.

[0040] The present application provides a user interface code generation method, device, terminal and medium, which can first obtain the domain object corresponding to the user interface; define the domain object through annotation to obtain annotation information; then, based on the user interface and the annotation information, generate the interface component code corresponding to the user interface; then, based on the annotation information and the interface component code, generate the interface method code corresponding to the user interface; finally, according to the interface component code and the interface method code, determine the target code corresponding to the user interface.

[0041] This application can efficiently and accurately generate user interface code based on class diagram annotations, making it easier for developers to perform code maintenance and subsequent development. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] Figure 1 A schematic diagram of a process flow provided for an embodiment of the present application;

[0043] Figure 2 A schematic diagram of the structure of a user interface code generating device provided in an embodiment of the present application;

[0044] Figure 3 A schematic diagram of the structure of a terminal provided in an embodiment of the present application. DETAILED DESCRIPTION

[0045] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of this application.

[0046] The existing user interface code generation process has the following shortcomings: 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 may become very time-consuming and error-prone; changes in the user interface usually require synchronous updates of codes in multiple places, increasing the possibility of errors; when business requirements change rapidly, the existing code method may not be able to respond quickly, because each change involves code adjustments at multiple levels, from the user interface to the backend logic to the database structure. This process may be very slow, so the speed of code generation 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 may be specifically integrated into an electronic device, and the electronic device may be a terminal, a server, or other device.

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

[0050] Among them, the server can be an independent physical server, 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), as well as big data and artificial intelligence platforms.

[0051] The terminal may be a smart phone, a tablet computer, a laptop computer, a desktop computer, a smart speaker, a smart watch, etc., but is not limited thereto. The terminal and the server may be directly or indirectly connected via wired or wireless communication, and this application does not limit this.

[0052] It should be noted that the serial numbers of the following embodiments are not intended to limit the preferred order of the embodiments.

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

[0054] like 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 following steps S111 to S112:

[0057] S111. Determine, according to the user interface, a page corresponding to the user interface, a page component corresponding to the page, and a page action corresponding to the page.

[0058] S112. Based on the page, the page components and the page actions, the domain object is designed, wherein the page includes at least one parent page and at least one child page, the domain object includes a domain class, a domain field and an associated field, the domain class includes at least one sub-domain class, the associated 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.

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

[0060] In some embodiments, the designing of the domain object based on the page, the page component, and the page action includes the following steps S1121 to S1123:

[0061] S1121. Based on the page action, obtain the domain field corresponding to the page action by calling the reflectMtd mapping function.

[0062] S1122. Based on the page component, obtain the domain field corresponding to the page component by calling the reflectField mapping function.

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

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

[0065] In some embodiments, the annotation includes 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] The domain class is designed by using annotations. Annotations are also called metadata, which are used to modify and explain data information such as packages, classes, methods, properties, constructors, local variables, etc. In some embodiments, annotations can be set for classes, methods, and properties, that is, annotations can be divided into attribute annotations, association annotations, and operation annotations.

[0067] Specifically, the domain object is defined through annotation to obtain annotation information, including the steps S121 to S123 as shown below:

[0068] S121. Define the attributes of the domain object through the first annotation to obtain the first annotation information, wherein 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.

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

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

[0071] 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.

[0072] S122. By using the second annotation, the domain object is associated and defined to obtain the second annotation information, wherein the second annotation information is used to characterize the relationship between the child 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. Define the operation of the domain object through the third annotation to obtain the third annotation information, wherein 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.

[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. Generate interface component code corresponding to the user interface based on the user interface and the annotation information.

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

[0082] A1. Parsing annotations and domain objects:

[0083] Extract all necessary metadata from domain classes and their attributes, associations, and operations.

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

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

[0086] Build a domain object diagram: Based on the annotation information, build a domain object diagram to clarify the relationship, attribute configuration and association between each domain class.

[0087] A2. Create HTML template:

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

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

[0090] Set 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 based on the placeholder attribute in @DAttr. For example, placeholder="Please enter your username" may generate <input type＝"text"placeholder＝"请输入用户名"> .

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

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

[0094] Processing associations: Based on the @DAsso annotation, generate an HTML structure for displaying the associated objects. For example, if the Order class is associated with multiple Products, you can generate a table or drop-down list to display these products.

[0095] A3. Generate form and layout:

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

[0097] Specific steps:

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

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

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

[0101] A4. Bind action listener:

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

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

[0104] Bind action handler: Generate a corresponding action listener for each action and bind it to the corresponding HTML element. For example, onClick = saveUser may generate document.getElementById('saveButton').addEventListener('click',saveUser);

[0105] Passing action objects: Ensure that the action handler function is able to receive the action object (such as event) for further processing inside the method (such as preventing default behavior).

[0106] A5. Generate CSS styles:

[0107] Generate or reference the corresponding CSS file based on 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 based on 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: Based on the class attribute in @DAttr, reference the style class in the external CSS file. For example, class="form-control" may reference the style of the form-control class.

[0110] Generate global styles: Generate global CSS files based on project requirements and 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 binding actions are initialized correctly when the page loads.

[0113] Initialize form data: Write code to initialize form data when the page loads, based on the initial value in @DAttr. For example, value="default" may be set when the page loads. <input> The value attribute of the 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 state: According to the configuration in the annotation, set the default state of the interface (such as showing or hiding certain elements, disabling certain buttons, etc.).

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

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

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

[0119] Generate formatting function: Generate formatting function according to the format requirements in the annotation (such as date format, currency format), which is used to perform format conversion when displaying data on the interface.

[0120] Generate internationalization support: Generate internationalization support code based on project requirements to ensure that the interface can display different text content based on the user's language preference.

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

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

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

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

[0125] UI testing: Use automated tools (such as Selenium and 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 with the above embodiment, the generation of the interface method code corresponding to the user interface based on the annotation information and the interface component code includes the following steps B1 to B5:

[0128] B1. Analyze annotation information:

[0129] Extract all necessary metadata from domain classes and their attributes, associations, and operations.

[0130] Read the third annotation information corresponding to @DOpt: parse the key-value pairs in the @DOpt annotation, 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 based on the value in @DOpt. For example, "onClick = saveUser" means that a method named saveUser needs to be generated.

[0132] Identify the associated operations: If @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 function:

[0134] Generate a corresponding action handler function for each user interaction action.

[0135] Create function declaration: Generates the declaration of the action handler function based on 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 attribute).

[0137] Passing action objects: Ensure that the action handler function is able to receive the action object (such as event) for further processing inside the method (such as preventing default behavior).

[0138] B3. Implement action processing logic:

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

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

[0141] Call 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 and Axios to implement API calls.

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

[0143] Update UI state: After the action is processed, 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 responsive data).

[0144] B4. Validation and error handling:

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

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

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

[0148] Capture API errors: When calling the backend API, capture possible errors (such as network request failure, server returns an error response) and provide appropriate error prompts to the user. You can use the catch block to handle errors and display error messages or retry mechanisms.

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

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

[0151] Generate API request: Generate the corresponding API request code according to the method name in the @DOpt annotation. For example, the saveUser method may call the / api / users / save interface. Make sure the request URL, HTTP method (such as POST, PUT), request header (such as Content-Type), and request body (such as JSON data) are all configured correctly.

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

[0153] Management state synchronization: If you need to keep the state synchronized between the front-end and back-end (such as updating data in real time), you can consider using WebSocket or other real-time communication technologies.

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

[0155] In some embodiments, performance and user experience can also be optimized to improve code performance and the overall user experience.

[0156] Reduce unnecessary requests: Make sure network requests are sent only when necessary to avoid frequent API calls. You can use throttling, debounce and other techniques to optimize the processing of input actions.

[0157] Provide feedback: During asynchronous operations, provide users with loading indicators or progress bars to improve the user experience. You can use loading states or display a spinning icon to indicate ongoing operations.

[0158] Cache data: For frequently used data, consider using local cache (such as localStorage or sessionStorage) to reduce repeated requests. You can use cache strategies (such as TTL, LRU) to manage the validity period 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 both normal processes and abnormal situations. You can use testing frameworks such as Jest and Mocha to write and run unit tests.

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

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

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

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

[0165] In summary, the present application provides a user interface code generation method, which can efficiently and accurately generate user interface code based on class diagram annotations, making it easier for developers to perform code maintenance and subsequent development.

[0166] In order to better implement the above method, the embodiment of the present application also provides a user interface code generation device, which can be integrated in an electronic device, and the electronic device can be a terminal, a server, etc. Among them, the terminal can be a mobile phone, a tablet computer, a smart Bluetooth device, a laptop, 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, the method of the embodiment of the present application is described in detail by taking the user interface code generation device being specifically integrated in a terminal as an example.

[0168] For example, Figure 2 As shown, the user interface code generating 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, and the user interface code generating device 200 includes:

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

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

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

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

[0173] The fifth unit 205 is used to determine the 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. The specific implementation of the above units can refer to the previous method embodiments, which will not be repeated here.

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

[0176] The embodiment of the present application also provides an electronic device, which can be a terminal, a server, etc. The terminal can be a mobile phone, a tablet computer, a smart Bluetooth device, a laptop, 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 may also be integrated into multiple electronic devices. For example, the product processing device may be integrated into multiple servers, and the user interface code generation method of the present application may be implemented by multiple servers.

[0178] In this embodiment, the electronic device of this embodiment is a terminal as an example for detailed description, for example, Figure 3 As shown, it shows a schematic diagram of the structure of the terminal 300 involved in the embodiment of the present application, specifically:

[0179] The terminal 300 may include one or more processors 301 of processing cores, one or more storage media 302, a power supply 303, an input module 304, and a communication module 305. Those skilled in the art will appreciate that Figure 3 The structure of the terminal 300 shown in the figure does not constitute a limitation on the terminal 300, and the terminal 300 may include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently.

[0180] The processor 301 is the control center of the terminal 300. It uses various interfaces and lines to connect various parts of the entire terminal 300. It executes various functions of the terminal 300 and processes data by running or executing software programs and / or modules stored in the memory 302, and calling data stored in the memory 302, so as to monitor 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, wherein the application processor mainly processes the operating system, user interface, and application programs, and the modem processor mainly processes wireless communications. It is understandable 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, wherein the program storage area may store an operating system, an application required for at least one function (such as a sound playback function, an image playback function, etc.), etc.; the data storage area may store data created according to the use of the terminal 300, etc. 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 disk storage device, a flash memory device, or other volatile solid-state storage devices. Accordingly, 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 for supplying power to various components. In some embodiments, the power supply 303 can be logically connected to the processor 301 through a power management system, so as to manage charging, discharging, and power consumption through the power management system. The power supply 303 can also include any components such as one or more DC or AC power supplies, recharging systems, power failure detection circuits, power converters or inverters, and power status indicators.

[0183] The terminal 300 may further include an input module 304, which may 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 also include a communication module 305. In some embodiments, the communication module 305 may include a wireless module. The terminal 300 may perform short-range wireless transmission through the wireless module of the communication module 305, thereby providing the user with wireless broadband Internet access. For example, the communication module 305 may be used to help the user send and receive emails, browse web pages, and access streaming media.

[0185] Although not shown, the terminal 300 may also include a display unit, etc., which will not be described in detail 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 applications into the memory 302 according to the following instructions, and the processor 301 will run the applications stored in the memory 302, thereby realizing various functions, as follows:

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

[0187] By annotation, the domain object is defined to obtain annotation information;

[0188] Based on the user interface and the annotation information, generate an interface component code corresponding to the user interface;

[0189] Based on the annotation information and the interface component code, generate an interface method code corresponding to the user interface;

[0190] According to the interface component code and the interface method code, a target code corresponding to the user interface is determined.

[0191] The specific implementation of the above operations can be found in the previous embodiments, which will not be described in detail here.

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

[0193] Those skilled in the art will appreciate that all or part of the steps in the various methods of the above embodiments may be completed by instructions, or by controlling related hardware through instructions. The instructions may 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 a plurality of instructions are stored, and the instructions can be loaded by a processor to execute the steps in any one of the user interface code generation methods provided in the embodiment of the present application. For example, the instructions can execute the following steps:

[0195] Get the domain object corresponding to the user interface;

[0196] By annotation, the domain object is defined to obtain annotation information;

[0197] Based on the user interface and the annotation information, generate an interface component code corresponding to the user interface;

[0198] Based on the annotation information and the interface component code, generate an interface method code corresponding to the user interface;

[0199] According to the interface component code and the interface method code, a target code corresponding to the user interface is determined.

[0200] The medium may include: a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, etc.

[0201] According to one aspect of the present application, a computer program product or a computer program is provided, the computer program product or the computer program includes a computer instruction, the computer instruction is stored in a medium. A processor of a computer device reads the computer instruction from the medium, and the processor executes the computer instruction, so that the computer device executes the method provided in various optional implementations 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 in the embodiments of the present application, the beneficial effects that can be achieved by any one of the user interface code generation methods provided in the embodiments of the present application can be achieved. Please refer to the previous embodiments for details and will not be repeated here.

[0203] The above is a detailed introduction to a user interface code generation method, device, terminal and medium provided in an embodiment of the present application. Specific examples are used herein to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method of the present application and its core idea. At the same time, for technical personnel in this field, according to the idea of ​​the present application, there will be changes in the specific implementation method and application scope. In summary, the content of this specification should not be understood as a limitation on the present application.< / form>

Claims

1. A method for generating user interface code, characterized in that: The method comprises: Get the domain object corresponding to the user interface; By annotation, the domain object is defined to obtain annotation information; Based on the user interface and the annotation information, generate an interface component code corresponding to the user interface; Based on the annotation information and the interface component code, generate an interface method code corresponding to the user interface; According to the interface component code and the interface method code, a target code corresponding to the user interface is determined.

2. The method according to claim 1, characterized in that The obtaining of the domain object corresponding to the user interface includes: According to the user interface, determining a page corresponding to the user interface, a page component corresponding to the page, and a page action corresponding to the page; Based on the page, the page components and the page actions, the domain object is designed, wherein the page includes at least one parent page and at least one child page, the domain object includes a domain class, a domain field and an associated field, the domain class includes at least one sub-domain class, the associated 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.

3. The method according to claim 2, characterized in that The annotation includes 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 domain object is defined through annotation to obtain annotation information, including: By using the first annotation, defining the attributes of the domain object to obtain the first annotation information, wherein 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; By using the second annotation, the domain object is associated and defined to obtain the second annotation information, wherein the second annotation information is used to characterize the relationship between the child page and the parent page; The domain object is operationally defined through the third annotation to obtain the third annotation information, wherein 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.

4. The method according to claim 3, characterized in that The first annotation is represented by the following expression: @DAttr({name=value}) 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.

5. The method according to claim 3, 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, 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.

6. The method according to claim 3, 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, 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.

7. The method according to claim 2, characterized in that The domain object is designed based on the page, the page component and the page action, including: Based on the page action, the domain field corresponding to the page action is obtained by calling the reflectMtd mapping function; Based on the page component, the domain field corresponding to the page component is obtained by calling the reflectField mapping function; Based on the page, the domain class corresponding to the page is obtained by calling the reflectCls mapping function.

8. A user interface code generating device, characterized in that: The device comprises: The first unit is used to obtain the domain object corresponding to the user interface; The second unit is used to define the domain object through annotation and obtain annotation information; A third unit is used to generate an interface component code corresponding to the user interface based on the user interface and the annotation information; A fourth unit is used to generate an interface method code corresponding to the user interface based on the annotation information and the interface component code; The fifth unit is used to determine the target code corresponding to the user interface according to the interface component code and the interface method code.

9. A terminal, characterized in that: The method comprises a processor and a memory, wherein the memory stores a plurality of instructions; the processor loads instructions from the memory to execute the steps in the method according to any one of claims 1 to 7.

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

Images