A method for analyzing user interface components and an electronic device

Abstract

This application relates to the field of program development technology and discloses a user interface component data analysis method and an electronic device. The user interface component data analysis method provided in this application, after obtaining the source code file corresponding to the application, can obtain one or more UI components in the code construction, as well as the feature information of one or more UI components, based on the source code file, and construct the corresponding data relationship between the UI components based on the feature information of one or more components. The feature information of the components includes one or more of the following: component attribute features, event features, state variable features, or sub-component features. In this way, detailed analysis of the application code developed based on the declarative development paradigm can be performed to obtain the data relationship between each UI component in the application, thereby facilitating users to adjust and optimize the code based on the analysis results and improving application development efficiency.

Description

Technical Field

[0001] This application relates to the field of program development technology, and in particular to a user interface component data analysis method and electronic device. Background Technology

[0002] Currently, application development frameworks are generally used to create and develop the interfaces (or user interfaces, UIs) of applications in electronic devices. The Ark UI (Ark User Interface) development framework is a UI development framework for building distributed application interfaces. The ArkUI framework provides two development paradigms: a declarative development paradigm based on the Ark TypeScript (ArkTS) programming language (referred to as the "declarative development paradigm"), and a web-like development paradigm compatible with the JavaScript (JS) programming language (referred to as the "web-like development paradigm").

[0003] Among these, the declarative development paradigm is closer to natural language programming, allowing developers to intuitively describe the UI and resulting in efficient and concise development. Therefore, the declarative development paradigm is generally adopted in application development. After UI development is complete, it's typically necessary to analyze the code to obtain information such as dependencies between UI components, thereby assessing whether the code meets the requirements—that is, evaluating code performance—to facilitate code adjustments and optimizations.

[0004] However, there is currently a lack of methods for analyzing code developed based on the declarative development paradigm, which makes it impossible to analyze the code corresponding to the UI developed based on the declarative development paradigm, thus affecting the efficiency of application UI development. Summary of the Invention

[0005] This application provides a user interface component data analysis method to analyze user interface code developed based on a declarative development paradigm, thereby improving user interface development efficiency.

[0006] Firstly, embodiments of this application provide a user interface component data analysis method. This method can be applied to electronic devices. Unless otherwise specified, "electronic device" in this application can refer to the electronic device itself, a component within the electronic device (e.g., a processor, chip, or chip system), or a logic module or software capable of implementing all or part of the functions of the electronic device. The method includes: obtaining the source code file corresponding to an application; obtaining at least one user interface component in the application and its corresponding feature information based on the source code file; the feature information includes one or more of state variable features, attribute features, event features, or sub-component features; and establishing a data relationship between the at least one user interface component and its corresponding feature information.

[0007] As mentioned earlier, there is currently a lack of methods for analyzing code developed based on the declarative development paradigm. This makes it impossible to analyze the code corresponding to the user interface developed based on the declarative development paradigm, affecting the development efficiency of the user interface in the application. Based on the user interface component data analysis method provided in this application embodiment, a detailed analysis of the application code developed based on the declarative development paradigm can be performed to obtain the data relationships between various UI components in the application's user interface. This allows users to easily adjust and optimize the code based on the analysis results, improving the development efficiency of the user interface in the application.

[0008] It is understood that, in some embodiments, the creation code corresponding to the application can be the source code developed by the user based on the requirements of each UI in the application. In some embodiments, each application may include one or more UIs, and the user can encapsulate the creation code corresponding to the UI components of each UI together to form the application's source code file.

[0009] In one possible implementation, obtaining at least one user interface component in the application and the feature information corresponding to the at least one user interface component based on the source code file includes: obtaining the code corresponding to at least one user interface component in the application based on the source code file, wherein the user interface component includes system components and custom components; generating at least one intermediate representation statement corresponding to at least one user interface component based on the code corresponding to at least one user interface component; and obtaining the feature information corresponding to at least one user interface component based on the intermediate representation statement corresponding to at least one user interface component.

[0010] In some embodiments, intermediate representation (IR) statements corresponding to user interface components can be generated based on the code corresponding to the user interface components. This means that the code corresponding to the UI components can be flattened to generate the corresponding IR statements. It is understood that code developed using the declarative development paradigm differs from traditional code. The key difference is that UIs built using the declarative development paradigm contain components with parent-child nesting relationships. Therefore, flattening can be used to flatten these nesting relationships, simplifying IR parsing and improving the efficiency of UI component data analysis.

[0011] In one possible implementation, the data relationship corresponding to at least one user interface component includes at least one of the following: a correspondence between N user interface components and the feature information corresponding to each of the N user interface components, where N is a positive integer; or, a correspondence between one user interface component among the N user interface components and the other user interface components among the N user interface components, where N is a positive integer greater than 1; or, a correspondence between the feature information corresponding to one user interface component among the N user interface components and the feature information corresponding to the other user interface components among the N user interface components, where N is a positive integer greater than 1; or, a correspondence between one feature information corresponding to one user interface component among the N user interface components and the other feature information among the multiple feature information corresponding to one user interface component, where N is a positive integer.

[0012] In some embodiments, the corresponding data relationships of UI components may include one or more of the following:

[0013] A correspondence can be established between each UI component and its corresponding feature information. For example, an association can be established between each UI component and its feature information. For instance, this feature information may include one or more of the following: attribute features, event features, state variable features, or sub-component features.

[0014] Alternatively, it can refer to the inheritance relationship between multiple UI components; for example, if UI component A is a child component of UI component B, then an association relationship can be established between UI component A and UI component B.

[0015] Alternatively, the correspondence between the feature information of multiple UI components; for example, if the event features in UI component C are associated with the attribute features in UI component D, then the association between the event features in UI component C and the attribute features in UI component D can be established.

[0016] Alternatively, the correspondence between the feature information of the same UI component; for example, if there is a relationship between the attribute features and event features in UI component A, then the relationship between the attribute features and event features in UI component A can be established.

[0017] The user interface component data analysis method in this application embodiment can perform detailed analysis of the above-mentioned data relationships corresponding to UI components, improve the accuracy of UI component data analysis, and thus facilitate users to adjust and optimize the code based on the analysis results, thereby improving the efficiency of user interface development in the application.

[0018] In one possible implementation, a data relationship is established for at least one user interface component based on at least one user interface component and its corresponding feature information, including:

[0019] Based on at least one user interface component and the feature information corresponding to at least one user interface component, establish the data relationship corresponding to at least one user interface component in the form of a data binding tree.

[0020] In one possible implementation, based on at least one user interface component and its corresponding feature information, a data relationship is established in the form of a data binding tree for at least one user interface component, including:

[0021] Traverse to the first type of function in the intermediate representation statement, create the first push node in the data binding tree, and the content of the first push node is the name of the user interface component carried in the first type of function;

[0022] Iterate through the container name corresponding to the current intermediate representation statement and find that it is consistent with the container name corresponding to the previous intermediate representation statement. Parse the feature information in the current intermediate representation statement and create the data node corresponding to the first push node in the data binding tree and the association relationship between the data node and the first push node based on the feature information. The data node includes one or more of the following: data node corresponding to state variable feature, data node corresponding to attribute feature, data node corresponding to event feature, or data node corresponding to sub-component.

[0023] Traverse to the rendering control statements in the intermediate representation statements, and create control nodes in the data binding tree and the association between control nodes and data nodes based on the rendering control statements;

[0024] When traversing to the second type of function in the intermediate representation statement, create the first pop node corresponding to the first push node in the data binding tree and the association between the first pop node and the data node; or, when traversing to the point where the container name corresponding to the current intermediate representation statement is different from the container name corresponding to the previous intermediate representation statement, and the component corresponding to the first push node is an atomic component, create the first pop node corresponding to the first push node in the data binding tree and the association between the first pop node and the data node.

[0025] In this embodiment, by traversing the intermediate representation (IR) statements, data relationships corresponding to at least one user interface component can be established in the form of a data binding tree. For example, the data relationships corresponding to at least one user interface component may include the data relationship between the node corresponding to the user interface component name and the data node corresponding to the feature information of the user interface component; the data relationship between data nodes corresponding to multiple feature information of the same user interface component; the data relationship between data nodes corresponding to feature information of different user interface components; and the parent-child inheritance relationship between nodes corresponding to the user interface component name. The data binding tree may include nodes such as push nodes, data nodes, pop nodes, and control nodes, as well as the relationships between these nodes. These relationships can be established using arrows, lines, or other connecting methods. This facilitates the intuitive display of data relationships, making it easier for users to view and analyze code performance, improving user experience and UI development efficiency.

[0026] In one possible implementation, the first type of function may include the create function, and the second type of function may include the pop function.

[0027] In some embodiments, the first type of function can also be other functions that represent the start of component or sub-component code, and the second type of function can also be other functions that represent the end of component or sub-component code. Identifying the first and second types of functions allows for rapid location and creation of push and pop nodes in the data binding tree, improving data analysis efficiency.

[0028] In one possible implementation, the state variable feature may include both state variables and decorators.

[0029] Based on the UI component data analysis method provided in the embodiments of this application, the data relationship between UI and state variable features can be analyzed, improving the detail of UI component data analysis, facilitating code optimization based on the results of UI component data analysis, and improving UI development efficiency.

[0030] In one possible implementation, child component characteristics include parent-child inheritance relationships.

[0031] It is understandable that code developed using the declarative development paradigm differs from traditional code. The most critical difference is that UIs built using the declarative development paradigm contain components with nested parent-child relationships. Based on the UI component data analysis method provided in this application, the parent-child inheritance relationships between UI components can be analyzed, improving the accuracy of the data analysis results and facilitating code optimization based on these results, thereby improving UI development efficiency.

[0032] In one possible implementation, the attribute features include at least one of size features, font size features, color features, font features, or alignment features.

[0033] In one possible implementation, the event characteristics include the event triggering operation and the event result corresponding to the triggering operation.

[0034] In one possible implementation, the user interface component includes at least one of a button component, a radio button component, a progress bar component, a text component, an image component, or a container component.

[0035] Secondly, embodiments of this application provide a readable storage medium storing a program or instructions, which, when executed on an electronic device, cause the electronic device to implement the user interface component data analysis method in any possible implementation of the first aspect described above.

[0036] Thirdly, embodiments of this application provide an electronic device, including: one or more processors; one or more memories; the one or more memories storing one or more programs, which, when executed by one or more processors, cause the electronic device to perform the user interface component data analysis method in any possible implementation of the first aspect described above.

[0037] Fourthly, embodiments of this application provide an electronic device including a module for performing a user interface component data analysis method in any possible implementation of the first aspect described above.

[0038] Fifthly, embodiments of this application provide a communication system including an electronic device, which is used to perform the user interface component data analysis method in any possible implementation of the first aspect described above.

[0039] Sixthly, embodiments of this application provide a computer program product, including instructions that, when executed, cause the user interface component data analysis method in any possible implementation of the first aspect to be implemented.

[0040] In a seventh aspect, embodiments of this application provide a chip including a processor coupled to a memory for executing computer programs or instructions stored in the memory, such that the chip implements the user interface component data analysis method in any possible implementation of the first aspect described above. Attached Figure Description

[0041] Figure 1a According to some embodiments of this application, a schematic diagram showing the difference between the ArkTS programming language and the TS programming language is shown.

[0042] Figure 1b According to some embodiments of this application, a schematic diagram of an ArkUI development framework is shown.

[0043] Figure 2 A schematic diagram of a user interface is shown according to some embodiments of this application.

[0044] Figure 3 According to some embodiments of this application, a schematic diagram illustrating the relationship between a state and a UI is shown.

[0045] Figure 4 According to some embodiments of this application, a schematic diagram of a component-level state management and a decorator corresponding to an application-level state management is shown.

[0046] Figure 5 According to some embodiments of this application, schematic diagrams of several control flow graphs are shown.

[0047] Figure 6 According to some embodiments of this application, a flowchart of a user interface component data analysis method is shown.

[0048] Figure 7 According to some embodiments of this application, a data relationship diagram of a UI component is shown.

[0049] Figure 8 According to some embodiments of this application, a flowchart of a user interface component data analysis method is shown.

[0050] Figure 9a According to some embodiments of this application, a schematic diagram of a system component definition file is shown.

[0051] Figure 9b According to some embodiments of this application, a schematic diagram of a custom component corresponding to an application source code file is shown.

[0052] Figure 10a According to some embodiments of this application, a schematic diagram of the IR statement corresponding to the code that generates the system component Row is shown.

[0053] Figure 10b According to some embodiments of this application, a schematic diagram of the IR statement corresponding to the code that generates a custom component ChildItem is shown.

[0054] Figure 10c According to some embodiments of this application, a schematic diagram of an IR statement corresponding to the code that generates if / else control statements is shown.

[0055] Figure 11 According to some embodiments of this application, a flowchart illustrating a process for constructing a DubTree corresponding to a WiFi icon component is shown.

[0056] Figure 12a According to some embodiments of this application, a schematic diagram of the source code corresponding to a WiFi icon component is shown.

[0057] Figure 12b According to some embodiments of this application, a schematic diagram of the IR statement corresponding to the source code of a WiFi icon component is shown.

[0058] Figure 13 According to some embodiments of this application, a schematic diagram of a DubTree corresponding to a WiFi icon component is shown.

[0059] Figure 14 According to some embodiments of this application, a schematic diagram of node construction is shown.

[0060] Figure 15 According to some embodiments of this application, a schematic diagram of the desktop of an electronic device is shown.

[0061] Figure 16 According to some embodiments of this application, a simplified partial data relationship diagram corresponding to a status bar is shown.

[0062] Figure 17 According to some embodiments of this application, a schematic diagram of the structure of an Ark Analyzer is shown.

[0063] Figure 18 According to some embodiments of this application, a schematic diagram of the structure of an electronic device is shown. Detailed Implementation

[0064] The illustrative embodiments of this application include, but are not limited to, a user interface component data analysis method, electronic device, medium, and program product.

[0065] The electronic devices in this application embodiment can also be referred to as terminal devices, terminals, user equipment (UE), mobile stations (MS), mobile terminals (MT), etc. Electronic devices can be mobile phones, smart TVs, wearable devices, tablets, computers with wireless transceiver capabilities, virtual reality (VR) terminal devices, augmented reality (AR) terminal devices, wireless terminals in industrial control, wireless terminals in self-driving vehicles, wireless terminals in remote medical surgery, wireless terminals in smart grids, wireless terminals in transportation safety, wireless terminals in smart cities, or wireless terminals in smart homes, etc.

[0066] To make the solutions in the embodiments of this application clearer, the terms involved in the embodiments of this application will be explained first.

[0067] User interface (UI): This can be the functional pages in the application. Each page can have its own file management and can perform scheduling and management between pages, such as navigation and back operations, through the page routing application programming interface (API).

[0068] Components: The smallest units for building and displaying a UI, such as lists, grids, buttons, radio buttons, progress bars, and text. Developers combine various components to create user interfaces that meet the application's requirements.

[0069] ArkTS programming language: This is the application development language for the HarmonyOS ecosystem. It provides capabilities such as a declarative UI paradigm and state management support, allowing developers to create applications in a simpler and more natural way. For example... Figure 1aAs shown, the ArkTS programming language, while maintaining the basic syntax style and good features of the TS programming language (i.e., preserving a common subset), strengthens static checking and analysis by constraining inappropriate features in TS through standardization. This allows for the detection of more errors during the development phase before program execution, improving code robustness and achieving better runtime performance. Simultaneously, considering the application's development experience and execution efficiency requirements, it adds more features and functions, such as providing a declarative UI paradigm and state management support, enabling developers to create high-performance applications in a simpler and more natural way.

[0070] ArkUI (Ark User Interface) is a UI development framework for building distributed application interfaces. It provides a complete infrastructure for application UI development, including concise UI syntax, rich UI features (components, layouts, animations, and interactive events), and real-time interface preview tools, enabling developers to create visual interfaces.

[0071] Figure 1b This diagram illustrates the ArkUI development framework. Figure 1b As shown, the ArkUI development framework provides two development paradigms: a declarative development paradigm based on ArkTS (referred to as "declarative development paradigm") and a JS-compatible web-like development paradigm (referred to as "web-like development paradigm").

[0072] Among them, the declarative development paradigm uses the ArkTS language, which is a minimalist, high-performance UI development framework that supports cross-device development. It provides the necessary capabilities for building application UIs, such as UI rendering capabilities from three dimensions: components, animations, and state management.

[0073] The web-like development paradigm adopts a classic three-part development approach: HarmonyOS markup language (HML), cascading style sheets (CSS), and JavaScript. This means using HML tag files to build the layout, CSS files to describe styles, and JS files to process logic. This paradigm is more in line with the usage habits of web front-end developers, facilitating the rapid transformation of existing web applications into ArkUI framework applications.

[0074] Among them, such as Figure 1bAs shown, the UI backend engine, language runtime, rendering engine, toolchain, and platform adaptation layer are shared between the two development paradigms. Compared to web-like development paradigms, the declarative development paradigm eliminates the need for a JS framework to manage the document object model (DOM), resulting in a simpler rendering method and lower memory consumption. Furthermore, the declarative development paradigm is closer to natural language programming, allowing developers to intuitively describe the UI and achieve efficient and concise development. Therefore, the declarative development paradigm is generally adopted for application development today.

[0075] The following section provides a detailed introduction to the development capabilities offered by the declarative development paradigm in the ArkUI development framework.

[0076] Layout Development Capabilities: Layout is an essential element of UI, defining the position of components within the interface. The ArkUI development framework provides various layout methods, including basic linear layout, cascading layout, flexible layout, relative layout, and grid layout, as well as more complex lists, grids, and carousels.

[0077] Component Development Capabilities: Components are essential elements of the UI, defining the appearance of the interface. Components directly provided by the framework are called system components, while those defined by developers are called custom components. Built-in system components include buttons, radio buttons, progress bars, and text. Developers can set the rendering effects of built-in system components through chained calls. Developers can combine built-in system components into custom components, thus componentizing the page into independent UI units. This allows for the independent creation, development, and reuse of different units on the page, resulting in stronger engineering capabilities.

[0078] Page routing and component navigation development capabilities: Applications may contain multiple pages, and page routing can be used to navigate between pages. Within a single page, there may be navigation between components, such as typical column navigation, which can be implemented using navigation components.

[0079] Graphics development capabilities: The ArkUI development framework provides the ability to display various types of images and various custom drawing capabilities to meet the custom drawing needs of developers. It supports drawing shapes, filling colors, drawing text, deformation and cropping, and embedding images.

[0080] Animation Capabilities: Animation is one of the most important elements of UI. Excellent animation design can greatly enhance the user experience. The framework provides rich animation capabilities, including not only built-in animation effects in components, but also property animation, explicit animation, custom transition animation, and animation APIs. Developers can implement custom animation trajectories through the encapsulated physical model or by calling the animation capability APIs.

[0081] Interaction Events: Interaction events are essential elements of UI and user interaction. The ArkUI development framework provides a variety of interaction events, including common events such as touch events, mouse events, keyboard key events, and focus events, as well as gesture events that are further identified based on common events. Gesture events include single gestures such as click gestures, long press gestures, drag gestures, pinch gestures, rotation gestures, swipe gestures, and combined gesture events that combine single gesture events.

[0082] Customization capabilities: Customization capabilities are the abilities provided by the UI development framework to developers to develop and customize the UI interface. These include: custom composition, custom extensions, custom nodes, and custom rendering.

[0083] Figure 2 This diagram illustrates a user interface.

[0084] like Figure 2 As shown, in an electronic device (e.g., a mobile phone) 100, the user interface 1010 displays the text "Hello World" 1011 and a "click me" button 1012. In response to the user clicking the "click me" button 1012, the electronic device 100 can display the text "Hello ArkUI" 1013.

[0085] The following is based on Figure 2 The development process of the user interface is illustrated using a portion of the creation code for user interface 1010 as an example. This development process may include the following steps:

[0086] 1. Create a component. A created component can include one or more other components. For example, the code for creating the component corresponding to user interface 1010 could be as follows:

[0087]

[0088] The code above indicates the creation of a container component Column, which includes text components Text('item 1') and Text('item 2') and an image component Image('https: / / xyz / test.jpg'). 'item 1' can be set to the text "Hello", 'item 2' can be set to the text "World", and the image component can correspond to the image of the "click me" button 1012.

[0089] 2. Configuration Properties. Configuration properties can include attributes for configuring each component. Attributes refer to various parameters and settings that define and configure UI components. These attributes determine the component's appearance, behavior, and functionality. For example, the attributes of a text component may include one or more of the following characteristics: size (e.g., height and width), font size, color, or font.

[0090] For example, the code for configuring the font size (12), color (red), and font weight (bold) attributes of the text component in user interface 1010 can be as follows:

[0091]

[0092] For example, the code for configuring the width (100) and height (100) properties of the image component in the user interface 1010 can be as follows:

[0093]

[0094] 3. Configuring events. Configuring events refers to configuring the events corresponding to a component. For example, the text component "this.myText" can be predefined as... Figure 2 The code for configuring the events of the text component "this.myText" using arrow functions, corresponding to the "world" text component, can be as follows:

[0095]

[0096] The code above indicates that after clicking the "Click me" button 1012, the text component "this.myText" will display ArkUI.

[0097] 4. Configure sub-components.

[0098] If a component supports child component configuration, you need to add the UI description of the child components in the trailing closure "{...}". Components such as Column, Row, Stack, Grid, and List are all container components and can be configured with corresponding child components. For example, the code to configure the child component of the Column component as "text "HELLO" and font (100)" and the code to configure the child component of the Column component as "text "this.myText", font (100) and color (red)" can be as follows:

[0099]

[0100] In a declarative development paradigm, the UI is the result of the program's execution state, and the application's runtime state is the parameter. When the parameter changes, the UI, as the return result, will also undergo corresponding variable changes. These runtime state changes leading to UI re-rendering are collectively referred to as the state management mechanism in the ArkUI development framework. Variables must be decorated with decorators to become state variables, and changes to state variables will trigger UI rendering refreshes. Without state variables, the UI will only be rendered during initialization and will not be refreshed subsequently.

[0101] Figure 3 It illustrates the relationship between state and the UI. From Figure 3 As can be seen, when the UI receives a corresponding event, it can trigger a state change, which in turn can cause the UI to re-render. For example, for Figure 2 As shown, when the user interface 1010 of the electronic device 100 receives an event from the user clicking the "click me" button 1012, the state corresponding to the "click me" button 1012 will change from never triggered to triggered, causing the user interface 1010 to re-render and display the "HelloArkUI" text 1013.

[0102] The following section introduces the decorators used for state management in the UI.

[0103] The ArkUI development framework provides a variety of decorators for state management. By using these decorators, you can not only change state variables within a component, but also pass state variables between different component levels, such as parent and child components or across component levels, and also change state variables globally.

[0104] Based on the scope of influence of state variables, decorators can be broadly categorized into decorators that manage component-owned state and decorators that manage application-owned state. Decorators managing component-owned state handle state at the component level, enabling changes within a component and across different component levels, but requiring all components to be on the same component tree, i.e., within the same page. Decorators managing application-owned state handle state at the application level, enabling state changes across different pages and even different UI capabilities; they provide global state management within the application. From the perspective of data transmission methods and synchronization types, decorators can also be divided into read-only unidirectional transmission and mutable bidirectional transmission.

[0105] Figure 4This diagram illustrates the decorators corresponding to component-level state management and application-level state management. Developers can achieve bidirectional synchronization between application and component states using the `@StorageLink` / `@LocalStorageLink` decorator, and unidirectional synchronization using the `@StorageProp` / `@LocalStorageProp` decorator.

[0106] The following section introduces the various decorators corresponding to component-level state management.

[0107] @State: Variables decorated with @State have the state of their parent component and can serve as a data source for one-way and two-way synchronization of their child components.

[0108] When its value changes, it will cause the rendering of the relevant components to be refreshed.

[0109] @Prop: Variables decorated with @Prop can establish a one-way synchronization relationship with the parent component. Variables decorated with @Prop are mutable, but modifications will not be synchronized back to the parent component.

[0110] @Link: Variables decorated with @Link can establish a two-way synchronization relationship with the parent component. Modifications to variables decorated with @Link in the child component will be synchronized to the data source in the parent component that has established two-way data binding, and updates to the parent component will also be synchronized to variables decorated with @Link.

[0111] @Provide / @Consume: Variables decorated with @Provide / @Consume are used to synchronize state variables across component levels (multi-level components). They do not need to be passed through parameter naming mechanisms; they can be bound through aliases or property names.

[0112] It is understandable that decorators corresponding to component-level state management can also include... Figure 4 Other decorators not shown may include, for example:

[0113] @Observed: The @Observed decorator class is used to decorate classes that need to implement multi-level nested scenarios.

[0114] Pack

[0115] @Observed alone has no effect; it needs to be used in conjunction with @ObjectLink or @Prop.

[0116] @ObjectLink: The variable decorated with @ObjectLink receives an instance of the class decorated with @Observed. It is used to implement multi-level nested scenarios and to build bidirectional synchronization with the data source of the parent component.

[0117] The following section introduces the various decorators corresponding to application-level state management:

[0118] @StorageProp and @StorageLink are used to enable interaction between AppStorage and components. AppStorage is a special type of local storage for an application; it's an application-level database, process-bound, and can be interacted with by components through @StorageProp and @StorageLink. AppStorage acts as the "central hub" of the application's state, storing data that needs to be interacted with by components (UI), such as persistent storage data and environment variables. The UI then accesses this data through decorators or APIs provided by AppStorage. Local storage is typically used for page-level state sharing, and can be interacted with by the UI through the @LocalStorageProp and @LocalStorageLink decorators.

[0119] It's understandable that users can develop UIs using the ArkUI framework. After development, the corresponding code typically needs analysis to understand the dependencies between components and assess whether it meets requirements—essentially evaluating code performance—to facilitate optimization. However, the current lack of analysis methods for code developed using a declarative development paradigm hinders the analysis of UI code developed in this way, impacting UI development efficiency.

[0120] In some implementations, code analysis can be performed using SourceInsight, a traditional text editing tool. SourceInsight primarily utilizes a call graph to analyze relationships between symbols, including function relationships and data relationships. Function relationship analysis is achieved through static function recognition graphs and function call graphs. Data relationship analysis is achieved through a syntax parser, a symbol database, and cross-reference relationships.

[0121] However, the relationships between UI components in code developed based on the declarative development paradigm are not function call relationships, but rather nested relationships between parent and child components, and parallel relationships between sibling components. Therefore, the above solution cannot analyze the relationships between UI components. Furthermore, the function calls involved in code developed based on the declarative development paradigm (e.g., a component calls a property function after initialization, and an event function is called when an event is triggered) are generally based on rules or runtime user click events, and cannot be simply represented using a function call graph. Therefore, the above solution cannot analyze code developed based on the declarative development paradigm.

[0122] In other implementations, code analysis can be performed using a control-flow graph (CFG). Each vertex in the CFG corresponds to a basic program block (or program block), which is a piece of code without branch instructions or branch destinations. The beginning of a program block is the entry point of a branch, and the end of a program block is the end of a branch. Directed edges are used to represent branches in the control flow. In most implementations, there are two specially designated program blocks: the entry block, which is the first program block encountered when entering the CFG, and the exit block, which is executed at the end of all flows.

[0123] Figure 5 Several schematic diagrams of control flow graphs are shown.

[0124] Figure 5 Figure (a) illustrates a control flow graph in the form of if-then-else. For example, it can be shown that after executing program block A1, if the execution result of program block A1 is the first result, then program blocks A2 and A4 are executed; if the execution result of program block A1 is not the first result, then program blocks A3 and A4 are executed.

[0125] Figure 5 Figure (b) illustrates the control flow graph of a while loop. For example, it can represent first checking whether the result of program block A1 is true; if yes, program block A2 is executed; otherwise, program block A3 is executed. After executing program block A2, the loop variable is incremented, for example, i = i + 1, and then the result of program block A1 is retrieved again.

[0126] Figure 5Figure (c) illustrates a control flow graph of a natural loop with two exit points. For example, it can represent first checking if the result of block A1 is true; if yes, block A2 is executed; otherwise, block A4 is executed. After executing blocks A2 and A3, the loop variable is incremented (e.g., i = i + 1), and then the result of block A1 is retrieved again. Furthermore, after executing block A2, if a `break` instruction is detected, block A4 is executed directly. It can be understood that if there are no `goto` statements within the program that jump from outside the loop to inside the `for` or `while` loop, it is said to be reducible; otherwise, it is said to be unreducible. Figure 5 The control flow graph shown in (c) is reducible.

[0127] Figure 5 Figure (d) illustrates an unreducible control flow graph with two entry points in a loop form. For example, after executing block A1, the first branch executes block A2, checks if the result of block A2 is true, and if so, executes block A3; otherwise, executes block A4. The second branch executes block A3 based on a goto statement, and after executing block A3, increments the loop variable (e.g., i = i + 1), and then continues to retrieve the result of block A2.

[0128] It is understandable that CFG is a core technology for program analysis, used for control flow analysis, such as reachability analysis, infinite loop analysis, or execution path analysis. However, it cannot analyze code developed based on the declarative development paradigm. For example, when conditional control or loop semantics have changed, CFG cannot present the rendering differences of UI components.

[0129] In summary, existing methods for analyzing program user interface components are incapable of analyzing code developed based on a declarative development paradigm.

[0130] To address the aforementioned issues, this application provides a user interface component data analysis method. After obtaining the build code corresponding to the application, one or more UI components (including system components and custom components) and their feature information can be obtained from the build code. Furthermore, data relationships between the UI components are constructed based on these feature information. The feature information of the components includes one or more of the following: component attribute features, event features, state variable features, or subcomponent features.

[0131] As mentioned earlier, there is currently a lack of methods for analyzing code developed using the declarative development paradigm, which makes it impossible to analyze such code and affects application development efficiency. The user interface component data analysis method provided in this application embodiment can perform detailed analysis of application code developed using the declarative development paradigm, obtain the data relationships between various UI components in the application, and thus facilitate users in adjusting and optimizing the code based on the analysis results, improving application development efficiency.

[0132] The user interface component data analysis method provided in the embodiments of this application will be described in detail below.

[0133] Figure 6 This diagram illustrates a flowchart of a user interface component data analysis method. This user interface component data analysis method can be executed by an electronic device, such as... Figure 6 As shown, user interface component data analysis methods may include:

[0134] 101: Obtain the source code file corresponding to the application.

[0135] In some embodiments, the creation code for an application can be source code developed by the user based on the requirements of each UI element within the application. In some embodiments, each application may include one or more UI elements, and the user can encapsulate the creation code corresponding to the UI components within one or more UI elements together to form the application's source code file. The electronic device can obtain the application's source code file by inputting the location of the application's source code file.

[0136] 102: Obtain at least one UI component and its corresponding feature information from the source code file.

[0137] It is understandable that source code files can include code corresponding to one or more UI components.

[0138] UI components are the building blocks of a UI, the smallest units for UI construction and display. They can include system components and custom components. System components can be components directly provided by a development framework (such as the ArkUI development framework), while custom components can be components developed and defined by developers according to actual needs, or custom components can be extensions of system components. Both system components and custom components can include various types of components, such as container components and base components. Container components can include components such as rows, stacks, or columns, while base components can include components such as buttons, radio buttons, progress bars, text, or images. Container components can include multiple child components.

[0139] In some embodiments, the feature information corresponding to a UI component may include one or more of the following: state variable features, attribute features, event features, or sub-component features.

[0140] In some embodiments, attribute characteristics refer to various parameters and settings that define and configure UI components. These attributes determine the appearance, behavior, and functionality of the component. For example, the attribute characteristics of a text component may include one or more of the following: size (e.g., height and width), font size, color, or font. For example, the attribute characteristics of a stack container component may include attributes such as child component alignment.

[0141] In some embodiments, state variable features may include: state variables and decorators. The descriptions of state variables and decorators have been previously presented and will not be repeated here.

[0142] In some embodiments, event characteristics may include the event triggering operation and the event result corresponding to the triggering operation. The triggering operation may include any operation executable on the UI interface, such as a click, swipe, or input operation. For example, for Figure 2 In the example shown, the triggering action could be clicking the "click me" button 1012, and the corresponding event result could be changing the "Hello World" text to "Hello ArkUI" text. As another example, the event triggering action could be detecting a wireless fidelity (WiFi) connection, and the corresponding event result could be displaying a WiFi icon.

[0143] In some embodiments, child component characteristics include parent-child transitive characteristics, such as inheritance relationships. In some embodiments, inheritance relationships include parent-child inheritance relationships. When a component has child components, there is an inheritance relationship between the child component and the component.

[0144] In some embodiments, the attribute characteristics and event characteristics of a component can be represented by different representation forms such as the corresponding 3-address code, intermediate representation (IR) statements, and abstract syntax tree (AST) statements in the source code.

[0145] In some embodiments, methods for obtaining UI components and their corresponding feature information from the creation code may include:

[0146] Obtain the code corresponding to at least one UI component in the UI from the source code file, generate the intermediate representation (IR) statement corresponding to at least one UI component based on the code corresponding to at least one UI component, and obtain the feature information corresponding to at least one UI component based on the intermediate representation (IR) statement corresponding to at least one UI component.

[0147] Among them, the method of obtaining UI components and their corresponding feature information based on the creation code is as follows: Figure 8 The details are explained in detail elsewhere, so they will not be repeated here.

[0148] 103: Establish a data relationship for at least one UI component based on at least one UI component and the feature information corresponding to at least one UI component.

[0149] In some embodiments, the corresponding data relationships of UI components may include one or more of the following: In one possible implementation, the data relationships corresponding to at least one user interface component include at least one of the following: a correspondence between N user interface components and the feature information corresponding to each of the N user interface components, where N is a positive integer; or, a correspondence between one user interface component among the N user interface components and the other user interface components among the N user interface components, where N is a positive integer greater than 1; or, a correspondence between the feature information corresponding to one user interface component among the N user interface components and the feature information corresponding to the other user interface components among the N user interface components, where N is a positive integer greater than 1; or, a correspondence between one feature information corresponding to one user interface component among the N user interface components and the other feature information among the multiple feature information corresponding to one user interface component, where N is a positive integer.

[0150] Figure 7 This illustrates a data relationship diagram for UI components, such as... Figure 7 As shown, the data relationship diagram of UI components can include multiple nodes, such as the root node, child nodes (sub) under the root node, and UI component nodes under the child nodes. The root node and its child nodes (sub) are also UI component nodes.

[0151] Each UI component node can be bound to the characteristic information of that UI component (such as attribute characteristics, event characteristics, and state variable characteristics, etc.), for example, Figure 7 As shown, UI component 10 can be bound to data features (or attribute features) and event features corresponding to UI component 10.

[0152] Feature information between multiple UI components can also be bound, for example... Figure 7 As shown in Figure ①, the state variables in UI component 10 are associated with the state variables in UI component 20, and the state variables in UI component 30 are associated with the state variables in UI component 20. Therefore, the state variables in UI component 10 and UI component 20 can be bound together, and the state variables in UI component 30 and UI component 20 can be bound together as well. Figure 7 As shown in ②, the events in UI component 20 and the data in UI component 30 are associated, so the events in UI component 20 and the data in UI component 30 can be bound.

[0153] The characteristic information of the same UI component can also be bound together, for example, Figure 7 As shown in ③, if there is a relationship between the data features and event features in UI component 10, then the data features and event features can be bound together.

