Interface editor interface display methods and devices, electronic devices, storage media

Abstract

This application provides a method, apparatus, electronic device, and storage medium for displaying an interface editor. The method includes: obtaining the target visibility attribute selected by a second visibility option of a control, and displaying the target visibility attribute of the control in a hierarchy area. The target visibility attribute selected by the second visibility option refers to the runtime visibility attribute of the control. The hierarchy area also displays the design-time visibility attribute of the control, allowing users to directly obtain both the design-time and runtime visibility attributes of each control in the hierarchy area, improving user efficiency. Furthermore, in this embodiment, the hierarchy area simultaneously displays both the runtime and design-time visibility attributes of the control, effectively preventing users from omitting or incorrectly setting the runtime visibility attributes of the control, thus improving the accuracy of project design.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to interface display methods and apparatus for interface editors, electronic devices, and storage media. Background Technology

[0002] A UI editor can be used to design a UI (User Interface). There are two types of visibility property settings for controls in a UI editor: one is the design-time visibility property setting, which determines the visibility of the control in the design-time preview view; the other is the runtime visibility property setting, which determines the visibility of the control when the project is running.

[0003] The runtime visibility options for each control are only displayed in the interface editor when the control is selected. Interface designers use these runtime visibility options to set the runtime visibility properties of controls. When an interface designer wants to know the runtime visibility properties of each control, they need to select each control individually to check, which is a tedious process. Furthermore, since the design-time visibility properties directly determine the controls displayed in the preview view, while runtime visibility properties are not directly displayed in the preview view, interface designers often only remember to set the design-time visibility properties and forget to set the runtime visibility properties, ultimately leading to a discrepancy between the project's performance and the designer's expectations.

[0004] It should be noted that the information disclosed in the background section above is only used to enhance the understanding of the background of this disclosure, and therefore may include information that does not constitute prior art known to those skilled in the art. Summary of the Invention

[0005] In view of the above problems, this application is made to provide an interface display method and apparatus, electronic device, and storage medium for an interface editor that overcomes or at least partially solves the above problems, including:

[0006] A method for displaying the interface of an interface editor, the interface editor having a hierarchy area, a design view area, and a details area, wherein the hierarchy area displays control identifiers of various controls present in the design view area, and a first visibility option for each control, the first visibility option being used to select the visibility attribute of the corresponding control in the design view area; the details area displays a second visibility option for the selected control in the hierarchy area, the second visibility option being used to select the visibility attribute of the corresponding control at runtime; the method includes:

[0007] Obtain the target visibility attribute selected by the second visibility option of the control;

[0008] The target visibility properties of the control are displayed within the hierarchical area.

[0009] Optionally, displaying the target visibility attribute of the control within the hierarchy area includes:

[0010] Determine the target color corresponding to the target visibility attribute;

[0011] The color of the control identifier of the control within the hierarchical area is determined based on the target color;

[0012] or,

[0013] The background color of the control within the hierarchy area is determined based on the target color.

[0014] Optionally, the method further includes:

[0015] In response to the setting operation for the color corresponding to each visibility attribute of the second visibility option, the target color of the target visibility attribute is determined.

[0016] Optionally, displaying the target visibility attribute of the control within the hierarchy area includes:

[0017] Determine the target attribute identifier corresponding to the target visibility attribute;

[0018] Based on the target attribute identifier and the control identifier, generate a new control identifier for the control;

[0019] The new control identifier is used as the control identifier for the controls displayed within the hierarchy area.

[0020] Optionally, generating a new control identifier for the control based on the target attribute identifier and the control identifier includes:

[0021] Add the target attribute identifier before or after the control identifier of the control to generate a new control identifier for the control.

[0022] Optionally, displaying the target visibility attribute of the control within the hierarchy area includes:

[0023] Determine the target attribute identifier corresponding to the target visibility attribute;

[0024] Based on the target attribute identifier and the control identifier, generate a new control identifier for the control;

[0025] The new control identifier is used as the control identifier of the control displayed within the hierarchy area;

[0026] Determine the target color corresponding to the target visibility attribute;

[0027] The color of the target attribute identifier in the new control identifier of the control displayed in the hierarchical area is determined based on the target color.

[0028] Optionally, the method further includes:

[0029] In response to a modification operation on the target visibility attribute selected for the second visibility option of the control, the target visibility attribute of the control displayed in the hierarchy area is updated.

[0030] A user interface display device for an interface editor, the interface editor having a hierarchy area, a design view area, and a details area; the hierarchy area displays control identifiers of various controls present in the design view area, and a first visibility option for each control, the first visibility option being used to select the visibility attribute of the corresponding control in the design view area; the details area displays a second visibility option for the selected control in the hierarchy area, the second visibility option being used to select the visibility attribute of the corresponding control at runtime; the device includes:

[0031] The target visibility attribute acquisition module is used to acquire the target visibility attribute selected by the second visibility option of the control;

[0032] The target visibility attribute display module is used to display the target visibility attributes of the control within the hierarchical area.

[0033] Optionally, the target visibility attribute display module includes:

[0034] The target color determination module is used to determine the target color corresponding to the target visibility attribute;

