User interface generation method and system, electronic equipment and storage medium

Abstract

The embodiment of the invention provides a user interface generation method and system, and the method comprises the steps: obtaining control information of at least one target control corresponding to a selection operation in response to the selection operation of a user; independently packaging each target control according to the control information to obtain at least one target control component; integrating the target control component into a target object container of a user interface based on an application programming interface; establishing an association relationship between the target control component and a control function in the target object container; and generating the user interface according to the association relationship and the target object container. According to the embodiment of the invention, by enhancing the flexibility, personalization and dynamic generation capability of the interface, the problem of fixed interface design in the background technology is solved, the overall interaction experience of the user is also remarkably improved, and more efficient development, maintenance and expansion capabilities are provided.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method for generating a user interface, a system for generating a user interface, an electronic device, and a computer-readable storage medium. Background Art

[0002] In the current digital age, the user interface (UI) plays a vital role in various applications and platforms, especially in audio and video players, where the design of the user interface directly affects the user's interactive experience.

[0003] Currently, most audio and video player interfaces are relatively fixed, usually designed and defined in advance by developers. Although such fixed interface design can meet the basic needs of general users, it often cannot provide the best user experience for users with specific needs or preferences.

[0004] In summary, there is much room for improvement in the interface design of current audio and video players in terms of customization and flexibility. Summary of the invention

[0005] In view of the above problems, embodiments of the present invention are proposed to provide a method for generating a user interface, a system for generating a user interface, an electronic device, and a computer-readable storage medium that overcome the above problems or at least partially solve the above problems.

[0006] In order to solve the above problems, an embodiment of the present invention discloses a method for generating a user interface, the method comprising: in response to a user's selection operation, obtaining control information of at least one target control corresponding to the selection operation; independently encapsulating each of the target controls according to the control information to obtain at least one target control component; integrating the target control component into a target object container of the user interface based on an application programming interface; establishing an association relationship between the target control component and the control function in the target object container; and generating the user interface according to the association relationship and the target object container.

[0007] Optionally, the independently encapsulating each of the target controls according to the control information to obtain at least one target control component includes: creating an independent hypertext markup language structure for each of the target controls according to the control information, and assigning independent cascading style sheets styles and JavaScript logic to each of the target controls; and encapsulating the target control, the cascading style sheets styles and the JavaScript logic into the hypertext markup language structure to obtain the target control component.

[0008] Optionally, the integrating the target control component into the target object container of the user interface based on an application programming interface includes: embedding the target control component into the target object container based on an application programming interface of hypertext markup language, and establishing mutual communication connections among the target control components in the target object container so as to enable the target control organizations to work together.

[0009] Optionally, establishing the association relationship between the target control component and the control function in the target object container includes: defining an event triggering mechanism and a listener for the target control component, the triggering mechanism including an operating condition and a response result; when the listener detects that the triggering operation of the event satisfies the operating condition, establishing the association relationship between the target control component and the control function using a response function in the response result.

[0010] Optionally, generating the user interface according to the association relationship and the target object container includes: data binding the target control component and the data fields corresponding to the control function according to the association relationship; constructing a hierarchical component tree structure including the target control component and the target object container; based on the hierarchical component tree structure, rendering the target control component into the target object container, and outputting the user interface.

[0011] Optionally, after generating the user interface according to the association relationship and the target object container, the method further comprises: performing a functional test and a performance test on the user interface so as to improve or optimize the user interface.

[0012] Optionally, in response to a user's selection operation, obtaining control information of at least one target control corresponding to the selection operation includes: in response to the selection operation, selecting at least one target control from native controls and / or extended controls of the user interface; and generating the control information according to the control category, control name, and control number of the target control.

[0013] An embodiment of the present invention also discloses a user interface generation system, which includes: a control information acquisition module, which is used to obtain control information of at least one target control corresponding to the selection operation in response to a user's selection operation; a target control encapsulation module, which is used to independently encapsulate each target control according to the control information to obtain at least one target control component; a control component integration module, which is used to integrate the target control component into a target object container of the user interface based on an application programming interface; an association relationship establishment module, which is used to establish an association relationship between the target control component and the control function in the target object container; and a user interface generation module, which is used to generate the user interface based on the association relationship and the target object container.

[0014] Optionally, the target control encapsulation module includes: a structure creation module, used to create an independent hypertext markup language structure for each target control according to the control information, and assign independent cascading style sheet styles and JavaScript logic to each target control; a structure encapsulation module, used to encapsulate the target control, the cascading style sheet style and the JavaScript logic into the hypertext markup language structure to obtain the target control component.

[0015] Optionally, the control component integration module is used to embed the target control component into the target object container based on the application programming interface of the hypertext markup language, and establish mutual communication connections between the target control components in the target object container to enable the target control organizations to work together.

[0016] Optionally, the association relationship establishing module includes: a component definition module, used to define an event triggering mechanism and a listener for the target control component, the triggering mechanism including an operating condition and a response result; a function processing module, used to establish an association relationship between the target control component and the control function using a response function in the response result when the listener detects that the triggering operation of the event satisfies the operating condition.

[0017] Optionally, the user interface generation module includes: a data binding module, used to data bind the target control component and the data fields corresponding to the control function according to the association relationship; a component tree construction module, used to construct a hierarchical component tree structure including the target control component and the target object container; an interface rendering module, used to render the target control component into the target object container based on the hierarchical component tree structure, and output the user interface.

[0018] Optionally, the system further includes: a testing module for performing functional testing and performance testing on the user interface after the user interface generation module generates the user interface according to the association relationship and the target object container, so as to improve or optimize the user interface.

