Graphical interface generation method and device, medium, controller and computer equipment

Abstract

The invention relates to a graphical interface generation method and device, a medium, a controller and computer equipment, and the method comprises the steps: firstly obtaining a UI component library suitable for a first platform, then carrying out the interface configuration according to a container and a component of a second platform in the UI component library, and obtaining a first graphical interface suitable for the first platform, the first graphical interface is converted into a configuration file suitable for the second platform, finally, the configuration file is issued to a target terminal using the second platform, so that the target terminal operates the configuration file to generate a second graphical interface suitable for the second platform, and the UI component library comprises a container and a component of the second platform. Therefore, cross-platform development and application of the graphical interface can be realized, the cross-platform development process of the graphical interface is simplified, and the cross-platform development efficiency is improved.

Description

Technical Field

[0001] The present application relates to the field of information technology, and in particular to a method, device, medium, controller and computer equipment for generating a graphical interface. Background Art

[0002] Currently, developing graphical interfaces using features such as graphical drag and drop, preset templates, and automatic code generation of visualization platforms can significantly speed up development and lower the development threshold.

[0003] However, most visualization platforms cannot achieve cross-platform graphical interface development. Due to the differences in interface components and styles of different platforms, developers need to write and maintain a large amount of code to make the newly generated graphical interface compatible with various platforms, which increases the difficulty of graphical interface development and reduces development efficiency. Summary of the Invention

[0004] The embodiment of the present application provides a graphical interface generation method, which can realize cross-platform development of the graphical interface, improve the efficiency of cross-platform development of the graphical interface, and reduce the difficulty of cross-platform development of the graphical interface, so as to at least partially solve the above-mentioned technical problems.

[0005] In order to achieve the above-mentioned object, according to a first aspect of the present application, a method for generating a graphical interface is provided, comprising:

[0006] Obtaining a UI component library applicable to the first platform; the UI component library includes containers and components of the second platform;

[0007] Performing interface configuration according to the containers and components of the second platform in the UI component library to obtain a first graphical interface suitable for the first platform;

[0008] Converting the first graphical interface into a configuration file suitable for the second platform;

[0009] The configuration file is sent to a target terminal using the second platform, so that the target terminal runs the configuration file to generate a second graphical interface suitable for the second platform.

[0010] Optionally, converting the first graphical interface into a configuration file suitable for the second platform includes:

[0011] Converting the first graphical interface into front-end configuration information;

[0012] Performing attribute alignment processing on the front-end configuration information to generate an intermediate configuration file; the attribute alignment processing is used to correspond the attributes applicable to the first platform in the front-end configuration information to the attributes applicable to the second platform;

[0013] Recursively configure the intermediate configuration file to obtain the configuration file.

[0014] Optionally, performing attribute alignment processing on the front-end configuration information to generate an intermediate configuration file includes:

[0015] In the front-end configuration information, determining a first target attribute associated with an attribute of the second platform; the first target attribute is applicable to the first platform;

[0016] converting the style of the first target attribute into a target style suitable for the second platform;

[0017] The target style is exported to generate the intermediate configuration file.

[0018] Optionally, it also includes:

[0019] If the first target attribute is not obtained, the first style of the first platform is dynamically compiled to obtain a second style suitable for the second platform.

[0020] Optionally, dynamically compiling the first style of the first platform to obtain a second style applicable to the second platform includes:

[0021] Determining a second target attribute in the second platform that cannot match the first target attribute;

[0022] Determining, according to the style of the second target attribute, a dynamic adjustment logic for the style;

[0023] The first style is adjusted according to the dynamic adjustment logic to obtain the second style.

[0024] Optionally, the second target attribute includes multiple candidate styles, and the method further includes:

[0025] Obtaining the individual priority of each candidate style and the combined priority of each candidate style when combined with candidate styles of other attributes;

[0026] Determining a dynamic adjustment logic corresponding to the candidate pattern according to the individual priority and the combined priority of the candidate pattern;

[0027] The first pattern is adjusted according to the dynamic control logic to obtain the second pattern.

[0028] Optionally, recursively configuring the intermediate configuration file to obtain the configuration file includes:

[0029] Recursively traverse each child node of the intermediate configuration file to extract valid first configuration content from each child node;

[0030] Processing the first configuration content according to a graphical interface specification of the second platform to obtain processed second configuration content;

[0031] Generate the configuration file according to the second configuration content.

[0032] Optionally, the processing the first configuration content according to the graphical interface specification of the second platform to obtain the processed second configuration content includes:

[0033] Adjusting the number of attributes in the first configuration content according to a graphical interface specification of the second platform;

[0034] Determining, according to a graphical interface specification of the second platform, attribute values to be adjusted from the first configuration content after the attribute quantity is adjusted;

[0035] Unit conversion and value adaptation processing are performed on the attribute value to be adjusted to obtain the second configuration content.

[0036] Optionally, after obtaining the first graphical interface applicable to the first platform, the method further includes:

[0037] In response to triggering a preview operation on the first graphical interface, generating a preview graphical interface;

[0038] Among them, the display effect of the preview graphic interface is consistent with that of the second graphic interface.

[0039] Optionally, generating a preview graphical interface includes:

[0040] Obtaining the display logic of the native rendering graphical interface of the first platform;

[0041] According to the display logic, the component properties of the first graphical interface are dynamically parsed and rendered to generate a view tree structure suitable for the second platform to obtain the preview graphical interface.