[0035] A target color display module is used to determine the color of the control identifier of the control within the hierarchical area based on the target color; or, it is used to determine the background color of the control within the hierarchical area based on the target color.

[0036] Optionally, the device further includes:

[0037] The color setting module is used to determine the target color of the target visibility attribute in response to the color setting operation for each visibility attribute of the second visibility option.

[0038] Optionally, the target visibility attribute display module includes:

[0039] The target attribute identifier determination module is used to determine the target attribute identifier corresponding to the target visibility attribute;

[0040] The new control identifier determination module is used to generate a new control identifier for the control based on the target attribute identifier and the control identifier of the control;

[0041] The new control identifier display module is used to use the new control identifier as the control identifier of the control displayed in the hierarchy area.

[0042] Optionally, the new control identifier determination module is used to add the target attribute identifier before or after the control identifier of the control to generate a new control identifier for the control.

[0043] Optionally, the target visibility attribute display module includes:

[0044] The first determining module is used to determine the target attribute identifier corresponding to the target visibility attribute;

[0045] The second determining module is used to generate a new control identifier for the control based on the target attribute identifier and the control identifier of the control;

[0046] The first display module is used to use the new control identifier as the control identifier of the control displayed in the hierarchy area;

[0047] The third determining module is used to determine the target color corresponding to the target visibility attribute;

[0048] The second display module is used to determine the color of the target attribute identifier in the new control identifier of the control displayed in the hierarchical area based on the target color.

[0049] Optionally, the device further includes:

[0050] The target visibility attribute update module is used to update the target visibility attribute of the control displayed in the hierarchy area in response to a modification operation on the target visibility attribute selected for the second visibility option of the control.

[0051] An electronic device includes a processor, a memory, and a computer program stored in the memory and capable of running on the processor, wherein the computer program, when executed by the processor, implements the steps of the interface display method of the interface editor as described above.

[0052] A computer-readable storage medium storing a computer program that, when executed by a processor, implements the steps of the interface display method of the interface editor as described above.

[0053] This application has the following advantages:

[0054] In this embodiment, the target visibility attribute of the control is selected by the second visibility option and displayed in the hierarchy area. The target visibility attribute selected by the second visibility option refers to the runtime visibility attribute of the control. The hierarchy area also displays the design-time visibility attribute of the control, allowing users to directly access both the design-time and runtime visibility attributes of each control within the hierarchy area. Compared to existing technologies where users need to select each control individually to view its runtime visibility attributes, this embodiment allows users to easily access all control runtime visibility attributes, thereby improving user efficiency. Furthermore, in this embodiment, the hierarchy area simultaneously displays both the runtime and design-time visibility attributes of the control, effectively preventing users from omitting or incorrectly setting runtime visibility attributes, thus improving the accuracy of project design. Attached Figure Description

[0055] To more clearly illustrate the technical solution of this application, the drawings used in the description of this application will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0056] Figure 1 This is a flowchart illustrating the steps of a method for displaying an interface editor according to an embodiment of this application.

[0057] Figure 2 This is a schematic diagram of an interface editor in the prior art;

[0058] Figure 3 A schematic diagram of the interface of an interface editor obtained by processing an interface display method of an interface editor according to an embodiment of this application.

[0059] Figure 4 A schematic diagram of the interface of an interface editor obtained by processing an interface display method of an interface editor according to an embodiment of this application.

[0060] Figure 5 A schematic diagram of the interface of an interface editor obtained by processing an interface display method of an interface editor according to an embodiment of this application.

[0061] Figure 6 A schematic diagram of the interface of an interface editor obtained by processing an interface display method of an interface editor according to an embodiment of this application.

[0062] Figure 7 A schematic diagram of the interface of an interface editor obtained by processing an interface display method of an interface editor according to an embodiment of this application;

[0063] Figure 8 This is a schematic diagram illustrating the modification of the color corresponding to the visibility attribute of a second visibility option in an interface display method of an interface editor according to an embodiment of this application.

[0064] Figure 9 This is a structural block diagram of an interface display device for an interface editor according to an embodiment of this application. Detailed Implementation

[0065] To make the above-mentioned objectives, features, and advantages of this application more apparent and understandable, the application will be further described in detail below with reference to the accompanying drawings and specific embodiments. Obviously, the described embodiments are only some, not all, of the embodiments of this application. All other embodiments obtained by those skilled in the art based on the embodiments of this application without inventive effort are within the scope of protection of this application.

[0066] An interface editor can be an editor used to design the UI. For example, UMG (Unreal Motion Graphics UI Designer) is a visual UI creation tool that can be used to create UI elements that you want to present to users, such as HUDs (head-up displays) in games, menus, or other graphical elements related to the interface.

[0067] The interface editor has a hierarchy area, a design view area, and a details area. The hierarchy area displays the control identifiers (such as control names and numbers) of all controls present in the design view area, as well as the hierarchical relationships between controls. The design view area allows users to interact with the controls displayed within it, providing a real-time visual representation of the control layout. The details area displays detailed information about the selected control within the hierarchy area.

[0068] Each control within the hierarchy area has a corresponding visibility option. This visibility option determines the visibility attribute of the corresponding control in the design view area and does not affect the visibility of the control during project execution. In other words, the visibility attribute that actually takes effect during project execution is determined by the visibility option in the control's details area.

[0069] Specifically, please refer to Figure 2 , Figure 2This is a schematic diagram of an interface editor in the prior art. The visibility options in the hierarchy area include two visibility attributes: visible and invisible. When a control's visibility attribute is selected as visible (i.e., the control with an eye icon is in an open state), the control can be displayed in the design view area. Users can move the control displayed in the design view area to control its layout. Figure 2 Control 1 in the hierarchy. When a control's visibility option in the hierarchy is set to invisible (i.e., the control with an eye icon is in a closed-eye state), the control is hidden in the design view area. Users cannot perform any operations on the control in the design view area, nor can they see it. Figure 2 Control 2 in the hierarchy. When a user wants to view the visibility properties of a control at runtime, regardless of whether the control is displayed in the design view area, they need to select the control they want to view in the hierarchy area and then view the runtime visibility properties of the selected control in the behavior bar of the details area. For example... Figure 2 In the middle, select control 2 in the hierarchy area, and you can view the runtime visibility properties of control 2 in the details area.

[0070] Therefore, when users want to know the runtime visibility properties of each control, they need to select each control in the hierarchy area one by one and then view it in the details area, which is a rather cumbersome process. In addition, in actual work, since the visibility properties of controls during design directly determine the controls displayed in the preview view, while the runtime visibility properties cannot be directly displayed in the preview view, users often only remember to set the visibility properties of each control in the hierarchy area during design, but forget to set the runtime visibility properties of the controls in the details area, ultimately leading to the project's running effect differing from the user's expectations.

[0071] In view of this, this application provides a method for displaying the interface of an interface editor. By obtaining the runtime visibility attributes of controls, the runtime visibility attributes of controls are displayed in the hierarchy area. This allows users to directly know the design-time visibility attributes and runtime visibility attributes of each control in the hierarchy area, thereby improving user work efficiency. At the same time, it can effectively prevent users from omitting or incorrectly setting the runtime visibility attributes of controls, thus improving the accuracy of project design.

[0072] Reference Figure 1This document illustrates a flowchart of a method for displaying an interface in an interface editor according to an embodiment of this application. This method can be applied to an interface editor, allowing users to more easily obtain the runtime visibility attributes of various controls when designing a UI. The interface editor has a hierarchy area, a design view area, and a details area. Generally, to facilitate user control of the controls displayed in the design view area, the hierarchy area and the design view area are displayed simultaneously, while the details area can be hidden or displayed. The hierarchy area displays the control identifiers of each control present in the design view area, as well as a first visibility option for each control. The first visibility option is used to select the visibility attribute of the corresponding control in the design view area. The details area displays a second visibility option for the selected control in the hierarchy area, which is used to select the runtime visibility attribute of the corresponding control.

[0073] In this embodiment of the application, the method may include the following steps:

[0074] Step 101: Obtain the target visibility attribute selected in the second visibility option of the control;

[0075] Step 102: Display the target visibility attribute of the control within the hierarchy area.

[0076] This application embodiment obtains the target visibility attribute selected by the second visibility option of the control and displays the target visibility attribute of the control in the hierarchy area. The target visibility attribute selected by the second visibility option refers to the runtime visibility attribute of the control. The hierarchy area also displays the design-time visibility attribute of the control, allowing users to directly obtain the design-time and runtime visibility attributes of each control in the hierarchy area. Compared with the prior art, where users need to select each control individually to view the runtime visibility attributes of all controls, this application embodiment allows users to conveniently obtain the runtime visibility attributes of all controls, thereby improving user efficiency. Furthermore, in this application embodiment, the hierarchy area simultaneously displays the runtime and design-time visibility attributes of the control, effectively preventing users from omitting or incorrectly setting the runtime visibility attributes of the control, thus improving the accuracy of project design.

[0077] The interface display method of the interface editor in this exemplary embodiment will be further described below.

[0078] In step 101, the target visibility attribute selected by the second visibility option of the control is obtained.

[0079] In this embodiment, the control identifier of each control (including hidden controls in the design view area) present in the design view area is displayed in the hierarchy area. The control identifier can be the control's name or control number, etc., and can uniquely identify the control. For example, as... Figure 3 As shown, Control 1 and Control 2 displayed in the hierarchy area are both control identifiers. Because Control 1's first visibility option is set to visible (similar to an eye icon showing an open eye), Control 1 is displayed in the design view area; Control 2's first visibility option is set to invisible (similar to an eye icon showing a closed eye), therefore, Control 2 is not visible in the design view area.

[0080] Each control present in the design view has a corresponding second visibility option. Since the visibility of a control can vary at runtime, the second visibility option offers multiple selectable visibility attributes related to the control's runtime visibility. However, only one visibility attribute can be selected from the second visibility option to determine the control's runtime visibility. In this embodiment, the selected visibility attribute in the second visibility option is denoted as the target visibility attribute.