[0019] Optionally, the control information acquisition module includes: a control selection module, used to select at least one of the target controls from the native controls and / or extended controls of the user interface in response to the selection operation; an information generation module, used to generate the control information according to the control category, control name, and control number of the target control.

[0020] An embodiment of the present invention further discloses an electronic device, comprising: one or more processors; and one or more machine-readable media storing instructions thereon, which, when executed by the one or more processors, enable the electronic device to execute the method for generating a user interface as described above.

[0021] The embodiment of the present invention further discloses a computer-readable storage medium, wherein a computer program stored in the storage medium enables a processor to execute the method for generating a user interface as described above.

[0022] The embodiments of the present invention include the following advantages:

[0023] The user interface generation scheme provided by the embodiment of the present invention obtains the control information of at least one target control corresponding to the selection operation in response to the user's selection operation. Then, each target control is independently encapsulated according to the control information to obtain at least one target control component. Next, the target control component is integrated into the target object container of the user interface based on the application programming interface. At the same time, an association relationship between the target control component and the control function in the target object container is established. Finally, the user interface is generated according to the association relationship and the target object container.

[0024] The embodiment of the present invention provides a user interface generation scheme that responds to user selection operations, so that users can freely select and configure the controls and layout of the interface according to their personal preferences and actual needs. This flexibility allows users to customize the appearance and functions of the interface, thereby improving the user's operating experience in different scenarios. By obtaining the control information corresponding to the user's selection operation and independently encapsulating each target control, users can generate a highly personalized user interface. This customized interface is not only more in line with the user's operating habits and aesthetic preferences, but can also be adjusted according to specific application scenarios to meet the needs of specific tasks or content, thereby significantly improving user satisfaction and interactive experience. The target control component is integrated into the target object container of the user interface through the application programming interface, and the association relationship between the control functions is established. This modular and componentized design makes the interface generation process more efficient and flexible. Developers can quickly integrate new control components based on standard application programming interfaces, reducing the complexity and error risk of manual coding. Since the user interface is dynamically generated according to the control information after the user selects an operation,

[0025] In summary, the embodiments of the present invention not only solve the fixed interface design problem in the background technology by enhancing the flexibility, personalization and dynamic generation capabilities of the interface, but also significantly improve the user's overall interactive experience and provide more efficient development, maintenance and expansion capabilities. BRIEF DESCRIPTION OF THE DRAWINGS

[0026] Figure 1 is a flowchart of steps of a method for generating a user interface according to an embodiment of the present invention;

[0027] Figure 2 is a schematic diagram of the principle of an audio-based custom style solution according to an embodiment of the present invention;

[0028] Figure 3 and Figure 4 They are respectively a schematic diagram of an audio player interface of a custom audio style based on an embodiment of the present invention;

[0029] Figure 5 It is a structural block diagram of a user interface generation system according to an embodiment of the present invention. DETAILED DESCRIPTION

[0030] In order to make the above-mentioned objects, features and advantages of the present invention more obvious and easy to understand, the present invention is further described in detail below with reference to the accompanying drawings and specific embodiments.

[0031] The embodiment of the present invention proposes a user interface generation scheme that obtains target control information corresponding to the operation by responding to the user's selection operation, and independently encapsulates each target control to generate a target control component. Subsequently, the application programming interface (Application Programming Interface, referred to as API) is used to integrate these components into the target object container of the user interface, and an association relationship between the components and the control functions in the container is established, and finally the user interface is generated according to these association relationships. This scheme significantly enhances the flexibility and customization capabilities of the user interface, allowing users to dynamically adjust the interface layout and functions according to their own needs and usage scenarios, while improving the personalized level of user experience. Through modular and componentized design, the scheme improves the efficiency of interface generation, the convenience of maintenance, and achieves better compatibility and scalability on different platforms and devices.

[0032] Reference Figure 1 , shows a flowchart of a method for generating a user interface according to an embodiment of the present invention. The method for generating a user interface may specifically include the following steps:

[0033] Step 101: In response to a selection operation of a user, obtain control information of at least one target control corresponding to the selection operation.

[0034] In the embodiments of the present invention, the user's selection operation is the starting point for generating a personalized user interface. The user can select or specify operations on certain parts of the user interface through various interactive methods, such as clicking, dragging, selecting from a drop-down menu, touching, etc. In response to these selection operations, the user's input is captured and the corresponding control information is identified. The control information includes key information such as the type, size, position, color, and function of the control, which is used in the subsequent interface generation process.

[0035] In this process, it is necessary to capture the user's selection operation. This can be achieved through event listeners. For example, in web applications, JavaScript (a programming language) event listeners will capture the user's click or selection operations in real time. Once the listener detects an operation, it will trigger the corresponding event processing function to start obtaining control information. For desktop or mobile applications, the user's selection operation can be captured through touch events, mouse events, or keyboard input. For example, in an audio and video player interface, the user may click the play button or drag the volume slider, and these operations will trigger the corresponding event processing.

[0036] Control information refers to the detailed properties and status of the target control related to the user operation. Each target control may include multiple information fields, such as the type of control (button, text box, slider, etc.), location (coordinates on the interface), size (width and height), color (foreground and background colors), state (enabled or disabled), and function description (such as the function of the play button is to play the video). This information will be recorded for processing and use in subsequent steps.

