A visual interface updating system and method

Abstract

The present disclosure provides a visual interface update system and method, which relates to the field of software development technology. The system includes: a data model, a data binding module and a visual interface layout module; the data binding module is used to traverse the properties of all data objects in the data model and filter out the target object to be monitored; according to the properties of the target object, the corresponding monitoring manager is called to monitor the properties of the target object; in the case of monitoring that the properties of the target object have changed, the monitoring result is notified to the visual interface layout module; the visual interface layout module is used to update the UI components that have a dependency relationship with the target object according to the monitoring result of the data binding module. The present disclosure realizes efficient decoupling between data and UI components by organically combining the three modules, so that data changes can automatically trigger UI updates, greatly reducing the workload of developers in manually writing UI update codes.

Description

Technical Field

[0001] The present disclosure relates to the technical field of software development, and in particular to a visual interface updating system and method. Background Art

[0002] In modern software development, especially in the field of mobile application development, as users' dependence on mobile applications continues to deepen, developers are facing more and more complex needs and challenges. On the iOS platform, developers usually use Objective-C or Swift for application development.

[0003] However, in many applications, there is a strong coupling relationship between the component view control layer and the data processing layer. This coupling relationship makes the application structure complicated. Whenever the data changes, developers need to manually write a large amount of UI update operation code and event listening code to ensure that the user interface can reflect the latest status of the data in a timely manner. This is not only cumbersome, but also prone to code redundancy and errors, increasing the difficulty of later maintenance. Especially when the application functions are constantly expanding, developers need to frequently modify and refactor the existing code to adapt to new requirements. Therefore, the traditional manual update mechanism often becomes a bottleneck restricting development efficiency. Developers have to spend a lot of time on repetitive UI update operations instead of focusing on the implementation of business logic, which makes development efficiency low. Summary of the invention

[0004] The embodiments of the present disclosure provide a visual interface updating system, aiming to solve the problems existing in the above-mentioned background technology.

[0005] In order to solve the above technical problems, the present disclosure is implemented as follows: In a first aspect, an embodiment of the present disclosure provides a visual interface update system, the system comprising: a data model, a data binding module and a visual interface layout module; the data model comprises data objects in an application; the visual interface layout module comprises a plurality of UI components constituting the visual interface; The data binding module is used to traverse the properties of all data objects in the data model and filter out the target object to be monitored; according to the properties of the target object, call the corresponding monitoring manager to monitor the properties of the target object; when it is monitored that the properties of the target object have changed, notify the visual interface layout module of the monitoring result; The visual interface layout module is used to update the UI components having a dependency relationship with the target object according to the monitoring result of the data binding module.

[0006] Optionally, the data binding module includes a data screening module and a data monitoring module, and the data monitoring module is deployed with a monitoring manager; The data screening module is used to obtain the attributes of all data objects in the data model, and traverse each attribute to screen out the attributes of the target object to be monitored according to the attribute name; The data monitoring module is used to call the monitoring manager to monitor the properties of all target objects one by one.

[0007] Optionally, the monitoring manager is used to create a monitoring object of the target object, and the target object points to the monitoring object of the target object through an isa pointer; Rewrite the original first setter method of the target object into a second setter method through the monitoring object, the monitoring object is a derived class of the target object, and the second setter method is a subclass of the first setter method; The second setter method is configured to notify the visual interface layout module of the change of the property of the target object through the callback channel of the monitoring manager when the first setter method is called.

[0008] In a second aspect, an embodiment of the present disclosure provides a visual interface update method, which is applied to the visual interface update system as described above, and the method includes: Traverse the properties of all data objects in the data model and filter out the target objects to be monitored; According to the properties of the target object, calling the corresponding monitoring manager to monitor the properties of the target object; When a change in the property of the target object is detected, the UI component having a dependency relationship with the target object is updated accordingly.

[0009] Optionally, traversing the properties of all data objects in the data model to filter out target objects to be monitored includes: Obtaining the attributes of all data objects in the data model, and traversing each attribute; Get the attribute name of each attribute, and check whether the attribute name contains preset characters; In the case that the attribute name contains the preset characters, the data object corresponding to the attribute name is determined as the target object to be monitored.

[0010] Optionally, calling a corresponding monitoring manager to monitor the attributes of the target object according to the attributes of the target object includes: Using the runtime mechanism, call the property_getAttributes method to obtain the first attribute type of all attributes of the target object; Based on a preset attribute type library, a second attribute type to which the attribute of the target object belongs is determined, and a corresponding monitoring manager is called to monitor the attribute.