[0042] According to a second aspect of the present application, there is provided a graphical interface generating device, comprising:

[0043] A component library module, configured to obtain a UI component library applicable to the first platform; the UI component library includes containers and components of the second platform;

[0044] An interface configuration module, configured to configure an interface based on the containers and components of the second platform in the UI component library to obtain a first graphical interface suitable for the first platform;

[0045] a data conversion module, configured to convert the first graphical interface into a configuration file suitable for the second platform;

[0046] The interface generation module is used to send the configuration file to a target terminal using the second platform, so that the target terminal runs the configuration file to generate a second graphical interface suitable for the second platform.

[0047] According to a third aspect of the present application, a computer-readable storage medium is further provided, on which a computer program is stored. When the computer program is executed by a processor, the steps of the method described above are implemented.

[0048] According to a fourth aspect of the present application, a controller is further provided, on which a computer program is stored, and when the computer program is executed by a processor, the steps of the method described above are implemented.

[0049] According to a fifth aspect of the present application, a computer device is also provided, comprising the controller as described above.

[0050] According to a sixth aspect of the present application, a computer program product is also provided, comprising a computer program or instructions, which implement the steps of the above method when executed by a processor.

[0051] In summary, the embodiment of the present application obtains a UI component library suitable for the first platform, the UI component library includes containers and components of the second platform, and then configures the interface according to the containers and components of the second platform in the UI component library to obtain a first graphical interface suitable for the first platform, thereby reducing dependence on traditional coding development through a visual low-code development method, simplifying the development process of the graphical interface and improving development efficiency. The first graphical interface is then converted into a configuration file suitable for the second platform, thereby dynamically converting and adjusting the graphical interface across platforms, so that the style of the graphical interface can adapt to the frequent changes of different platforms, omitting the additional development process for compatibility with different platforms, and thus realizing cross-platform development of the graphical interface while also improving the cross-platform development efficiency of the graphical interface and reducing the difficulty of cross-platform development. Finally, the configuration file is sent to the target terminal using the second platform, so that the target terminal runs the configuration file to generate a second graphical interface suitable for the second platform, so that the graphical interface developed on the first platform is seamlessly connected to the second platform application, thereby breaking the barriers to cross-platform development and application of the graphical interface. BRIEF DESCRIPTION OF THE DRAWINGS

[0052] To more clearly illustrate the technical solutions in the embodiments of the present application, the following briefly introduces the drawings required for describing the embodiments. Obviously, the drawings described below are only some embodiments of the present application. Those skilled in the art can also derive other drawings based on these drawings without inventive effort.

[0053] In order to more completely understand the present application and its beneficial effects, the following description will be given in conjunction with the accompanying drawings, wherein the same drawing numbers represent the same parts in the following description.

[0054] Figure 1 is a flowchart of a method for generating a graphical interface provided in an exemplary embodiment of the present disclosure;

[0055] Figure 2 is a multi-terminal interaction schematic diagram of a graphical interface development provided in an exemplary embodiment of the present disclosure;

[0056] Figure 3 is a flowchart of an attribute alignment process provided in an exemplary embodiment of the present disclosure;

[0057] Figure 4 is a flowchart of an intermediate configuration file process provided in an exemplary embodiment of the present disclosure;

[0058] Figure 5 is a schematic diagram of a graphical interface generating apparatus provided in an exemplary embodiment of the present disclosure;

[0059] Figure 6 is a schematic diagram of the architecture of a controller provided in an exemplary embodiment of the present disclosure;

[0060] Figure 7 FIG. 1 is a schematic diagram of the architecture of a computer device provided in an exemplary embodiment of the present disclosure. DETAILED DESCRIPTION

[0061] 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 embodiments described 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 the present application.

[0062] Based on the issues mentioned in the aforementioned background technology, low-code platforms have rapidly gained popularity among related technologies due to their ability to provide visual interfaces and reduce reliance on traditional coding. These platforms significantly accelerate application development and lower the barrier to entry through features such as graphical drag-and-drop, pre-set templates, and automated code generation. The rapid development of low-code platforms has led to their widespread adoption across various industries and enterprises, effectively improving development efficiency, reducing development costs, alleviating R&D pressure, and promoting rapid innovation. They enable non-professional developers to quickly build applications, thereby accelerating the digitalization of enterprises.

[0063] However, existing low-code platforms are primarily limited to generating web pages and lack cross-platform functionality. While developers can quickly build interfaces on the web, these interfaces cannot be directly applied to other platforms, such as mobile devices or in-vehicle systems. This limitation forces developers to write and maintain different code for different platforms, increasing the complexity of development and maintenance. Furthermore, existing platforms struggle to meet the needs of scenarios with frequent UI style changes, simple interaction and business logic, and very high performance requirements, such as in-vehicle systems.

[0064] This application provides a method for generating a graphical interface. Figure 1 The graphical interface generation method provided in the embodiment of the present application includes steps S101-S104, which are described in detail below.

[0065] Step S101: Obtain a UI component library suitable for the first platform.

[0066] Among them, the UI component library includes containers and components of the second platform. The UI component library of this application can be a set of pre-designed interface elements that can be used in a visual editor on the Web side, so that users can visually develop graphical interfaces on the Web through a low-code platform.

[0067] Among them, the first platform can be a web platform. In the scenario of this application, according to the conventional development method, the UI component library can initially be designed for the web browser environment by default, so that the UI component library can be used directly on the web page. It should be noted that since the graphical interface is dynamically configured on the first platform in this application, the first platform can also be regarded as a "low-code platform" or "dynamic construction platform" for the graphical interface.

[0068] The second platform can be an Android platform, and the UI component library can include containers and components used on the Android platform. Therefore, during the visual configuration of the graphical interface, the UI component library can be used to simulate the configuration of Web components and elements, or directly convert Web components and elements into interface elements that can be understood and used by the Android platform.

[0069] Through the above method, developers can use the UI component library to design the graphical interface on the Web side, and then directly convert the elements and components in the graphical interface into the interface layout of the Android side, thereby realizing cross-platform graphical interface development and simplifying the cross-platform development process.

[0070] Step S102: Perform interface configuration according to the containers and components of the second platform in the UI component library to obtain a first graphical interface suitable for the first platform.

[0071] Specifically, such as Figure 2As shown, a UI component library can be obtained first, and then components in the UI component library can be used to configure a graphical interface through a visual editor on a first platform, such as a web terminal. For example, a graphical interface can be designed by dragging and dropping components onto a canvas and setting various properties of the components, such as size, color, and text.

[0072] After configuration is completed, these components and containers are combined into a first graphical interface suitable for the first platform. The first graphical interface can be previewed in a web browser of the first platform to ensure that its appearance and behavior are as expected.

[0073] It is understood that the configuration information of the first graphical interface can be subsequently exported as a DSL (domain-specific language) configuration file, or directly generated into a template file that can be parsed by the Android side. In this way, the same graphical interface configuration can be implemented on Android devices, ensuring that the graphical interfaces on the web and Android sides behave consistently.

[0074] In summary, by using a UI component library that simulates Android components on the first platform to design a graphical interface, a graphical interface is generated that can be previewed on the first platform and implemented on the second platform, thereby enabling cross-platform graphical interface development.

[0075] In some embodiments, after obtaining the first graphical interface, a preview graphical interface may be generated in response to triggering a preview operation on the first graphical interface.

[0076] Specifically, during the development and configuration process of the first graphical interface, the user can trigger a preview operation to view the display effects of the interface on different platforms.

[0077] When the preview operation is triggered, a "preview graphical interface" can be generated on the first platform according to the configuration. For example, the preview interface in the web browser can simulate the display effect seen by the end user on the Android device of the second platform.

[0078] Among them, the display effect of the preview graphical interface is consistent with that of the second graphical interface, that is, the interface layout, style and interactive behavior of the graphical interface seen during the Web preview are consistent with the display effect on the Android device.

[0079] The graphical interface configuration is implemented by using containers and components in the UI component library corresponding to the second platform. The components in the UI component library can simulate Android native components in appearance and behavior. Therefore, when these components are combined into the first graphical interface on the Web side, the configuration information of the first graphical interface can be converted into a format that can be understood and rendered by the second platform.

[0080] As you can see, by triggering the preview function for the first graphical interface, you can modify the configuration of the first graphical interface in real time without switching between different platforms. By discovering and correcting problems in the early stages of development, you can reduce the number of errors that may be discovered when testing on devices on the second platform. Furthermore, most graphical interface development work can be completed within the environment of the first platform, improving development efficiency.

[0081] In summary, this application creates and previews an interface in the environment of the first platform, so that the preview interface is consistent with the graphical interface display effect of the second platform in appearance and behavior. There is no need to switch platforms to obtain the display effect of the graphical interface, thereby improving the consistency and development efficiency of the graphical interface across platforms.

[0082] In some embodiments, the preview graphical interface may be generated by:

[0083] First, obtain the display logic of the native rendering graphics interface of the first platform;

[0084] Next, according to the display logic, the component properties of the first graphical interface are dynamically parsed and rendered to generate a view tree structure suitable for the second platform to obtain a preview graphical interface.

[0085] In a specific implementation, the display logic of the natively rendered graphical interface of the first platform can be obtained. The first platform can then use a browser to render the graphical interface. The browser can then construct and display the page based on HTML, CSS, and JavaScript. For example, HTML defines the structure of the page, CSS defines the style of the page, and JavaScript is used to add interactivity and dynamic behavior.

[0086] As you can understand, on the web side of the first platform, each UI component, such as a button or text box, has properties that determine the component's appearance and behavior. For example, a button component may have properties such as background color, text color, border, and corner radius.

[0087] In some embodiments, the display logic of each component can be extracted from the UI component library on the Web side, which includes how the component is rendered and displayed according to its properties, for example, how to set the CSS style of a button based on its background color property.

[0088] In some embodiments, JavaScript or other scripting languages can be used to dynamically read the properties of UI components on the web. These properties may include, but are not limited to, size, color, position, and text content. The display logic of these components can be simulated on the web to ensure that they render as expected in the browser. For example, CSS and JavaScript can be used to dynamically adjust the style and behavior of components.

[0089] In some embodiments, a view tree structure suitable for the Android platform can be generated based on the component attributes and display logic obtained by parsing. The view tree structure is a hierarchical structure used to describe the layout and relationship of each component in the interface.

[0090] You can convert the component properties and display logic of the Web side into a view tree structure that the Android platform can understand. For example, you can map a Web component to an Android component and convert a Web button to an Android Button view.

