CN117573126A - User interface rendering method, device, electronic equipment and storage medium - Google Patents
User interface rendering method, device, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN117573126A CN117573126A CN202311744255.4A CN202311744255A CN117573126A CN 117573126 A CN117573126 A CN 117573126A CN 202311744255 A CN202311744255 A CN 202311744255A CN 117573126 A CN117573126 A CN 117573126A
- Authority
- CN
- China
- Prior art keywords
- component
- information
- native component
- user interface
- rendering
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 67
- 238000000034 method Methods 0.000 title claims abstract description 50
- 238000013515 script Methods 0.000 claims abstract description 67
- 230000009471 action Effects 0.000 claims description 22
- 230000000051 modifying effect Effects 0.000 claims description 11
- 238000012546 transfer Methods 0.000 claims description 11
- 238000004590 computer program Methods 0.000 claims description 5
- 230000001960 triggered effect Effects 0.000 claims description 5
- 230000003993 interaction Effects 0.000 abstract description 11
- 230000006870 function Effects 0.000 description 21
- 238000010586 diagram Methods 0.000 description 7
- 238000004891 communication Methods 0.000 description 5
- 230000006399 behavior Effects 0.000 description 4
- 238000012986 modification Methods 0.000 description 4
- 230000004048 modification Effects 0.000 description 4
- 238000004364 calculation method Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 238000013507 mapping Methods 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- KKIMDKMETPPURN-UHFFFAOYSA-N 1-(3-(trifluoromethyl)phenyl)piperazine Chemical compound FC(F)(F)C1=CC=CC(N2CCNCC2)=C1 KKIMDKMETPPURN-UHFFFAOYSA-N 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 230000006378 damage Effects 0.000 description 1
- 230000001419 dependent effect Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
- G06F8/65—Updates
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Computer Security & Cryptography (AREA)
- Stored Programmes (AREA)
Abstract
The application relates to the technical field of computers, and provides a user interface rendering method, a device, electronic equipment and a storage medium, wherein the method comprises the following steps: obtaining an external script file, wherein the external script file comprises service logic information; operating an external script file to introduce business logic information into an application program; updating attribute information and layout information of a target native component in an application program based on service logic information; and rendering the user interface based on the updated target native component. According to the method and the device, the service logic information is stored in the external script file, the external script file can be dynamically issued to update the component rendering under the condition that the application program code is not modified, so that the configuration dynamics is achieved, release version or OTA upgrading is not needed, and meanwhile, the service code can be highly fused with the host application, and the complex interaction function is realized.
Description
Technical Field
The present disclosure relates to the field of computer technologies, and in particular, to a user interface rendering method, apparatus, electronic device, and storage medium.
Background
With the popularization of the central control screen end, a central control large screen is integrated on more and more hardware devices. The central large screen is usually based on an Android operating system, and uses an application framework in the system to render pages or partial views, but the views or pages realized by the native code of the system are lack of dynamics. For other cross-platform schemes, due to higher requirements on hardware devices, the cross-platform scheme is not available or has poor performance in an environment with lower configuration of some hardware devices. In addition, there are functional limitations with JSON file configuration views.
Disclosure of Invention
The present application aims to solve at least one of the technical problems existing in the prior art. Therefore, the user interface rendering method is provided, by storing the business logic information into the external script file, the external script file can be dynamically issued to update the component rendering under the condition of not modifying the application program code, so that the configuration dynamics is achieved, release version or OTA upgrading is not needed, and meanwhile, the business code can be highly fused with the host application, so that the complex interaction function is realized.
The application also provides a user interface rendering device, electronic equipment and a storage medium.
The user interface rendering method according to the embodiment of the first aspect of the application comprises the following steps:
acquiring an external script file, wherein the external script file comprises business logic information;
running the external script file to introduce the business logic information into an application program;
updating attribute information and layout information of a target native component in the application program based on the service logic information;
and rendering the user interface based on the updated target native component.
According to the embodiment of the application, the service logic information is stored in the external script file, the external script file can be dynamically issued to update the component rendering under the condition that the application program code is not modified, so that the configuration dynamics is achieved, release version or OTA upgrading is not needed, and meanwhile, the service code can be highly fused with the host application, and a complex interaction function is realized.
According to one embodiment of the present application, the updating the attribute information and the layout information of the target native component in the application program based on the service logic information includes:
determining target attribute information and target layout information based on the updating conditions and updating modes of the user interface in the service logic information;
modifying the attribute information of the target native component based on the target attribute information and calling an application program interface of the target native component;
and adjusting the attribute information of the target native component based on the target layout information and calling an application program interface of the target native component.
According to one embodiment of the present application, after the page rendering based on the updated target native component, the method further includes:
acquiring a gesture event triggered by a user interface;
determining the action type to be executed by the gesture event based on the configuration file of the user interface;
and calling an application program interface to execute the operation related to the action type.
According to an embodiment of the present application, before the obtaining the external script file, the method further includes:
acquiring a component type field and a style field in a configuration file of a user interface;
creating a native component object based on the component type field;
setting attribute information of the native component object based on the style field;
constructing a native component tree based on the hierarchical information of the native component object;
layout information of each native component object in the native component tree is determined to perform the user interface rendering based on the native component object.
According to one embodiment of the application, the creating a native component object based on the component type field includes:
acquiring a component type carried by the component type field, and determining a matching result of the component type and a component registry of the application program;
acquiring a native component class name associated with the component type based on the matching result;
and creating the native component object based on the native component corresponding to the native component class name.
According to one embodiment of the present application, the determining layout information of each of the native component objects in the native component tree further includes:
generating a node tree based on the native component tree;
traversing the node tree from top to bottom starting from a root node of the node tree, and determining size information of each node in the node tree;
traversing the node tree from bottom to top starting from leaf nodes of the node tree, and determining the position information of each node in the node tree;
and determining the layout information of each native component object in the native component tree according to the size information and the position information of each node in the node tree.
According to one embodiment of the present application, the obtaining the external script file includes:
and acquiring the external script file based on the hypertext transfer protocol request.
A user interface rendering apparatus according to an embodiment of a second aspect of the present application includes:
the system comprises an acquisition module, a storage module and a storage module, wherein the acquisition module is used for acquiring an external script file, and the external script file comprises business logic information;
the operation module is used for operating the external script file so as to introduce the business logic information into an application program;
the updating module is used for updating the attribute information and the layout information of the target native component in the application program based on the business logic information;
and the rendering module is used for rendering the user interface based on the updated target native component.
An electronic device according to an embodiment of the third aspect of the present application includes a memory, a processor, and a computer program stored on the memory and executable on the processor, the processor implementing a user interface rendering method as any one of the above when executing the program.
A non-transitory computer readable storage medium according to an embodiment of the fourth aspect of the present application, having stored thereon a computer program which, when executed by a processor, implements a user interface rendering method as described in any of the above.
The above technical solutions in the embodiments of the present application have at least one of the following technical effects:
by storing the business logic information to the external script file, the external script file can be dynamically issued to update the component rendering without modifying the application code;
the dynamic property of configuration is achieved, and release version or OTA upgrading is not needed;
the service codes can be highly integrated with the host application to realize complex interaction functions.
Additional aspects and advantages of the application will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of the application.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings that are required in the embodiments or the description of the prior art will be briefly described below, it being obvious that the drawings in the following description are only some embodiments of the present application, and that other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
FIG. 1 is a flowchart of a user interface rendering method according to an embodiment of the present disclosure;
FIG. 2 is a schematic diagram of a native component tree and node tree according to an embodiment of the present disclosure;
FIG. 3 is a second flowchart of a user interface rendering method according to an embodiment of the present disclosure;
FIG. 4 is a third flow chart of a user interface rendering method according to an embodiment of the present disclosure;
fig. 5 is a schematic diagram of an parsing flow of a UI configuration file provided in an embodiment of the present application;
FIG. 6 is a block diagram of a user interface rendering apparatus according to an embodiment of the present application;
fig. 7 is a schematic structural diagram of an electronic device according to an embodiment of the present application.
Detailed Description
Embodiments of the present application are described in further detail below with reference to the accompanying drawings and examples. The following examples are illustrative of the present application but are not intended to limit the scope of the present application.
In the description of the embodiments of the present application, it should be noted that the terms "first," "second," and "third" are used for descriptive purposes only and are not to be construed as indicating or implying relative importance.
In the examples herein, a first feature "on" or "under" a second feature may be either the first and second features in direct contact, or the first and second features in indirect contact via an intermediary, unless expressly stated and defined otherwise. Moreover, a first feature being "above," "over" and "on" a second feature may be a first feature being directly above or obliquely above the second feature, or simply indicating that the first feature is level higher than the second feature. The first feature being "under", "below" and "beneath" the second feature may be the first feature being directly under or obliquely below the second feature, or simply indicating that the first feature is less level than the second feature.
In the description of the present specification, a description referring to terms "one embodiment," "some embodiments," "examples," "specific examples," or "some examples," etc., means that a particular feature, structure, material, or characteristic described in connection with the embodiment or example is included in at least one embodiment or example of the embodiments of the present application. In this specification, schematic representations of the above terms are not necessarily directed to the same embodiment or example. Furthermore, the particular features, structures, materials, or characteristics described may be combined in any suitable manner in any one or more embodiments or examples. Furthermore, the different embodiments or examples described in this specification and the features of the different embodiments or examples may be combined and combined by those skilled in the art without contradiction.
It should be noted that, the central large screen is usually based on an Android operating system, and an application framework in the system is used to render pages or partial views. However, the view or page implemented by the native code of the system is not dynamic, and often needs to release versions frequently, so that the view or page cannot be advantageous in a scene that the page is changed frequently. For other schemes, such as ReactNative, weex, flutter and web cross-platform schemes, some hardware devices are not available or perform poorly in environments where configuration of the hardware devices is low due to the high demands on the hardware devices (typically requiring a GPU, or CPU and GPU performance is high). In addition, some configuration files using JSON files as UIs dynamically create views, but cannot be combined with actual services or deep fused with host application code, and the functions that can be realized are limited.
Based on the above problems, embodiments of the present application provide a user interface rendering method. Fig. 1 is a schematic flow chart of a user interface rendering method according to an embodiment of the present application. Referring to fig. 1, an embodiment of the present application provides a user interface rendering method, including:
step 100, obtaining an external script file;
it should be noted that, the execution body in the embodiment of the present application is a host application, where the host application refers to a main application program or platform that carries and runs service codes.
External script files, such as Python, lua, or JavaScript scripts, are obtained from the server based on hypertext transfer protocol (Hypertext Transfer Protocol, HTTP) requests. Alternatively, the external script file may be obtained from the server via a file transfer protocol (File Transfer Protocol, FTP) request, a secure copy protocol (Secure Copy Protocol, SCP) request, a secure file transfer protocol (SSH File Transfer Protocol, SFTP) request, a simple file transfer protocol (Trivial File Transfer Protocol, TFTP) request, etc.
The external script file includes service logic information, where the service logic information refers to conditions and modes for determining a User Interface (UI) to be updated according to specific requirements and data states of an application.
Optionally, the external script file further comprises configuration information.
It should be noted that, the update is issued by means of HTTP or the like, so that the configuration and the change of the service code can be validated immediately, and no need to wait for the release of a new version or the OTA upgrade, thereby improving the development iteration speed and enabling the application program to adapt to the changing requirement more quickly.
Step 200, running the external script file to introduce the business logic information into an application program;
after the external script file is acquired, the external script file is operated and loaded, so that the business logic information is introduced into the application program.
Step 300, based on the business logic information, updating the attribute information and layout information of the target native component in the application program;
it should be noted that, the native component refers to a basic UI element provided by the platform or the framework, and the target native component refers to a native component to be updated.
When the UI needs to be updated, an onUpdate function of a life cycle is called, and the attribute and layout of the native component are modified according to the business logic information. A lifecycle function refers to a series of functions or methods that a component automatically triggers throughout its lifecycle, including stages of creation, updating, and destruction of the component.
Specifically, determining target attribute information and target layout information based on updating conditions and updating modes of a user interface in service logic information; modifying the attribute information of the target native component based on the target attribute information and calling an application program interface of the target native component; and adjusting the attribute information of the target native component based on the target layout information and calling an application program interface of the target native component.
Wherein, the update condition refers to a condition for determining when the user interface needs to be updated in service logic, and the update condition at least comprises: data change: when certain data changes, related components need to be updated, for example, when a user submits a form, the form data changes, and components displaying the data need to be updated. User interaction: when a user interacts with the interface, the component needs to be updated according to the user's operation, for example, when the user clicks a button, the state of the button needs to be updated or related information needs to be presented. Time conditions: the updating of the interface is triggered according to a time condition, for example, different contents are displayed for a specific date or time period, or contents of a certain component are updated at intervals. External events: the updating of the user interface is dependent on the occurrence of external events, for example when a new message pushed by the server is received, the list of messages in the chat interface needs to be updated. And (3) condition judgment: whether the interface needs to be updated is determined according to specific condition judgment, for example, whether a certain component or a certain function is displayed is determined according to authority judgment of a user.
Once the update condition is satisfied, it is necessary to determine how to update the component, i.e. determine the update mode of the component, where the update mode includes at least: updating attribute information: such as text content, styles, or other custom properties, may be implemented by directly modifying the component's property values or by specific API methods. Updating layout information: the layout of the components, such as location, size, or display/hidden status, is changed. A re-rendering component: re-rendering the component to reflect the update may be accomplished by triggering a re-rendering function of the component or forcing a refresh component.
The target attribute information refers to attribute information for updating the native component; the target layout information refers to layout information for updating the native component.
For example, modifying properties and layout in native components according to business logic information includes the following steps:
judging conditions of the UI to be updated: based on the business logic information, it is determined when modifications to the properties and layout of the native components are required.
Acquiring a target native component: in the onUpdate function of the lifecycle, the target native component that needs to be modified is obtained in a corresponding manner, such as by ID, reference, or other means.
Modifying the attribute: and determining the attribute to be modified according to the business logic information, and modifying the attribute through the API provided by the target native component, such as changing the attribute related to color, size, position, visibility and the like.
Adjusting the layout: and determining the layout to be adjusted according to the business logic information, and modifying the layout through the API provided by the target native component, such as adjusting the position, the size, the alignment mode and the like of the component.
Step 400, user interface rendering is performed based on the updated target native component.
And after the updated component, adopting the updated target native component to conduct user interface rendering.
According to the user interface rendering method, the external script file is obtained, and the external script file comprises service logic information; operating an external script file to introduce business logic information into an application program; updating attribute information and layout information of a target native component in an application program based on service logic information; and rendering the user interface based on the updated target native component. According to the method and the device, the service logic information is stored in the external script file, the external script file can be dynamically issued to update the component rendering under the condition that the application program code is not modified, so that the configuration dynamics is achieved, release version or Over-the-air technology firmware and software OTA (Over-the-air technology) upgrading is not needed, and meanwhile, the service code can be highly fused with the host application, and the complex interaction function is realized.
Based on the above embodiment, after the page rendering based on the updated target native component, the method further includes:
step 411, acquiring a gesture event triggered by a user interface;
step 412, determining the action type to be executed by the gesture event based on the configuration file of the user interface;
step 413, calling an application program interface to execute the operation associated with the action type.
It should be noted that, the configuration file of the user interface refers to a UI configuration file, which includes information such as page layout, component type, style, interaction behavior, etc., and is used to define the user interface of the application program.
When a user triggers a click or other gesture event on the UI interface, the host application determines the type of action to be executed according to the action field in the UI configuration file, and invokes the application program interface API registered by the host application to complete the corresponding operation. The steps of executing the operation corresponding to the gesture event are as follows:
triggering a gesture event: a user performs a tap or other gesture operation, such as touching a screen, clicking a button, etc., on the UI interface, which triggers a corresponding gesture event.
The action field in the UI configuration file: the host application uses a UI configuration file to describe the properties and behavior of the interface element, where the UI configuration file includes an action field to specify the action that a certain interface element should perform when triggering a specific gesture event.
Judging the type of action to be executed: when the gesture event occurs, the host application searches the configuration of the corresponding interface element in the UI configuration file according to the specific situation of the trigger event, and obtains the action type required to be executed by the gesture event, for example, "navigatto" (navigating to another page), "submit form", etc. from the action field.
API for executing host application registration: according to the acquired action type, the host application can call the registered API to execute corresponding operation. The APIs are interfaces provided by host applications and are used for realizing functions of navigation, data submission, state update and the like.
In a specific embodiment, assume that the text content of the button specified in the UI configuration file is "sub", and an action field is configured, which contains the following information:
type: the action type is "subtform", which indicates that the form submit operation is to be performed when the button is clicked.
formaData: form data to be submitted, such as a user name and password corresponding input box identifier, is specified.
When the user clicks this button on the UI, the host application obtains the action type "submit form" according to the configuration of the button, and then the host application calls the API registered in advance to perform the operation of form submission, for example, calls an API named "submit form" and passes the data specified in formData together to the past, so as to implement the operation of form submission.
According to the embodiment of the application, the behavior of the interface element is defined through simple configuration, and the specific operation logic is realized by the API provided by the host application, so that the decoupling of the interface and the operation logic is realized, and the maintainability and the flexibility of codes are improved.
Based on the above embodiment, before the external script file is obtained, the method further includes:
step 111, acquiring a component type field and a style field in a configuration file of a user interface;
step 112, creating a native component object based on the component type field;
step 113, setting attribute information of the native component object based on the style field;
step 114, constructing a native component tree based on the hierarchical information of the native component object;
step 115, determining layout information of each native component object in the native component tree to perform the user interface rendering based on the native component object.
The host application obtains a configuration file of the user interface, i.e., a UI configuration file, through the Http request, wherein the UI configuration file includes a component type field (e.g., a type field) and a style field (e.g., a styles field), wherein the styles field is used to define a set of attributes, including a layout-related attribute, such as a size, a location, a margin, etc., of the component, and other appearance and behavior-related attributes, such as color, font, background, etc.
Based on the component type field, a native component object is created. Specifically, the component type carried by the component type field is obtained, and a matching result of the component type and a component registry of the application program is determined; acquiring a primary component class name associated with the component type based on the matching result; and creating a native component object based on the native component corresponding to the native component class name. Where a native component object refers to an instantiation object for a particular native component that is dynamically created in an application to represent an instance of a particular UI element.
For example, a component registry or mapping table is stored in the host application, and includes a mapping relationship between a type field (i.e., a component type field) and its corresponding native component class name, where the component registry is initialized when the host application is started, and stored in the memory for subsequent use. When the host application parses the UI configuration file, the component registry is searched based on the type field in the UI configuration file to obtain the native component class name corresponding to the type field. The host application then creates a corresponding component object using the native component corresponding to the native component class name.
In one embodiment, assuming that the type value of a component in the UI configuration file is "Button," the host application will look up the registered Button component based on this value and use it to create an instance object of the native Button class that represents the Button component defined in the UI configuration file.
The host application of the embodiment of the application dynamically creates different types of native component objects according to the type value in the UI configuration file, so that a user interface is generated according to the definition of the configuration file, and based on the user interface, flexible customization and expansibility of the interface can be realized.
Based on the style field, attribute information of the native component object is set. For example, attributes in styles are assigned to native component objects. Alternatively, for the React component, property information may be set using a tips object, and for the Vue component, property information may be set using a $set method or directly assigning properties to component objects.
A native component tree is constructed based on the hierarchical information of the native component object. For example, the parent-child relationship of each component is obtained from the hierarchical information of the native component object, and then a native component tree is constructed according to the parent-child relationship, wherein the step of constructing the native component tree includes: selecting a root component (component without parent component) from the hierarchy information as a starting point; for the selected root component, checking whether the selected root component has a sub-component, if so, recursively calling a method for constructing a component tree, transmitting the sub-component as a new root component, and adding the returned component tree thereof into a sub-component list of a parent component; the above steps are repeated for each sub-component until all components are traversed and the component tree construction is complete.
Layout information of each native component object in the native component tree is determined for user interface rendering based on the native component object. Specifically, a node tree is generated based on the native component tree; traversing the node tree from top to bottom from the root node of the node tree, and determining the size information of each node in the node tree; traversing the node tree from bottom to top from the leaf node of the node tree, and determining the position information of each node in the node tree; and determining the layout information of each native component object in the native component tree by using the size information and the position information of each node in the node tree. Wherein the layout information includes size information and position information.
It should be noted that the directions of traversal for determining the size and the position are different because the calculation of the size and the position depends on different information and contexts when processing the layout and the rendering, so that a different traversal order is required. The size calculation needs to consider the influence of the parent element on the size of the child element, so the parent element starts to calculate downwards step by step from the parent element, and in the process, the parent element can correspondingly adjust and calculate according to the size information of the child element until the leaf node is reached. The position is calculated by positioning the parent element, so that the position and size information of the parent element need to be known first, and then the position information of the child element needs to be calculated. Thus, a bottom-up traversal is used, i.e. calculation is started from the leaf node, and then the position information is transferred step by step up until the root node. Based on this, the correctness and efficiency of the layout and rendering process can be improved.
Referring to fig. 2, a corresponding node tree data structure is created from the structure of the native component tree, each node representing a native component object, and the entire node tree is constructed by association of child nodes and parent nodes.
Traversing the node tree from the root node of the node tree from top to bottom, and for each node, acquiring and recording size information (such as width and height) of the node according to the corresponding native component object.
Traversing the node tree from the leaf node of the node tree in a sequence from bottom to top, calculating the position information (such as coordinates) of each node according to the position information of the corresponding original component object and the parent node of each node, and recording.
Traversing each native component object in the native component tree, finding corresponding size and position information in the node tree according to the corresponding node, and setting the information to the native component object, wherein the layout information comprises size information and position information of the component.
The method and the device can dynamically construct the user interface according to the UI configuration file and flexibly layout and display through the processes of dynamically creating the components, building the component tree, calculating the layout and applying the layout to the native components.
For further explanation of the user interface rendering method provided in the present application, refer to fig. 3 to 5 and the following embodiments.
The embodiment of the application specifically provides a rendering method of a central control screen end, which comprises the following steps:
(1) The host application initializes the script engine, registers the general APIs such as update UI or network request into the script engine; at the same time, the native component registry and the registry script function are initialized at start-up.
(2) The UI configuration file and the service code file are acquired through a network request (such as an HTTP request) and the like.
(3) Analyzing the UI configuration file, searching a mapping table of the original component through a type field in the UI configuration file to find the mapped original component class name, creating a component object, and setting an attribute for the original component object through a style field in the UI configuration file.
(4) The nodes are created by using a Flex layout engine, the sizes and positions of all components are calculated, and finally the values are assigned to the native components to determine the sizes and positions of the native components. Finally, rendering in the screen in a native UI manner by the created native component.
(5) The source code is parsed using a script engine corresponding to the business code file. When the UI or the business needs to be updated, a life cycle method is executed, such as updating an onUpdate function of the UI, calling the attribute, the layout and the like of the API updating component of the original registration through a bridging layer of an engine and the original.
(6) And when the interaction such as clicking a screen is performed, acquiring the actions configuration of the components in the UI configuration file, judging and selecting the APIs (application program interface) for realizing and registering the custom functions, network requests or other native applications in the execution script according to the actions configuration.
As shown in FIG. 5, after the host application obtains the UI configuration file, it obtains the application-registered View component through the type field, creates a native component object of the native View class, and assigns the properties in the styles to the native component object. By analogy, creating and establishing parent-child hierarchical relationships for all components in the UI configuration file achieves the effect in the middle of FIG. 5. And then resolving the layouts attribute, as shown in fig. 2, generating a node tree from the original component tree created in the last step, and assigning all values in the layouts attribute to ygLayout of the node. After the node tree is constructed, the size and the position of all node nodes in the node tree are calculated through a layout engine. And finally, setting the sizes and the positions of node nodes to the native components one by one, and finally setting the positions and the sizes of the native components, as shown in the rightmost diagram of fig. 5.
As shown in fig. 4, the script configuration is parsed by linking the dynamic library or using a script engine, such as python, lua, javascript engine, according to the scripting language. When the UI needs to be updated, an onUpdate function of a life cycle is called, and the attribute and layout in the native component are modified according to the business logic information.
According to the method and the device, the UI configuration file and the js script file are dynamically issued to the device in the modes of HTTP and the like, the native component is created by analyzing the UI configuration file and mapped into the native component to be rendered in the screen, and therefore the effect of dynamically updating the UI is achieved. Meanwhile, the js engine is used for analyzing the js file, and a life cycle function in the js file is executed when needed, so that UI display of the page is realized, and complex functions such as business interaction and the like can be realized in the js file through a function or API method originally injected into the js engine. Based on the method, each subsequent update is dynamically issued in a mode of HTTP and the like, so that the configuration dynamics is achieved, release version or OTA upgrading is not needed, and meanwhile, service codes can be highly fused with host application to realize complex interaction functions.
Referring to fig. 6, fig. 6 is a schematic block diagram of a user interface rendering apparatus according to an embodiment of the present application, where the user interface rendering apparatus includes an obtaining module 601, a running module 602, an updating module 603, and a rendering module 604.
An obtaining module 601, configured to obtain an external script file, where the external script file includes service logic information;
an operation module 602, configured to operate the external script file to introduce the service logic information into an application program;
an updating module 603, configured to update attribute information and layout information of a target native component in the application program based on the service logic information;
a rendering module 604, configured to perform user interface rendering based on the updated target native component.
According to the user interface rendering device provided by the embodiment of the application, the external script file is obtained, and the external script file comprises service logic information; operating an external script file to introduce business logic information into an application program; updating attribute information and layout information of a target native component in an application program based on service logic information; and rendering the user interface based on the updated target native component. According to the method and the device, the service logic information is stored in the external script file, the external script file can be dynamically issued to update the component rendering under the condition that the application program code is not modified, so that the configuration dynamics is achieved, release version or OTA upgrading is not needed, and meanwhile, the service code can be highly fused with the host application, and the complex interaction function is realized.
In one embodiment, the update module 603 is specifically configured to:
determining target attribute information and target layout information based on the updating conditions and updating modes of the user interface in the service logic information;
modifying the attribute information of the target native component based on the target attribute information and calling an application program interface of the target native component;
and adjusting the attribute information of the target native component based on the target layout information and calling an application program interface of the target native component.
In one embodiment, the rendering module 604 is further configured to:
acquiring a gesture event triggered by a user interface;
determining the action type to be executed by the gesture event based on the configuration file of the user interface;
and calling an application program interface to execute the operation related to the action type.
In one embodiment, the obtaining module 601 is further configured to:
acquiring a component type field and a style field in a configuration file of a user interface;
creating a native component object based on the component type field;
setting attribute information of the native component object based on the style field;
constructing a native component tree based on the hierarchical information of the native component object;
layout information of each native component object in the native component tree is determined to perform the user interface rendering based on the native component object.
In one embodiment, the obtaining module 601 is further configured to:
acquiring a component type carried by the component type field, and determining a matching result of the component type and a component registry of the application program;
acquiring a native component class name associated with the component type based on the matching result;
and creating the native component object based on the native component corresponding to the native component class name.
In one embodiment, the obtaining module 601 is further configured to:
generating a node tree based on the native component tree;
traversing the node tree from top to bottom starting from a root node of the node tree, and determining size information of each node in the node tree;
traversing the node tree from bottom to top starting from leaf nodes of the node tree, and determining the position information of each node in the node tree;
and determining the layout information of each native component object in the native component tree according to the size information and the position information of each node in the node tree.
In one embodiment, the obtaining module 601 is specifically configured to:
and acquiring the external script file based on the hypertext transfer protocol request.
Fig. 7 illustrates a physical schematic diagram of an electronic device, as shown in fig. 7, which may include: processor 710, communication interface (Communications Interface) 720, memory 730, and communication bus 740, wherein processor 710, communication interface 720, memory 730 communicate with each other via communication bus 740. Processor 710 may call logic instructions in memory 730 to perform the following method:
acquiring an external script file, wherein the external script file comprises business logic information;
running the external script file to introduce the business logic information into an application program;
updating attribute information and layout information of a target native component in the application program based on the service logic information;
and rendering the user interface based on the updated target native component.
Further, the logic instructions in the memory 730 described above may be implemented in the form of software functional units and may be stored in a computer readable storage medium when sold or used as a stand alone product. Based on such understanding, the technical solution of the present application may be embodied essentially or in a part contributing to the prior art or in a part of the technical solution, in the form of a software product stored in a storage medium, including several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the methods described in the embodiments of the present application. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a random access Memory (RAM, random Access Memory), a magnetic disk, or an optical disk, or other various media capable of storing program codes.
In yet another aspect, embodiments of the present application further provide a non-transitory computer readable storage medium having stored thereon a computer program, which when executed by a processor is implemented to perform the user interface rendering method provided in the above embodiments, for example, including:
acquiring an external script file, wherein the external script file comprises business logic information;
running the external script file to introduce the business logic information into an application program;
updating attribute information and layout information of a target native component in the application program based on the service logic information;
and rendering the user interface based on the updated target native component.
The apparatus embodiments described above are merely illustrative, wherein the elements illustrated as separate elements may or may not be physically separate, and the elements shown as elements may or may not be physical elements, may be located in one place, or may be distributed over a plurality of network elements. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment. Those of ordinary skill in the art will understand and implement the present invention without undue burden.
From the above description of the embodiments, it will be apparent to those skilled in the art that the embodiments may be implemented by means of software plus necessary general hardware platforms, or of course may be implemented by means of hardware. Based on this understanding, the foregoing technical solution may be embodied essentially or in a part contributing to the prior art in the form of a software product, which may be stored in a computer readable storage medium, such as ROM/RAM, a magnetic disk, an optical disk, etc., including several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute the method described in the respective embodiments or some parts of the embodiments.
Finally, it should be noted that: the above embodiments are only for illustrating the technical solution of the present application, and are not limiting thereof; although the present application has been described in detail with reference to the foregoing embodiments, it should be understood by those of ordinary skill in the art that: the technical scheme described in the foregoing embodiments can be modified or some technical features thereof can be replaced by equivalents; such modifications and substitutions do not depart from the spirit and scope of the corresponding technical solutions.
The above embodiments are merely illustrative of the present application and are not limiting thereof. While the present application has been described in detail with reference to the embodiments, those skilled in the art will understand that various combinations, modifications, or equivalents of the technical solutions of the present application may be made without departing from the spirit and scope of the technical solutions of the present application, and all such modifications and equivalents are intended to be covered by the scope of the claims of the present application.
Claims (10)
1. A method of rendering a user interface, comprising:
acquiring an external script file, wherein the external script file comprises business logic information;
running the external script file to introduce the business logic information into an application program;
updating attribute information and layout information of a target native component in the application program based on the service logic information;
and rendering the user interface based on the updated target native component.
2. The method of claim 1, wherein updating the attribute information and the layout information of the target native component in the application program based on the business logic information comprises:
determining target attribute information and target layout information based on the updating conditions and updating modes of the user interface in the service logic information;
modifying the attribute information of the target native component based on the target attribute information and calling an application program interface of the target native component;
and adjusting the attribute information of the target native component based on the target layout information and calling an application program interface of the target native component.
3. The method for rendering a user interface according to claim 1, further comprising, after the page rendering based on the updated target native component:
acquiring a gesture event triggered by a user interface;
determining the action type to be executed by the gesture event based on the configuration file of the user interface;
and calling an application program interface to execute the operation related to the action type.
4. The method of claim 1, wherein before the external script file is obtained, further comprising:
acquiring a component type field and a style field in a configuration file of a user interface;
creating a native component object based on the component type field;
setting attribute information of the native component object based on the style field;
constructing a native component tree based on the hierarchical information of the native component object;
layout information of each native component object in the native component tree is determined to perform the user interface rendering based on the native component object.
5. The user interface rendering method of claim 4, wherein creating a native component object based on the component type field comprises:
acquiring a component type carried by the component type field, and determining a matching result of the component type and a component registry of the application program;
acquiring a native component class name associated with the component type based on the matching result;
and creating the native component object based on the native component corresponding to the native component class name.
6. The method of claim 4, wherein the determining layout information of each of the native component objects in the native component tree further comprises:
generating a node tree based on the native component tree;
traversing the node tree from top to bottom starting from a root node of the node tree, and determining size information of each node in the node tree;
traversing the node tree from bottom to top starting from leaf nodes of the node tree, and determining the position information of each node in the node tree;
and determining the layout information of each native component object in the native component tree according to the size information and the position information of each node in the node tree.
7. The method of claim 1, wherein the obtaining the external script file comprises:
and acquiring the external script file based on the hypertext transfer protocol request.
8. A user interface rendering apparatus, comprising:
the system comprises an acquisition module, a storage module and a storage module, wherein the acquisition module is used for acquiring an external script file, and the external script file comprises business logic information;
the operation module is used for operating the external script file so as to introduce the business logic information into an application program;
the updating module is used for updating the attribute information and the layout information of the target native component in the application program based on the business logic information;
and the rendering module is used for rendering the user interface based on the updated target native component.
9. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor implements the user interface rendering method of any one of claims 1 to 7 when the program is executed by the processor.
10. A non-transitory computer readable storage medium having stored thereon a computer program, which when executed by a processor implements the user interface rendering method of any of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311744255.4A CN117573126A (en) | 2023-12-15 | 2023-12-15 | User interface rendering method, device, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311744255.4A CN117573126A (en) | 2023-12-15 | 2023-12-15 | User interface rendering method, device, electronic equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117573126A true CN117573126A (en) | 2024-02-20 |
Family
ID=89884538
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311744255.4A Pending CN117573126A (en) | 2023-12-15 | 2023-12-15 | User interface rendering method, device, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117573126A (en) |
-
2023
- 2023-12-15 CN CN202311744255.4A patent/CN117573126A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| TWI808393B (en) | Page processing method, device, apparatus and storage medium | |
| EP3876116B1 (en) | Method and apparatus for running mini program, electronic device, and storage medium | |
| US10643023B2 (en) | Programmatic native rendering of structured content | |
| US10419568B2 (en) | Manipulation of browser DOM on server | |
| US8983935B2 (en) | Methods for utilizing a javascript emulator in a web content proxy server and devices thereof | |
| US10747510B1 (en) | Application runtime modification | |
| KR20140038989A (en) | Automated user interface object transformation and code generation | |
| US8407598B2 (en) | Dynamic web control generation facilitator | |
| CN110221899B (en) | User interface adjusting method, device and system | |
| US7603624B2 (en) | System and method for styling content in a graphical user interface control | |
| CN115061685B (en) | Interface element positioning method of software client, electronic equipment and storage medium | |
| CN111068328A (en) | Game advertisement configuration table generation method, terminal device and medium | |
| US20130080879A1 (en) | Methods and apparatus providing document elements formatting | |
| US20220334809A1 (en) | Process flow builder for extensible web component sequences | |
| US9038033B1 (en) | Techniques and mechanisms for web application minification | |
| US7447993B2 (en) | System and method for displaying a user interface object using an associated style | |
| CN110990431A (en) | Method for realizing synchronous linkage carousel of China map and line graph data | |
| CN113018870A (en) | Data processing method and device and computer readable storage medium | |
| CN115826963A (en) | Process event development multiplexing method and system based on low-code development platform | |
| US11604662B2 (en) | System and method for accelerating modernization of user interfaces in a computing environment | |
| CN111191174A (en) | Method, system and device for integrating Spanish Bitums | |
| US10445290B1 (en) | System and method for a smart configurable high performance interactive log file viewer | |
| US11789747B2 (en) | Simulated visual hierarchy while facilitating cross-extension communication | |
| CN117573126A (en) | User interface rendering method, device, electronic equipment and storage medium | |
| CN115964042A (en) | Menu generation method and device, storage medium and electronic equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |