Methods, apparatus, devices, and storage media for element rendering

Abstract

Embodiments of this disclosure provide a method, apparatus, device, and storage medium for element rendering. The method includes: in response to a first element of a plurality of elements being moved into an interface, retrieving a data structured object and a view associated with the first element from a storage area associated with the first element; updating a view based on a difference between a view structured object associated with the first element and a view structured object associated with the view; and rendering the first element based on the data structured object and the updated view in response to the first element being moved into the interface. In this manner, memory usage can be significantly reduced, rendering performance improved, and theoretically infinite list scrolling supported.

Description

Technical Field

[0001] The exemplary embodiments disclosed herein generally relate to the field of computer technology, and more specifically, to methods, apparatus, devices, and storage media for element rendering. Background Technology

[0002] Long lists are list components containing a large number of data items that cannot be fully rendered in one go on the interface. They are commonly found in scenarios that require displaying massive amounts of content, such as news feeds, message history, and multimedia resource lists. By preloading, subsequent list data can be requested, loaded, and rendered in advance during the user's browsing process, achieving a smooth and seamless loading experience. This effectively avoids lag and loading waits, significantly improving browsing smoothness and overall interaction quality. Summary of the Invention

[0003] In a first aspect of this disclosure, a method for rendering an element is provided. The method includes: in response to a first element of a plurality of elements being moved into an interface, retrieving a data structured object and a view associated with the first element from a storage area associated with the first element; updating a view based on a difference between a view structured object associated with the first element and a view structured object associated with the view; and rendering the first element based on the data structured object and the updated view in response to the first element being moved into the interface.

[0004] In a second aspect of this disclosure, an apparatus for element rendering is provided. The apparatus includes: an acquisition module configured to, in response to a first element of a plurality of elements being moved into an interface, acquire a data structured object associated with the first element and a view from a storage area associated with the first element; an update module configured to update a view based on a difference between a view structured object associated with the first element and a view structured object associated with the view; and a rendering module configured to, in response to the first element being moved into the interface, render the first element based on the data structured object and the updated view.

[0005] In a third aspect of this disclosure, an electronic device is provided. The electronic device includes at least one processing unit; and at least one memory coupled to the at least one processing unit and storing instructions for execution by the at least one processing unit, the instructions causing the electronic device to perform the method of the first aspect of this disclosure when executed by the at least one processing unit.

[0006] In a fourth aspect of this disclosure, a computer-readable storage medium is provided. This computer-readable storage medium stores a computer program that can be executed by a processor to perform the method according to a first aspect of this disclosure.

[0007] In a fifth aspect of this disclosure, a computer program product is provided. The computer program product includes computer-executable instructions, wherein the computer-executable instructions, when executed by a processor, implement the method according to a first aspect of this disclosure.

[0008] It should be understood that the content described in this summary section is not intended to limit the key or essential features of the embodiments of this disclosure, nor is it intended to restrict the scope of this disclosure. Other features of this disclosure will become readily apparent from the following description. Attached Figure Description

[0009] The above and other features, advantages, and aspects of various implementations of this disclosure will become more apparent in the following detailed description, taken in conjunction with the accompanying drawings. In the drawings, the same or similar reference numerals denote the same or similar elements, wherein: Figure 1 A schematic diagram of an example environment in which embodiments of the present disclosure can be implemented is shown; Figure 2 A schematic diagram illustrating the reuse process of list groups in a long list according to some embodiments of the present disclosure is shown; Figure 3 A schematic diagram illustrating the reuse process of list items in a long list according to some embodiments of the present disclosure is shown; Figure 4 A schematic diagram illustrating the reuse process of views according to some embodiments of the present disclosure is shown; Figure 5 A flowchart is shown illustrating a process for determining differences between new and old data according to some embodiments of the present disclosure; Figure 6 A flowchart of a process for element rendering according to some embodiments of the present disclosure is shown; Figure 7 A block diagram of an apparatus for element rendering according to some embodiments of the present disclosure is shown; and Figure 8 A block diagram of an electronic device in which one or more embodiments of the present disclosure may be implemented is shown. Detailed Implementation

[0010] Embodiments of this disclosure will now be described in more detail with reference to the accompanying drawings. While some embodiments of this disclosure are shown in the drawings, it should be understood that this disclosure can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of this disclosure. It should be understood that the accompanying drawings and embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of protection of this disclosure.

[0011] It should be noted that the acquisition, storage, and application of user personal information involved in the technical solution disclosed herein comply with the provisions of relevant laws and regulations and do not violate public order and good morals.

[0012] In the description of embodiments of this disclosure, the term "comprising" and similar terms should be understood as open-ended inclusion, i.e., "including but not limited to". The term "based on" should be understood as "at least partially based on". The term "one embodiment" or "the embodiment" should be understood as "at least one embodiment". The term "some embodiments" should be understood as "at least some embodiments". Other explicit and implicit definitions may also be included below.

[0013] The following description will focus on exemplary embodiments of the present disclosure with reference to the accompanying drawings.

[0014] Figure 1 A schematic diagram of an example environment 100 in which embodiments of the present disclosure can be implemented is shown. For example... Figure 1 As shown, example environment 100 may include electronic device 110.