[0081] To facilitate understanding by those skilled in the art, UMG is used as an example below. The second visibility option has five visibility attributes, specifically including the Visible (control visible), Collapsed (the control will be collapsed, at which point it is invisible and does not occupy the space of the container control, and will not participate in the hit test), Hidden (the control is invisible, but will still occupy the space of the container control, and will not participate in the hit test), Hit test invisible (the control is visible, but it and all its child controls will not participate in the hit test), and Set hit test visible (the control is visible, it itself will not participate in the hit test, but its child controls will). The hit test refers to the fact that during project execution, only controls participating in the hit test will respond to clicks or touches when the user clicks or touches the control. When designing a project, for each control, the user can only select one of the above five visibility attributes to control the visibility of the corresponding control at runtime; the selected visibility attribute is the target visibility attribute.

[0082] In step 102, the target visibility attribute of the control is displayed within the hierarchy area.

[0083] After determining the target visibility attribute selected in the second visibility option for each control, the target visibility attribute is displayed in the corresponding position within the hierarchy area. This adds the display of the target visibility attribute selected in the second visibility option for each control to the existing display of the control identifier and the visibility attribute selected in the first visibility option. This allows users to directly see the design-time visibility attribute and runtime visibility attribute of each control in the hierarchy area, thereby improving user efficiency. At the same time, it can effectively prevent users from omitting or incorrectly setting the runtime visibility attribute of controls, thus improving the accuracy of project design.

[0084] In some optional embodiments of this application, the target visibility attribute for displaying the control within the hierarchy area may include:

[0085] Determine the target color corresponding to the target visibility attribute;

[0086] The color of the control identifier of the control within the hierarchical area is determined based on the target color.

[0087] In this embodiment, each visibility attribute of the second visibility option has a corresponding color, and the colors corresponding to different visibility attributes are different. Therefore, after obtaining the target visibility attribute selected by the second visibility option of the control, the target color corresponding to the target visibility attribute can be further determined, and then the color of the control identifier of the control in the hierarchy area can be determined according to the target color. In other words, after determining the target color corresponding to the target visibility attribute, the font color of the control identifier of the corresponding control in the hierarchy area can be adjusted to the target color.

[0088] Continuing with the UMG example, in this example, colors are pre-set for each visibility attribute. For instance, the Visible attribute corresponds to the first color, the Collapsed attribute to the second color, the Hidden attribute to the third color, the Hit testinvisible attribute to the fourth color, and the Set hit test visible attribute to the fifth color. When the target visibility attribute of a control is Hit test invisible, the text color of the control's identifier in the hierarchy area is changed to the fourth color. All controls are processed in the same way, so that the identifiers of all controls in the hierarchy area have the corresponding target color added. This allows the target visibility attribute selected by the second visibility option of the control to be determined by the color of the control's identifier.

[0089] like Figure 3As shown, after step 102, the first control is identified as Control 1, and its text color is the first color; the second control is identified as Control 2, and its text color is the second color. Therefore, the text color of the control identifiers displayed in the hierarchy area can be seen intuitively. Without selecting any control in the hierarchy area, the runtime visibility attribute of each control can be determined by the text color of its identifier. That is, the runtime visibility attribute of Control 1 is the Visible attribute, and the runtime visibility attribute of Control 2 is the Collapsed attribute.

[0090] In some optional embodiments of this application, the target visibility attribute for displaying the control within the hierarchy area may include:

[0091] Determine the target color corresponding to the target visibility attribute;

[0092] The background color of the control within the hierarchy area is determined based on the target color.

[0093] In this embodiment, each visibility attribute of the second visibility option has a corresponding color, and the colors corresponding to different visibility attributes are different. Therefore, after obtaining the target visibility attribute selected by the second visibility option of the control, the target color corresponding to the target visibility attribute can be further determined, and then the background color of the control in the hierarchy area can be determined according to the target color. In other words, after determining the target color corresponding to the target visibility attribute, the background color of the corresponding control in the hierarchy area can be adjusted to the target color.

[0094] Continuing with the UMG example, in this example, colors are pre-set for each visibility attribute. For instance, the Visible attribute corresponds to the first color, the Collapsed attribute to the second color, the Hidden attribute to the third color, the Hit test invisible attribute to the fourth color, and the Set hit test visible attribute to the fifth color. When the target visibility attribute of a control is Hit test invisible, the background color of that control within the hierarchy area is changed to the fourth color. All controls are processed in the same way, adjusting the background color of all controls within the hierarchy area to their corresponding target colors. This allows the target visibility attribute selected in the second visibility option of a control to be determined by the background color.

[0095] like Figure 4As shown, after step 102, the first control is identified as Control 1, and its background color is the first color; the second control is identified as Control 2, and its background color is the second color. Therefore, the background colors of the control identifiers displayed in the hierarchy area can be seen intuitively. Without selecting any control in the hierarchy area, the runtime visibility attribute of each control can be determined by the background colors of its identifiers. That is, the runtime visibility attribute of Control 1 is the Visible attribute, and the runtime visibility attribute of Control 2 is the Collapsed attribute.

[0096] In some optional embodiments of this application, the target visibility attribute for displaying the control within the hierarchy area may include:

[0097] Determine the target attribute identifier corresponding to the target visibility attribute;

[0098] Based on the target attribute identifier and the control identifier, generate a new control identifier for the control;

[0099] The new control identifier is used as the control identifier for the controls displayed within the hierarchy area.

[0100] In this embodiment, each visibility attribute of the second visibility option has a corresponding attribute identifier, which can be a name, abbreviation, or number that can uniquely identify the visibility attribute. After obtaining the target visibility attribute selected by the second visibility option of the control, the target attribute identifier corresponding to the target visibility attribute can be further determined. Then, based on the target attribute identifier and the control identifier of the control, a new control identifier of the control is generated. The new control identifier is used as the control identifier of the control displayed in the hierarchy area. For easy differentiation, the control identifier before the update is recorded as the original control identifier. Therefore, in this embodiment, the new control identifier replaces the original control identifier, and the new control identifier is generated based on the original control identifier and the target attribute identifier.

[0101] In an optional embodiment, generating a new control identifier for the control based on the target attribute identifier and the control identifier may include:

[0102] Add the target attribute identifier before or after the control identifier of the control to generate a new control identifier for the control.

[0103] In this embodiment, the new control identifier consists of the original control identifier and the target attribute identifier, so that the target visibility attribute of the control can be determined based on the control identifier displayed in the hierarchy area.

[0104] Continuing with the UMG example, in this example, attribute identifiers corresponding to each visibility attribute are pre-set. For example, the attribute identifier for the Visible attribute is VIS, the attribute identifier for the Collapsed attribute is COL, the attribute identifier for the Hidden attribute is HID, the attribute identifier for the Hit test invisible attribute is HTI, and the attribute identifier for the Set hit testvisible attribute is SHT. When the original control identifier of a control is Control1, and its target visibility attribute is Hit test invisible, a new control identifier for that control can be obtained. The new control identifier includes the original control identifier and the target attribute identifier. For example, the new control identifier for that control can be represented as: [HTI]Control1, or Control1[HTI], or HTIControl1, or HTI-Control1, etc. Furthermore, the new control identifier is displayed in the hierarchy area. That is, the control identifier corresponding to Control1 in the hierarchy area is updated to the newly generated control identifier, so that the target visibility attribute selected by the second visibility option of the control can be determined based on the control identifier displayed in the hierarchy area.

[0105] like Figure 5 As shown, after step 102, the original control identifier of the first control is Control 1, and the new control identifier is [VIS] Control 1; the original control identifier of the second control is Control 2, and the new control identifier is [COL] Control 2. Therefore, the new control identifiers displayed in the hierarchy area can be seen intuitively. Without selecting any control in the hierarchy area, the runtime visibility attribute of each control can be determined through its new control identifier. That is, the runtime visibility attribute of Control 1 is the Visible attribute, and the runtime visibility attribute of Control 2 is the Collapsed attribute.

[0106] It should be noted that the above embodiments regarding displaying the target visibility attributes of the control within the hierarchical area can be reasonably combined, and all of them fall within the protection scope of this application. For example, a target attribute identifier corresponding to the target visibility attribute can be determined, and a new control identifier for the control can be generated based on the target attribute identifier and the control identifier of the control. While displaying the new control identifier in the hierarchical area, the text color or background color of the new control identifier can be determined based on the target color corresponding to the target visibility attribute.

[0107] like Figure 6As shown, after step 102, the original control identifier of the first control is Control 1, and the new control identifier is [VIS] Control 1, with the text color of the new control identifier being the first color; the original control identifier of the second control is Control 2, and the new control identifier is [COL] Control 2, with the text color of the new control identifier being the second color. Therefore, the new control identifiers displayed in the hierarchy area can be seen intuitively. Without selecting any control in the hierarchy area, the runtime visibility attribute of each control can be determined by the new control identifiers and / or the text color of the new control identifiers. That is, the runtime visibility attribute of Control 1 is the Visible attribute, and the runtime visibility attribute of Control 2 is the Collapsed attribute.

[0108] In some optional embodiments of this application, the target visibility attribute for displaying the control within the hierarchy area may include:

[0109] Determine the target attribute identifier corresponding to the target visibility attribute;

[0110] Based on the target attribute identifier and the control identifier, generate a new control identifier for the control;

[0111] The new control identifier is used as the control identifier of the control displayed within the hierarchy area;

[0112] Determine the target color corresponding to the target visibility attribute;

[0113] The color of the target attribute identifier in the new control identifier of the control displayed in the hierarchical area is determined based on the target color.

[0114] In this embodiment, each visibility attribute of the second visibility option has a corresponding attribute identifier, which can be a name, abbreviation, or number that uniquely identifies the visibility attribute. After obtaining the target visibility attribute selected by the second visibility option of the control, the target attribute identifier corresponding to the target visibility attribute can be further determined. Then, based on the target attribute identifier and the control identifier of the control, a new control identifier for the control is generated. This new control identifier is used as the control identifier for the control displayed in the hierarchy area; that is, the new control identifier replaces the original control identifier. Simultaneously, each visibility attribute of the second visibility option has a corresponding color, and different visibility attributes correspond to different colors. Therefore, after obtaining the target visibility attribute of the second visibility option of the control, the target color corresponding to the target visibility attribute can be further determined. Then, based on the target color, the color of the target attribute identifier in the new control identifier of the corresponding control in the hierarchy area can be determined. In other words, after determining the target color corresponding to the target visibility attribute, the text of the target attribute identifier in the new control identifier of the corresponding control in the hierarchy area can be adjusted to the target color.