[0037] For example, suppose a user clicks the "Play" button in a customized audio and video player. This click event is captured, and the control information related to the button is obtained, such as the button identifier, position (X and Y coordinates), size (50px×50px), color (blue), function description (play video), etc. All this information will be stored for use in subsequent steps.

[0038] Step 102: perform independent encapsulation processing on each target control according to the control information to obtain at least one target control component.

[0039] In an embodiment of the present invention, the purpose of independent encapsulation is to modularize the appearance, behavior and function of the target control so that each target control component can be flexibly integrated and called in the subsequent interface generation process. Independent encapsulation usually involves several aspects of processing. The appearance characteristics of the target control are determined according to the control information, including size, color, font, icon, etc. Then, the behavior mode of the target control is defined, such as interaction methods such as clicking, dragging, sliding, and corresponding feedback mechanisms, such as visual feedback or sound feedback after the button is clicked. Finally, the functional logic of the target control is encapsulated, for example, the play button needs to trigger the play function, and the volume slider needs to adjust the volume. These appearances, behaviors and functions are encapsulated in an independent target control component, so that each target control component can be reused in different interfaces and scenarios.

[0040] For example, suppose the user selects a target control for a play button. After obtaining the control information of the target control, an independent target control component will be generated for the play button. This target control component includes the visual appearance of the play button (such as a round blue button with a play icon), interactive behavior (the button dims after clicking and plays the video at the same time), and its functional logic (triggering the video playback function after clicking). Through this encapsulation, all the features of the play button are integrated into one component, ensuring that it maintains consistent performance and functionality in different interfaces.

[0041] Step 103: Integrate the target control component into the target object container of the user interface based on the application programming interface.

[0042] In an embodiment of the present invention, API is a set of rules and specifications that define how different software components communicate and interact with each other. In this step, the role of API is to act as a bridge between the target control component and the user interface, ensuring that each target control component can be correctly integrated into the structure of the user interface.

[0043] Specifically, the target object container is a structured space in the user interface used to carry and manage the target control component. It can be a window, panel, layout frame, etc., which can accommodate multiple different control components. Through the API, the encapsulated target control component can be accurately inserted into the specified position in the target object container according to the requirements of the user interface design.

[0044] This process usually includes several key steps. First, create or access the target object container through API calls. Next, according to the layout and design requirements of the user interface, use the API to add the target control component to the target object container and set the component's arrangement, hierarchy, alignment and other properties. In addition, the API also allows the layout of the container to be dynamically adjusted when adding the target control component, ensuring the flexibility and adaptability of the interface structure.

[0045] For example, suppose that in the interface of an audio and video player, the target object container is the main window of the player. Integrate the previously encapsulated play button component, volume slider component, progress bar component, etc. into this main window. Add these control components to the main window in sequence through API calls. According to the design requirements, place the play button in the middle of the bottom of the interface, the volume slider on the right, and the progress bar across the bottom of the window. When each component is added to the container, the API will automatically adjust their position and arrangement to ensure the overall coordination of the interface.

[0046] Step 104: Establish an association relationship between the target control component and the control function in the target object container.

[0047] In the embodiment of the present invention, establishing association relationships is the key to ensuring that each target control component can function normally in the user interface. After the control components are integrated into the target object container, the functions of these components need to be associated with other controls in the container and the overall interface logic to achieve complex interactive functions and consistent user experience.

[0048] Specifically, according to the functional requirements and interface design requirements of the target control component, determine the specific functions that each target control component needs to implement. For example, a play button control component needs to be associated with the audio and video playback function, while a volume slider control component needs to be associated with the volume adjustment function. These associations are usually implemented through event handling mechanisms. For example, clicking the play button triggers the play function, while dragging the volume slider adjusts the volume. These event handling mechanisms can be implemented through event listeners or callback functions in the code.

[0049] Secondly, the mutual association between target control components also needs to be established in this step. A complex user interface often contains multiple target control components, and there may be functional interdependence or linkage between these components. For example, in an audio and video player, after clicking the play button, the progress bar control needs to start synchronously updating the video playback progress, and the volume slider control also needs to reflect the current volume changes in real time. In order to achieve this linkage effect, the association between these control components needs to be clarified so that the operation of one control can automatically trigger the response of other related controls.

[0050] For example, suppose that in a customized audio and video player interface, the play button component and the volume slider component have been integrated into the target object container through the API. Bind a click event listener to the play button component, which triggers the player's play function. At the same time, bind a slide event listener to the volume slider component, which adjusts the player's volume in real time. In addition, associate the click event of the play button with the update function of the progress bar component to ensure that whenever the user clicks the play button, the progress bar will start to update the video's playback progress synchronously.

[0051] Step 105: Generate a user interface according to the association relationship and the target object container.

[0052] In an embodiment of the present invention, the process of generating a user interface generally includes several key steps. First, according to the structure of the target object container, the arrangement and layout of the control components are determined. The target object container may be a multi-level structure, which contains multiple sub-containers and control components. According to the design requirements, these components are reasonably laid out and arranged in the container to ensure the overall aesthetics and functionality of the interface. For example, an audio and video player interface may include a title bar at the top, a play window in the middle, and a control bar at the bottom (including a play button, a progress bar, a volume slider, etc.). According to the layout rules of the container, these control components are placed in appropriate positions one by one. Next, according to the previously established association relationship, ensure that each control component can interact correctly and realize the predetermined function. For example, the association between the play button and the play function, the synchronous update of the progress bar and the play progress, etc., these association relationships will be applied to the generated user interface to ensure that the function of each control component can be realized in actual use.