[0011] Optionally, calling a corresponding monitoring manager to monitor the attribute includes: In the case that the second attribute type to which the attribute of the target object belongs is a simple data type, calling a corresponding monitoring manager to monitor the attribute, the simple data types include: string, position size, font, color and line spacing; In the case where the second attribute type to which the attribute of the target object belongs is a complex data type, determining a change operation method corresponding to the attribute, and creating a corresponding listening manager for the change operation method, wherein the complex data type includes an array, a dictionary, and a set; In the case that the second attribute type of the attribute of the target object is a UI attribute, the sub-attributes of the attribute are traversed, and a corresponding listening manager is added for the sub-attributes of the attribute, the UI attributes include: text, button, picture and input box, and the sub-attributes include: font size, font color, text and position.

[0012] Optionally, when a change in a property of the target object is detected, a UI component having a dependency relationship with the target object is correspondingly updated, including: In the case of monitoring that a property of the target object is changed, checking whether a UI component having a dependency relationship with the target object has a child node; In the case that the UI component has no child node, determining a sibling component of the UI component, where the sibling component is a component having a control relationship with the UI component; According to the change of the attribute of the target object, the UI component is drawn accordingly, and the layout of the sibling components of the UI component is updated accordingly.

[0013] Optionally, the method further comprises: If the UI component has child nodes, recursively traverse all child nodes of the UI component; Check whether the UI component has more than two levels of child nodes; When the UI component has no more than two layers of child nodes, determine the sibling components of the UI component; According to the change of the attribute of the target object, the UI component is drawn accordingly, and the layout of the sibling components of the UI component is updated accordingly.

[0014] Optionally, the method further comprises: When the UI component has more than two layers of child nodes, recreate the child nodes of the UI component and determine the sibling components of the UI component; According to the change of the attribute of the target object, the UI component is drawn accordingly, and the layout of the sibling components of the UI component is updated accordingly.

[0015] The technical solution provided by the embodiments of the present disclosure brings at least the following beneficial effects: The present disclosure realizes efficient decoupling between data and UI components by organically combining data model, data binding module and visual interface layout module, so that data changes can automatically trigger UI updates, greatly reducing the workload of developers in manually writing UI update code. Secondly, the data binding module can intelligently filter the target objects to be monitored, and monitor their properties in real time through the monitoring manager, ensuring that when the data changes, the visual interface layout module can be notified in time to ensure that the user interface always reflects the latest data status. The automated update mechanism disclosed in the present disclosure not only improves the response speed and user experience of the application, but also improves the maintainability and scalability of the code, allowing developers to focus more on the implementation of business logic, thereby improving overall development efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0017] Figure 1 is a structural block diagram of a visual interface updating system provided by an embodiment of the present disclosure; Figure 2 It is a schematic diagram of the steps of a visual interface updating method provided by an embodiment of the present disclosure; Figure 3 is a schematic diagram of the interaction between a visual interface layout module, a data model and a monitoring manager in one embodiment of the present disclosure; Figure 4 It is a schematic diagram of the monitoring process of the monitoring manager in one embodiment of the present disclosure. DETAILED DESCRIPTION

[0018] The following will be combined with the drawings in the embodiments of the present disclosure to clearly and completely describe the technical solutions in the embodiments of the present disclosure. Obviously, the described embodiments are part of the embodiments of the present disclosure, rather than all of the embodiments. Based on the embodiments in the present disclosure, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present disclosure.

[0019] In related technologies, mobile application development usually adopts the traditional MVC (Model-View-Controller) architecture, and developers use Objective-C or Swift to develop applications on the iOS platform. Under this architecture, there is a tight coupling relationship between the data model and the user interface (UI) components. When the data changes, developers need to manually write a large amount of UI update operation code and event listening code to ensure that the user interface can reflect the latest status of the data in a timely manner. This manual update method is not only cumbersome, but also prone to code redundancy and errors, increasing the difficulty of later maintenance.

[0020] In view of the above defects, the present disclosure proposes to introduce a data binding mechanism to achieve decoupling between data and UI components, so that data changes can automatically trigger UI updates. Figure 1 is a structural block diagram of a visual interface updating system provided by an embodiment of the present disclosure, such as Figure 1 As shown, the system includes: a data model, a data binding module and a visual interface layout module; the data model includes data objects in the application; the visual interface layout module includes multiple UI components constituting the visual interface.