[0115] Alternatively, in another example, after determining the target color corresponding to the target visibility attribute, the background color of the target attribute identifier in the new control identifier of the corresponding control in the hierarchy area can be adjusted to the target color.

[0116] It should be noted that the process of displaying the target visibility attribute of a control in the hierarchical area in this embodiment is not limited to the order of steps in the above example. For example, the target attribute identifier and target color corresponding to the target visibility attribute can be determined. Then, the color of the target attribute identifier can be determined according to the target color, or the background color of the target attribute identifier can be determined according to the target color. Then, a new control identifier of the control can be generated according to the target attribute identifier carrying the target color information and the original control identifier of the control, and the new control identifier replaces the corresponding original control identifier in the hierarchical area.

[0117] Continuing with UMG as an example, in this example, attribute identifiers corresponding to each visibility attribute are pre-set. For example, the attribute identifier corresponding to the Visible attribute is VIS, the attribute identifier corresponding to the Collapsed attribute is COL, the attribute identifier corresponding to the Hidden attribute is HID, the attribute identifier corresponding to the Hit test invisible attribute is HTI, and the attribute identifier corresponding to the Set hit testvisible attribute is SHT. Furthermore, the colors corresponding to each visibility attribute are pre-set. For example, the Visible attribute corresponds to the first color, the Collapsed attribute to the second color, the Hidden attribute to the third color, the Hit test invisible attribute to the fourth color, and the Set hit test visible attribute to the fifth color. When the original control identifier of a control is Control1, and its target visibility attribute is Hit test invisible, a new control identifier can be obtained. The new control identifier includes the original control identifier and the target attribute identifier. For example, the new control identifier can be represented as: [HTI]Control1, or Control1[HTI], or HTIControl1, or HTI-Control1, etc. Furthermore, a new control identifier is displayed in the hierarchy area. That is, the control identifier corresponding to control 1 in the hierarchy area is updated to the newly generated control identifier. At the same time, the text color of the target attribute identifier part in the new control identifier is adjusted to the target color.

[0118] like Figure 7As shown, after step 102, the original control identifier of the first control is Control 1, and the new control identifier is [VIS] Control 1, with the text color of VIS in the new control identifier being the first color; the original control identifier of the second control is Control 2, and the new control identifier is [COL] Control 2, with the text color of COL in the new control identifier being the second color. Therefore, the new control identifiers displayed in the hierarchy area can be seen intuitively. Without selecting any control in the hierarchy area, the runtime visibility attribute of each control can be determined by the new control identifiers and / or the text color within them. That is, the runtime visibility attribute of Control 1 is the Visible attribute, and the runtime visibility attribute of Control 2 is the Collapsed attribute.

[0119] Optionally, the above-mentioned display of the target visibility attribute of the control in the hierarchy area may include: determining the target attribute identifier and target color corresponding to the target visibility attribute; then, determining the color of the original control identifier of the control based on the target color, or determining the background color of the original control identifier based on the target color; then, generating a new control identifier based on the target attribute identifier and the original control identifier carrying the target color information, and replacing the corresponding original control identifier in the hierarchy area with the new control identifier.

[0120] Furthermore, the above method may also include:

[0121] In response to the setting operation for the color corresponding to each visibility attribute of the second visibility option, the target color of the target visibility attribute is determined.

[0122] In this embodiment, the colors corresponding to each visibility attribute of the second visibility option can be customized by the user to suit the usage habits of different users and reduce the user adaptation cost.

[0123] It should be noted that in this embodiment, setting the color of each visibility attribute in the second visibility option of any control will be synchronized to the colors of each visibility attribute in the second visibility option of all controls. When the target visibility attributes of any two controls are the same, the corresponding target colors are also the same.

[0124] For example, when a user selects any control in the hierarchy area, the interface editor, in response to the selection operation, can display a second visibility option for the selected control in the details area. For instance... Figure 8As shown, when the second visibility option is selected, multiple optional visibility attributes and the available colors for each attribute can be displayed. Users can access multiple available colors using the color selection control corresponding to each visibility attribute and choose one as the color for that attribute. Similarly, colors for other visibility attributes can be set. Once all visibility attributes have their colors set, if the condition that different visibility attributes have different colors is met, the target color for the target visibility attribute is determined based on the currently set color. Optionally, if the condition that different visibility attributes have different colors is not met, a prompt message can be generated to remind the user to reset the colors of at least two visibility attributes with the same color.

[0125] Furthermore, the above method may also include:

[0126] In response to a modification operation on the target visibility attribute selected for the second visibility option of the control, the target visibility attribute of the control displayed in the hierarchy area is updated.

[0127] In this embodiment, when the user modifies the target visibility attribute of the second visibility option of the control, the interface editor can automatically update the target visibility attribute of the control displayed in the hierarchy area.

