Method and device for rendering interface, equipment and medium

Abstract

The invention provides a method and device for rendering an interface, computing equipment, a computer storage medium and a computer program product. The method comprises the following steps: receiving a rendering request from an operating system; processing the rendering request by an element layer of the application, wherein the element layer is implemented by the application and is separated from the operating system; and rendering, by the element layer, elements in the interface based on the process and data from an implementation layer of the application, wherein the implementation layer is configured to manage a layout of the interface and pass data for the application to the element layer.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and more specifically, to a method, apparatus, computing device, computer storage medium, and computer program product for rendering an interface. Background Art

[0002] With the rapid development of electronic devices such as smartphones, tablets, and laptops, the complexity and functionality of applications are also increasing. Rendering technology, as the core of user interface (UI) and graphic display, affects user experience, application performance, and device resource consumption. On electronic devices, due to hardware and battery limitations, the optimization of rendering technology is very important.

[0003] Long lists can be used to display large amounts of data on electronic devices, such as social media messages, news articles, product lists, etc. Long lists can load and render data or views in the page on demand, thereby effectively reducing the initialization loading time of the mobile terminal and improving the startup speed of the application. Summary of the invention

[0004] Embodiments of the present disclosure provide a method, apparatus, computing device, computer storage medium, and computer program product for rendering an interface.

[0005] According to a first aspect of the present disclosure, a method for rendering an interface is provided. The method includes: receiving a rendering request from an operating system; processing the rendering request by an element layer of an application, wherein the element layer is implemented by the application and is separated from the operating system. The method also includes rendering elements in the interface by the element layer based on processing and data from an implementation layer of the application, wherein the implementation layer is configured to manage the layout of the interface and pass data for the application to the element layer.

[0006] According to a second aspect of the present disclosure, a device for rendering an interface is provided. The device includes: a receiving unit configured to receive a rendering request from an operating system; a processing unit configured to process the rendering request by an element layer of an application, wherein the element layer is implemented by the application and is separated from the operating system; and a rendering unit configured to render elements in the interface by the element layer based on the processing and data from an implementation layer of the application, wherein the implementation layer is configured to manage the layout of the interface and pass data for the application to the element layer.

[0007] According to a third aspect of the present disclosure, a computing device is provided, comprising: at least one processing unit; and at least one memory, wherein the at least one memory is coupled to the at least one processing unit and stores instructions for execution by the at least one processing unit, wherein the instructions, when executed by the at least one processing unit, enable the computing device to execute the method as described in the first aspect of the present disclosure.

[0008] According to a fourth aspect of the present disclosure, a non-transitory computer storage medium is provided, comprising machine executable instructions, which, when executed by a device, cause the device to perform the method as described in the first aspect of the present disclosure.

[0009] According to a fifth aspect of the present disclosure, a computer program product is provided, comprising machine executable instructions, which, when executed by a device, cause the device to perform the method as described in the first aspect of the present disclosure.

[0010] It should be understood that the invention summary is not intended to identify the key or important features of the embodiments of the present disclosure, nor is it intended to limit the scope of the present disclosure. Other features of the present disclosure will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0011] The above and other objects, features and advantages of the embodiments of the present disclosure will become more easily understood through the following detailed description with reference to the accompanying drawings. In the accompanying drawings, various embodiments of the present disclosure will be described in an exemplary and non-limiting manner, in which:

[0012] Figure 1 A schematic diagram showing an example environment in which embodiments according to the present disclosure may be implemented;

[0013] Figure 2 A schematic flow chart of a method for rendering an interface according to an embodiment of the present disclosure is shown;

[0014] Figure 3 A schematic diagram of an overall architecture for rendering an interface according to an embodiment of the present disclosure is shown;

[0015] Figure 4 A schematic diagram showing a process for rendering an interface according to an embodiment of the present disclosure is shown;

[0016] Figure 5 A schematic diagram showing another process for rendering an interface according to an embodiment of the present disclosure is shown;

[0017] Figure 6 A schematic diagram showing a process for rendering a single-column layout of an interface according to an embodiment of the present disclosure is shown;

[0018] Figure 7 A schematic diagram showing another process for rendering a single-column layout of an interface according to an embodiment of the present disclosure is shown;

[0019] Figure 8 A schematic diagram showing a process of rendering a multi-column layout of a grid layout of an interface according to an embodiment of the present disclosure;

[0020] Fig. 9 A schematic diagram showing a process for rendering a waterfall layout of an interface according to an embodiment of the present disclosure is shown;

[0021] Fig.10 A schematic diagram showing another process for rendering a waterfall layout of an interface according to an embodiment of the present disclosure is shown;

[0022] Fig.11 A schematic diagram showing another process for rendering a waterfall layout of an interface according to an embodiment of the present disclosure is shown;

[0023] Fig.12 A schematic diagram showing a process for performing asynchronous layout according to an embodiment of the present disclosure is shown;

[0024] Fig.13 A schematic block diagram of a device for rendering an interface according to an embodiment of the present disclosure is shown; and

[0025] Fig.14 A schematic block diagram of an example device that can be used to implement embodiments of the present disclosure is shown.