[0021] The data model contains all data objects in the application. Data objects can be any information that the application needs to process, such as user information, product lists, setting parameters, etc. By centrally managing data, the data model provides a unified data source for subsequent data binding and UI updates. The visual interface layout module includes multiple UI components that constitute the visual interface, such as buttons, labels, lists, etc. These UI components obtain data through the data binding module and are dynamically updated according to data changes.

[0022] The data binding module is used to traverse the properties of all data objects in the data model and filter out the target object to be monitored; according to the properties of the target object, call the corresponding monitoring manager to monitor the properties of the target object; when it is monitored that the properties of the target object have changed, notify the visual interface layout module of the monitoring result.

[0023] The data binding module is responsible for decoupling data from UI components. The data binding module automatically traverses the properties of all data objects in the data model, and identifies which properties need to be monitored through the reflection mechanism (such as using the runtime feature of Objective-C). During the traversal process, the data binding module will filter out the target objects that need to be monitored according to preset rules (for example, the property name ends with "Obs"), effectively reducing unnecessary monitoring and improving performance. For the filtered target objects, the data binding module will call the corresponding monitoring manager (such as CTObsManager) to monitor the properties of these target objects. The monitoring manager is responsible for monitoring the state changes of the target object and triggering corresponding events when changes occur. Once the property of the target object is monitored to change, the data binding module will promptly notify the visual interface layout module and pass the monitoring results.

[0024] The visual interface layout module is used to update the UI components having a dependency relationship with the target object according to the monitoring result of the data binding module.

[0025] The visual interface layout module is the presentation layer of this system, responsible for updating the user interface according to the monitoring results of the data binding module. After receiving the notification from the data binding module, the visual interface layout module updates the UI components that have dependencies with the target object according to the changed properties.

[0026] The dependency relationship refers to the state or display content of a UI component depending on the properties of a specific data or object (target object). Suppose there is a simple shopping cart application, which contains a shopping cart icon (UI component B) and a total price display (UI component C). The shopping cart icon is used to display the number of items in the shopping cart. The total price display is used to display the total price of the items in the shopping cart.

[0027] Suppose a user selects an item from the product list and clicks the "Add to Cart" button. At this time, the quantity or status of the item will be updated (for example, the number of items in the shopping cart increases). When the number of items in the shopping cart changes, the shopping cart icon needs to be updated to reflect the new quantity. For example, if there are 2 items in the original shopping cart, and the user adds an item, the shopping cart icon should be updated to show 3 items. The display content of this component depends on the total price of all items in the shopping cart. When the user adds or removes items, the total price will change accordingly, so the total price display needs to be updated to reflect the latest price. In this example, the number of items is the target object to be monitored, and correspondingly, the shopping cart icon and total price display are its corresponding UI components, and there is a dependency relationship between them.

[0028] The present disclosure realizes efficient decoupling between data and UI components by organically combining data model, data binding module and visual interface layout module, so that data changes can automatically trigger UI updates, greatly reducing the workload of developers in manually writing UI update code. Secondly, the data binding module can intelligently filter the target objects to be monitored, and monitor their properties in real time through the monitoring manager, ensuring that when the data changes, the visual interface layout module can be notified in time to ensure that the user interface always reflects the latest data status. The automated update mechanism disclosed in the present disclosure not only improves the response speed and user experience of the application, but also improves the maintainability and scalability of the code, allowing developers to focus more on the implementation of business logic, thereby improving overall development efficiency.

[0029] In an optional implementation, the data binding module includes a data screening module and a data monitoring module, and the data monitoring module is deployed with a monitoring manager; The data screening module is used to obtain the attributes of all data objects in the data model, traverse each attribute, and screen out the attributes of the target object to be monitored according to the attribute name.

[0030] The data filtering module is used to extract the properties of all data objects from the data model, and filter out the target object properties that need to be monitored according to specific rules. Specifically, the data filtering module obtains the property list of all data objects in the data model through a reflection mechanism (such as using the runtime feature of Objective-C). After obtaining the property list, the data filtering module traverses each property. The traversal process includes checking the name, type and other relevant characteristics of each property for subsequent screening. According to preset rules (for example, the property name ends with "Obs"), the data filtering module determines which properties are the target object properties that need to be monitored. In this way, the data filtering module can effectively filter out unnecessary properties, reduce the burden of subsequent monitoring, and improve system performance. Finally, the data filtering module returns the filtered target object properties to the data monitoring module in the form of a list for subsequent processing.

[0031] The data monitoring module is used to call the monitoring manager to monitor the properties of all target objects one by one.

[0032] The data monitoring module is used to monitor the properties of the filtered target objects to ensure that data changes can be captured in time. The data monitoring module will traverse the target object properties returned by the data filtering module one by one, and call the monitoring manager (such as CTObsManager) to monitor. The monitoring manager is responsible for managing all monitoring requests and triggering corresponding callbacks when the properties change. For each target object property, the data monitoring module will set the corresponding listener through the monitoring manager. These listeners monitor changes in the properties and perform predefined operations when changes occur, such as notifying the visual interface layout module to update. If the properties of the target object are complex data types (such as arrays, dictionaries, etc.), the data monitoring module also needs to ensure that it can monitor changes in these complex data, including traversing its internal structure to ensure that operations such as adding, deleting or modifying data can be captured. The data monitoring module also needs to maintain the status of the monitoring so that listeners can be added, removed or updated when necessary.

[0033] In an optional implementation, the monitoring manager is used to create a monitoring object of the target object, and the target object points to the monitoring object of the target object through an isa pointer.

[0034] Figure 4 This is a schematic diagram of the monitoring process of the monitoring manager in one embodiment of the present disclosure, see Figure 4 , the monitoring manager creates a corresponding monitoring object for each target object that needs to be monitored. This monitoring object is a derived class of the target object, which can be understood as a monitoring subclass. In this way, the monitoring manager can add monitoring functions without changing the original target object. In Objective-C, each object has an isa pointer that points to the class of the object. When the target object is monitored, the monitoring manager will dynamically modify the isa pointer of the target object to point to the newly created monitoring object. In other words, from now on, all calls to the target object will be made through the monitoring object instead of directly through the original target object.

[0035] Through the monitoring object, the original first setter method of the target object is rewritten as a second setter method, the monitoring object is a derived class of the target object, and the second setter method is a subclass of the first setter method; the second setter method is configured to notify the visual interface layout module of the change of the property of the target object through the callback channel of the monitoring manager when the first setter method is called.

[0036] The listening manager will rewrite the original first setter method of the target object and implement a new second setter method. The second setter method is a subclass of the first setter method and contains the listening logic for property value changes. During the rewriting process, the second setter method will perform specific operations before and after calling the first setter method. Specifically, the second setter method will first record the change of the property value, and update the property value of the target object when the first setter method is called. At this time, the change of the property will be captured. In the second setter method, the listening manager will notify the visual interface layout module of the property change through a callback channel. This callback channel can be called in different threads to ensure that UI updates can be safely executed in the main thread. After receiving the notification of property changes, the visual interface layout module updates the relevant UI components according to the changed properties.

[0037] It is understandable that, since the isa pointer of the target object is modified to point to the listening object, the developer does not need to perceive the emergence of the new class at the business level. This transparency makes the implementation of business logic more concise, and the developer can focus on the business logic without worrying about the underlying listening implementation. Through the dynamic listening mechanism provided by the present disclosure, the developer no longer needs to manually write a large amount of UI update code and event listening code, thereby reducing the redundancy and complexity of the code and improving the maintainability of the code.

[0038] Figure 2 is a schematic diagram of the steps of a visual interface updating method provided by an embodiment of the present disclosure, which is applied to the visual interface updating system as described above. Figure 2 As shown, the method includes: Step S101, traverse the properties of all data objects in the data model, and filter out the target objects to be monitored.

[0039] The data model contains all data objects in the application, including text data, list data, timers, and text input boxes. In an online store application selling Bluetooth headsets, text data, that is, text-type data objects, are used to display the name, description, price, and other information of the headset. The properties of text data include: earphoneName (NSString): The name of the headset, such as "Ultra-long battery life Bluetooth headset".

[0040] earphoneDescription (NSString): A detailed description of the headset, describing its features and benefits.

[0041] earphonePrice (NSNumber): The price of the earphone, for example, 199.99 yuan.

[0042] List data is used to display the classification of headphones, user reviews, recommended products, etc. The attributes of list data include: earphoneCategories (NSArray): A list of earphone categories, such as ["wireless earphones", "noise-canceling earphones", "sports earphones"].

[0043] userReviews (NSArray): A list of user reviews. Each review can be a dictionary object containing the reviewer's name, rating, and review content. For example: @[ @{@"username": @"User A", @"rating": @5, @"comment": @"The sound quality is very good!"},@{@"username": @"User B", @"rating": @4, @"comment": @"It is cost-effective, but the battery life is average."} ] Timers are used to implement limited-time promotions or countdown functions. For example, a timer can count down according to a set time. The timer can update the corresponding UI component in real time, regularly check the difference between the current time and the end time of the promotion, and update the countdown display. Text input boxes are used for users to enter information, such as searching for headphones, filling out comments, or submitting orders.

[0044] Step S102: According to the properties of the target object, a corresponding monitoring manager is called to monitor the properties of the target object.

[0045] In an optional implementation, the step S102 specifically includes sub-steps S1021 to S1022.

[0046] Step S1021: using the runtime mechanism, calling the property_getAttributes method to obtain the first attribute type of all attributes of the target object.

[0047] As mentioned above, the present disclosure makes use of a powerful runtime mechanism provided by Objective-C, allowing developers to dynamically obtain class information at runtime, including class properties, methods, etc. In this step, the property_getAttributes method is used to obtain the first attribute type of all attributes of the target object. property_getAttributes is a C function that can obtain the attribute information of the specified attribute, including type, read and write permissions, etc. By traversing all attributes of the target object, property_getAttributes will be called for each attribute and its first attribute type will be obtained. The attribute type returned by the property_getAttributes method can be a string that describes the basic type of the attribute. For example, @"T@\"NSString\"" indicates that the attribute is an NSString type.

[0048] Step S1021: Based on a preset attribute type library, determine the second attribute type to which the attribute of the target object belongs, and call a corresponding monitoring manager to monitor the attribute.

[0049] In this embodiment, a preset attribute type library is maintained in advance, which includes mapping relationships of common data types. For example, basic data types (such as NSString, NSNumber, NSArray, etc.) and their corresponding monitoring mechanisms. The second attribute type of the attribute is determined according to the first attribute type, and the second attribute type refers to further analyzing and determining the specific category or property of the attribute after obtaining the first attribute type of the target object attribute.

[0050] Step S103: When it is monitored that the property of the target object is changed, the UI component having a dependency relationship with the target object is updated accordingly.

[0051] After receiving the notification (the property of the target object has changed), the visual interface layout module updates the related UI components according to the changed properties. For example, if the text property changes, the module will update the corresponding UILabel display content. If the property of the target object has dependencies with multiple UI components, the module will ensure that all related components are updated in time. When updating the UI, check the relationship between UI components to avoid unnecessary redrawing and layout adjustments, thereby improving performance.

[0052] Figure 3 is a schematic diagram of the interaction between the visual interface layout module, the data model and the monitoring manager in one embodiment of the present disclosure, such as Figure 3As shown, the visual layout module will first initialize the data model resources. This includes loading and configuring data objects. After initialization, the visual layout module will traverse all data objects in the data model and filter out the target objects that need to be monitored. Once the target objects to be monitored are determined, the visual layout module calls the monitoring manager and requires it to monitor the properties of these target objects. The data model will add the filtered target objects to the monitoring manager. After receiving the target object, the monitoring manager dynamically creates a monitoring object (a derived class of the target object) and overrides the setter method of its properties. When the monitoring object is set, the monitoring manager will return the monitoring result, indicating that the properties of the target object have been successfully monitored. When the properties of the target object change, the monitoring object will feedback the change results to the visual layout module through the corresponding thread (which can be the main thread, child thread or global thread) to update the corresponding UI component.

[0053] In an optional implementation, traversing the properties of all data objects in the data model to filter out the target objects to be monitored includes: Obtaining the attributes of all data objects in the data model, and traversing each attribute; Get the attribute name of each attribute, and check whether the attribute name contains preset characters; In the case that the attribute name contains the preset characters, the data object corresponding to the attribute name is determined as the target object to be monitored.

[0054] A data model usually consists of multiple objects, each of which may contain multiple attributes. First, the system needs to obtain a complete list of these data objects and their attributes.

[0055] Through the runtime mechanism Objective-C runtime, call the copyPropertyList method to obtain all properties. For each data object obtained, all its properties will be traversed. The traversal process can be implemented through a loop structure to operate on the properties of each object.

[0056] When traversing each property, you need to get the name of the property. You can use the property_getName function to get the name of the property. For example, if a data object has an attribute username, then during the traversal process, extract this name.

[0057] Checks whether each attribute name contains a predefined string (for example, Obs). This predefined string is a keyword used to identify which attributes need to be monitored. For example, if the attribute name is userObsName, Obs is included, but userName is not.

[0058] If the attribute name contains preset characters, the data object corresponding to the attribute is determined as the target object to be monitored, that is, the state change of the object will be monitored.

[0059] Assume that the data model User is defined as follows: @interface User : NSObject @property (nonatomic, strong) NSString *username; @property (nonatomic, strong) NSString *userObsEmail; / / Need to monitor @property (nonatomic, strong) NSString *userAddress; @property (nonatomic, strong) NSString *userObsPhone; / / Need to monitor @end When executing the above steps, each attribute is traversed. Username, userObsEmail, userAddress, userObsPhone. Checking the attribute names one by one, it can be concluded that username does not contain Obs, userObsEmail contains Obs, userAddress does not contain Obs, and userObsPhone contains Obs. In other words, userObsEmail and userObsPhone are determined as the target objects to be monitored.

[0060] Through the above steps, the target objects that need to be monitored can be effectively screened out, allowing developers to focus on the properties that are critical to the application state changes, thereby achieving more efficient responsive programming.

[0061] In an optional implementation, calling the corresponding monitoring manager to monitor the attribute includes: In the case that the second attribute type to which the attribute of the target object belongs is a simple data type, calling a corresponding monitoring manager to monitor the attribute, the simple data types include: string, position size, font, color and line spacing; In the case where the second attribute type to which the attribute of the target object belongs is a complex data type, determining a change operation method corresponding to the attribute, and creating a corresponding listening manager for the change operation method, wherein the complex data type includes an array, a dictionary, and a set; In the case that the second attribute type of the attribute of the target object is a UI attribute, the sub-attributes of the attribute are traversed, and a corresponding listening manager is added for the sub-attributes of the attribute, the UI attributes include: text, button, picture and input box, and the sub-attributes include: font size, font color, text and position.

[0062] For step S1021, simple data types refer to those basic, single value types that do not involve complex structures or nesting. Simple data types include: string, location size, font, color, and line spacing.

[0063] When the second attribute type of the target object's attribute is a simple data type, the corresponding listener manager is directly called to listen to the attribute. The listener manager overrides the setter method of the attribute to automatically trigger the corresponding update logic when the attribute value changes. For example, when the value of a string attribute changes, the listener manager captures the change and notifies the corresponding UI component to update. For changes in color attributes, the listener manager will also trigger a UI refresh to reflect the new color value.

[0064] Complex data types are those that consist of multiple values ​​and require additional operations to manage their internal structure. Complex data types include arrays, dictionaries, and sets.

[0065] When the second attribute type of the target object's attribute is a complex data type, the change operation method corresponding to the attribute must be determined first. In other words, the internal structure of the attribute must be determined to find possible change operations. For example, for arrays, the change operation methods may include addObject:, removeObject:, insertObject:atIndex:, etc. For dictionaries, the change operation methods may include setValue:forKey:, removeObjectForKey:, setDictionary:. Once the change operation methods are determined, corresponding listener managers will be created for these operations. These listener managers can monitor changes in arrays, dictionaries, or collections, and trigger corresponding UI updates when data changes.

[0066] UI attributes refer to attributes directly related to user interface elements, that is, components related to visualization. UI attributes include: text, buttons, images, and input boxes.

[0067] In the case where the second attribute type of the target object's attribute is a UI attribute, traverse the sub-attributes of the attribute. Sub-attributes refer to finer-grained attributes that make up a UI attribute, for example: for a text attribute, the sub-attributes include font size, font color, and text content. For a button, the sub-attributes include the button's title, background color, and status, etc. Add a corresponding listener manager for each sub-attribute to ensure that the entire UI component can be updated in a timely manner when the sub-attribute changes. For example, if the title text of a button changes, the listener manager will capture this change and update the button's display. If the font color of an input box changes, the listener manager will trigger a UI refresh to reflect the new font color.

[0068] In an optional implementation, when a change in a property of the target object is detected, correspondingly updating a UI component having a dependency relationship with the target object includes: In the case of monitoring that a property of the target object is changed, checking whether a UI component having a dependency relationship with the target object has a child node; In the case that the UI component has no child node, determining a sibling component of the UI component, where the sibling component is a component having a control relationship with the UI component; According to the change of the attribute of the target object, the UI component is drawn accordingly, and the layout of the sibling components of the UI component is updated accordingly.

[0069] When a property of the target object changes, the relevant listener manager will capture the change and trigger the update logic. First, check whether the UI component that has a dependency relationship with the target object has child nodes. Child nodes refer to other UI components contained in the UI component, such as multiple child views in a parent view (such as buttons, labels, etc.).

[0070] If the UI component has no child nodes, determine its sibling components. Sibling components refer to other components that are at the same level as the current UI component and have a control relationship. For example, in a parent view, two child views are sibling components. Redraw the current UI component according to the property changes of the target object, including updating text, color, style, etc. At the same time, update the layout of sibling components. Because there is usually a layout relationship between UI components, changes in the current component may affect the display position or size of sibling components. For example, if the size of a button changes, it may be necessary to recalculate and adjust the position of other buttons or labels adjacent to it.

[0071] Through the above steps, when the properties of the target object change, the related UI components can be automatically updated. This mechanism ensures the consistency and dynamic responsiveness of the UI.

[0072] In an optional embodiment, the method further includes: If the UI component has child nodes, recursively traverse all child nodes of the UI component; Check whether the UI component has more than two levels of child nodes; When the UI component has no more than two layers of child nodes, determine the sibling components of the UI component; According to the change of the attribute of the target object, the UI component is drawn accordingly, and the layout of the sibling components of the UI component is updated accordingly.

[0073] In contrast to the above situation, if the UI component corresponding to the target object with property changes has child nodes, these child nodes will be recursively traversed, that is, each child node and its possible child nodes will be checked layer by layer.

[0074] During the traversal process, check whether the child nodes of the current UI component have a nested structure of more than two layers. In other words, determine whether there are child nodes of child nodes (i.e. nodes at the third level and above). If the child nodes of the UI component do not exceed two levels, determine its sibling components. Redraw the current UI component according to the property changes of the target object. At the same time, update the layout of the sibling components.

[0075] Through the above steps, when the properties of the target object change, the related UI components and their child nodes can be fully and efficiently updated. This recursive traversal and hierarchical checking mechanism ensures the consistency and dynamic responsiveness of the UI, allowing developers to manage complex UI structures more easily.

[0076] In an optional embodiment, the method further includes: When the UI component has more than two layers of child nodes, recreate the child nodes of the UI component and determine the sibling components of the UI component; According to the change of the attribute of the target object, the UI component is drawn accordingly, and the layout of the sibling components of the UI component is updated accordingly.

[0077] If the target object with property changes has more than two layers of child nodes for the UI component, recreate the child nodes and determine the sibling components of the UI component. The purpose of recreating the child nodes is to simplify the structure of UI components so that these components can be managed and updated more efficiently. Complex nested structures may cause performance issues and complexity in update logic, so by recreating, you can ensure that the hierarchical structure of UI components is clearer and easier to maintain. Specifically, it is performed in the child thread to avoid performing time-consuming operations in the main thread. Clear the existing child nodes and rebuild the child nodes based on the current state and data model. In this process, you need to extract information from the data source and create new UI components based on this information.

[0078] After the new UI component is created, the current UI component is redrawn according to the property changes of the target object. At the same time, the layout of the sibling components is updated.

[0079] Through the above steps, when the properties of the target object change, the related UI components and their child nodes can be fully and efficiently updated. Especially when dealing with complex nested structures, the strategy of recreating child nodes can significantly improve performance and maintainability.

[0080] Those skilled in the art will appreciate that the embodiments of the present disclosure may be provided as methods, devices, electronic devices, and storage media. Therefore, the embodiments of the present disclosure may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the embodiments of the present disclosure may take the form of a computer program product implemented on one or more computer-readable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

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

[0082] Finally, it should be noted that, in this article, relational terms such as first and second are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the term "include" or any other variant thereof is intended to cover non-exclusive inclusion, so that a process, method, article or terminal device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or terminal device. In the absence of further restrictions, the elements defined by the sentence "include..." do not exclude the existence of other identical elements in the process, method, article or terminal device including the elements. A visual interface updating system and method provided by the present disclosure are described in detail above. The principles and implementation methods of the present disclosure are described in this article using specific examples. The description of the above embodiments is only used to help understand the method and its core idea of ​​the present disclosure; at the same time, for those of ordinary skill in the art, according to the idea of ​​the present disclosure, there will be changes in the specific implementation method and application scope. In summary, the content of this specification should not be understood as a limitation on the present disclosure.

Claims