[0053] In the process of generating the user interface, a series of checks and optimizations are also performed to ensure that the interface can provide a consistent user experience on different devices, resolutions, and usage scenarios. For example, the size and layout of controls may be adjusted for different screen sizes to ensure that the user interface remains clear and easy to use on mobile devices. In addition, the response speed and resource usage of the interface may be optimized to improve the smoothness of the interface and the responsiveness of user operations.

[0054] For example, suppose you generate an audio and video player interface that includes a play button, a progress bar, and a volume slider. First, place these control components in the appropriate position of the interface according to the layout rules of the target object container. Then, apply the previously established associations to ensure that when the user clicks the play button, the video can play normally, the progress bar is updated synchronously, and the volume slider can also reflect the volume adjustment in real time. Finally, make adjustments for different screen resolutions to ensure that the interface layout and control size can adapt to the screen size on mobile phones, tablets, or desktop computers, and provide a consistent user experience.

[0055] The user interface generation scheme provided by the embodiment of the present invention obtains the control information of at least one target control corresponding to the selection operation in response to the user's selection operation. Then, each target control is independently encapsulated according to the control information to obtain at least one target control component. Next, the target control component is integrated into the target object container of the user interface based on the application programming interface. At the same time, an association relationship between the target control component and the control function in the target object container is established. Finally, the user interface is generated according to the association relationship and the target object container.

[0056] The embodiment of the present invention provides a user interface generation scheme that responds to user selection operations, so that users can freely select and configure the controls and layout of the interface according to their personal preferences and actual needs. This flexibility allows users to customize the appearance and functions of the interface, thereby improving the user's operating experience in different scenarios. By obtaining the control information corresponding to the user's selection operation and independently encapsulating each target control, users can generate a highly personalized user interface. This customized interface is not only more in line with the user's operating habits and aesthetic preferences, but can also be adjusted according to specific application scenarios to meet the needs of specific tasks or content, thereby significantly improving user satisfaction and interactive experience. The target control component is integrated into the target object container of the user interface through the application programming interface, and the association relationship between the control functions is established. This modular and componentized design makes the interface generation process more efficient and flexible. Developers can quickly integrate new control components based on standard application programming interfaces, reducing the complexity and error risk of manual coding. Since the user interface is dynamically generated according to the control information after the user selects an operation,

[0057] In summary, the embodiments of the present invention not only solve the fixed interface design problem in the background technology by enhancing the flexibility, personalization and dynamic generation capabilities of the interface, but also significantly improve the user's overall interactive experience and provide more efficient development, maintenance and expansion capabilities.

[0058] In an exemplary embodiment of the present invention, an implementation method of independently encapsulating each target control according to control information to obtain at least one target control component is to create an independent HyperText Markup Language (HTML) structure for each target control according to the control information, and assign independent Cascading Style Sheets (CSS) styles and JavaScript logic to each target control; encapsulate the target control, Cascading Style Sheet style and JavaScript logic into the Hypertext Markup Language structure to obtain the target control component.

[0059] In actual application, the HTML structure provides a basic framework for the target control. Each target control will have its own HTML tag, such as ` `、` <button>`、` <input> `, etc. These tags define the location and type of the target control in the page. For example, if the target control is a play button, its HTML structure may be a simple `< / button> <button>`label, and if it is a volume slider control, it may be a ` `Container. These HTML tags not only identify the type of control, but also provide a basis for subsequent style and logic definitions. Assign independent CSS styles to each target control. CSS is a language used in web design to control the appearance of a page. Through CSS, developers can define visual elements such as the color, font, margin, and alignment of a control. Independent CSS styles mean that each target control can have a different appearance according to requirements. For example, the play button of an audio and video player can be set to a specific color, size, and shape, while the volume slider can adopt a completely different style. Such independence allows controls to maintain a unified design style in the interface while being flexible to adjust according to different requirements. JavaScript (JS for short) logic provides interactive capabilities for each target control. JavaScript is a scripting language used to implement dynamic interactive functions in web pages. For example, after clicking the play button, JavaScript logic can trigger the playback function of a video; while dragging the volume slider, the volume can be adjusted in real time through JavaScript. By assigning independent JavaScript logic to each target control, it is ensured that each control can respond to user operations independently without conflicting with the functions of other controls.