[0015] In this example environment 100, electronic device 110 can run an application 120 that supports long list display. The operating system of electronic device 110 can be HarmonyOS, Android, iOS, or any suitable type of operating system. Application 120 can be any suitable type of application that supports long list display, examples of which include, but are not limited to, client applications, web applications, or other suitable applications. User 140 can interact with application 120 via electronic device 110 and / or its attached devices.

[0016] exist Figure 1 In environment 100, application 120 is configured with a long list component (also known as a "reusable list component"). If application 120 is active, the long list component inside application 120 can call the relevant application programming interface (API) in the operating system of electronic device 110 to render business data.

[0017] In some embodiments, electronic device 110 communicates with server 130 to provide services to application 120. Electronic device 110 can be any type of mobile terminal, fixed terminal, or portable terminal, including mobile phones, desktop computers, laptop computers, notebook computers, netbook computers, tablet computers, media computers, multimedia tablets, handheld computers, portable gaming terminals, VR / AR devices, personal communication system (PCS) devices, personal navigation devices, personal digital assistants (PDAs), audio / video players, digital cameras / camcorders, positioning devices, television receivers, radio receivers, e-book devices, gaming devices, or any combination thereof, including accessories and peripherals of these devices or any combination thereof. In some embodiments, electronic device 110 can also support any type of user-facing interface (such as "wearable" circuitry).

[0018] Server 130 can be a standalone physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, content delivery networks, and big data and artificial intelligence platforms. Server 130 may include, for example, computing systems / servers such as mainframes, edge computing nodes, computing devices in a cloud environment, etc. Server 130 can provide backend services for applications 120 in electronic devices 110.

[0019] A communication connection can be established between server 130 and electronic device 110. This communication connection can be established via wired or wireless means. The communication connection may include, but is not limited to, Bluetooth, mobile network, Universal Serial Bus (USB), and Wireless Fidelity (WiFi) connections; the embodiments of this disclosure are not limited in this respect. In the embodiments of this disclosure, server 130 and electronic device 110 can achieve signaling interaction through the communication connection between them.

[0020] It should be understood that the structure and function of environment 100 are described for illustrative purposes only and do not imply any limitation on the scope of this disclosure.

[0021] As briefly mentioned above, long lists implemented using preloading can request, load, and render subsequent list data in advance during user browsing, achieving a smooth and seamless loading experience, effectively avoiding lag and loading waits, and significantly improving browsing smoothness and overall interaction quality. However, preloading subsequent content will continuously consume device memory resources, and due to limitations such as memory capacity and rendering performance, the length that long lists can support cannot be infinitely expanded.

[0022] To at least partially address the aforementioned problems and other potential issues in conventional solutions, this disclosure provides a scheme for element rendering. According to various embodiments of this disclosure, if a first element out of a plurality of elements is to be moved into the interface, a data structured object and a view associated with the first element are retrieved from the storage area associated with the first element. Further, the view is updated based on the difference between the view structured object associated with the first element and the view structured object associated with the view. If the first element is moved into the interface, the first element is rendered based on the data structured object and the updated view. In this manner, memory usage can be significantly reduced, rendering performance improved, and theoretically infinite list scrolling supported.

[0023] The following description will continue with reference to the accompanying drawings, which will provide some exemplary embodiments of this disclosure.

[0024] The embodiments of this disclosure will be described below with reference to examples of the HarmonyOS operating system. It is understood, of course, that the embodiments of this disclosure are not limited to the HarmonyOS operating system and can be implemented in any other suitable operating system. For ease of description, the following will combine... Figure 1 The present disclosure provides a detailed description of the scheme for element rendering provided by the embodiments.

[0025] Application 120 integrates a reusable list component (RomaRecycleList). If application 120 is active, electronic device 110 can enable the reusable list component in application 120 to call relevant APIs in HarmonyOS of electronic device 110 to render business data, thereby implementing the long list function. For example, business data can be presented as a long list in a specified area of ​​interface 150, or it can be presented as a long list throughout the entire interface 150; the embodiments disclosed herein are not limited to this.

[0026] In some embodiments, the aforementioned reusable list component can be implemented using official HarmonyOS basic components. For example, a list component (List). Specifically, the reusable list component can be implemented using the Native Application Programming Interface (NAPI) in HarmonyOS, based on list nodes (ARKUI_NODE_LIST) and waterfall nodes (ARKUI_NODE_WATER_FLOW). Long lists implemented using the reusable list component can include single-column lists and multi-column lists, where single-column lists can use list nodes as the basic list container, and multi-column lists can use waterfall nodes as the basic list container. In some embodiments, the reusability of the reusable list component can be implemented using ArkUI node adapter handles (ArkUI_NodeAdapterHandle) and a second-level cache. This will be discussed in detail below.

[0027] In some embodiments, a long list may include at least one list group and / or at least one list item. Each list group or each list item is associated with a view. The view indicates the area where the list group or list item resides, and may include visual elements and / or background elements for presenting information about the list group or list item. Each list group or each list item is associated with a data structured object (e.g., a JSON object), and each view is associated with a view structured object (e.g., a DOM object). In other words, each list group or each list item is associated with a data structured object and a view structured object. In some embodiments, the data structured object and view structured object associated with a particular list group or list item may be determined based on the business data corresponding to that list group or list item.