[0128] For example, when a user selects a target control in the hierarchy area whose target visibility attribute needs to be modified, the interface editor, in response to the selection operation of the target control in the hierarchy area, can display a second visibility option of the selected target control in the details area, as well as the selected target visibility attribute and other optional visibility attributes; in response to the selection operation for other optional visibility attributes, which can be considered as a modification operation of the target visibility attribute, the visibility attribute selected by the modification operation is determined as the new target visibility attribute of the target control, and the target visibility attribute of the target control displayed in the hierarchy area is updated according to the new target visibility attribute; this ensures the accuracy of the target visibility attribute of the target control displayed in the hierarchy area, that is, it can ensure the accuracy of the target visibility attribute of all controls displayed in the hierarchy area.

[0129] This application embodiment obtains the target visibility attribute selected by the second visibility option of the control and displays the target visibility attribute of the control in the hierarchy area. The target visibility attribute selected by the second visibility option refers to the runtime visibility attribute of the control. The hierarchy area also displays the design-time visibility attribute of the control, allowing users to directly obtain the design-time and runtime visibility attributes of each control in the hierarchy area. Compared with the prior art, where users need to select each control individually to view the runtime visibility attributes of all controls, this application embodiment allows users to conveniently obtain the runtime visibility attributes of all controls, thereby improving user efficiency. Furthermore, in this application embodiment, the hierarchy area simultaneously displays the runtime and design-time visibility attributes of the control, effectively preventing users from omitting or incorrectly setting the runtime visibility attributes of the control, thus improving the accuracy of project design.

[0130] It should be noted that, for the sake of simplicity, the method embodiments are all described as a series of actions. However, those skilled in the art should understand that the embodiments of this application are not limited to the described order of actions, because according to the embodiments of this application, some steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also understand that the embodiments described in the specification are all preferred embodiments, and the actions involved are not necessarily required by the embodiments of this application.

[0131] Reference Figure 9 This diagram illustrates a structural block diagram of an embodiment of an interface display device for an interface editor according to this application. Corresponding to the interface display method embodiment of the interface editor described above, this interface editor has a hierarchy area, a design view area, and a details area. The hierarchy area displays control identifiers of various controls present in the design view area, as well as a first visibility option for each control. The first visibility option is used to select the visibility attribute of the corresponding control in the design view area. The details area displays a second visibility option for the selected control in the hierarchy area. The second visibility option is used to select the visibility attribute of the corresponding control at runtime. The interface display device of this interface editor may include the following modules:

[0132] The target visibility attribute acquisition module 901 is used to acquire the target visibility attribute selected by the second visibility option of the control;

[0133] The target visibility attribute display module 902 is used to display the target visibility attributes of the control within the hierarchical area.

[0134] Optionally, the target visibility attribute display module 902 includes:

[0135] The target color determination module is used to determine the target color corresponding to the target visibility attribute;

[0136] A target color display module is used to determine the color of the control identifier of the control within the hierarchical area based on the target color; or, it is used to determine the background color of the control within the hierarchical area based on the target color.

[0137] Optionally, the device further includes:

[0138] The color setting module is used to determine the target color of the target visibility attribute in response to the color setting operation for each visibility attribute of the second visibility option.

[0139] Optionally, the target visibility attribute display module 902 includes:

[0140] The target attribute identifier determination module is used to determine the target attribute identifier corresponding to the target visibility attribute;

[0141] The new control identifier determination module is used to generate a new control identifier for the control based on the target attribute identifier and the control identifier of the control;

[0142] The new control identifier display module is used to use the new control identifier as the control identifier of the control displayed in the hierarchy area.

[0143] Optionally, the new control identifier determination module is used to add the target attribute identifier before or after the control identifier of the control to generate a new control identifier for the control.

[0144] Optionally, the target visibility attribute display module 902 includes:

[0145] The first determining module is used to determine the target attribute identifier corresponding to the target visibility attribute;

[0146] The second determining module is used to generate a new control identifier for the control based on the target attribute identifier and the control identifier of the control;

[0147] The first display module is used to use the new control identifier as the control identifier of the control displayed in the hierarchy area;

[0148] The third determining module is used to determine the target color corresponding to the target visibility attribute;

[0149] The second display module is used to determine the color of the target attribute identifier in the new control identifier of the control displayed in the hierarchical area based on the target color.

[0150] Optionally, the device further includes:

[0151] The target visibility attribute update module is used to update the target visibility attribute of the control displayed in the hierarchy area in response to a modification operation on the target visibility attribute selected for the second visibility option of the control.

[0152] As the device embodiment is basically similar to the method embodiment, the description is relatively simple, and relevant parts can be found in the description of the method embodiment.

[0153] This application also discloses an electronic device, including a processor, a memory, and a computer program stored in the memory and capable of running on the processor, wherein the computer program, when executed by the processor, implements the steps of the interface display method of the interface editor as described above.

[0154] This application also discloses a computer-readable storage medium storing a computer program, which, when executed by a processor, implements the steps of the interface display method of the interface editor as described above.

[0155] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on the differences from other embodiments. The same or similar parts between the various embodiments can be referred to each other.