[0060] For example, in a customized audio and video player interface, suppose the user needs a play button of a specific style. Generate a ` < / button> <button>The tag is used as the HTML structure of the play button. Next, an independent CSS style is assigned to the button, for example, the background color of the button is blue, the font color is white, and the corner radius of the button is set to 10px. At the same time, an independent JavaScript logic is assigned to the play button. When the user clicks the button, the JavaScript logic calls the player's play function to start playing the video. These HTML structures, CSS styles, and JavaScript logic are encapsulated together to form a complete play button component.

[0061] The embodiment of the present invention realizes the modular design of controls by creating an independent HTML structure for each target control, so that each control can exist independently and be flexibly reused in different interfaces. Secondly, the independent CSS style gives each control a unique appearance, enhances the aesthetics and customization capabilities of the interface, and can better meet the personalized needs of users. Finally, the independent JavaScript logic ensures that the functions of each control can run independently, avoiding functional conflicts caused by multiple controls sharing logic, thereby improving the interactivity and stability of the interface.

[0062] In an exemplary embodiment of the present invention, an implementation method of integrating a target control component into a target object container of a user interface based on an application programming interface is to embed the target control component into the target object container based on an application programming interface of a hypertext markup language, and establish mutual communication connections among the target control components in the target object container so as to enable the target control organizations to work together.

[0063] In actual application, the HTML-based API provides a standardized interface that can easily embed the encapsulated target control component into the target object container. The HTML API can handle the layout, hierarchy, and embedding order of the control components to ensure that the position and arrangement of the controls in the user interface meet the design expectations. For example, the target object container of an audio and video player may include multiple areas, such as the playback control area, volume adjustment area, video display area, etc. By embedding control components such as the play button, volume slider, and video window into these areas through the HTML API, the overall layout and aesthetics of the interface are guaranteed.

[0064] After the control components are successfully embedded in the target object container, it is necessary to establish a communication connection between these components. This connection is achieved through the communication mechanism of the API, ensuring that the various target control components can exchange information, share data and coordinate actions with each other. For example, the communication connection between the play button and the progress bar allows the progress bar to synchronously display the progress of the video playback after the user clicks the play button. Similarly, the communication connection between the volume slider and the volume display control allows the volume display control to reflect the current volume in real time when the volume slider is slid.

[0065] In this implementation, it is critical to establish mutual communication connections between control components. Because a complex user interface often contains multiple interactive controls, the collaborative work between these controls determines the overall interactive experience of the interface. If the communication connection between these controls is not smooth, it may cause problems such as inconsistent functions and delayed operations, thereby affecting the user experience. In order to solve these problems, HTML APIs usually provide a variety of communication mechanisms, such as event-driven, data binding, message passing, etc., to ensure smooth and efficient communication between various control components.

[0066] For example, in a customized audio and video player interface, suppose the user needs the play button, volume slider, and progress bar to work closely together. Through the HTML-based API, these control components are embedded in different areas of the target object container. Then, establish communication connections between these control components: the play button is connected to the progress bar to ensure that the progress bar is updated synchronously when the play button is clicked; the volume slider is connected to the volume display control to ensure that the volume display changes in real time when the volume slider is slid. Finally, these control components work together in the interface to provide a seamless user experience.

[0067] The embodiment of the present invention realizes the modularization and flexibility of the user interface by embedding the control component based on HTML API, and can freely combine and adjust the interface according to user needs. The communication connection between the control components ensures the functional coordination and data synchronization of each control in the interface, thereby improving the interactivity and response speed of the interface. It provides an efficient development approach for developers, and can greatly reduce development time and cost and reduce the risk of errors through standardized API interfaces.

[0068] In an exemplary embodiment of the present invention, an implementation method for establishing an association relationship between a target control component and a control function in a target object container is to define an event trigger mechanism and a listener for the target control component, wherein the trigger mechanism includes an operating condition and a response result; when the listener detects that the trigger operation of the event satisfies the operating condition, the response function in the response result is used to establish an association relationship between the target control component and the control function.

[0069] In actual applications, the event triggering mechanism includes two key elements: operation conditions and response results. Operation conditions refer to the circumstances under which an event is triggered, usually based on user operations or system state changes. For example, in the audio and video player interface, a user clicking the play button can be used as an operation condition. The response result defines the specific operation after the event is triggered, such as playing a video, adjusting the volume, or updating the playback progress. These response results are usually implemented through a series of response functions.

[0070] A listener is a special program component that continuously monitors the occurrence of specific events. When a user operates on the interface, the listener determines whether the operation meets the predefined operation conditions. Once the conditions are met, the listener will immediately call the response function to establish an association between the target control component and the control function. This association ensures that when a user operates a certain control, other related function controls in the interface can respond synchronously. For example, when a user clicks the play button, the listener detects that the operation meets the play conditions and immediately triggers the associated control functions, such as updating the play progress bar, displaying the current play time, etc.

[0071] For example, in a customized audio and video player, suppose the user clicks the play button. Define a trigger mechanism for the play button: when the click operation is detected by the listener, the play button should trigger the video playback function, and update the playback progress bar and playback time display. During this process, the listener monitors the click operation of the play button in real time, and when the click operation occurs, checks whether the operation meets the playback conditions. If the conditions are met, the listener will call a pre-defined response function, such as starting the video playback function, and associate it with the update function of the playback progress bar. Through such an event mechanism, the system can ensure that every click operation of the user can get a timely and accurate response, thereby improving the interactive experience of the entire user interface.

[0072] The embodiment of the present invention can achieve more accurate and detailed user operation response through the combination of event triggering mechanism and listener. This means that each operation of the user on the interface can trigger a specific function, making the interface more intelligent and user-friendly. The establishment of the association relationship not only ensures the coordination between the functions of each control in the interface, but also improves the efficiency of the response. Through the division of labor between the listener and the trigger mechanism, redundant operations can be effectively reduced, resource consumption can be reduced, and overall performance can be improved.

[0073] In an exemplary embodiment of the present invention, an implementation method of generating a user interface based on an association relationship and a target object container is to data bind the target control component and the data fields corresponding to the control function according to the association relationship; construct a hierarchical component tree structure including the target control component and the target object container; based on the hierarchical component tree structure, render the target control component into the target object container, and output the user interface.

[0074] In actual application, data binding is the process of associating the target control component with the data field corresponding to the control function. Specifically, the data displayed by the target control component in the interface often comes from the underlying data model of the application, such as data entered by the user, records in the background database, or sensor data obtained in real time. Through data binding, it can ensure that the display of the control component in the interface is synchronized with the underlying data, and the user's operation on the interface can directly affect the underlying data, and vice versa. Next, a hierarchical component tree structure is constructed. The component tree structure is a logical organization method for the entire user interface. It organizes the target control component and the target object container in a parent-child relationship to form a hierarchical tree structure. This structure not only clarifies the position and function of each control component in the interface, but also helps to efficiently manage and schedule resources during the rendering process. By constructing a component tree structure, it can ensure that the hierarchical relationship between components is correctly represented. For example, in an audio and video player, the play button can be used as a parent component, and the icon and text on the play button exist as its child components. Based on the hierarchical component tree structure, the target control component is rendered into the target object container to complete the output of the user interface. The rendering process is the process of converting data and logic into a visual interface that users can see and interact with. Based on the established component tree structure, each control component can be efficiently rendered in a predefined order and hierarchy, ensuring that the interface visually meets the design expectations and can smoothly respond to user operations. For example, when a user opens a web page, the various elements in the web page, such as titles, pictures, buttons, etc., will be rendered to the page in sequence according to the component tree structure, and ensure that the hierarchy and position relationship between them are consistent with the design.

[0075] The embodiment of the present invention realizes real-time synchronization between the user interface and the underlying data through data binding, ensuring that each operation of the user can be immediately reflected in the interface, thereby improving the fluency and response speed of the user experience. The hierarchical component tree structure provides a clear framework for the organization and rendering of the interface, and can efficiently manage the various parts of the interface. Especially when dealing with complex interfaces, this structure can greatly improve rendering efficiency and reduce errors. By rendering the control component into the target object container, the abstract data and logic can be converted into an intuitive visual interface, thereby realizing the ultimate user interaction.

[0076] In an exemplary embodiment of the present invention, after the user interface is generated according to the association relationship and the target object container, an implementation method is to perform a functional test and a performance test on the user interface so as to improve or optimize the user interface.

[0077] In actual application, functional testing is a key step to verify whether the functions of the user interface are running normally. Functional testing usually includes verifying whether each control component in the interface works as designed, such as whether the button can correctly respond to click operations, whether the form can be submitted correctly, whether the slider can adjust the volume, etc. Specifically, in the interface of an audio and video player, functional testing may include checking whether the play button can start and pause video playback, whether the volume control can correctly adjust the sound volume, and whether the playback progress bar can accurately reflect the playback progress of the video. Through these tests, it can be ensured that each control performs its function as expected to avoid affecting the user experience due to functional failure or errors.

[0078] Performance testing focuses on evaluating the operating efficiency and resource consumption of the user interface. The goal of performance testing is to ensure that the interface can maintain good responsiveness and smoothness under different usage scenarios and load conditions, without causing system crashes or interface freezes due to excessive resource consumption. In performance testing, key indicators such as interface loading time, response time, memory usage, and CPU usage are usually tested. For example, in an audio and video player, performance testing may include measuring the loading speed of the interface in different network environments, the frame rate stability during video playback, and the response speed of interface operations. These tests can help the development team identify performance bottlenecks that may affect the user experience and propose targeted optimization measures.

[0079] After completing functional testing and performance testing, the development team will improve or optimize the user interface based on the test results. For example, if the test finds that a button does not respond correctly to click operations under certain circumstances, the development team can recheck the event binding logic of the button and make repairs and adjustments; if the performance test shows that the interface loading time is too long, the team may consider optimizing the resource loading strategy to reduce the interface loading time. This iterative testing and optimization process can continuously improve the quality of the user interface and user experience, ensuring that it performs well on different devices and environments.

[0080] Suppose the development team is designing the user interface of a video conferencing application. Through functional testing, they find that when the user clicks the "Share Screen" button, the interface does not pop up a dialog box to select a shared window. After checking, the team finds that the event listener does not correctly capture the click operation. After fixing the problem, the team tests again and continues to the next test after confirming that the function is normal. In the performance test, the team finds that the interface takes too long to load in a low-bandwidth network environment, affecting the user experience. To this end, they optimize the order and method of resource loading, such as delaying the loading of non-critical resources to speed up the initial loading speed, thereby improving the performance of the interface.

[0081] The embodiments of the present invention can ensure that the performance of each control component in the interface meets the design requirements through functional testing, reducing user dissatisfaction caused by functional failure. Through performance testing, performance bottlenecks can be identified and resolved, ensuring that the interface can maintain a smooth operating experience under different usage conditions. Through continuous testing and optimization, the overall quality of the user interface can be continuously improved, making it more stable and reliable, and able to adapt to the needs and usage environments of different users.

[0082] In an exemplary embodiment of the present invention, in response to a user's selection operation, an implementation method for obtaining control information of at least one target control corresponding to a selection operation is, in response to the selection operation, selecting at least one target control from native controls and / or extended controls of the user interface; and generating control information according to the control category, control name, control number, etc. of the target control.

[0083] In actual application, responding to user selection operations means identifying the control that the user is currently focusing on by capturing the user's operations on the interface, such as clicking, dragging, sliding, etc. Native controls can be understood as user interface elements natively provided by the operating system or development platform. Native controls are pre-defined by the operating system or development platform and embedded in its interface toolkit or framework for developers to directly call and use. Extended controls can be understood as a more complex or specific user interface element implemented by developers or third parties through customization or extended functions based on native controls. Extended controls are usually not directly provided by the operating system or development platform, but are created through additional programming, style design, or behavior definition to meet specific application requirements or enhance user experience. For native controls in the user interface, such as buttons, text boxes, drop-down menus, etc., these operations are usually relatively simple. For example, when a user clicks a button, the button is identified as the target control and relevant information about the button is obtained. However, as the user interface design becomes more complex, extended controls, that is, custom controls introduced through plug-ins or third-party libraries, are also supported. Such controls may have more complex behaviors and properties, so the system requires more complex logic to correctly identify and process these controls.

[0084] After identifying the target control, the control information is generated according to the control's type, name, number and other properties. The control type refers to the basic category of the control, such as buttons, input boxes, drop-down menus, etc. This information can determine the basic functions and operation modes of the control. For example, for a button control, the control is mainly used to trigger a specific action; while for an input box, it is mainly used to receive text data entered by the user. The control name is usually the identifier assigned to the control by the developer when designing the interface. This name is not only convenient for internal management and calling of the system, but also helps developers to quickly locate specific controls during subsequent debugging and maintenance. The control number is an automatically generated unique identifier used to distinguish different controls in the interface. Especially when there are multiple similar controls in an interface, the control number can ensure the uniqueness and traceability of each control.

[0085] Suppose a user is using an image editing software and wants to customize the interface layout. The user clicks the "Brush" button on the toolbar, the operation is recognized and the button is set as the target control. Next, the control information is generated according to the properties of the button. For example, the button type is recognized as "Button", the name is "BrushTool", and the number is "BTN001". This information will be recorded and used in subsequent interface generation and function configuration.

[0086] The embodiments of the present invention can ensure the accuracy and consistency of interface generation by accurately obtaining control information. The information of each control is recorded in detail, so that subsequent interface configuration and function implementation can be based on this information, thereby reducing errors and unnecessary duplication of work. It can handle a variety of types of controls, whether they are standard native controls or complex extended controls, and can be correctly identified and processed. Developers can easily add new control types or extend existing controls.

[0087] Based on the above description of the embodiment of a method for generating a user interface, a custom style solution based on audio is introduced below. Figure 2 , showing a schematic diagram of the principle of a custom style solution based on audio in an embodiment of the present invention. Among them, audio (Audio) is a general term for sound information, which is usually stored and transmitted through waveforms or digital codes. In the fields of music, movies, games, etc., audio is an indispensable part. Custom Style refers to personalizing or customizing the appearance, layout, interaction method, etc. of an element (such as an audio player) according to user needs or specific design goals.

[0088] First, determine the required controls to be displayed on the interface based on user selection.

[0089] The user can select the required controls from all native controls. For example, the native controls include four controls: playback controls, audio controls, time display bar, and progress bar. The user can select the playback controls, audio controls, and progress bar from these four controls as the required controls for the interface display.

[0090] In addition to all native controls, users can also select new controls, namely extended controls. For example, extended controls include volume change bar, subtitle display bar, environment space display bar, etc.

[0091] Next, encapsulate the required controls for the interface display in turn;

[0092] Then, based on all the encapsulated controls, use the rewritten method to design the entire <audio>Labels to achieve customization and customization.

[0093] Reference Figure 3 and 4 , respectively showing a schematic diagram of an audio player interface based on a custom audio style according to an embodiment of the present invention.

[0094] exist Figure 3 In the audio player interface, the audio player interface may include a playback control, a time control, a progress bar control, an audio control, and a volume control.

[0095] exist Figure 4 In the audio player interface, the audio player interface can include voice playback controls, recording controls, volume controls, progress bar controls, playlist controls, and cover controls.

[0096] according to Figure 3 and Figure 4 By comparison, Figure 4 Compared with the control Figure 3 There are more controls in the Figure 4 The audio player interface is relative to Figure 3 Therefore, through the technical solution provided by the embodiment of the present invention, different styles can be customized according to actual needs to meet the audio player interface of various users, various application scenarios, and various software and hardware resource conditions.

[0097] It should be noted that, for the sake of simplicity, the method embodiments are described as a series of action combinations, but those skilled in the art should be aware that the embodiments of the present invention are not limited by the order of the actions described, because according to the embodiments of the present invention, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions involved are not necessarily required by the embodiments of the present invention.

[0098] Reference Figure 5 , shows a structural block diagram of a user interface generation system according to an embodiment of the present invention. The user interface generation system may specifically include the following modules.

[0099] A control information acquisition module 51, configured to acquire control information of at least one target control corresponding to a selection operation of a user in response to the selection operation;

[0100] A target control encapsulation module 52, configured to independently encapsulate each target control according to the control information to obtain at least one target control component;

[0101] A control component integration module 53, used to integrate the target control component into a target object container of a user interface based on an application programming interface;

[0102] An association relationship establishing module 54, used to establish an association relationship between the target control component and the control function in the target object container;

[0103] The user interface generation module 55 is used to generate the user interface according to the association relationship and the target object container.

[0104] In an exemplary embodiment of the present invention, the target control encapsulation module 52 includes:

[0105] A structure creation module, used for creating an independent hypertext markup language structure for each target control according to the control information, and allocating independent cascading style sheet styles and JavaScript logic to each target control;

[0106] The structure encapsulation module is used to encapsulate the target control, the cascading style sheet style and the JavaScript logic into the hypertext markup language structure to obtain the target control component.

[0107] In an exemplary embodiment of the present invention, the control component integration module 53 is used to embed the target control component into the target object container based on the application programming interface of the hypertext markup language, and establish mutual communication connections between the target control components in the target object container to enable the target control organizations to work together.

[0108] In an exemplary embodiment of the present invention, the association relationship establishing module 54 includes:

[0109] A component definition module, used to define an event trigger mechanism and a listener for the target control component, wherein the trigger mechanism includes an operation condition and a response result;

[0110] The function processing module is used to establish an association relationship between the target control component and the control function by using the response function in the response result when the listener monitors that the triggering operation of the event meets the operation condition.

[0111] In an exemplary embodiment of the present invention, the user interface generating module 55 includes:

[0112] A data binding module, used for data binding the target control component and the data field corresponding to the control function according to the association relationship;

[0113] A component tree construction module, used to construct a hierarchical component tree structure including the target control component and the target object container;

[0114] An interface rendering module is used to render the target control component into the target object container based on the hierarchical component tree structure and output the user interface.

[0115] In an exemplary embodiment of the present invention, the system further comprises:

[0116] The testing module is used to perform functional testing and performance testing on the user interface after the user interface generation module 55 generates the user interface according to the association relationship and the target object container, so as to improve or optimize the user interface.

[0117] In an exemplary embodiment of the present invention, the control information acquisition module 51 includes:

[0118] A control selection module, configured to select at least one target control from native controls and / or extended controls of the user interface in response to the selection operation;

[0119] The information generating module is used to generate the control information according to the control category, control name and control number of the target control.

[0120] As for the system embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0121] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referenced to each other.

[0122] It will be appreciated by those skilled in the art that the embodiments of the present invention may be provided as methods, devices, or computer program products. Therefore, the embodiments of the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the embodiments of the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program codes.

[0123] The embodiments of the present invention are described with reference to the flowcharts and / or block diagrams of the methods, terminal devices (systems), and computer program products according to the embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of the processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing terminal device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing terminal device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0124] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing terminal device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce a manufactured product including an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0125] These computer program instructions can also be loaded onto a computer or other programmable data processing terminal device so that a series of operating steps are executed on the computer or other programmable terminal device to produce a computer-implemented process, thereby providing instructions for executing on the computer or other programmable terminal device to implement the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0126] Although the preferred embodiments of the present invention have been described, those skilled in the art may make additional changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the embodiments of the present invention.

[0127] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or terminal device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or terminal device. In the absence of further restrictions, the elements defined by the sentence "including a..." do not exclude the existence of other identical elements in the process, method, article or terminal device including the elements.

[0128] The above is a detailed introduction to a method for generating a user interface and a system for generating a user interface provided by the present invention. Specific examples are used herein to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only used to help understand the method of the present invention and its core idea. At the same time, for those skilled in the art, according to the idea of ​​the present invention, there will be changes in the specific implementation methods and application scopes. In summary, the content of this specification should not be understood as a limitation on the present invention.< / audio> < / button>

Claims

1. A method for generating a user interface, characterized in that: The method comprises: In response to a selection operation of a user, obtaining control information of at least one target control corresponding to the selection operation; Performing independent encapsulation processing on each of the target controls according to the control information to obtain at least one target control component; Integrating the target control component into a target object container of a user interface based on an application programming interface; Establishing an association relationship between the target control component and the control function in the target object container; The user interface is generated according to the association relationship and the target object container.

2. The method according to claim 1, characterized in that The step of independently encapsulating each of the target controls according to the control information to obtain at least one target control component includes: Creating an independent hypertext markup language structure for each target control according to the control information, and allocating independent cascading style sheet styles and JavaScript logic to each target control; The target control, the cascading style sheet style and the JavaScript logic are encapsulated into the hypertext markup language structure to obtain the target control component.

3. The method according to claim 1, characterized in that The step of integrating the target control component into a target object container of a user interface based on an application programming interface includes: The target control component is embedded into the target object container based on the application programming interface of the hypertext markup language, and mutual communication connection of the target control component in the target object container is established to enable the target control organizations to work in coordination.

4. The method according to claim 1, characterized in that: The establishing of the association relationship between the target control component and the control function in the target object container includes: Defining an event triggering mechanism and a listener for the target control component, wherein the triggering mechanism includes an operation condition and a response result; When the listener detects that the triggering operation of the event meets the operation condition, an association relationship between the target control component and the control function is established using the response function in the response result.

5. The method according to claim 1, characterized in that Generating the user interface according to the association relationship and the target object container includes: According to the association relationship, data binding is performed between the target control component and the data field corresponding to the control function; Constructing a hierarchical component tree structure including the target control component and the target object container; Based on the hierarchical component tree structure, the target control component is rendered into the target object container, and the user interface is output.

6. The method according to claim 1, characterized in that After generating the user interface according to the association relationship and the target object container, the method further includes: Functionality testing and performance testing are performed on the user interface to improve or optimize the user interface.

7. The method according to claim 1, characterized in that The step of obtaining, in response to a selection operation by a user, control information of at least one target control corresponding to the selection operation includes: In response to the selection operation, selecting at least one of the target controls from native controls and / or extended controls of the user interface; The control information is generated according to the control category, control name, and control number of the target control.

8. A user interface generation system, characterized in that: The system comprises: A control information acquisition module, used for acquiring control information of at least one target control corresponding to the selection operation in response to a user's selection operation; A target control encapsulation module, used for independently encapsulating each of the target controls according to the control information to obtain at least one target control component; A control component integration module, used to integrate the target control component into a target object container of a user interface based on an application programming interface; An association relationship establishing module, used to establish an association relationship between the target control component and the control function in the target object container; A user interface generation module is used to generate the user interface according to the association relationship and the target object container.

9. An electronic device, characterized in that: include: one or more processors; and One or more machine-readable media having instructions stored thereon, when executed by the one or more processors, enable the electronic device to execute the method for generating a user interface as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: The computer program stored therein enables the processor to execute the method for generating a user interface as claimed in any one of claims 1 to 7.

Images