[0028] As discussed above, the reusability of list components can be achieved through a two-level cache. For example, a first-level cache can be used to store data structured objects related to list groups and / or list items, while a second-level cache can be used to store view structured objects related to the view.

[0029] For information on the reusability of list groups, see [link / reference]. Figure 2 , Figure 2 A reuse process 200 for list groups in a long list according to some embodiments of the present disclosure is illustrated. In response to a detected downward scrolling operation 220 in the interface 150, the electronic device 110 can scroll upwards the list groups 201, 202, 203, 204 presented in the interface 150. After scrolling, as... Figure 2As shown, interface 150 displays complete list groups 202, 203, and 204, as well as a portion of list group 201 and a portion of list group 205. At this time, electronic device 110 can determine that list group 201 will be removed from interface 150, and list groups 205 and 206 will be moved into the interface. It should be understood that... Figure 2 Although the diagram shows two list groups (list group 205 and list group 206) to be moved into interface 150, this is merely illustrative and not intended to be a limitation. In a real-world scenario, electronic device 110 may determine that more or fewer list groups will be moved into interface 150.

[0030] Interface 150 can display various types of list groups. Each type of list group is associated with a cache pool, which is configured to store the structured data objects associated with the corresponding type of list group. See also... Figure 2 The diagram illustrates two types of list groups, each represented by a different color: list groups 201 and 204 of type 1, and list groups 202, 203, and 205 of type 2. Cache pool 231 can store data structured objects associated with list groups of type 1, and cache pool 232 can store data structured objects associated with list groups of type 2.

[0031] See also Figure 2 In response to the list group 205 being moved into the interface, the electronic device 110 can retrieve the data structured object 242 associated with the list group 205 from the cache pool 232. In some embodiments, the electronic device 110 can determine the data structured object associated with the list group 205 based on a set of data associated with the list group (e.g., complete business data or a portion of business data corresponding to the list group) and a piece of data associated with the list group 205.

[0032] Specifically, the electronic device 110 can determine the position of a data item in the set of data based on a set of data associated with multiple list groups and a data item associated with list group 205, and retrieve the data structured object 242 associated with list group 205 from the cache pool 232 associated with list group 205 according to the position.

[0033] In response to list group 201 being removed from interface 150, electronic device 110 can store the data structured object 241 associated with list group 201 in cache pool 231. When storing data structured objects in cache pool, if cache pool reaches its storage limit, the first data structured object stored can be removed.

[0034] See also Figure 2When electronic device 110 responds to list group 206 being moved to interface 150, if there is no data structured object associated with list group 206 in cache pool 233 associated with list group 206, it can create a data structured object for list group 206 based on the business data corresponding to list group 206.

[0035] For information on the reusability of list items, see [link to relevant documentation]. Figure 3 , Figure 3 A reuse process 300 for list items in a long list according to some embodiments of the present disclosure is illustrated. Figure 3 The diagram shows list items 301, 302, 303, 304, 305, and 306 contained in a list group. It should be understood that the list items shown are merely illustrative and not intended to be limiting. In real-world scenarios, a list group may contain more or fewer list items.

[0036] like Figure 3 As shown, in response to list item 305 being moved into interface 150, electronic device 110 can retrieve the data structured object 342 associated with list item 305 from cache pool 332 associated with list item 305. When retrieving the data structured object, electronic device 110 can determine the data structured object associated with list item 305 based on a set of data associated with list item (e.g., complete business data corresponding to list item, or business data corresponding to list group to which list item belongs) and a piece of data associated with list item 305.

[0037] Specifically, electronic device 110 can determine the position of a single data item within the set of data based on a set of data associated with multiple list items and a single data item associated with list item 305. Based on this position, it can retrieve the data structured object 342 associated with list item 305 from the cache pool 332 associated with list item 305. In response to list item 301 being removed from the interface 150, electronic device 110 can store the data structured object 341 associated with list item 301 in the cache pool 331.

[0038] See also Figure 3 When electronic device 110 responds to list item 306 being moved to interface 150, if there is no data structured object associated with list item 306 in cache pool 333 associated with list item 306, a data structured object can be created for list item 306 based on the business data corresponding to list item 306.

[0039] For information on view reusability, see [link to relevant documentation]. Figure 4 , Figure 4A view reuse process 400 according to some embodiments of the present disclosure is illustrated. In embodiments of the present disclosure, list items and list groups may each be associated with a cache pool 420 (only one cache pool is shown as an example in the figure), that is, the cache pool associated with the list group may store the view associated with the list group, and the cache pool associated with the list item may store the view associated with the list item.

[0040] by Figure 3 For example, see list item 301 in the example. Figure 3 and Figure 4 In response to list item 301 being removed from interface 150, electronic device 110 may store the view associated with list item 301 (e.g., "old view") in cache pool 420.

[0041] In some embodiments, electronic device 110 may retrieve the view associated with an element from a cache pool associated with that element, based on the type of the element to be moved into interface 150 (e.g., list item or list group). After retrieving the view, electronic device 110 also needs to determine whether to update the retrieved view. Specifically, electronic device 110 may determine whether there is a difference between the view structured object associated with the element moved into interface 150 and the view structured object associated with the view. If a difference exists, the view is updated. If no difference exists, the view is not updated.

[0042] by Figure 3 For example, see list item 305 in the example. Figure 3 and Figure 4 , Figure 4 The "old view" shown is the view associated with list item 305 obtained by electronic device 110, and the "new view" is the updated view. Specifically, after obtaining the "old view," electronic device 110 can determine the view structured object (e.g., DOM object) associated with the "old view." For example, the "old view" includes container tags 301, 305, and 303, and text 304. By comparing the view structured object of the "old view" with the view structured object of the list item 305 to be moved into interface 150, it can be determined that the view structured object of the list item 305 to be moved into interface 150 (i.e., the "new view"), compared to the "old view," lacks container tag 303 and adds text 305 and image 306. Thus, it can be updated based on the "old view." It should be understood that any suitable algorithm can be used to determine the differences between the old and new views, and the embodiments of this disclosure are not limited thereto. In response to list item 305 being moved into interface 150, electronic device 110 can render list item 305 in interface 150 based on the data structured object associated with list item 305 and the updated view.

[0043] Continue with Figure 3 Taking list item 305 as an example, electronic device 110 can associate an identifier with the rendered list item 305 in response to the completion of rendering of list item 305. For example, an identifier can be associated with list item 305 when the view of list item 305 is created or updated.

[0044] See Figure 3 and Figure 4 If the rendered list item 301 is removed from the interface 150, the data structured object, view, and identifier associated with list item 301 are stored in the corresponding cache pool. For example, the data structured object associated with list item 301 is stored in cache pool 331, the view and identifier associated with list item 301 are stored in cache pool 420, and the view and identifier associated with list item 305 are stored in association in cache pool 420.

[0045] See also Figure 3 and Figure 4 The electronic device 110 can determine the view associated with list item 305 from the cache pool 420 associated with list item 305. Then, the electronic device 110 determines the call sequence for the view associated with list item 305 based on the identifier associated with that view. If the current call to the view associated with list item 305 is the latest call in that call sequence, the view associated with list item 305 is retrieved. If the current call to the view associated with list item 305 is not the latest call in that call sequence, the operation of retrieving the view associated with list item 305 is not performed.

[0046] In some implementations, the following two components can be added to the ListContext instance class. These two components can be configured with APIs for electronic devices 110 to call: CreateItem(eid,position,UIResultCallback); UpdateItem(eid,position,UIResultCallback); The CreateItem(eid, position, UIResultCallback) method is used to create the view associated with the list item, and the UpdateItem(eid, position, UIResultCallback) method is used to update the view associated with the list item.

[0047] Additionally, a RomaCellSlotModal component has been added to handle asynchronous views of list items. Asynchronous views indicate that the views associated with list items are stored at different data sources. When using the RomaCellSlotModal component, it returns a reference view of the outermost layer for each list item by default; the actual view of the list item is then placed within the reference view after rendering. ListItemNode only needs to call applyUpdateInstance, which handles the creation and updating of asynchronous list items. The first call creates the item, and subsequent calls update it. RomaCellSlotModal internally calls CreateItem and UpdateItem. During RomaCellSlotModal initialization, an identifier, namely eid, is generated according to an algorithm. Each time CreateItem or UpdateItem is called, the eid and position are passed in. ListContext manages the eid uniformly. When CreateItem or UpdateItem is called to initiate an asynchronous task, the eid and its UICallback reference are recorded. After the asynchronous task is processed, the UICallback reference is found through the eid, triggering the UICallback() callback to RomaCellSlotModal, completing the binding between the outer reference and the asynchronous view, thereby ensuring the correctness of the view.

[0048] In the embodiments of this disclosure, the long list can be divided into grouped lists and non-grouped lists according to the organization of business data in application 120. Since the native application programming interface in the HarmonyOS operating system does not support switching between grouped lists and non-grouped lists, a default type group can be added when implementing the reusable list component. This default type group can be used to hold business data from the non-grouped list. When implementing the grouped list, the business data can be divided into multiple groups according to its organization, and the type of each group can be the type required by the business data. This allows for switching between grouped lists and non-grouped lists.

[0049] For example, when a new set of data is received, the electronic device 110 can determine the difference between this set of data and the set of data associated with the aforementioned list item and / or list group, and update the set of data associated with the list item and / or list group based on the difference, thereby realizing the switching between grouped lists and non-grouped lists, updates within grouped lists, or updates to the content of non-grouped lists.

[0050] In some embodiments, updating a set of data associated with a list item and / or a list group may include at least one of the following: data indicating the number of element types of multiple elements in the list, data indicating the number of elements of at least one type among multiple types of elements in the list, or data indicating the type of elements of at least one type among multiple types of elements in the list.

[0051] Furthermore, for ease of calculation, when determining the difference between the two sets of data, the two sets of data can be converted into one-dimensional data respectively, and then the difference between the two converted sets of data can be determined. In some embodiments, the electronic device 110 can render elements associated with the updated first set of data in the interface 150.

[0052] The following example illustrates how to determine the differences between two sets of data and how to update the data. For ease of description, the set of data newly acquired by electronic device 110 can be referred to as "new data," and the set of data associated with list items and / or list groups can be referred to as "old data." For example, updating old data may include the following update items: change of list group type, change of the number of list items in the group list, change of the type of list items in the list group, change of the business data associated with the list items in the list group, and change of the number of list groups.

[0053] Figure 5 A process 500 for determining the difference between new and old data according to some embodiments of this disclosure is illustrated.

[0054] like Figure 5 As shown, in box 510, electronic device 110 calls the list API. In box 520, electronic device 110 determines the difference between the new data and the old data. In box 530, electronic device 110 updates the old data based on this difference.

[0055] In some embodiments, to facilitate the determination of differences between new and old data, electronic device 110 may convert the new data and old data into one-dimensional data respectively, and then determine the differences between the converted new data and old data. In some embodiments, electronic device 110 may also render elements (e.g., list items, list groups, views, etc.) associated with the updated old data in interface 150.

[0056] Since the HarmonyOS operating system's API cannot handle various data changes, a predefined difference algorithm can be used to determine the differences between old and new data. As an example, the predefined difference algorithm may include the following APIs: refreshData(GroupList), insertData(GroupList, startIndex, length), removeData(GroupList, startIndex, length), and updateData(GroupList, startIndex, length). refreshData(GroupList) represents re-fetching or loading the group list; insertData(GroupList, startIndex, length) represents inserting a certain number (length) of new data starting from the specified starting position (startIndex) in the group list; removeData(GroupList, startIndex, length) represents deleting a certain number (length) of data starting from the specified starting position (startIndex) in the group list; and updateData(GroupList, startIndex, length) represents updating a certain number (length) of data items in the group list starting from the specified starting position (startIndex). It should be understood that the APIs described above are merely illustrative and are not intended to impose any limitations.

[0057] Taking the call to updateData(GroupList, startIndex, length) by electronic device 110 as an example, for the data shown in Representation 1 below: Table 1

[0058] First, electronic device 110 performs a downscaling process on the data in Table 1, converting it into one-dimensional data. The converted data is shown in Table 2 below: Table 2

[0059] After data downscaling, if the data is grouped, it will include "groupType" and "groupDate" fields. For the data shown in Table 2, a group of data is defined as the data starting from the first occurrence of the "groupType" and "groupDate" fields until the next occurrence. For example, as shown in Table 2 above, "Data 1-1" and "Data 1-2" are one group, and "Data 2-1" and "Data 2-2" are another group.

[0060] Taking the data in Table 2 as an example, the data in "Group 1" can be regarded as old data, and the data in "Group 2" can be regarded as new data. Starting from position 2 (i.e. the third data in "Group 1"), the electronic device 110 first calculates the position of startGroup in "Group 1" and the position of relItemIndex in "Group 1" based on startIndex (as shown in Table 2, the value of startGroup is 1 and the value of relItemIndex is 0).

[0061] Next, electronic device 110 starts comparing the differences between "Data 2-1" and "Data 3-1" from the position where relItemIndex is 0. The comparison results show that the old data is "Data 2-1" and the new data is "Data 3-1". The item types are different, and the GroupTypes are also different. At this time, groupType3 needs to be created, the items in groupType2 are moved to groupType3, and groupType2 is deleted. After processing, relItemIndex is incremented by 1, and then the differences between "Data 2-2" and "Data 3-2" are compared. The comparison result is that the data content is different, but the type is the same. At this time, the content of "Data 2-2" is updated to "Data 3-2". Based on the above processing, the final results are: {remove,group1}, {add,group1}. The adapter will update the rendering view corresponding to group1 according to the results. Since "Data 3-1" and "Data 3-2" are newly created data in group1, the content corresponding to these two data needs to be re-rendered.

[0062] Continuing with the data in Table 2 as an example, electronic device 110 starts from position 0. First, the value of startGroup is calculated to be 0 based on startIndex. Then, the maximum Index is calculated to be 1 based on length, at which point relItemIndex is 0. Since the new data has no preset grouping, a normal group needs to be created first. Next, the data at index 0 is compared, groupType1 is deleted, and the data in groupType1 is migrated to the normal group. The comparison result between "Data 1-1" and "Data 1-2" shows no change. Subsequently, startGroup is incremented by 1. At this point, the maximum index has been reached, and the operation of deleting group1 is then performed. The final result is: {remove,group0}, {add,group0}, {remove,group1}. The adapter updates the rendering view corresponding to group1 based on this result.

[0063] In group0, since this group is newly created, "Data 1-1" and "Data 1-2" within it need to be re-rendered.

[0064] Furthermore, a two-level adapter approach can be used to implement the grouping reuse function. For example, a first-level adapter can be used to process data associated with list groups, and the view associated with the list group can be the HarmonyOS list item group view corresponding to the ArkUI list item group node (ARKUI_NODE_LIST_ITEM_GROUP), thus implementing the list item group node (ListGroupNode) as the list item view of the first-level adapter. Within the list item group node (ListGroupNode), the list items within each list group are processed through a second-level adapter. These list item views use the HarmonyOS list item view corresponding to the ArkUI list item node (ARKUI_NODE_LIST_ITEM), thus implementing the list item node (ListItemNode) as a second-level list item.

[0065] As an example, the list view structure can be shown in Table 3 below: Table 3

[0066] In some embodiments, a reusable list component can be implemented using the base class RecycleList, while providing adapter interfaces, view interfaces, reusable cache pools, and other capabilities to enable external expansion. Based on the reusable list component, only a simple implementation is needed to support list capabilities such as waterfall layout and GridList.