[0091] In some embodiments, the converted view tree structure can be used to generate a preview graphical interface on the web side. This preview graphical interface can simulate the display effects of the Android side, allowing you to preview the final Android interface in the web environment. Ensure that the preview graphical interface and the final Android graphical interface have consistent display effects, and adjust CSS styles, JavaScript logic, or Android view properties to match the rendering differences between the two platforms.

[0092] This application obtains the display logic of components from the first platform, dynamically parses and renders the properties of these components, and generates a view tree structure suitable for the second platform. In this way, the interface can be previewed and adjusted on the first platform to ensure that the final display effect on the second platform device is consistent with the expectation, thus achieving cross-platform consistency and development efficiency.

[0093] Step S103: convert the first graphical interface into a configuration file suitable for the second platform.

[0094] In some embodiments, step S103 may include:

[0095] First, convert the first graphical interface into front-end configuration information;

[0096] Next, the front-end configuration information is subjected to attribute alignment processing to generate an intermediate configuration file; the attribute alignment processing is used to correspond the attributes applicable to the first platform in the front-end configuration information to the attributes applicable to the second platform;

[0097] Finally, the intermediate configuration file is recursively configured to obtain the configuration file.

[0098] It can be understood that since most graphical interfaces have different styles and expressions in different interfaces, before exporting the configuration file that can be recognized by the second platform, this application needs to correspond the properties of the components in the first graphical interface with the properties of the second platform, and then recursively configure the intermediate configuration file obtained after the property alignment to obtain the final configuration file.

[0099] Specifically, the first graphical interface can be converted into front-end configuration information, namely, front-end DSL. The DOM tree of the first graphical interface can be analyzed to extract all interface elements, such as div, span, img, button, etc. The extracted interface elements and their attributes are then converted into a specific data format, usually JSON or XML, which describes the structure and style of the interface.

[0100] In some embodiments, attributes in the front-end configuration information can be mapped to corresponding attributes on the second platform. For example, the backgroundColor attribute in the front-end configuration information corresponds to the background attribute on the second platform, and the color attribute on the first platform corresponds to the textColor attribute on the second platform, thereby forming an attribute alignment process of the mapping relationship.

[0101] In some embodiments, the aligned attributes can be written into an intermediate configuration file, which serves as a bridge between the front-end configuration information and the configuration file ultimately recognized by the second platform. After obtaining the intermediate configuration file, each element in the intermediate configuration file can be recursively parsed to ensure that the attributes of all sub-elements are correctly processed. Finally, the result of the recursive parsing can be converted into a file format that can be directly used by the second platform, resulting in a configuration file.

[0102] In summary, the above process involves converting the first graphical interface into an intermediate data format, and then converting this format into a configuration file suitable for the second platform through attribute alignment. Through recursive parsing and configuration, all interface elements and their attributes are correctly processed, thus achieving cross-platform interface development. This not only improves cross-platform graphical interface development efficiency but also ensures interface consistency across different platforms.

[0103] In some embodiments, the attribute alignment process may include:

[0104] In the front-end configuration information, determining a first target attribute associated with an attribute of the second platform; the first target attribute is applicable to the first platform;

[0105] Convert the style of the first target attribute to the target style suitable for the second platform;

[0106] Export the target style and generate an intermediate configuration file.

[0107] like Figure 3 As shown, in the attribute alignment process, it is first necessary to understand the specific expression and usage of a certain attribute on the second platform. Then, it is determined which one or more CSS attributes on the first platform have similar functions to the attributes of the second platform or can simulate the same effect.

[0108] Just as an example, assume that an Android attribute of the second platform is android:textColor, which is used to set the text color. On the web side of the first platform, the corresponding CSS attribute is color. Then the CSS attribute value can be converted into a format that can be recognized and applied by the Android side. Taking into account the possible differences in style performance between different platforms, necessary adaptation work is performed to ensure that the style can be rendered correctly on the Android side. For example, the web side uses CSS "color:#FFFFFF" to set white text, which needs to be converted into a format that the Android side can understand, such as "android:textColor="#FFFFFF"".

[0109] In some embodiments, the converted styles and properties can be exported to generate an intermediate configuration file. This file contains all the styles and properties that need to be applied on the Android side. The intermediate configuration file can be in JSON, XML, or other formats, and it needs to be parsed and applied by subsequent processing steps or the Android platform.

[0110] For example, the CSS property "background-color" can be converted to the Android background resource, "color" can be converted to text color, and "border-radius" can be converted to padding to adapt to Android's property naming and presentation.

[0111] In summary, this application identifies and maps the CSS properties of the first platform to the properties of the second platform, then converts these property values into a format that can be understood by the second platform, and exports them as an intermediate configuration file. The subsequent intermediate configuration file can generate a view tree structure suitable for the second platform, thereby achieving cross-platform interface development and style consistency.

[0112] In some embodiments, if the first target attribute is not obtained, the first style of the first platform is dynamically compiled to obtain a second style suitable for the second platform.

[0113] It is understandable that if the first target attribute applicable to the first platform is not obtained, that is, the CSS attribute that can be directly mapped to the second platform is not found, the first style can be converted by dynamic compilation to obtain the second style applicable to the second platform.

[0114] In some embodiments, the process of dynamically compiling the first style to obtain the second style may include:

[0115] First, determining a second target attribute in the second platform that cannot match the first target attribute;

[0116] Next, according to the style of the second target attribute, a dynamic adjustment logic for the style is determined;

[0117] Finally, the first style is adjusted according to the dynamic adjustment logic to obtain the second style.

[0118] like Figure 3 As shown, if the CSS properties on the web side cannot be directly mapped to the properties on the Android side, you can use JS (JavaScript) to dynamically adjust the element style to ensure consistent performance on the web and Android sides.

[0119] Specifically, you can first identify which CSS properties don't have direct counterparts on Android. For example, Android might use different property names, or some CSS effects can't be directly implemented on Android. For these unmatched properties, determine which properties should be used on Android to achieve similar effects.

[0120] As an example, assume that the second target attribute that cannot match the first target attribute on the second platform is the Gravity attribute on the Android side. Since the Gravity attribute affects layout positioning, it is necessary to find a CSS property on the Web side that can simulate this behavior.

[0121] Specifically, on the Android side, the Gravity property can control the positioning of the view within the container, such as top alignment, center alignment, etc. On the Web side, you can use CSS properties such as align-items, justify-conten, or float to simulate it.

[0122] In some embodiments, the dynamic adjustment logic for the style can be determined based on the style of the second target attribute. Specifically, the effect of the Gravity attribute on the Android side, such as center alignment, top alignment, etc., can be analyzed.

[0123] In some embodiments, the web-side style can be dynamically adjusted through CSS and JavaScript to simulate the effect of the Gravity attribute. For example, if the Gravity attribute needs to be centered, this can be achieved by setting the align-items and justify-content properties of the Flexbox container to center.

[0124] In some embodiments, the first style can be adjusted based on dynamic adjustment logic to produce a second style. For example, JavaScript can be used to dynamically adjust the style on the web to simulate the effect of the Gravity attribute. The adjusted style is the second style, and its appearance on the web should be consistent with the effect of the Gravity attribute on the Android client.

[0125] Just as an example, suppose there is a LinearLayout container, and you need to dynamically adjust the positioning of its internal child elements through JavaScript. The example HTML code is:

[0126] <div id＝"container"style＝"display:flex；justify-content:center；align-items:center；">

[0127] <div id＝"child"> Child elements

[0128]

[0129] The example code after dynamic adjustment by JS is:

[0130] function adjustGravity(){

[0131] const container=document.getElementById('container');

[0132] const child=document.getElementById('child');

[0133] / / Assume that you need to simulate Android's Gravity.TOP property

[0134] container.style.justifyContent='flex-start';

[0135] container.style.alignItems='flex-start';

[0136] }

[0137] adjustGravity();

[0138] In this example, it can be seen that the embodiment of the present application can dynamically set the justifyContent and alignItems properties of the container through JS to simulate the Gravity property effect of Android.

[0139] In summary, this application identifies mismatched style attributes between the first and second platforms, analyzes the visual effects of these attributes, and dynamically adjusts the style of the first platform using CSS and JavaScript to achieve consistent visual effects with the Android side. This ensures consistency in graphical interface display across platforms and provides a more flexible way to handle different style effects on different platforms.

[0140] In some embodiments, when the second target attribute includes multiple candidate patterns, the second pattern can be obtained by:

[0141] First, obtain the individual priority of each candidate style and the combined priority of each candidate style when combined with candidate styles of other attributes;

[0142] Next, the dynamic adjustment logic corresponding to the candidate styles is determined based on the individual priorities and combined priorities of the candidate styles;

[0143] Finally, the first pattern is adjusted according to the dynamic control logic to obtain the second pattern.

[0144] Specifically, in this solution, handling multiple selection attributes on Android requires a systematic approach to determine the final style. The following are the detailed steps and explanations:

[0145] In some embodiments, a survey can be conducted on multiple selection attributes on the Android side to understand the specific effects and applicable scenarios of each candidate style. Based on the survey results, each candidate style is assigned an individual priority. This priority reflects the likelihood that the style will be selected if no other factors affect it.

[0146] For example, suppose there is a background color attribute for a button on Android, and the attribute value can be red, blue, or green. After research or analysis, it can be determined that red has the highest priority, followed by blue, and finally green.

[0147] In some embodiments, the overall effect of each candidate pattern when combined with candidate patterns of other attributes can be analyzed, and a combination priority is assigned to each candidate pattern combination, which can reflect the likelihood of the combination being selected when all relevant attributes are considered.

[0148] Continuing with the previous example, if the background color is red, the text color is best white, and the combination of this background color and text color is set to the highest priority. Conversely, if the background color is blue, the text color might be more appropriate black, and this combination can be set to the second highest priority.

[0149] In some embodiments, individual priorities and combined priorities may be considered to analyze which candidate styles are more likely to be selected. Based on the analysis results, it is determined how to dynamically adjust the web-side style through JS to match the candidate style on the Android side.

[0150] For example, based on the priority analysis, it can be decided that the combination of red background and white text is preferred in most cases. Therefore, the dynamic adjustment logic of JS can first check whether this combination can be used, and if not, try to use the next best combination.

[0151] In some embodiments, JS can be used to dynamically adjust the style of the Web side according to the determined logic. The adjusted style is the second style, and its performance on the Web side should be consistent with the target style on the Android side.

[0152] In summary, this application investigates multiple selection attributes on the Android side, determines the individual and combined priorities of each candidate style, then uses these priorities to determine dynamic adjustment logic. Finally, JavaScript is used to adjust the web-side style to achieve consistent visual effects with the Android side. This ensures consistent graphical interface display across platforms while providing flexibility to handle styles that differ across platforms.

[0153] In some embodiments, the configuration file may be obtained by:

[0154] Recursively traverse each child node of the intermediate configuration file and extract the valid first configuration content in each child node;

[0155] Processing the first configuration content according to a graphical interface specification of the second platform to obtain processed second configuration content;

[0156] Generate a configuration file based on the second configuration content.

[0157] Specifically, recursive traversal can be performed on each child node of the intermediate configuration file to extract the valid first configuration content in each child node. The intermediate configuration file can typically contain a tree structure, where each node can contain child nodes. Recursive traversal means starting from the root node and visiting each node and its child nodes layer by layer.

[0158] During the traversal process, the valid configuration content of each child node can be extracted. The configuration content can be the style and attributes of the Web side, which needs to be converted into a format that can be understood and applied by the Android side. During the recursive traversal process, the configuration content of each child node such as TextView and ImageView can be extracted.

[0159] In some embodiments, the extracted Web-side configuration content, i.e., the first configuration content, can be mapped and converted into Android-side attributes, i.e., the second configuration content, through unit conversion (such as px to dp), attribute name conversion (such as ˋfontSizeˋ to ˋtextSizeˋ), and other processes.

[0160] In some embodiments, the configuration content can be customized according to the Android graphical interface specifications, such as adding required attributes, discarding useless attributes, and adjusting the screen size.

[0161] For example, you can convert the CSS property fontSize to the Android property textSize and use sp units, convert the CSS property color to the Android property textColor and use resource references, and convert the CSS properties width and height to layout_width and layout_height and use dp units.

[0162] Finally, the processed second configuration content can be used to generate a final configuration file. The configuration file can be in a format that can be directly used by the Android end, such as XML or JSON format.

[0163] In summary, this invention extracts and processes the Web-side configuration content through recursive traversal of intermediate configuration files, ultimately generating a configuration file suitable for the Android side. Through steps such as attribute mapping, customization, and unit conversion, the graphical interface performance of the Web and Android sides is guaranteed to be consistent, enabling cross-platform graphical interface development.

[0164] In some embodiments, the second configuration content can be obtained by:

[0165] First, the number of attributes in the first configuration content is adjusted according to the graphical interface specification of the second platform;

[0166] Next, according to the graphical interface specification of the second platform, the attribute value to be adjusted is determined from the first configuration content after the attribute quantity is adjusted;

[0167] Finally, the unit conversion and value adaptation processing are performed on the attribute value to be adjusted to obtain the second configuration content.

[0168] like Figure 4 As shown, you can first identify the differences in interface presentation between the web and Android platforms, including the types and number of supported attributes. Based on the Android GUI specifications, you may need to add, delete, or modify certain attributes to ensure that the configuration meets Android requirements.

[0169] For example, the Web uses the margin attribute to set margins, while the Android side requires the layout_margin attribute. Therefore, you can convert the margin attribute on the Web side to the layout_margin attribute on the Android side, or if there is no margin attribute to convert, you can directly add the layout_margin attribute.

[0170] After adjusting the number of attributes, you can identify which attribute values need further adjustment to meet Android specifications. For example, the web version uses the border-radius property to set rounded corners, while the Android version requires setting a background image or using specific attributes to achieve a similar effect.

[0171] For property values that need to be adjusted, you can convert the property values to match the Android unit system. For example, you can convert the px unit commonly used on the Web to the dp or sp unit commonly used on the Android side.