[0026] Throughout the drawings, the same or similar reference numbers denote the same or similar elements. DETAILED DESCRIPTION

[0027] Embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although certain embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be construed as being limited to the embodiments described herein, which are instead provided for a more thorough and complete understanding of the present disclosure. It should be understood that the drawings and embodiments of the present disclosure are only for exemplary purposes and are not intended to limit the scope of protection of the present disclosure.

[0028] In the description of the embodiments of the present disclosure, the term "including" and similar terms should be understood as open inclusion, that is, "including but not limited to". The term "based on" should be understood as "based at least in part on". The term "one embodiment" or "the embodiment" should be understood as "at least one embodiment". The terms "first", "second", etc. may refer to different or the same objects, unless explicitly stated. Other explicit and implicit definitions may also be included below.

[0029] The basic principle and implementation of the present disclosure will be described with reference to the accompanying drawings. It should be understood that the exemplary embodiments given are only to enable those skilled in the art to better understand and implement the embodiments of the present disclosure, and are not intended to limit the scope of the present disclosure in any way.

[0030] Figure 1 A schematic diagram of an environment 100 in which various embodiments of the present disclosure can be implemented is shown. Figure 1 In the environment 100 shown, when a user opens an application through an electronic device 102, the application can load data from a database or server through a long list. The data can be static or dynamically loaded. The elements used to carry content according to the embodiments shown in the present disclosure can be referred to as subnodes, such as subnode 104. Subnode 104 can be used to display multimodal content such as icons, texts, pictures, videos, etc. The sizes of multiple subnodes can be the same or different. It should be understood that the electronic device 102 can also be set to a computing system, a single server, a distributed server, or a cloud-based server, etc., can also be set to a laptop computer, a user terminal, a mobile device, a computer, etc., and can also be set to a combination of the above devices.

[0031] These subnodes are components of each list item in the long list. According to some embodiments of the present disclosure, the subnodes may represent commodity items, and each subnode may contain data such as commodity pictures and commodity names. When the user opens the application, the long list may be filled with the content visible on the current screen of the electronic device 102 by loading and rendering the subnodes.

[0032] In some scenarios, rendering solutions for electronic devices usually rely on the application interface API provided by the system to implement the core rendering logic, which leads to cross-platform differences. Different platforms have inconsistent behaviors, such as different rendering mechanisms of various mobile operating systems. This difference requires developers to write a lot of adaptation logic, which increases the complexity of development and maintenance and affects the development experience.

[0033] In view of this, an embodiment of the present disclosure provides a method for rendering an interface, including receiving a rendering request from an operating system by an application. The rendering request is then processed by an element layer of the application. The element layer is implemented by the application and is separated from the operating system. For example, the element layer can be written in a language that is independent of the operating system platform. The element layer renders elements in the interface based on processing and data from an implementation layer of the application. For example, the element layer can adjust the layout and position of elements in the interface. The implementation layer is configured to manage the layout of the interface and pass data for the application to the element layer.

[0034] The method according to the embodiment of the present disclosure can unify the rendering logic on the system-independent application, which can more easily align the rendering effects of different platforms, avoid the differences between the platforms, reduce the rendering logic related to the operating system, and avoid relying on the operating system API. The method according to the embodiment of the present disclosure can also quickly adapt to new platforms, reduce access costs, and improve development efficiency and experience.

[0035] Next, we will refer to Figures 2 to 14 Exemplary embodiments of the present disclosure are described in detail.

[0036] Figure 2 FIG. 2 shows a schematic flow chart of a method 200 for rendering an interface according to an embodiment of the present disclosure. Figure 2 As shown, at block 210, a rendering request is received from the operating system. For example, the rendering request may be an operation of scrolling, clicking, sliding, long pressing, rotating, or dragging an interface, thereby requiring loading or moving one or more elements in the interface.

[0037] At block 220, the rendering request is processed by the element layer of the application. The element layer is implemented by the application and is separate from the operating system. For example, the application may be a news streaming program, an e-shopping program, or a chat program. The element layer in the application may be independent of the operating system platform of the device and adapt to any different platforms, and the processing may include analyzing the amount of content that needs to be loaded from the device background data source due to the operation.

[0038] At box 230, the element layer renders the elements in the interface based on the processing and data from the implementation layer of the application. In some embodiments, the element layer can determine the layout of the interface to be rendered based on the amount of operation requested by the rendering and the element data that can be loaded. The method according to the embodiment of the present disclosure can more easily align the rendering effects of different platforms by uniformly implementing the rendering logic, avoid differences between platforms and reduce operating system-related rendering logic. The method according to the embodiment of the present disclosure can also quickly adapt to new platforms, reduce access costs, and improve development efficiency and experience. Figures 3 to 14 An embodiment of a method for rendering an interface is described in detail.

[0039] Figure 3 200 is a schematic diagram of an overall architecture for rendering an interface according to an embodiment of the present disclosure. Figure 3 The process 300 shown is implemented.

[0040] like Figure 3 As shown, a platform layer 302 may be included, which may be a platform based on different architectures or systems, such as various mobile operating system platforms. The platform layer 302 may include a scroll container (ScrollContainer), which may be used to carry UI components and ensure that the content can scroll smoothly with user interaction.

[0041] In some embodiments, the scroll container of the platform layer 302 may further include a drawing module 304 , which may draw an interface presented to the user based on the UI rendering and layout information provided by the element layer 310 , thereby ensuring that the interface is displayed correctly.

[0042] According to some embodiments of the present disclosure, the scroll container of the platform layer 302 may include a gesture or animation module 306. The gesture or animation module 306 may manage and receive gesture interactions and animated scrolling from the user based on an application program interface (API) provided by the system. For example, in some embodiments, the gesture or animation module 306 may process a gesture from the user or an animated scroll initiated by the user, and distribute the scroll distance to the element layer 310.

[0043] In some embodiments, the scroll container of the platform layer 302 may further include a UI method module 308, which may implement method calls related to the UI, such as scrolling to a specified position, dynamically adjusting the layout, etc. In other embodiments, the UI method module 308 may also process logic related to the platform layer 302, such as implementing the effect of a node being suspended from the ceiling as it scrolls, adjusting the scroll inertia, etc.

[0044] In some embodiments, the method implemented according to the present disclosure may further include an element layer 310, which is a core logic layer and can carry all the capabilities of the element, and can interact with the layout engine and the data source, and can also dock with the scroll container of the platform layer 302. Specifically, in some embodiments, the content including components or sub-nodes such as buttons, text boxes, and pictures that the user sees in the platform layer 302 will exist in the form of element objects in the element layer 310 and will be managed by the element layer 310.

[0045] In some embodiments, the element layer 310 can be implemented inside the application and separated from the operating system in which the application resides. In some embodiments, for example, the element layer 310 can be written in C++, thereby implementing a long list of components whose capabilities are independent of the platform, reducing development and maintenance costs.

[0046] It should be understood that in the embodiments of the present disclosure, subnodes, nodes or elements may be the same or different and may be used interchangeably. For example, in some embodiments, they may all be used as UI components or visual UI entities in the same object representation interface.

[0047] In some embodiments, the element layer 310 may have a property module 314, which may be used to process all properties set by the front-end platform layer 302. For example, a button drawn in the platform layer 302 may correspond to an element object in the element layer 310, and the element object may include all properties of the button, such as the style of the button (e.g., blue), the position of the button (coordinates on the screen), etc.

[0048] In some embodiments, the element layer 310 may include an event module 316 for sending or responding to events from the platform layer. For example, in some embodiments, the event module 316 may respond to a user's scrolling operation event or respond to a user's click operation on a button. In some embodiments, the element layer 310 may also include a rendering module 318, which may determine how an element or node is rendered. For example, the rendering module 318 may determine information such as the size, position, spacing, visibility, etc. of the element to be rendered. In some embodiments, the rendering module 318 may convert the elements in the element layer 310 into UI components and ultimately display them on the screen.

[0049] According to an embodiment of the present disclosure, the element layer 310 may further include a recycling module 320, which may be used to implement recycling reuse of elements in a subnode or interface. In some embodiments, the recycling module 320 may monitor which elements in the interface have been moved outside the interface or are not visible on the screen. The recycling module 320 may then mark it as a recyclable state and put it into a recycling pool instead of destroying it immediately. The recycling module 320 redraws the previously appeared elements onto the interface by comparing and contrasting the new data with the content of the old elements (e.g., by difference calculation).

[0050] According to an embodiment of the present disclosure, an implementation layer 322 may also be included. In the implementation layer 322, a layout manager 336 may be provided for UI layout and layout calculation. In some embodiments, the layout manager 336 may determine the anchor logic to ensure that the user can accurately align the content when scrolling, making the scrolling experience smoother. The layout manager 336 may provide different layout modes, such as a linear layout 324, a grid layout 326, and a waterfall layout 328.

[0051] In some embodiments, linear layout 324 can be applied to applications such as vertically or horizontally arranged lists, such as chat software, news stream applications, etc. In linear layout 324, each node can be arranged in order, and only elements in the visible area are rendered when scrolling. In some embodiments, grid layout 326 can be applied to multi-column applications such as albums or photo albums. When rendering, it is necessary to ensure that the height of each column is consistent so that the grid content is aligned. In some embodiments, waterfall flow layout 328 can be applied to e-commerce product lists. The elements in the list can have irregular heights of content, the height of each column can be different, and each element can be filled in turn to the column with the shortest current height.

[0052] In some embodiments, the implementation layer 322 may further include an adapter 330. The adapter 330 may parse the data source 332 of the application, such as obtaining data from a server or local application storage, and adapting and updating the data when necessary according to the requirements of the UI element or operation. The adapter 330 may also be updated by consuming difference information data 334, for example, the adapter 330 may retrieve different new data from the data source by comparing the difference data.

[0053] Figure 4 FIG. 4 is a schematic diagram of a process 400 for rendering an interface according to an embodiment of the present disclosure. Figure 4 As shown, in some embodiments, when a user slides the platform layer scroll view 402 on the electronic device, the platform layer can send operation information about the scroll distance to the list 404 in the element layer. In some embodiments, the scroll distance represents the pixel value of the user's slide. In some embodiments, the platform layer scroll view 402 can also detect the user's scrolling direction and scrolling speed, etc.

[0054] In some embodiments, when the list 404 receives the operation information of the scroll distance, the list 404 can consume the difference data (difference information) 408 to determine the change of the old and new data through the difference data algorithm 414, such as comparing the previously displayed data (the displayed list items) with the new data to be displayed (such as the list items to be displayed after scrolling). In some embodiments, the list 404 can consume the difference data 408 to determine the newly added, deleted, and updated list items.

[0055] In some embodiments, the list 404 may also call the recycling and reuse module 410 in the element layer to determine whether there is an available reused item in the list item buffer pool 412 for the new list item to be displayed. If there is an available reused list item in the list item buffer pool 412, it may be directly taken from the list item buffer pool 412, thereby avoiding the creation of new duplicate list items. In some embodiments, if there is no matching reused item, the data source 406 may be requested to obtain new list item data.

[0056] In some embodiments, the recycling module 410 can also monitor which elements in the interface have been moved outside the interface or are not visible on the screen. The recycling module 410 can then mark them as recyclable and put them into the list item buffer pool 412.

[0057] In some embodiments, the updated data can also be re-layouted 416 by the rendering module in the element layer, such as updating the newly added, deleted, or moved elements or list items. In some embodiments, views can also be added or removed from the scroll view 402 of the platform layer through the list 404, thereby realizing partial update of the view, avoiding redrawing of the entire UI, improving rendering efficiency, and ensuring smooth scrolling of the application.

[0058] Figure 5 A schematic diagram of another process 500 for rendering an interface according to an embodiment of the present disclosure is shown. In some embodiments, at box 502, the list can parse the difference information and initiate layout. For example, according to some embodiments of the present disclosure, during the first screen rendering of the interface, the list of the element layer can parse the difference information from the data source to determine the newly added list items, deleted list items, moved list items, modified list items, etc. The list can then mark the list items that need to be updated, for example, mark them as dirty, and preset the width and height of the list items, so that the layout engine in the element layer initiates the layout.

[0059] At box 504, the list can obtain its own layout results. In some embodiments, for example, the layout engine can send a pre-layout list result with multiple list item placeholders to the list based on multiple list items in the list and the layout mode. At box 506, the list can initiate sub-node layout in combination with the difference information. In some embodiments, for example, the list can fill in newly added list items, moved list items, modified list items, etc. in the pre-layout list with multiple list item placeholders to determine the sub-node layout. In some embodiments, the sub-node layout can also be triggered based on the scroll event 520 sent by the platform layer component.

[0060] At block 508, it is determined whether the list area can continue to be filled. In some embodiments, the element layer can determine whether there is a blank area in the list area of ​​the current view. At block 510, when it is determined that there is a blank area in the list area, child node rendering can be initiated. For example, in some embodiments, the element layer can execute a rendering function to generate a complete element tree.

[0061] At block 512, child node parsing may be performed. For example, the constructed element tree may be parsed and a property set for each element may be set. For example, the parsed property set may include styles (such as color, font, margin, etc.), attributes (such as width, height, position), events (such as click, touch), and gestures (such as slide, zoom, etc.).

[0062] At block 514, child node layout may be performed. In some embodiments, in the layout phase, the entire element tree constructed before the layout may be laid out. For example, the specific layout of each element is determined based on the size of the element, the constraints of the parent element, and other attributes.

[0063] Then the layout or layout engine in the element layer may return the child node layout information 516 to the list, the list may be filled again, and it may be determined whether there is a blank area, and if so, the child node rendering may continue to be initiated.

[0064] At box 518, the platform layer generates UI information or layout information. In some embodiments, when the visible area is completely filled with child nodes, the view updates and layout updates generated during the rendering of the child nodes can be refreshed to the platform layer in the form of a UI operation queue, and the platform layer can complete the view rendering in turn. According to an embodiment of the present disclosure, operations 502 to 514 can be implemented at the element layer and implementation layer in the application, and operations 518 and 520 can be implemented at the platform layer of the operating system.

[0065] Figure 6 A schematic diagram of a process 600 for rendering a single-column layout of an interface according to an embodiment of the present disclosure is shown. According to an embodiment of the present disclosure, a node such as box 614 may represent a node that has not been loaded and has a default height. Each layout may start from an anchor position (anchoroffset) and fill the blank area of ​​the device screen as much as possible. Figure 6 The process shown is a double filling process, wherein the first filling process is blocks 602, 604, 606 and 608, and this filling is filling to the end (from top to bottom).

[0066] In some embodiments, the layout start anchor position can be determined by the anchor strategy at 602, thereby determining the available area of ​​the area to be filled. If there is an additional area, the additional area can be added here. At block 604, the areas can be filled one by one, and the size of the area consumed is calculated based on the size after layout. At blocks 606 to 608, the content offset caused by filling can be adjusted.

[0067] At step 610, the next filling (from bottom to top) can be performed with the area size obtained by subtracting the consumed area from the available area. The content offset caused by the filling can be adjusted at blocks 612 to 614. In some embodiments, the filling is terminated when the available area is consumed. If the number of data sources is insufficient, the offset can be adjusted to generate additional areas and the filling can be started again in the opposite direction.