1. A visual interface updating system, characterized in that: The system comprises: a data model, a data binding module and a visual interface layout module; the data model comprises data objects in the application; the visual interface layout module comprises a plurality of UI components constituting the visual interface; The data binding module is used to traverse the properties of all data objects in the data model and filter out the target object to be monitored; according to the properties of the target object, call the corresponding monitoring manager to monitor the properties of the target object; when it is monitored that the properties of the target object have changed, notify the visual interface layout module of the monitoring result; The visual interface layout module is used to update the UI components having a dependency relationship with the target object according to the monitoring result of the data binding module.

2. The system according to claim 1, characterized in that The data binding module includes a data screening module and a data monitoring module, and the data monitoring module is deployed with a monitoring manager; The data screening module is used to obtain the attributes of all data objects in the data model, and traverse each attribute to screen out the attributes of the target object to be monitored according to the attribute name; The data monitoring module is used to call the monitoring manager to monitor the properties of all target objects one by one.

3. The system according to claim 2, characterized in that The monitoring manager is used to create a monitoring object of the target object, and the target object points to the monitoring object of the target object through an isa pointer; Rewrite the original first setter method of the target object into a second setter method through the monitoring object, the monitoring object is a derived class of the target object, and the second setter method is a subclass of the first setter method; The second setter method is configured to notify the visual interface layout module of the change of the property of the target object through the callback channel of the monitoring manager when the first setter method is called.

4. A visual interface updating method, characterized in that: Applied to the system according to any one of claims 1 to 3, the method comprises: Traverse the properties of all data objects in the data model and filter out the target objects to be monitored; According to the properties of the target object, calling the corresponding monitoring manager to monitor the properties of the target object; When a change in the property of the target object is detected, the UI component having a dependency relationship with the target object is updated accordingly.

5. The method according to claim 4, characterized in that The traversal of the properties of all data objects in the data model to filter out the target objects to be monitored includes: Obtaining the attributes of all data objects in the data model, and traversing each attribute; Get the attribute name of each attribute, and check whether the attribute name contains preset characters; In the case that the attribute name contains the preset characters, the data object corresponding to the attribute name is determined as the target object to be monitored.

6. The method according to claim 4, characterized in that The calling a corresponding monitoring manager to monitor the attributes of the target object according to the attributes of the target object includes: Using the runtime mechanism, call the property_getAttributes method to obtain the first attribute type of all attributes of the target object; Based on a preset attribute type library, a second attribute type to which the attribute of the target object belongs is determined, and a corresponding monitoring manager is called to monitor the attribute.

7. The method according to claim 6, characterized in that The calling of the corresponding monitoring manager to monitor the attribute includes: In the case that the second attribute type to which the attribute of the target object belongs is a simple data type, calling a corresponding monitoring manager to monitor the attribute, the simple data types include: string, position size, font, color and line spacing; In the case where the second attribute type to which the attribute of the target object belongs is a complex data type, determining a change operation method corresponding to the attribute, and creating a corresponding listening manager for the change operation method, wherein the complex data type includes an array, a dictionary, and a set; In the case that the second attribute type of the attribute of the target object is a UI attribute, the sub-attributes of the attribute are traversed, and a corresponding listening manager is added for the sub-attributes of the attribute, the UI attributes include: text, button, picture and input box, and the sub-attributes include: font size, font color, text and position.

8. The method according to claim 4, characterized in that When a change in the property of the target object is detected, a UI component having a dependency relationship with the target object is updated accordingly, including: In the case of monitoring that a property of the target object is changed, checking whether a UI component having a dependency relationship with the target object has a child node; In the case that the UI component has no child node, determining a sibling component of the UI component, where the sibling component is a component having a control relationship with the UI component; According to the change of the attribute of the target object, the UI component is drawn accordingly, and the layout of the sibling components of the UI component is updated accordingly.

9. The method according to claim 8, characterized in that The method further comprises: If the UI component has child nodes, recursively traverse all child nodes of the UI component; Check whether the UI component has more than two levels of child nodes; When the UI component has no more than two layers of child nodes, determine the sibling components of the UI component; According to the change of the attribute of the target object, the UI component is drawn accordingly, and the layout of the sibling components of the UI component is updated accordingly.

10. The method according to claim 9, characterized in that The method further comprises: When the UI component has more than two layers of child nodes, recreate the child nodes of the UI component and determine the sibling components of the UI component; According to the change of the attribute of the target object, the UI component is drawn accordingly, and the layout of the sibling components of the UI component is updated accordingly.

Images