[0156] Those skilled in the art will understand that embodiments of this application can be provided as methods, apparatus, or computer program products. Therefore, embodiments of this application can take the form of entirely hardware embodiments, entirely software embodiments, or embodiments combining software and hardware aspects. Furthermore, embodiments of this application can take the form of computer program products implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0157] This application describes embodiments with reference to flowchart illustrations and / or block diagrams of methods, terminal devices (systems), and computer program products according to embodiments of this application. It should be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing terminal device to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing terminal device, generate instructions for implementing the flowchart illustrations. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0158] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing terminal device to operate in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0159] These computer program instructions can also be loaded onto a computer or other programmable data processing terminal equipment, causing a series of operational steps to be performed on the computer or other programmable terminal equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable terminal equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0160] Although preferred embodiments of the present application have been described, those skilled in the art, upon learning the basic inventive concept, can make other changes and modifications to these embodiments. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments as well as all changes and modifications falling within the scope of the embodiments of the present application.

[0161] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only 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 terminal device 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 terminal device. 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 terminal device that includes said element.

[0162] The interface display method, apparatus, electronic device, and storage medium of the interface editor provided in this application have been described in detail above. Specific examples have been used to illustrate the principles and implementation methods of this application. The description of the above embodiments is only for the purpose of helping to understand the method and core ideas of this application. At the same time, for those skilled in the art, there will be changes in the specific implementation methods and application scope based on the ideas of this application. Therefore, the content of this specification should not be construed as a limitation of this application.

Claims

1. A method for displaying the interface of an interface editor, characterized in that, The interface editor has a hierarchy area, a design view area, and a details area. The hierarchy area displays the control identifiers of each control present in the design view area, as well as a first visibility option for each control. The first visibility option is used to select the visibility attribute of the corresponding control in the design view area. The details area displays a second visibility option for the selected control in the hierarchy area. The second visibility option is used to select the visibility attribute of the corresponding control at runtime. The method includes: Obtain the target visibility attribute selected by the second visibility option of the control; Within the hierarchical area, in addition to displaying the control identifiers of each control and the visibility attributes selected by the first visibility option, the target visibility attributes of the control are also displayed. The target visibility attribute for displaying the control within the hierarchical area includes: Determine the target attribute identifier corresponding to the target visibility attribute; Based on the target attribute identifier and the control identifier, generate a new control identifier for the control; The new control identifier is used as the control identifier for the controls displayed within the hierarchy area.

2. The method according to claim 1, characterized in that, The target visibility attributes for displaying the control within the hierarchical area include: Determine the target color corresponding to the target visibility attribute; The color of the control identifier of the control within the hierarchical area is determined based on the target color; or, The background color of the control within the hierarchy area is determined based on the target color.

3. The method according to claim 2, characterized in that, The method further includes: In response to the setting operation for the color corresponding to each visibility attribute of the second visibility option, the target color of the target visibility attribute is determined.

4. The method according to claim 1, characterized in that, The step of generating a new control identifier for the control based on the target attribute identifier and the control identifier includes: Add the target attribute identifier before or after the control identifier of the control to generate a new control identifier for the control.

5. The method according to claim 1, characterized in that, The target visibility attributes for displaying the control within the hierarchical area include: Determine the target attribute identifier corresponding to the target visibility attribute; Based on the target attribute identifier and the control identifier, generate a new control identifier for the control; The new control identifier is used as the control identifier of the control displayed within the hierarchy area; Determine the target color corresponding to the target visibility attribute; The color of the target attribute identifier in the new control identifier of the control displayed in the hierarchical area is determined based on the target color.

6. The method according to claim 1, characterized in that, The method further includes: In response to a modification operation on the target visibility attribute selected for the second visibility option of the control, the target visibility attribute of the control displayed in the hierarchy area is updated.

7. A user interface display device for a user interface editor, characterized in that, The interface editor has a hierarchy area, a design view area, and a details area. The hierarchy area displays the control identifiers of each control present in the design view area, as well as a first visibility option for each control. The first visibility option is used to select the visibility attribute of the corresponding control in the design view area. The details area displays a second visibility option for the selected control in the hierarchy area. The second visibility option is used to select the visibility attribute of the corresponding control at runtime. The device includes: The target visibility attribute acquisition module is used to acquire the target visibility attribute selected by the second visibility option of the control; The target visibility attribute display module is used to display the target visibility attribute of the control within the hierarchy area, based on the original display of the control identifier of each control and the visibility attribute selected by the first visibility option. The target visibility attribute display module includes: The target attribute identifier determination module is used to determine the target attribute identifier corresponding to the target visibility attribute; The new control identifier determination module is used to generate a new control identifier for the control based on the target attribute identifier and the control identifier of the control; The new control identifier display module is used to use the new control identifier as the control identifier of the control displayed in the hierarchy area.

8. An electronic device, characterized in that, It includes a processor, a memory, and a computer program stored in the memory and capable of running on the processor, wherein when the computer program is executed by the processor, it implements the steps of the interface display method of the interface editor as described in any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that, A computer program is stored on the computer-readable storage medium, and when executed by a processor, the computer program implements the steps of the interface display method of the interface editor as described in any one of claims 1 to 6.

Images