[0068] Figure 7 FIG. 7 is a schematic diagram of another process 700 for rendering a single-column layout of an interface according to an embodiment of the present disclosure. Figure 7 The process shown is a three-time filling process, wherein blocks 702 to 704 are the first filling to the end (FillToEnd), blocks 706, 708, and 710 are the second filling to the start (FillToStart), and blocks 712 to 714 are the third filling to the end (FillToEnd).

[0069] The filling method is Figure 6 The same or similar, in some embodiments, the layout starting anchor position can be found through the anchor strategy, the available area of ​​the area to be filled can be determined, and if there is an extra area, the extra area is added here, and then it can be filled one by one, and the consumed area is calculated by the size after layout, and the next filling is performed by subtracting the consumed area from the available area. When the available area is consumed, the filling is terminated. If the number of data sources is insufficient, the offset is adjusted to generate an extra area, and the filling is started again in the opposite direction.

[0070] Figure 8 A schematic diagram of a multi-column layout process 800 for rendering a grid layout of an interface according to an embodiment of the present disclosure is shown. In some embodiments, when there are multiple columns, they can be laid out in a grid-aligned manner, with each row top-aligned. The multi-column (flow layout) layout strategy is an extension of a single column layout, and the filling of a single column can be changed to prioritize filling a row. For example, in some embodiments, the anchor position is determined to be element 2 through an anchor strategy, and then each row can be top-aligned based on element 2. The specific layout method can be referred to Figure 6 to Figure 7 Description.

[0071] Fig. 9 A schematic diagram of a process 900 for rendering a waterfall layout of an interface according to an embodiment of the present disclosure is shown. The waterfall layout can be represented as a jagged multi-column multi-element layout, which can continuously load element data blocks and append to the current tail as the page scroll bar scrolls down. The waterfall layout in some embodiments is compact, and each element is arranged on the current shortest column, so that there is no extra space for the element on the scrolling axis of the screen. Which column each element is arranged in is related to the previous element layout result.

[0072] In some embodiments, layout can be performed based on difference data. For example, at box 902, rendering of all child nodes in the visible area of ​​the list can be initiated according to the preset height of the child nodes in the list. In some embodiments, at boxes 904, 906, and 908, after obtaining the layout information of these nodes (for example, the actual real height of each node), the layout process can be re-executed. If there are still child nodes that have not been rendered in the visible area of ​​the list, the rendering of the child nodes in the visible area will continue to be initiated.

[0073] Fig.10A schematic diagram of another process 1000 for rendering a waterfall layout of an interface according to an embodiment of the present disclosure is shown. The process is to fill to the end (from top to bottom), in which the offset and the position of element 0 may not need to be adjusted, and only the end position of the item placeholder currently having an element needs to be calculated, and the next element is filled in the shortest column. For example, in some embodiments, the anchor position may be determined to be element 2 based on the anchor strategy, and then the next element is filled in the shortest column therein.

[0074] Fig.11 A schematic diagram of another process 1100 for rendering a waterfall layout of an interface according to an embodiment of the present disclosure is shown. The process may be a fill-to-start process (bottom-up), wherein box 1102 is the initial state. At box 1104, the offset may be adjusted, which may be achieved by finding an anchor point, that is, an item placeholder with an element and a minimum top, such as element 4 in box 1104. In some embodiments, the spacing between the top of the item placeholder and the current offset may be recorded as aligned, and the offset offset = anchor->newTop-alignment may be recalculated after each layout of the list item component is completed and all item placeholders are refreshed according to the waterfall layout.

[0075] In some embodiments, due to the change in the offset, the size between the top line of the item placeholder with the element on the current device display and the available area at this time is recalculated, such as shown in box 1106. In some embodiments, the next node to be laid out can also be determined based on the top line, and the process is repeated until all nodes on the current device display are filled, such as shown in box 1108.

[0076] Fig.12 A schematic diagram of a process 1200 for performing asynchronous layout according to an embodiment of the present disclosure is shown. In some scenarios, in an asynchronous layout or multi-threaded model, when a long list is rendering a child node, the actual width and height of the child node cannot be synchronously obtained, so it is impossible to determine whether the visible space is filled. Therefore, compared to a single layout of a list in a single-threaded model, an asynchronous layout or multi-threaded model can perform multiple layouts or layouts.

[0077] In some embodiments, during the first layout at box 1202, the element layer according to the embodiment of the present disclosure can trigger the rendering of all subnodes within the visible range of the current device display screen according to the preset width and height of the subnode (which can be set by the front end), and the layout can be the first layout. For example, in some embodiments, each subnode in the long list can correspond to an item placeholder (such as item placeholder 0, item placeholder 1, item placeholder 2) for saving its layout information.

[0078] In some embodiments, at block 1204, a unique operation ID may be generated for each call to render a child node, and the <operation ID, item placeholder> may be placed in a map, which may be stored in a data source 1206. In some embodiments, at block 1208, a component may also be bound to an operation ID.