[0172] In some embodiments, the attribute value can also be adapted according to the screen size and resolution of the Android side to ensure the best display effect on different devices. If the button height on the Web side is 50px, it can be converted to the dp unit of the Android side. Assuming that 1dp is approximately equal to 1px, the converted button height is 50dp. For example, for color values, if the Web side uses hexadecimal color codes (such as #FFFFFF for white), the Android side can use corresponding resource references such as @color / white.

[0173] In some embodiments, the adjusted property values can be integrated into a configuration file to generate second configuration content applicable to the Android terminal.

[0174] Assume that the following CSS styles exist for the first platform's web client:

[0175]

[0176] Now convert it into an XML layout file for Android:

[0177]

[0178] As you can see, during this conversion process, the units of the CSS properties width and height are converted from px to dp, which is suitable for Android properties. The CSS property background-color is converted to a background resource reference. The CSS property border-radius is converted to the Android property layout_margin to simulate a rounded corner effect.

[0179] In summary, this application adjusts the number of attributes, determines attribute values, and converts units based on the Android graphical interface specifications to generate a configuration file suitable for the Android side. This ensures cross-platform interface consistency and adaptability.

[0180] Step S104: Send the configuration file to the target terminal using the second platform, so that the target terminal runs the configuration file to generate a second graphical interface suitable for the second platform.

[0181] In some embodiments, the configuration file can be sent via the management platform to a target terminal compatible with the second platform. For example, in a vehicle-to-machine interaction scenario, the target terminal can be the vehicle-to-machine terminal. The target terminal's dynamic engine can then read and parse the configuration file and dynamically generate and update the vehicle-to-machine user interface based on the configuration file's contents, thereby enabling remote and flexible updates of the target terminal's vehicle-to-machine graphical interface.

[0182] In summary, this application sends configuration files from the dynamically constructed first platform to the target terminal, and then parses and applies these configuration files on the target terminal to generate and update the graphical interface suitable for the second platform. This not only improves the efficiency of cross-platform development of the graphical interface, but also provides users with a more flexible and dynamic graphical interface update experience.

[0183] Figure 5 This is a schematic diagram of the structure of a graphical interface generation device provided in an embodiment of the present application. Figure 5 The service using device may include a component library module 201 , an interface configuration module 202 , a data conversion module 203 and an interface generation module 204 .

[0184] Among them, the component library module 201 is used to obtain a UI component library suitable for the first platform; the UI component library includes containers and components of the second platform; the interface configuration module 202 is used to configure the interface according to the containers and components of the second platform in the UI component library, and obtain a first graphical interface suitable for the first platform; the data conversion module 203 is used to convert the first graphical interface into a configuration file suitable for the second platform; the interface generation module 204 is used to send the configuration file to the target terminal using the second platform, so that the target terminal runs the configuration file to generate a second graphical interface suitable for the second platform.

[0185] Among them, the component library module 201, the interface configuration module 202, the data conversion module 203 and the interface generation module 204 can be used to respectively execute steps S101-S104 in the embodiment corresponding to the above-mentioned service usage method. For the specific implementation methods of these modules and more details, please refer to the corresponding method part, which will not be repeated here.

[0186] Figure 6 FIG. 1 is a schematic diagram showing an architecture of a controller 300 according to an exemplary embodiment. Figure 6 As shown, the controller 300 may include: a processor 301 , a memory 302 . The controller 300 may also include one or more of a multimedia component 303 , an input / output (I / O) component 304 , and a communication component 305 .

[0187] The processor 301 is used to control the overall operation of the controller 300 to complete all or part of the steps in the above method. The memory 302 is used to store various types of data to support the operation of the controller 300. For example, this data may include instructions for any application or method operating on the controller 300, as well as application-related data, such as contact information, sent and received messages, pictures, audio, video, etc. The memory 302 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk or optical disk. The multimedia component 303 may include a screen and an audio component. The screen may be, for example, a touch screen, and the audio component is used to output and / or input audio signals. For example, the audio component may include a microphone for receiving external audio signals. The received audio signal may be further stored in the memory 302 or sent via the communication component 305. The audio component also includes at least one speaker for outputting audio signals. The I / O component 304 provides an interface between the processor 301 and other interface modules, which may be a keyboard, a mouse, buttons, etc. These buttons may be virtual buttons or physical buttons. The communication component 305 is used for wired or wireless communication between the controller 300 and other devices. Wireless communication, such as WiFi, Bluetooth, Near Field Communication (NFC), 2G, 3G, 4G, NBIOT, eMTC, or other 5G, etc., or a combination of one or more thereof, is not limited here. Therefore, the corresponding communication component 305 may include: a WiFi module, a Bluetooth module, an NFC module, etc.

[0188] In an exemplary embodiment, the controller 300 can be implemented by one or more application-specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DSPDs), programmable logic devices (PLDs), field programmable gate arrays (FPGAs), controllers, microcontrollers, microprocessors, or other electronic components to perform the above-mentioned method.

[0189] In another exemplary embodiment, a computer-readable storage medium including program instructions is also provided. When the program instructions are executed by a controller, the steps of the above-described method are implemented. For example, the computer-readable storage medium may be the memory 302 including the program instructions. The program instructions may be executed by the processor 301 of the controller 300 to complete the steps of the above-described method.

[0190] Figure 7 is a block diagram of a computer device provided in an embodiment of the present application, such as Figure 7 As shown, the computer device 400 includes the controller 300 mentioned above.

[0191] An embodiment of the present application also provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program for electronic data exchange, and the computer program enables a computer to execute part or all of the steps of any one of the methods described in the above method embodiments.

[0192] It should be noted that for the aforementioned method embodiments, for the sake of simplicity, they are all expressed as a series of action combinations, but those skilled in the art should be aware that this application is not limited by the order of the actions described, because according to this application, 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 and modules involved are not necessarily required by this application.

[0193] In the above embodiments, the description of each embodiment has its own focus. For parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0194] In the several embodiments provided in this application, it should be understood that the disclosed devices can be implemented in other ways. For example, the device embodiments described above are merely illustrative. For example, the division of the units is merely a logical function division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, and the indirect coupling or communication connection of devices or units can be electrical or other forms.

[0195] The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of these units may be selected to achieve the purpose of this embodiment according to actual needs.

[0196] In addition, the functional units in the various embodiments of the application may be integrated into a single processing unit, or each unit may exist physically separately, or two or more units may be integrated into a single unit. The aforementioned integrated units may be implemented in the form of hardware or software program modules.

[0197] If the integrated unit is implemented in the form of a software program module and sold or used as an independent product, it can be stored in a computer-readable storage unit. Based on this understanding, the technical solution of the present application is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage unit, including a number of instructions for enabling a computer device (which can be a personal computer, server or network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage unit includes: U disk, read-only memory (ROM), random access memory (RAM), mobile hard disk, magnetic disk or optical disk, etc., various media that can store program codes.

[0198] Those skilled in the art will understand that all or part of the steps in the various methods of the above embodiments can be completed by instructing related hardware through a program, and the program can be stored in a computer-readable storage unit, which may include: a flash drive, a read-only storage unit, a random access memory, a magnetic disk or an optical disk, etc.

[0199] The preferred embodiments of the present application are described in detail above in conjunction with the accompanying drawings. However, the present application is not limited to the specific details in the above embodiments. Within the technical concept of the present application, various simple modifications can be made to the technical solution of the present application, and these simple modifications all fall within the scope of protection of the present application.

[0200] It should also be noted that the various specific technical features described in the above specific embodiments can be combined in any appropriate manner unless there is any contradiction. In order to avoid unnecessary repetition, this application will not further describe various possible combinations.

[0201] In addition, the various implementation methods of the present application may be arbitrarily combined, and as long as they do not violate the concept of the present application, they should also be regarded as the contents disclosed in the present application.

[0202] In the description of this application, the terms "first" and "second" are used for descriptive purposes only and should not be understood to indicate or imply relative importance or implicitly specify the number of technical features indicated. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include one or more features. In the description of this application, "plurality" means two or more, unless otherwise specifically defined.

[0203] In the above embodiments, the description of each embodiment has its own focus. For parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0204] The embodiments, implementation methods and related technical features of the present application can be combined and replaced with each other without conflict.