[0067] In some embodiments, the reuse list component can be developed and implemented using the C++ language, which is independent of the operating system platform, thereby enabling cross-platform reuse capabilities.

[0068] In summary, the embodiments of this disclosure support flexible switching between grouped and non-grouped modes, and can be displayed as a waterfall layout or a normal list as needed, while also supporting asynchronous loading of list items. Based on a predetermined differential algorithm and a two-level caching strategy, true reuse of long lists is achieved while ensuring high performance, ultimately significantly reducing memory usage, improving rendering performance, and supporting theoretically unlimited list scrolling.

[0069] Figure 6 A flowchart of a process 600 for element rendering according to some embodiments of the present disclosure is shown. For example, process 600 may be implemented at electronic device 110. For ease of description, the following description will take electronic device 110 performing process 600 as an example.

[0070] In box 610, in response to the first element of a plurality of elements being moved into the interface, the electronic device 110 retrieves the data structured object and view associated with the first element from the storage area associated with the first element.

[0071] In box 620, electronic device 110 updates the view based on the difference between the view structured object associated with the first element and the view structured object associated with the view.

[0072] In box 630, in response to the first element being moved into the interface, electronic device 110 renders the first element based on the data structured object and the updated view.

[0073] In some embodiments, process 600 further includes: in response to the rendered first element being removed from the interface, storing the data structured object and view associated with the rendered first element to the storage area associated with the rendered first element.

[0074] In some embodiments, process 600 further includes: in response to the completion of rendering of the first element, associating an identifier with the rendered first element.

[0075] In some embodiments, process 600 further includes: in response to the rendered first element being removed from the interface, storing the data structured object, view, and identifier associated with the rendered first element to a storage area associated with the rendered first element, wherein the view and identifier are stored in association.

[0076] In some embodiments, the storage area includes a first storage area for storing data structured objects, and wherein obtaining the data structured object associated with the first element includes: determining the position of the first data in the first set of data based on the first set of data associated with a plurality of elements and the first data associated with the first element; and obtaining the data structured object associated with the first element from the first storage area associated with the first element based on the position.

[0077] In some embodiments, the storage area includes a second storage area for storing views, and wherein obtaining the view associated with the first element includes: obtaining the view associated with the first element from the second storage area associated with the first element based on the type of the first element.

[0078] In some embodiments, the storage area includes a second storage area for storing views, and the views stored in the second storage area are associated with an identifier, and wherein retrieving the view associated with the first element includes: determining the view associated with the first element from the second storage area associated with the first element based on the type of the first element; determining the call sequence for the view associated with the first element based on the identifier associated with the view associated with the first element; and retrieving the view associated with the first element in response to the current call to the view associated with the first element being the latest call in the call sequence.

[0079] In some embodiments, obtaining the view associated with the first element further includes: in response to the latest call in the current call sequence for the view associated with the first element, not performing the operation of obtaining the view associated with the first element.

[0080] In some embodiments, the plurality of elements include elements of multiple types, and the process 600 further includes: in response to receiving a second set of data, determining a difference between a first set of data and a second set of data associated with the plurality of elements; and based on the difference, updating at least one of the following in the first set of data: data indicating the number of element types in the plurality of elements, data indicating the number of at least one type among multiple types, or data indicating the type of at least one type among multiple classes.

[0081] In some embodiments, determining the difference between the first set of data and the second set of data includes: converting the first set of data and the second set of data into one-dimensional data, respectively; and determining the difference between the converted first set of data and the converted second set of data.

[0082] In some embodiments, process 600 further includes rendering elements associated with the updated first set of data in the interface.

[0083] In some embodiments, both the data structured object and the view structured object associated with the first element are determined based on the first data associated with the first element.

[0084] Figure 7 A block diagram of a video screening apparatus 700 according to some embodiments of the present disclosure is shown. The apparatus 700 can be implemented in an electronic device 110. Various modules / components in the apparatus 700 can be implemented by hardware, software, firmware, or any combination thereof.

[0085] The apparatus 700 includes an acquisition module 710 configured to, in response to a first element being moved into the interface, acquire a data structured object and a view associated with the first element from a storage area associated with the first element. The apparatus 700 also includes an update module 720 configured to update a view based on the difference between a view structured object associated with the first element and a view structured object associated with the view. The apparatus 700 further includes a rendering module 730 configured to, in response to the first element being moved into the interface, render the first element based on the data structured object and the updated view.

[0086] In some embodiments, the apparatus 700 further includes a first storage module configured to: in response to the rendered first element being removed from the interface, store the data structured object and view associated with the rendered first element into the storage area associated with the rendered first element.

[0087] In some embodiments, the apparatus 700 further includes an association module configured to associate an identifier with the rendered first element in response to the completion of rendering of the first element.

[0088] In some embodiments, the apparatus 700 further includes a first storage module configured to, in response to the rendered first element being removed from the interface, store a data structured object, view, and identifier associated with the rendered first element into a storage area associated with the rendered first element, wherein the view and identifier are stored in association.

[0089] In some embodiments, the storage area includes a first storage area for storing data structured objects, and the acquisition module 710 is further configured to determine the position of the first data in the first set of data based on the first set of data associated with a plurality of elements and the first data associated with the first element; and based on the position, acquire the data structured object associated with the first element from the first storage area associated with the first element.

[0090] In some embodiments, the storage area includes a second storage area for storing views, and the acquisition module 710 is further configured to acquire the view associated with the first element from the second storage area associated with the first element based on the type of the first element.

[0091] In some embodiments, the storage area includes a second storage area for storing views, and the views stored in the second storage area are associated with an identifier. The acquisition module 710 is further configured to determine, based on the type of the first element, a view associated with the first element from the second storage area associated with the first element; determine the call sequence for the view associated with the first element based on the identifier associated with the view associated with the first element; and acquire the view associated with the first element in response to the current call to the view associated with the first element being the latest call in the call sequence.

[0092] In some embodiments, the acquisition module 710 is further configured to not perform the operation of acquiring the view associated with the first element in response to the latest call in the current call sequence for the view associated with the first element.

[0093] In some embodiments, the plurality of elements include elements of multiple types, and the update module 720 is further configured to, in response to receiving a second set of data, determine the difference between the first set of data and the second set of data associated with the plurality of elements; and based on the difference, update at least one of the following in the first set of data: data indicating the number of element types among the plurality of elements, data indicating the number of at least one type among multiple types, or data indicating the type of at least one type among multiple classes.

[0094] In some embodiments, determining the difference between the first set of data and the second set of data includes: converting the first set of data and the second set of data into one-dimensional data, respectively; and determining the difference between the converted first set of data and the converted second set of data.

[0095] In some embodiments, the rendering module 730 is also configured to render elements associated with the updated first set of data in the interface.

[0096] In some embodiments, both the data structured object and the view structured object associated with the first element are determined based on the first data associated with the first element.

[0097] The units included in device 700 can be implemented in various ways, including software, hardware, firmware, or any combination thereof. In some embodiments, one or more units may be implemented using software and / or firmware, such as machine-executable instructions stored on a storage medium. In addition to or as an alternative to machine-executable instructions, some or all of the units in device 700 may be implemented at least partially by one or more hardware logic components. By way of example, and not limitation, exemplary types of hardware logic components that may be used include field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems-on-chips (SoCs), complex programmable logic devices (CPLDs), and so on.

[0098] Figure 8 A block diagram of an electronic device 800 in which one or more embodiments of the present disclosure may be implemented is shown. It should be understood that... Figure 8 The electronic device 800 shown is merely exemplary and should not be construed as limiting the functionality and scope of the embodiments described herein. Figure 8 The electronic device 800 shown can be used to achieve Figure 1 Electronic devices 110.

[0099] like Figure 8 As shown, electronic device 800 is in the form of a general-purpose electronic device. Components of electronic device 800 may include, but are not limited to, one or more processors or processing units 810, memory 820, storage device 830, one or more communication units 840, one or more input devices 850, and one or more output devices 860. Processing unit 810 may be a physical or virtual processor and is capable of performing various processes according to programs stored in memory 820. In a multiprocessor system, multiple processing units execute computer-executable instructions in parallel to improve the parallel processing capability of electronic device 800.

[0100] Electronic device 800 typically includes multiple computer storage media. Such media can be any available media accessible to electronic device 800, including but not limited to volatile and non-volatile media, removable and non-removable media. Memory 820 can be volatile memory (e.g., registers, cache, random access memory (RAM)), non-volatile memory (e.g., read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory), or some combination thereof. Storage device 830 can be a removable or non-removable medium and can include machine-readable media, such as flash drives, disks, or any other media that can be used to store information and / or data (e.g., training data for training) and can be accessed within electronic device 800.

[0101] Electronic device 800 may further include additional removable / non-removable, volatile / non-volatile storage media. Although not explicitly stated... Figure 8 As shown, disk drives for reading from or writing to removable, non-volatile disks (e.g., "floppy disks") and optical disk drives for reading from or writing to removable, non-volatile optical disks can be provided. In these cases, each drive can be connected to a bus (not shown) via one or more data media interfaces. Memory 820 may include computer program product 825 having one or more program modules configured to perform various methods or actions of various embodiments of this disclosure.

[0102] The communication unit 840 enables communication with other electronic devices via a communication medium. Additionally, the functionality of the components of the electronic device 800 can be implemented using a single computing cluster or multiple computing machines capable of communicating via communication connections. Therefore, the electronic device 800 can operate in a networked environment using logical connections to one or more other servers, networked personal computers (PCs), or another network node.

[0103] Input device 850 can be one or more input devices, such as a mouse, keyboard, trackball, etc. Output device 860 can be one or more output devices, such as a monitor, speaker, printer, etc. Electronic device 800 can also communicate with one or more external devices (not shown) via communication unit 840 as needed. These external devices include storage devices, display devices, etc., and can communicate with one or more devices that enable user interaction with electronic device 800, or with any device that enables electronic device 800 to communicate with one or more other electronic devices (e.g., network card, modem, etc.). Such communication can be performed via input / output (I / O) interface (not shown).

[0104] According to an exemplary implementation of this disclosure, a computer-readable storage medium is provided that stores one or more computer instructions, wherein the one or more computer instructions are executed by a processor to implement the methods described above. According to an exemplary implementation of this disclosure, a computer program product is also provided, which is tangibly stored on a non-transient computer-readable medium and includes computer-executable instructions that are executed by a processor to implement the methods described above.