[0079] In some embodiments, at box 1210, when the asynchronous rendering of a single node is completed, the component rendered this time can be returned to the long list node together with the operation ID. The long list can find the corresponding item placeholder from the mapping according to the operation ID to complete the binding of components and placeholders. In some embodiments, the long list can obtain the actual width and height of the component and re-trigger the long list layout, which can be the second layout. At step 1212, if the visible space is not filled, the rendering of more child nodes can continue to be triggered. At step 1214, if the visible space is filled, the rendering can be ended and the corresponding component can be recycled by the data source 1214.

[0080] Thus, the method implemented by the present disclosure can provide a solution for long list rendering in a cross-platform framework, which does not rely on any high-level platform layer components, and sinks the core capabilities of the long list to the C++ side. The platform layer can retain the basic scrolling container to carry the view and interactive functions. The element layer implemented according to the present disclosure can realize a long list component whose core capabilities are independent of the platform.

[0081] The solution implemented according to the present disclosure can not only ensure very good multi-terminal consistency, but also greatly reduce the development and maintenance costs of implementing long lists on new platforms. According to the method implemented in the present disclosure, the long list component can align the core capabilities such as rendering performance, scrolling interaction, and event system on multiple platforms, and the multi-terminal consistency is significantly improved, and the single-terminal attributes are greatly improved, which greatly improves the development experience and maintenance costs. The long list component can be smoothly implemented in multiple platforms at a very low cost.

[0082] Fig.13 FIG. 1 is a schematic block diagram of a device 1300 for rendering an interface according to an embodiment of the present disclosure. The device 1300 may be used to implement a reference Figures 1 to 12 Describe the method or steps.

[0083] like Fig.13As shown, the device 1300 includes: a receiving unit 1310, a processing unit 1320 and a rendering unit 1330. The receiving unit 1310 is configured to receive a rendering request from an operating system. The processing unit 1320 is configured to process the rendering request by an element layer of the application, wherein the element layer is implemented by the application and is separated from the operating system. The rendering unit 1330 is configured to render elements in the interface by the element layer based on the processing and data from the implementation layer of the application, wherein the implementation layer is configured to manage the layout of the interface and pass data for the application to the element layer.

[0084] In some embodiments, the receiving unit 1310 is configured to pass the rendering request from the platform layer of the operating system to the element layer of the application; and wherein the rendering request includes one or more of the following: scrolling operation, click operation, sliding operation, long press operation, rotation operation, and drag operation on the interface.

[0085] In some embodiments, the rendering unit 1330 is configured to add or remove one or more elements in the interface by the element layer in response to the rendering request.

[0086] In some embodiments, the rendering unit 1330 is configured for the element to determine whether there is a blank area in the interface; in response to the existence of the blank area in the interface, the element layer re-reads the data from the data source of the implementation layer to fill the blank area; and in response to the absence of the blank area in the interface, the element layer stops reading data from the data source.

[0087] In some embodiments, the rendering unit 1330 is configured to identify one or more elements in the interface; in response to the identified one or more elements being not visible in the interface due to the rendering request, the element layer recycles the identified one or more elements; the element layer compares new data from the data source with the data in the recycled one or more elements; and in response to the new data from the data source being the same as the data in the recycled one or more elements, the element layer draws the recycled one or more elements on the interface.

[0088] In some embodiments, the layout of the interface implementing layer management includes one or more of: a linear layout; a grid layout; and a waterfall layout.

[0089] In some embodiments, the rendering unit 1330 is configured to, in response to the layout being a single-column layout of the linear layout, determine the starting position of the element in the interface by the element layer and fill the blank area in the interface twice from top to bottom and from bottom to top; and in response to the blank area still existing in the interface, fill the blank area in the interface again by the element layer from top to bottom.

[0090] In some embodiments, the rendering unit 1330 is configured to, in response to the layout being the multi-column layout of the grid layout, preferentially fill each row in the interface with the element layer.

[0091] In some embodiments, the rendering unit 1330 is configured to, in response to the layout being the waterfall layout, determine by the element layer a first layout based on a preset height of the element; and in response to obtaining layout information of the element, determine by the element layer a second layout based on the layout information.

[0092] In some embodiments, the rendering unit 1330 is configured to, in response to the waterfall layout being filled from top to bottom, determine by the element layer the end position of the item placeholder having the element and fill the next element in a shorter column; in response to the waterfall layout being filled from bottom to top, determine by the element layer the offset after each layout and adjust the layout based on the offset.

[0093] In some embodiments, the interface is a long list layout, the elements in the interface are list items in the long list, and there is a mapping relationship between the list items and the operations in the rendering request.

[0094] It should be noted that the reference Figures 1 to 12 Further actions or steps shown can be performed by Fig.13 For example, the device 1300 may include more modules or units to implement the actions or steps described above, or Fig.13 Some of the units or modules shown may be further configured to implement the actions or steps described above, which will not be repeated here.