[0154] Multiple UI components can be bound together through inheritance, for example, Figure 7 As shown, UI component 20 is a child component of UI component 10, and UI component 10 is a child component of sub component 40. Therefore, UI component 10 can be bound to UI component 20, and sub component 40 can be bound to UI component 10. In some embodiments, such as... Figure 7 As shown in ④, sub-component 40 can also be bound to UI component 20.

[0155] It should be noted that the binding in the embodiments of this application may refer to the establishment of an association relationship.

[0156] In this embodiment, data relationships corresponding to at least one user interface component can be established in the form of a data binding tree based on at least one user interface component and its corresponding feature information. The data binding tree can be, for example, a declarative UI-Data Binding Tree (DubTree). The DubTree can include structures representing data relationships, such as node structures, edge structures, and data flow marker structures. The method of constructing the DubTree corresponding to a UI component will be described later and will not be repeated here. In some embodiments, the data relationships of the UI can also be displayed to the user in any form, such as tables or other data charts; this embodiment does not limit this.

[0157] As mentioned earlier, there is currently a lack of methods for analyzing code developed using the declarative development paradigm, which makes it impossible to analyze such code and affects application development efficiency. The user interface component data analysis method provided in this application embodiment can perform detailed analysis of application code developed using the declarative development paradigm, obtain the data relationships between various UI components in the application, and thus facilitate users in adjusting and optimizing the code based on the analysis results, improving application development efficiency.

[0158] In this embodiment, the data relationship corresponding to at least one user interface component can be established in the form of a data binding tree by traversing the intermediate representation IR statement. This makes it easier to display the data relationship intuitively, facilitates users to view and analyze code performance, and improves user experience and UI development efficiency.

[0159] The following describes the method mentioned in step 102 above for obtaining UI components and their corresponding feature information based on the creation code. For example... Figure 8 As shown, the method may include:

[0160] 1021: Obtain the code corresponding to at least one UI component from the source code file.

[0161] It's understandable that UI components can include system components and custom components. Source code files can include developer documentation (or application source code files) and a software development kit (SDK) for custom components; the application source code files contain the source code of the custom components. The SDK includes definition files for system components, and these definition files contain the source code of the system components.

[0162] In some embodiments, the code corresponding to system components and custom components can be obtained based on the characteristics of system components and custom components.

[0163] The characteristic of system components is that their code is typically stored in definition files within the SDK source code files. These definition files have a standardized file extension, such as .d or .ts. Therefore, electronic devices can identify the definition file corresponding to a system component by recognizing its extension within the SDK file, and then retrieve the code for that system component from the definition file.

[0164] For example, Figure 9a The image illustrates the definition files for some system components (such as the Button component, checkbox component, column component, and Text component), such as... Figure 9a As shown, the file names of these system components all have the suffix .d.ts. Figure 9a The file path for the definition file of the system component can be sdk\default\openharmony\ets\component\xxx.d.ts.

[0165] In some embodiments, each component definition file contains interface definitions and component declarations. For example, the button system component is defined in the button.d.ts file, and the code for the interface definition and component declaration in the button.d.ts file can be as follows:

[0166] interface ButtonInterface{

[0167] }

[0168] declare const Button:ButtonInterface;

[0169] In some embodiments, custom components are characterized by being developed using pre-defined classes (e.g., classes decorated with the `@Component` decorator) or pre-defined functions (e.g., functions decorated with the `@builder` decorator). Therefore, the pre-defined classes and functions can be identified from the application source code files, and the code for the custom UI component can be determined based on these pre-defined classes or functions. The pre-defined class may include a class decorated with the `@Component` decorator, and the relevant code for the custom component is located in the `build` function of the class decorated with `@Component`. The pre-defined function may include a function decorated with `@builder`, and the relevant code for the custom component is located in the function body of the function decorated with `@builder`.

[0170] For example, Figure 9b The custom components corresponding to the application source code in the application source code file can include CustomerX1 component and CustomerX2 component, etc.

[0171] 1022: Generate the IR statement corresponding to the UI component based on the code corresponding to the UI component.

[0172] In some embodiments, the code corresponding to the UI component can be flattened to obtain the IR statement corresponding to the UI component.

[0173] It's understandable that code developed using the declarative development paradigm differs from traditional code. The key difference lies in the presence of nested components with parent-child relationships within the UI built on the declarative development paradigm. Flattening the code—that is, flattening the nested parent-child relationships—simplifies IR (Integer Logic) resolution. Flattening typically refers to converting nested control structures into a linear or planar form.

[0174] In some embodiments, the IR statements corresponding to the source code of the UI component can be generated based on an IR statement compiler or IR statement generator.

[0175] The following example illustrates how to obtain intermediate representation (IR) statements based on the code corresponding to UI components.

[0176] Figure 10a This diagram illustrates the IR statements corresponding to the code that generates a system component Row. It can be understood that the source code of the UI component is written in ArkTS. For example... Figure 10a As shown, the code for the system component Row takes the form of nested sub-components. The flattened IR statement can take the form of: component_name.create(), the IR statement corresponding to the sub-component, component_name.pop(). Here, the ".create" function indicates the start of the component or sub-component code, and the ".pop" function (or pop function) indicates the end of the component or sub-component code. The component name can be the name of the system component, such as Row.

[0177] Figure 10b This diagram illustrates the IR statement corresponding to the code that generates a custom component, ChildItem. For example... Figure 10b As shown, the flattened IR statement corresponding to the code of the custom component ChildItem can also be in the form of: component name.create(), the IR statement corresponding to the child component, component name.pop().

[0178] For custom components, a view node can be added after the custom component, i.e., a view.create() function can be added, the instance of the custom component can be written as the input parameter after the create function, and a view.pop() call can be added after view.create to achieve the same format as system components.

[0179] It is understood that, in some embodiments, the code of UI components developed based on the declarative development paradigm may also include rendering control statements to assist in UI construction. For example, this may include conditional rendering statements (e.g., if / else statements) to control whether a component is displayed, loop rendering statements to quickly generate components based on array data, lazy loading statements for large data volumes, and component rendering statements for hybrid development. Therefore, rendering control statements can also be flattened, for example, by creating ".create" and ".pop" functions corresponding to the rendering control statements.

[0180] The following example uses if / else control statements to illustrate the flattening method of rendering control statements.

[0181] Figure 10c This diagram illustrates the IR statement corresponding to the code that generates if / else control statements. For example... Figure 10c As shown, when flattening if / else control statements to generate IR statements, you can first create If.create, whose input parameter is the if condition statement condition, and use If.branch(0) and If.branch(1) to distinguish the starting position of the true and false branches of the condition rendering statement, and then create the If.pop function.

[0182] 1023: Obtain the feature information corresponding to the UI component based on the intermediate representation (IR) statement corresponding to the UI component.

[0183] In some embodiments, IR statements can be traversed to obtain feature information corresponding to the UI, and a data relationship between the UI component and the feature information can be constructed based on the feature information. The data relationship between the UI component and the feature information can be in the form of a data binding tree, such as a declarative UI-Data Binding Tree (DubTree). The DubTree can include structures representing data relationships, such as node structure, edge structure, and data flow marker structure.

[0184] In some embodiments, the data relationships in the UI can also be displayed to the user in any form, such as tables or other data charts, and this application embodiment does not limit this.

[0185] In some embodiments, building a DubTree corresponding to a UI component may include the following steps:

[0186] Iterate through each IR statement corresponding to the component.

[0187] When the first type of function in the IR statement is encountered, the first push node in the data binding tree is created; for example, the first type of function includes the `create` function. Figure 10a As shown, when traversing to Row.create() in the IR statement, the first node pushed onto the stack can be created, and the node content is the component name "Row".

[0188] When the container name corresponding to the current IR statement is found to be the same as the container name corresponding to the intermediate IR statement in the previous traversal (i.e., the container name has not changed), the feature information in the current IR statement is parsed. Based on the feature information, a data node corresponding to the first pushed node in the data binding tree and the association relationship between the data nodes and the first pushed node are created. The data node includes one or more of the following: data nodes corresponding to state variable features, data nodes corresponding to attribute features, data nodes corresponding to event features, or data nodes corresponding to child components. For example, using... Figure 10a As shown, when traversing to ".height('100%')" in the IR statement, a data node corresponding to the attribute feature can be created, with the data node content being "height('100%')", and the data node corresponding to the attribute feature can be associated with the first pushed stack node.

[0189] It is understood that in some embodiments, when the feature information of any UI component is associated with the feature information of other UI components, an association relationship can be created between the feature information of the UI component and the nodes corresponding to the feature information of other UI components. For example, if the attribute features of the first UI component are associated with the event features of the second UI component, then when traversing the IR statement and parsing the feature information in the IR statement, an association relationship can be established between the data nodes corresponding to the attribute features of the first UI component and the data nodes corresponding to the event features of the second UI component based on the attribute feature information of the first UI component and the event feature information of the second UI component.

[0190] When at least two of the multiple feature information of any component are related, an association relationship can be created between the nodes corresponding to at least two of the component's multiple feature information. For example, if the attribute feature of the first UI component is related to the event feature of the first UI component, then when traversing and parsing the feature information in the IR statement, an association relationship can be established between the data node corresponding to the attribute feature of the first UI component and the data node corresponding to the event feature of the first UI component.

[0191] When the second type of function in the IR statement is encountered, the first pop node in the data binding tree is created; for example, the second type of function includes the pop function. Figure 10a As shown in the figure, when traversing to Row.pop() in the IR statement, the corresponding pop node can be created, for example, by adding (pop, source code statement corresponding to pop function) to the attribute feature.

[0192] When the container name corresponding to the current IR statement is different from the container name corresponding to the previous IR statement, and the component corresponding to the first pushed node is an atomic component, the first popped node in the data binding tree is created, and the association between the first popped node and the data node is established. Here, an atomic component is an indivisible basic UI component unit. For example, ... Figure 10a In the example, when iterating through other component names (or container names) in the IR statement, for example, if the "stack" component is subsequently encountered (i.e., the component name changes from "Row" to "stack"), a corresponding pop node can be created. Alternatively, if the container name corresponding to the current IR statement is different from the container name corresponding to the previous IR statement, and the component corresponding to the first push node is an atomic component, then instead of creating a pop node, a new push node can be created. For example... Figure 10a In the example, when iterating through other component names (or container names) in the IR statement, for example, if the "stack" component is subsequently iterated through, i.e., the component name changes from "Row" to "stack", a corresponding push node can be created with the node content "stack".

[0193] When traversing rendering control statements, and then traversing the rendering control statements within intermediate representation statements, control nodes in the data binding tree and the relationships between control nodes and data nodes are created based on these rendering control statements. For example, ... Figure 10c As shown in the figure, when traversing to the If and If Branch statements, control nodes corresponding to the If and If Branch statements are added respectively, and the association between the control nodes corresponding to the If and If Branch and the first push node is established.

[0194] In this embodiment, by traversing IR statements, data relationships corresponding to at least one UI component can be established in the form of a data binding tree. For example, this includes establishing data relationships between nodes corresponding to UI component names and data nodes corresponding to UI component feature information, data relationships between data nodes corresponding to multiple feature information of the same UI component, data relationships between data nodes corresponding to feature information of different UI components, and parent-child inheritance relationships between nodes corresponding to UI component names. These relationships can be established using arrows, lines, or other connecting methods. This facilitates intuitive display of data relationships, allows users to easily view and analyze code performance, and improves user experience and UI development efficiency.

[0195] It's understandable that during the traversal of the IR statements of a UI component, the component's characteristic information can be obtained. Furthermore, the data binding tree of the IR statements can be created simultaneously during the traversal. This can speed up the creation of the data binding tree.

[0196] In some embodiments, each node can be recorded during IR statement traversal, and the data binding tree of the IR statement can be created after the traversal is completed.

[0197] The following example uses the WiFi icon in the status bar of an electronic device to illustrate the process of building the corresponding DubTree based on the component's source code. It can be understood that there are two WiFi icons: one displayed when the personal hotspot is turned on, and the other displayed when connecting to WiFi. Building the WiFi icon requires multiple components; these components will be referred to as the WiFi icon component.

[0198] like Figure 11 As shown, the process of building the DubTree corresponding to the WiFi icon component can include:

[0199] 201: Obtain the source code corresponding to the WiFi icon component.

[0200] In some embodiments, the WiFi icon component is a custom component, and a schematic diagram of its source code can be shown as follows. Figure 12a As shown. The source code for the WiFi icon component can be obtained from the `build` function of the class decorated with the `@Component` decorator in the application's source code file.

[0201] Among them, such as Figure 12a The logical meaning of each line of code shown is as follows:

[0202] Lines 1-8: Create the decorator @Component;

[0203] Line 10: Created a Stack container;

[0204] Line 11: if whether to enable hotspot;

[0205] Line 12: Creates an Image with content $r('app.media.ic_statusbar_wifi_hotspot4');

[0206] Line 13: Sets the icon change class, modifying the icon when the signal strength changes;

[0207] Line 14: Sets the icon width attribute;

[0208] Line 15: Device icon height attribute;

[0209] Line 17: if whether to connect to WiFi;

[0210] Line 18: Creates an Image with content $r('app.media.ic_statusbar_wifi_up');

[0211] Line 19: Sets the icon change class, modifying the icon when the data connection signal changes;

[0212] Line 20: Sets the icon width attribute;

[0213] Line 21: Device icon height attribute;

[0214] Line 24: Sets the accessibilityGroup property of the Stack container;

[0215] Line 25: Sets the accessibilityLevel property of the Stack container;

[0216] Line 26: Sets the accessibilityText property of the Stack container;

[0217] 202: Generate the IR statement corresponding to the WiFi icon component based on the source code of the WiFi icon component.

[0218] In some embodiments, the source code of the WiFi icon component can be flattened based on the compiler to obtain the IR statement corresponding to the source code of the WiFi icon component. Figure 12b It indicates Figure 12a The source code of the WiFi icon component shown corresponds to the IR statement. For example, line 10 of the source code for the WiFi icon component contains a stack component, which can create the stack.Create function (corresponding to line %3 in the IR statement). The specific method for generating the IR statement can be as shown in step 1022 above, and will not be repeated here.

[0219] 203: Parse the IR statement corresponding to the WiFi icon component and construct the DubTree corresponding to the WiFi icon component.

[0220] In some embodiments, the steps for parsing the IR statement corresponding to the WiFi icon component and constructing the DubTree corresponding to the WiFi icon component can be as follows:

[0221] like Figure 13 The DubTree diagram shown illustrates how, when the IR statement corresponding to line 10 (Stack({alignContent:Alignment.TopStart})) is detected... Figure 12bWhen %3 corresponds to the line, you can see the Stack.create function called in the IR statement to create node 1 "Stack" and push it onto the stack, i.e., create a node to be pushed onto the stack. Figure 14 As shown, the stack contents at this time include node 1 "Stack".

[0222] Simultaneously, the attribute feature of node 1 "Stack" is added (create, Stmt10 line statement). Stmt10 line statement represents the 10th line statement in the source code; adding the 10th line statement from the source code to the attribute feature creates the data node corresponding to the attribute feature. StmtN line statement represents the Nth line statement in the source code; adding the Nth line statement to the feature information creates the data node corresponding to that feature information. This will not be explained again later.

[0223] When the IR statement corresponding to line 11 (if(this.mWifiData.isHotspot)) is detected, Figure 12b When %7 corresponds to line (), you can see the If.create function in the IR statement, which creates node 2 "If". At this time, the top of the stack is node 1 "Stack", which is set as the parent node of node 2 "If". After node 2 "If" is created, it is pushed onto the stack, as shown below. Figure 14 As shown, the stack contents at this time include node 1 "Stack" and node 2 "If".