[0105] Various aspects of this disclosure are described herein with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products implemented according to this disclosure. It should be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer-readable program instructions.

[0106] 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 apparatus to produce a machine such that, when executed by the processing unit of the computer or other programmable data processing apparatus, they create means for implementing the functions / actions specified in one or more blocks of the flowchart and / or block diagram. These computer-readable program instructions can also be stored in a computer-readable storage medium that causes a computer, programmable data processing apparatus, and / or other device to operate in a particular manner. Thus, the computer-readable medium storing the instructions comprises an article of manufacture that includes instructions for implementing aspects of the functions / actions specified in one or more blocks of the flowchart and / or block diagram.

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

[0108] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of an instruction, which contains one or more executable instructions for implementing the specified logical function. In some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutive blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, may be implemented using a dedicated hardware-based system that performs the specified function or action, or using a combination of dedicated hardware and computer instructions.

[0109] Various implementations of this disclosure have been described above. The foregoing description is exemplary and not exhaustive, nor is it limited to the disclosed implementations. Many modifications and variations will be apparent to those skilled in the art without departing from the scope and spirit of the described implementations. The terminology used herein is chosen to best explain the principles, practical applications, or improvements to technology in the market, or to enable others skilled in the art to understand the implementations disclosed herein.

Claims

1. A method for rendering elements, comprising: In response to the first element among multiple elements being moved into the interface, the data structured object and view associated with the first element are retrieved from the storage area associated with the first element; The view is updated based on the difference between the view structured object associated with the first element and the view structured object associated with the view; as well as In response to the first element being moved into the interface, the first element is rendered based on the data structured object and the updated view.

2. The method according to claim 1, further comprising: In response to the rendered first element being removed from the interface, the data structured object and view associated with the rendered first element are stored in the storage area associated with the rendered first element.

3. The method according to claim 1, further comprising: In response to the completion of rendering for the first element, an identifier is associated with the rendered first element.

4. The method according to claim 3, further comprising: In response to the rendered first element being removed from the interface, the data structured object, view, and identifier associated with the rendered first element are stored in the storage area associated with the rendered first element, wherein the view and the identifier are stored in association.

5. The method of claim 1, wherein the storage area includes a first storage area for storing data structured objects, and wherein retrieving the data structured object associated with the first element comprises: Based on a first set of data associated with the plurality of elements and a first set of data associated with the first element, the position of the first data in the first set of data is determined; as well as Based on the location, the data structured object associated with the first element is obtained from the first storage area associated with the first element.

6. The method of claim 1, wherein the storage area includes a second storage area for storing views, and wherein obtaining the view associated with the first element comprises: Based on the type of the first element, the view associated with the first element is obtained from the second storage area associated with the first element.

7. The method of claim 1, wherein the storage area includes a second storage area for storing views, and the views stored in the second storage area are associated with an identifier, and wherein retrieving the view associated with the first element comprises: Based on the type of the first element, determine the view associated with the first element from the second storage area associated with the first element; Based on the identifier associated with the view associated with the first element, determine the timing of the invocation of the view associated with the first element; as well as In response to the current call to the view associated with the first element being the latest call in the call sequence, the view associated with the first element is retrieved.

8. The method of claim 7, wherein obtaining the view associated with the first element further comprises: In response to a current call to the view associated with the first element that is not the latest call in the call sequence, the operation of obtaining the view associated with the first element is not performed.

9. The method of claim 1, wherein the plurality of elements comprises elements of multiple types, and the method further comprises: In response to receiving the second set of data, the difference between the first set of data and the second set of data associated with the plurality of elements is determined; as well as Based on the difference, update at least one of the following in the first set of data: Data indicating the number of element types among the plurality of elements. Data indicating the number of at least one of the multiple types, or Indicates data of at least one of the multiple types.

10. The method of claim 9, wherein determining the difference between the first set of data and the second set of data comprises: Convert the first set of data and the second set of data into one-dimensional data respectively; as well as Determine the differences between the first set of transformed data and the second set of transformed data.

11. The method of claim 9, further comprising: The interface renders the elements associated with the updated first set of data.

12. The method of claim 1, wherein both the data structured object and the view structured object associated with the first element are determined based on the first data associated with the first element.

13. An apparatus for rendering elements, comprising: The retrieval module is configured to, in response to the first element of a plurality of elements being moved into the interface, retrieve the data structured object and view associated with the first element from the storage area associated with the first element; The update module is configured to update the view based on the difference between the view structured object associated with the first element and the view structured object associated with the view; as well as The rendering module is configured to render the first element in response to the first element being moved into the interface, based on the data structured object and the updated view.

14. An electronic device, comprising: At least one processing unit; as well as At least one memory, coupled to the at least one processing unit and storing instructions for execution by the at least one processing unit, the instructions causing the electronic device to perform the method according to any one of claims 1 to 12 when executed by the at least one processing unit.

15. A computer-readable storage medium having a computer program stored thereon, the computer program being executable by a processor to implement the method according to any one of claims 1 to 12.

16. A computer program product comprising computer-executable instructions, wherein the computer-executable instructions, when executed by a processor, implement the method according to any one of claims 1 to 12.

Images