[0095] Fig.14A schematic block diagram of an example device 1400 that can be used to implement an embodiment of the present disclosure is shown. As shown, the device 1400 includes a computing unit (CPU) 1401, which can perform various appropriate actions and processes according to computer program instructions stored in a read-only memory (ROM) 1402 or loaded from a storage unit 1406 into a random access memory (RAM) 1403. In the RAM 1403, various programs and data required for the operation of the device 1400 can also be stored. The computing unit 1401, the ROM 1402, and the RAM 1403 are connected to each other via a bus 1404. An input / output (I / O) interface 1405 is also connected to the bus 1404.

[0096] A number of components in the device 1400 are connected to the I / O interface 1405, including: an input unit 1406, such as a keyboard, a mouse, etc.; an output unit 1407, such as various types of displays, speakers, etc.; a storage unit 1408, such as a disk, an optical disk, etc.; and a communication unit 1409, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 1409 allows the device 1400 to exchange information / data with other devices through a computer network such as the Internet and / or various telecommunication networks.

[0097] The computing unit 1401 may be a variety of general and / or special processing components with processing and computing capabilities. Some examples of the computing unit 1401 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, digital signal processors (DSPs), and any appropriate processors, controllers, microcontrollers, etc. The computing unit 1401 performs the various methods and processes described above, such as method 200. For example, in some embodiments, the method 200 may be implemented as a computer software program, which is tangibly contained in a machine-readable medium, such as a storage unit 1408. In some embodiments, part or all of the computer program may be loaded and / or installed on the device 1400 via the ROM 1402 and / or the communication unit 1409. When the computer program is loaded into the RAM 1403 and executed by the computing unit 1401, one or more steps of the method 200 described above may be performed. Alternatively, in other embodiments, the computing unit 1401 may be configured to execute the method 200 in any other appropriate manner (eg, by means of firmware).

[0098] In some embodiments, the methods and processes described above may be implemented as a computer program product. The computer program product may include a computer-readable storage medium carrying computer-readable program instructions for executing various aspects of the present disclosure.

[0099] A computer-readable storage medium may be a tangible device that can hold and store instructions used by an instruction execution device. A computer-readable storage medium may be, for example, but not limited to, an electrical storage device, a magnetic storage device, an optical storage device, an electromagnetic storage device, a semiconductor storage device, or any suitable combination of the foregoing. More specific examples of computer-readable storage media (a non-exhaustive list) include: a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), a static random access memory (SRAM), a portable compact disk read-only memory (CD-ROM), a digital versatile disk (DVD), a memory stick, a floppy disk, a mechanical encoding device, such as a punch card or a raised structure in a groove on which instructions are stored, and any suitable combination of the foregoing. As used herein, a computer-readable storage medium is not to be interpreted as a transient signal per se, such as a radio wave or other freely propagating electromagnetic wave, an electromagnetic wave propagating through a waveguide or other transmission medium (e.g., a light pulse through a fiber optic cable), or an electrical signal transmitted through a wire.

[0100] The computer-readable program instructions described herein can be downloaded from a computer-readable storage medium to each computing / processing device, or downloaded to an external computer or external storage device via a network, such as the Internet, a local area network, a wide area network, and / or a wireless network. The network can include copper transmission cables, optical fiber transmissions, wireless transmissions, routers, firewalls, switches, gateway computers, and / or edge servers. The network adapter card or network interface in each computing / processing device receives the computer-readable program instructions from the network and forwards the computer-readable program instructions for storage in the computer-readable storage medium in each computing / processing device.

[0101] The computer program instructions for performing the disclosed operation may be assembler instructions, instruction set architecture (ISA) instructions, machine instructions, machine-related instructions, microcode, firmware instructions, state setting data, or source code or object code written in any combination of one or more programming languages, including object-oriented programming languages, and conventional procedural programming languages. Computer-readable program instructions may be executed completely on a user's computer, partially on a user's computer, executed as an independent software package, partially on a user's computer, partially on a remote computer, or completely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer via any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., utilizing an Internet service provider to connect via the Internet). In certain embodiments, by utilizing the state information of a computer-readable program instruction to customize an electronic circuit, such as a programmable logic circuit, a field programmable gate array (FPGA), or a programmable logic array (PLA), the electronic circuit may execute a computer-readable program instruction, thereby realizing various aspects of the present disclosure.

[0102] These computer-readable program instructions can be provided to a processing unit of a general-purpose computer, a special-purpose computer, or other programmable data processing device, thereby producing a machine, so that when these instructions are executed by the processing unit of the computer or other programmable data processing device, a device that implements the functions / actions specified in one or more boxes in the flowchart and / or block diagram is generated. These computer-readable program instructions can also be stored in a computer-readable storage medium, and these instructions cause the computer, programmable data processing device, and / or other equipment to work in a specific manner, so that the computer-readable medium storing the instructions includes a manufactured product, which includes instructions for implementing various aspects of the functions / actions specified in one or more boxes in the flowchart and / or block diagram.

[0103] Computer-readable program instructions may also be loaded onto a computer, other programmable data processing apparatus, or other device so that a series of operating steps are performed on the computer, other programmable data processing apparatus, or other device to produce a computer-implemented process, thereby causing the instructions executed on the computer, other programmable data processing apparatus, or other device to implement the functions / actions specified in one or more boxes in the flowchart and / or block diagram.