[0205] The above are merely preferred embodiments of the present application and do not constitute any form of limitation to the present application. However, any simple modifications, equivalent changes, and modifications made to the above embodiments based on the technical essence of the present application without departing from the content of the technical solution of the present application are still within the scope of the technical solution of the present application.

Claims

1. A method for generating a graphical interface, characterized in that: include: Get the UI component library suitable for the first platform; The UI component library includes containers and components of the second platform; Performing interface configuration according to the containers and components of the second platform in the UI component library to obtain a first graphical interface suitable for the first platform; Converting the first graphical interface into a configuration file suitable for the second platform; The configuration file is sent to a target terminal using the second platform, so that the target terminal runs the configuration file to generate a second graphical interface suitable for the second platform.

2. The method according to claim 1, characterized in that The converting the first graphical interface into a configuration file suitable for the second platform includes: Converting the first graphical interface into front-end configuration information; Performing attribute alignment processing on the front-end configuration information to generate an intermediate configuration file; the attribute alignment processing is used to correspond the attributes applicable to the first platform in the front-end configuration information to the attributes applicable to the second platform; Recursively configure the intermediate configuration file to obtain the configuration file.

3. The method according to claim 2, characterized in that The performing attribute alignment processing on the front-end configuration information to generate an intermediate configuration file includes: In the front-end configuration information, determining a first target attribute associated with an attribute of the second platform; the first target attribute is applicable to the first platform; converting the style of the first target attribute into a target style suitable for the second platform; The target style is exported to generate the intermediate configuration file.

4. The method according to claim 3, characterized in that Also includes: If the first target attribute is not obtained, the first style of the first platform is dynamically compiled to obtain a second style suitable for the second platform.

5. The method according to claim 4, characterized in that The dynamically compiling the first style of the first platform to obtain the second style applicable to the second platform includes: Determining a second target attribute in the second platform that cannot match the first target attribute; Determining, according to the style of the second target attribute, a dynamic adjustment logic for the style; The first style is adjusted according to the dynamic adjustment logic to obtain the second style.

6. The method according to claim 5, characterized in that The second target attribute includes a plurality of candidate styles, and the method further includes: Obtaining the individual priority of each candidate style and the combined priority of each candidate style when combined with candidate styles of other attributes; Determining a dynamic adjustment logic corresponding to the candidate pattern according to the individual priority and the combined priority of the candidate pattern; The first pattern is adjusted according to the dynamic control logic to obtain the second pattern.

7. The method according to claim 2, characterized in that The recursive configuration of the intermediate configuration file to obtain the configuration file includes: Recursively traverse each child node of the intermediate configuration file to extract valid first configuration content from each child node; Processing the first configuration content according to a graphical interface specification of the second platform to obtain processed second configuration content; Generate the configuration file according to the second configuration content.

8. The method according to claim 7, characterized in that The processing of the first configuration content according to the graphical interface specification of the second platform to obtain the processed second configuration content includes: Adjusting the number of attributes in the first configuration content according to a graphical interface specification of the second platform; Determining, according to a graphical interface specification of the second platform, attribute values to be adjusted from the first configuration content after the attribute quantity is adjusted; Unit conversion and value adaptation processing are performed on the attribute value to be adjusted to obtain the second configuration content.

9. The method according to claim 1, characterized in that After obtaining the first graphical interface applicable to the first platform, the method further includes: In response to triggering a preview operation on the first graphical interface, generating a preview graphical interface; Among them, the display effect of the preview graphic interface is consistent with that of the second graphic interface.

10. The method according to claim 9, characterized in that The generating of the preview graphical interface includes: Obtaining the display logic of the native rendering graphical interface of the first platform; According to the display logic, the component properties of the first graphical interface are dynamically parsed and rendered to generate a view tree structure suitable for the second platform to obtain the preview graphical interface.

11. A graphical interface generating device, characterized in that: include: A component library module, used to obtain a UI component library suitable for the first platform; The UI component library includes containers and components of the second platform; An interface configuration module, configured to configure an interface based on the containers and components of the second platform in the UI component library to obtain a first graphical interface suitable for the first platform; a data conversion module, configured to convert the first graphical interface into a configuration file suitable for the second platform; The interface generation module is used to send the configuration file to a target terminal using the second platform, so that the target terminal runs the configuration file to generate a second graphical interface suitable for the second platform.

12. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 10 are implemented.

13. A controller having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 10 are implemented.

14. A computer device, characterized in that: Including the controller according to claim 13.

15. A computer program product, characterized in that The method comprises a computer program or instructions, which implement the steps of the method according to any one of claims 1 to 10 when executed by a processor.

Images