[0224] At the same time, add (create,Stmt line 11 statement) to the attribute of node 2 "If", and parse the IR statement corresponding to line 11 of the code ( Figure 12b When it is found that the state variable mWifiData is used in the %7 corresponding row, "mWifiData" is added to the state variable of node 2 "If".

[0225] When the IR statement is further examined, an If.branch function call is detected within the IR statement. Node 3 "If.branch" is created and pushed onto the stack, where node 2 "If" is the parent node of node 3 "If.branch". At this point, the stack contains node 1 "Stack", node 2 "If", and node 3 "If.branch".

[0226] When the IR statement corresponding to Image($r('app.media.ic_statusbar_wifi_hotspot4')) in line 12 of code is detected, Figure 12b (The line corresponding to %14 in the middle) shows the Image.create function call in the IR statement, creating node 4 "Image" and pushing it onto the stack. For example... Figure 14As shown, the stack contents at this time include node 1 "Stack", node 2 "If", node 3 "If.branch" and node 4 "Image".

[0227] At the same time, add the statement (create,Stmt 12 lines) to the attribute of node 4 "Image".

[0228] When a call to the Image.pop function is detected in an IR statement, node 4 "Image" is popped from the stack. For example... Figure 14 As shown, the stack contents at this time include node 1 "Stack", node 2 "If", and node 3 "If.branch".

[0229] At the same time, add the statement (pop,Stmt line 12) to the attribute of node 4 "Image" to create a popped node.

[0230] When the IR statement corresponding to line 13, .attributeModifier(this.signalLevelIconModifier), is detected... Figure 12b The corresponding line (%15) is reflected in the IR statement as setting the attributeModifier property of node 4 "Image", and adding (attributeModifier,Stmt line 13 statement) to the attribute of node 4 "Image".

[0231] When the IR statement corresponding to line 14, `width(this.style.statusBarWifiWidth)`, is detected... Figure 12b The corresponding line (%16) in the IR statement is to set the width property of node 4 "Image", which means adding the statement (width,Stmt14) to the property of node 4 "Image".

[0232] When the IR statement corresponding to line 15.height(this.style.statusBarWifiHeight) is detected, Figure 12b The corresponding line (%16) is reflected in the IR statement as setting the height attribute of node 4 "Image", and adding (height,Stmt) to the attribute of node 4 "Image" in line 15.

[0233] When the IR statement corresponding to line 16 "}" is detected ( Figure 12b The %16 line corresponds to the statement, which is represented in the IR statement as If.pop, which pops both node 2 "If" and node 3 "If.branch" from the stack, and adds (pop,Stmt line 16 statement) to the attribute of the If node.

[0234] Continue to examine the IR statements corresponding to lines 17 to 22 of the code. The steps are similar to those in lines 11 to 16 and will not be described again.

[0235] When the IR statement corresponding to line 23 is detected ( Figure 12b The corresponding line (%29) is represented as Stack.pop in the IR statement. This requires popping the Stack and adding (pop,Stmt) to the attribute of node 1 "Stack" (line 23).

[0236] When the IR statement corresponding to line 24.accessibilityGroup(this.isAccessibilityMode) is detected, Figure 12b The corresponding line (%30) is reflected in the IR statement as setting the accessibilityGroup attribute of node 1 "Stack", and adding (accessibilityGroup,Stmt line 24 statement) to the attribute of node 1 "Stack". Additionally, the parsing... Figure 12b When checking the row corresponding to %30, it was found that the state variable isAccessibilityMode was used. The state variable of node 1 "Stack" was added with "isAccessibilityMode".

[0237] When the IR statement corresponding to line 25.accessibilityLevel('yes') is detected ( Figure 12b In the IR statement, the accessibilityLevel property of node 1 "Stack" is set by adding the statement (accessibilityLevel,Stmt) to the property of node 1 "Stack" on line 25.

[0238] When the IR statement corresponding to line 26.accessibilityText(this.getAccessibilityText()) is detected, Figure 12b The corresponding line (%31) is reflected in IR by setting the accessibilityText property of node 1 "Stack" and adding (accessibilityText,Stmt line 26 statement) to the property of node 1 "Stack".

[0239] Thus, the DubTree corresponding to the WiFi icon component is built. The completed DubTree can be used as follows: Figure 13 As shown.

[0240] Understandable. Figure 11This example uses a single component to illustrate the process of building a DubTree. In some implementations, when building a DubTree, the DubTree corresponding to any number of components in the application (e.g., all components in the status bar) can be built simultaneously according to actual needs.

[0241] Figure 15 A schematic diagram of the desktop 1020 of an electronic device 100 is shown, as follows: Figure 15 As shown, the desktop 1020 of the electronic device may include a status bar 1021, and a simplified partial data relationship diagram corresponding to the status bar may be as follows: Figure 16 As shown. From Figure 16 As can be seen, building the status bar requires a RelativeContainer component, a component for building the time icon, a component for building the NFC icon, a component for building the Bluetooth icon, and a component for building the battery icon. Among these, the components for building the time icon, the NFC icon, the Bluetooth icon, and the battery icon are child components of the RelativeContainer component.

[0242] As you can understand, a RelativeContainer component is a relatively positioned container used to lay out child components according to their relative positions.

[0243] To build a time icon component, you need a component ROW1, which includes a sub-component ROW11. The sub-component ROW11 includes a time text component Textclock, which can include a text component Text (used to construct the corresponding time 08:08).

[0244] The component for building the NFC icon requires component ROW2, which includes sub-component ROW21, which in turn includes sub-component ROW22, which in turn includes an Image component (used to build the NFC image).

[0245] The component for building the Bluetooth icon requires the ROW3 component, which includes the ROW31 sub-component, the ROW31 sub-component includes the ROW32 sub-component, and the ROW32 sub-component includes the Image component (used to build the Bluetooth image).

[0246] The component for building the battery icon requires the ROW4 component, which includes the ROW41 sub-component. ROW41 includes a stack component and an Image component (used to build the battery power image). The stack component can include the Image component (used to build the battery image) and the Text component (used to build the remaining power value).

[0247] It is understandable that the data relationships between the various UI components in the status bar can include... Figure 16 The relationships between multiple UI components illustrated in the diagram can also include the relationships between the feature information of each UI component, the data relationships between the feature information of the same UI component, and the data relationships between the feature information of different UI components.

[0248] In this embodiment of the application, one or more DubTrees corresponding to UI components can be constructed according to actual needs. For example, a DubTree corresponding to one UI component can be constructed, or a DubTree corresponding to multiple UI components can be constructed, or a DubTree corresponding to multiple UI components corresponding to one or more UIs can be constructed, or a DubTree corresponding to multiple UI components corresponding to an application can be constructed, etc. This embodiment of the application does not impose any limitations.

[0249] Based on the user interface component data analysis method provided in this application embodiment, the application code developed based on the declarative development paradigm can be analyzed in detail to obtain the data relationships of each UI component in the application. This allows users to adjust and optimize the code based on the analysis results, thereby improving the application development efficiency.

[0250] In this embodiment, the data relationship corresponding to at least one user interface component can be established in the form of a data binding tree by traversing the intermediate representation IR statement. This makes it easier to display the data relationship intuitively, facilitates users to view and analyze code performance, and improves user experience and UI development efficiency.

[0251] In some embodiments, the aforementioned user interface component data analysis method can be executed via the Ark Analyzer integrated into the electronic device. Figure 17 A schematic diagram of an Ark Analyzer is shown. Figure 17 As shown, the Ark Analyzer can include a variety of APIs to facilitate Ark users and ecosystem partners in developing applications based on the Ark Analyzer model.

[0252] The Ark Analyzer can include multiple analysis frameworks for analyzing data, such as taint analysis framework, symbolic execution framework, program slicing framework, and extension framework.

[0253] The Ark Analyzer can include multiple analysis modules for analyzing data, such as control flow analysis, data flow analysis type analysis, value flow graph, scene data structure analysis, CFG, data flow graph (DFG), DubTree, pointer analysis, static single assignment (SSA), call graph (CG), interprocedural control-flow graph (ICFG), and import graph. The Ark Analyzer can also include execution modules such as solvers and symbolic execution.

[0254] The DubTree module can be used to execute the user interface component data analysis method provided in the embodiments of this application. For example, it can analyze the source code built based on the declarative development paradigm and build DubTree based on the source code, as well as provide APIs for the upper layer.

[0255] The Ark Analyzer can also include various compilers, such as three-address code, AST, Panda IR, and X-IR compilers. Among them, the AST compiler can be used for source code conversion, the Panda IR compiler is used for ABC bytecode conversion, and the X-IR compiler can be used for C / C++ language conversion.

[0256] The Ark Analyzer can include automated monitoring tools for HarmonyOS application quality, used to develop performance, security, and other checkers via APIs to achieve automated monitoring of application quality at a higher level. Quality monitoring tools, such as HomeCheck, help developers create high-quality, high-performance applications.

[0257] In terms of performance monitoring, it can achieve basic high-performance programming, cross-language programming, high-performance architecture paradigms, and high-performance UI development. In terms of security, it can prevent privacy leaks and permission abuse. In terms of maintainability, it can achieve complexity measurement and coupling analysis. In terms of stability, it can reduce application failure rates and reduce resource anomalies. In terms of compatibility, it can achieve compatibility with OS versions and application upgrade compatibility.

[0258] The hardware structure of the electronic device mentioned in the embodiments of this application will be described below. For example... Figure 18 As shown, Figure 18 A schematic diagram of the structure of the electronic device 100 is shown.

[0259] like Figure 18As shown, the electronic device 100 may include a processor 110, a power module 140, a memory 180, a mobile communication module 130, a wireless communication module 120, a sensor module 190, an audio module 150, a camera 170, an interface module 160, buttons 101, and a display screen 102, etc.

[0260] It is understood that the structures illustrated in the embodiments of the present invention do not constitute a specific limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may include more or fewer components than illustrated, or combine some components, or split some components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0261] Processor 110 may include one or more processing units, such as processing modules or circuits of a Central Processing Unit (CPU), Graphics Processing Unit (GPU), Digital Signal Processor (DSP), Micro-programmed Control Unit (MCU), Artificial Intelligence (AI) processor, or Field Programmable Gate Array (FPGA). Different processing units may be independent devices or integrated into one or more processors. Processor 110 may include storage units for storing instructions and data. In some embodiments, the storage unit in processor 110 is a cache memory 180.

[0262] The processor can be used to execute the user interface component data analysis method mentioned in the embodiments of this application.

[0263] In some embodiments, this application provides an electronic device that may include a processing module (sometimes also called a processing unit) and a transceiver module (sometimes also called a transceiver unit). The transceiver module is capable of both sending and receiving functions. When the transceiver module performs the sending function, it may be called a sending module (sometimes also called a sending unit); when the transceiver module performs the receiving function, it may be called a receiving module (sometimes also called a receiving unit). The sending module and the receiving module may be the same functional module, referred to as the transceiver module, which performs both sending and receiving functions; or, the sending module and the receiving module may be different functional modules, with "transceiver module" being a collective term for these functional modules.

[0264] In some possible implementations, the electronic device provided in the embodiments of this application further includes: a storage module (sometimes also called a storage unit) for storing any data, computer instructions and / or computer programs that may be involved in the embodiments of this application.

[0265] The processing module in this application embodiment is used to enable the electronic device to implement the user interface component data analysis method mentioned in this application embodiment. More detailed operation of the above processing module can be found in the description of the above method embodiments, and will not be repeated here.

[0266] It should be noted that the physical device corresponding to the processing module in this device can be a processor, and the physical device corresponding to the transceiver module can be a transceiver. Furthermore, the physical device corresponding to the storage module in this device can be a memory.

[0267] It should be noted that the information interaction and execution process between the modules of the above-mentioned device are based on the same concept as the method embodiment of this application, and the resulting technical effects are the same as those of the method embodiment of this application. For details, please refer to the description in the method embodiment shown above in this application, and it will not be repeated here.

[0268] This application provides an electronic device, including: one or more processors; one or more memories; the one or more memories storing one or more programs, which, when executed by one or more processors, cause the electronic device to perform the user interface component data analysis method mentioned in this application.

[0269] This application provides a readable storage medium storing a program or instructions. When the program or instructions are executed by an electronic device, the user interface component data analysis method mentioned in this application is implemented.

[0270] This application provides a computer program product, including instructions, which, when executed, cause the user interface component data analysis method mentioned in this application to be implemented.

[0271] This application provides a chip including a processor coupled to a memory for executing computer programs or instructions stored in the memory, thereby enabling the chip to implement the user interface component data analysis method mentioned in this application.

[0272] This application provides an electronic device, including a module for performing the user interface component data analysis method mentioned in this application.

[0273] The various embodiments of the mechanisms disclosed in this application can be implemented in hardware, software, firmware, or a combination of these implementation methods. Embodiments of this application can be implemented as computer programs or program code executable on a programmable system, the programmable system including at least one processor, a storage system (including volatile and non-volatile memory and / or storage elements), at least one input device, and at least one output device.

[0274] Program code can be applied to input instructions to execute the functions described in this application and generate output information. The output information can be applied to one or more output devices in a known manner. For the purposes of this application, the processing system includes any system having a processor such as, for example, a digital signal processor (DSP), a microcontroller, an application-specific integrated circuit (ASIC), or a microprocessor.

[0275] The program code can be implemented using a high-level procedural language or an object-oriented programming language to communicate with the processing system. Assembly language or machine language can also be used when needed. In fact, the mechanisms described in this application are not limited to any particular programming language. In either case, the language can be a compiled language or an interpreted language.

[0276] In some cases, the disclosed embodiments may be implemented in hardware, firmware, software, or any combination thereof. The disclosed embodiments may also be implemented as instructions carried or stored thereon on one or more temporary or non-temporary machine-readable (e.g., computer-readable) storage media, which may be read and executed by one or more processors. For example, the instructions may be distributed via a network or through other computer-readable media. Therefore, machine-readable media may include any mechanism for storing or transmitting information in a machine-readable (e.g., computer-readable) form, including but not limited to floppy disks, optical disks, CD-ROMs, magneto-optical disks, read-only memory (ROM), random access memory (RAM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), magnetic cards or optical cards, flash memory, or tangible machine-readable storage for transmitting information (e.g., carrier waves, infrared signals, digital signals, etc.) using the Internet in the form of electrical, optical, acoustic, or other propagation signals. Therefore, machine-readable media include any type of machine-readable medium suitable for storing or transmitting electronic instructions or information in a machine-readable (e.g., computer-readable) form.

[0277] In the accompanying drawings, some structural or methodological features may be shown in a specific arrangement and / or order. However, it should be understood that such a specific arrangement and / or order may not be necessary. Rather, in some embodiments, these features may be arranged in a manner and / or order different from that shown in the illustrative drawings. Furthermore, the inclusion of structural or methodological features in a particular figure does not imply that such features are required in all embodiments, and in some embodiments, these features may be omitted or may be combined with other features.

[0278] It should be noted that all units / modules mentioned in the device embodiments of this application are logical units / modules. Physically, a logical unit / module can be a physical unit / module, a part of a physical unit / module, or a combination of multiple physical units / modules. The physical implementation of these logical units / modules themselves is not the most important factor; the combination of functions implemented by these logical units / modules is the key to solving the technical problems proposed in this application. Furthermore, to highlight the innovative aspects of this application, the above-described device embodiments of this application have not introduced units / modules that are not closely related to solving the technical problems proposed in this application. This does not mean that the above-described device embodiments do not contain other units / modules.

[0279] It should be noted that in the examples and description of this patent, relational terms such as "first" and "second" are used merely to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one" does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0280] Although this application has been illustrated and described with reference to certain preferred embodiments thereof, those skilled in the art should understand that various changes in form and detail may be made thereto without departing from the spirit and scope of this application.

Claims

1. A method for analyzing user interface component data, characterized in that, For use in electronic devices, the method includes: Obtain the source code files corresponding to the application; Based on the source code file, at least one user interface component in the application and the corresponding feature information of the at least one user interface component are obtained. The feature information includes one or more of the following: state variable features, attribute features, event features, or sub-component features. Establish the data relationship between the at least one user interface component and the feature information corresponding to the at least one user interface component.

2. The user interface component data analysis method according to claim 1, characterized in that, The step of obtaining at least one user interface component in the application and the corresponding feature information of the at least one user interface component based on the source code file includes: Obtain the code corresponding to at least one user interface component in the application from the source code file, wherein the user interface component includes system components and custom components; Generate intermediate representation statements corresponding to the at least one user interface component based on the code corresponding to the at least one user interface component; The feature information corresponding to the at least one user interface component is obtained based on the intermediate representation statement corresponding to the at least one user interface component.

3. The user interface component data analysis method according to claim 2, characterized in that, The data relationship corresponding to the at least one user interface component includes at least one of the following: The correspondence between N user interface components and their corresponding feature information, where N is a positive integer; or, The correspondence between one user interface component and all other user interface components in the N user interface components, excluding the stated one, where N is a positive integer greater than 1; or, The correspondence between the feature information corresponding to one of the N user interface components and the feature information corresponding to the other user interface components (excluding the one user interface component mentioned above), wherein N is a positive integer greater than 1; or, The correspondence between a feature information corresponding to one of the N user interface components and other feature information (excluding the one feature information) among the multiple feature information corresponding to the one user interface component, where N is a positive integer.

4. The user interface component data analysis method according to any one of claims 2 or 3, characterized in that, The step of establishing the data relationship corresponding to the at least one user interface component based on the at least one user interface component and the feature information corresponding to the at least one user interface component includes: Based on the at least one user interface component and the feature information corresponding to the at least one user interface component, a data relationship corresponding to the at least one user interface component is established in the form of a data binding tree.

5. The user interface component data analysis method according to claim 4, characterized in that, The step of establishing the data relationship corresponding to the at least one user interface component in the form of a data binding tree based on the at least one user interface component and the feature information corresponding to the at least one user interface component includes: Traverse to the first type of function in the intermediate representation statement, create the first push node in the data binding tree, and the content of the first push node is the name of the user interface component carried in the first type of function; Traverse until the container name corresponding to the current intermediate representation statement is consistent with the container name corresponding to the previous intermediate representation statement, parse the feature information in the current intermediate representation statement, and create a data node corresponding to the first push node in the data binding tree and the association relationship between the data node and the first push node based on the feature information. The data node includes one or more of the following: the data node corresponding to the state variable feature, the data node corresponding to the attribute feature, the data node corresponding to the event feature, or the data node corresponding to the sub-component. Traverse to the rendering control statements in the intermediate representation statements, and create control nodes in the data binding tree and the association between the control nodes and the data nodes based on the rendering control statements; When traversing to the second type of function in the intermediate representation statement, create the first pop node corresponding to the first push node in the data binding tree and the association between the first pop node and the data node; or, when traversing to the point where the container name corresponding to the current intermediate representation statement is inconsistent with the container name corresponding to the previous intermediate representation statement, and the component corresponding to the first push node is an atomic component, create the first pop node corresponding to the first push node in the data binding tree and the association between the first pop node and the data node.

6. The user interface component data analysis method according to claim 5, characterized in that, The first type of function includes the create function, and the second type of function includes the pop function.

7. The user interface component data analysis method according to any one of claims 1-3, characterized in that, The state variable features include state variables and decorators.

8. The user interface component data analysis method according to any one of claims 1-3, characterized in that, The characteristics of the sub-components include parent-child inheritance relationships.

9. The user interface component data analysis method according to any one of claims 1-3, characterized in that, The attribute features include at least one of the following: size features, font size features, color features, font features, or alignment features.

10. The user interface component data analysis method according to any one of claims 1-3, characterized in that, The event characteristics include the event triggering operation and the event result corresponding to the triggering operation.

11. The user interface component data analysis method according to any one of claims 1-3, characterized in that, The user interface components include at least one of the following: button components, radio button components, progress bar components, text components, image components, or container components.

12. A readable storage medium, characterized in that, The readable storage medium stores a program or instructions that, when executed on an electronic device, cause the electronic device to perform the method of any one of claims 1 to 11.

13. An electronic device, characterized in that, include: One or more processors; One or more memories; the one or more memories storing one or more programs, which, when executed by the one or more processors, cause the electronic device to perform the method of any one of claims 1-11.

Images