[0104] The flow chart and block diagram in the accompanying drawings show the possible architecture, function and operation of the equipment, method and computer program product according to multiple embodiments of the present disclosure. In this regard, each square box in the flow chart or block diagram can represent a part of a module, program segment or instruction, and a part of the module, program segment or instruction includes one or more executable instructions for realizing the specified logical function. In some alternative implementations, the functions marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two continuous square boxes can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs the specified function or action, or can be implemented with a combination of special hardware and computer instructions.

[0105] The embodiments of the present disclosure have been described above, and the above description is exemplary, not exhaustive, and is not limited to the disclosed embodiments. Many modifications and variations will be apparent to those of ordinary skill in the art without departing from the scope and spirit of the described embodiments. The choice of terms used herein is intended to best explain the principles of the embodiments, practical applications, or technical improvements to the technology in the market, or to enable other persons of ordinary skill in the art to understand the embodiments disclosed herein.

Claims

1. A method for rendering an interface, comprising: Receive rendering requests from the operating system; Processing the rendering request by an element layer of the application, wherein the element layer is implemented by the application and is separate from the operating system; as well as Elements in the interface are rendered by the element layer based on the processing and data from an implementation layer of the application, wherein the implementation layer is configured to manage a layout of the interface and pass data for the application to the element layer.

2. The method according to claim 1, wherein receiving a rendering request from the operating system comprises: The rendering request is transmitted from the platform layer of the operating system to the element layer of the application; and The rendering request includes one or more of the following: scrolling operation, clicking operation, sliding operation, long pressing operation, rotating operation, and dragging operation on the interface.

3. The method according to claim 1, wherein rendering, by the element layer, the elements in the interface based on the processing and the data from the implementation layer of the application comprises: In response to the rendering request, the element layer adds or removes one or more elements in the interface.

4. The method according to claim 1, wherein rendering the element in the interface by the element layer based on the processing and the data from the implementation layer of the application further comprises: The element layer determines whether there is a blank area in the interface; In response to the blank area existing in the interface, the element layer re-reads data from the data source of the implementation layer to fill the blank area; as well as In response to the absence of the blank area in the interface, the element layer stops reading data from the data source.

5. The method according to claim 1, wherein rendering the element in the interface by the element layer based on the processing and the data from the implementation layer of the application further comprises: identifying one or more elements in the interface; In response to the identified one or more elements being not visible in the interface due to the rendering request, recycling the identified one or more elements by the element layer; comparing, by the element layer, new data from a data source with data in the retrieved one or more elements; as well as In response to the new data from the data source being the same as the data in the recycled one or more elements, the element layer draws the recycled one or more elements on the interface.

6. The method of claim 1, wherein the layout of the interface managed by the implementation layer comprises one or more of the following: Linear layout; Grid layout; and Waterfall layout.

7. The method according to claim 6, wherein rendering, by the element layer, the elements in the interface based on the processing and data from the implementation layer of the application comprises: In response to the layout being a single-column layout of the linear layout, determining a starting position of the element in the interface by the element layer and filling a blank area in the interface twice in a top-down and bottom-up manner; as well as In response to the blank area still existing in the interface, the blank area in the interface is filled again by the element layer in a top-down manner.

8. The method according to claim 6, wherein rendering the element in the interface by the element layer based on the processing and the data from the implementation layer of the application further comprises: In response to the layout being a multi-column layout of the grid layout, each row in the interface is preferentially filled with the element layer.

9. The method according to claim 6, wherein rendering the element in the interface by the element layer based on the processing and the data from the implementation layer of the application further comprises: In response to the layout being the waterfall layout, determining, by the element layer, a first layout based on a preset height of the element; as well as In response to acquiring the layout information of the element, the element layer determines a second layout based on the layout information.

10. The method according to claim 9, wherein rendering the element in the interface by the element layer based on the processing and the data from the implementation layer of the application further comprises: In response to the waterfall layout being filled from top to bottom, determining the end position of the item placeholder having the element by the element layer and filling the next element in a shorter column; In response to the waterfall layout being filled from bottom to top, the element layer determines an offset after each layout and adjusts the layout based on the offset.

11. The method according to claim 1, wherein the interface is a long list layout, the elements in the interface are list items in the long list, and there is a mapping relationship between the list items and the operations in the rendering request.

12. A device for rendering an interface, comprising: A receiving unit, configured to receive a rendering request from an operating system; a processing unit configured to process the rendering request by an element layer of an application, wherein the element layer is implemented by the application and is separate from the operating system; as well as A rendering unit is configured to render elements in the interface by the element layer based on the processing and data from the implementation layer of the application, wherein the implementation layer is configured to manage the layout of the interface and pass data for the application to the element layer.

13. A computing device comprising: at least one processing unit; At least one memory, the at least one memory being coupled to the at least one processing unit and storing instructions for execution by the at least one processing unit, the instructions, when executed by the at least one processing unit, causing the computing device to perform the method as claimed in any one of claims 1 to 11.

14. A computer storage medium comprising machine executable instructions which, when executed by a device, cause the device to perform the method of any one of claims 1 to 11.

15. A computer program product comprising machine executable instructions which, when executed by a device, cause the device to perform the method of any one of claims 1 to 11.

Images