CN110888673B

CN110888673B - Configuration interface configuration method, layout method and storage medium

Info

Publication number: CN110888673B
Application number: CN201911218629.2A
Authority: CN
Inventors: 陈玖
Original assignee: Beijing Mininglamp Software System Co ltd
Current assignee: Beijing Mininglamp Software System Co ltd
Priority date: 2019-12-02
Filing date: 2019-12-02
Publication date: 2023-04-07
Anticipated expiration: 2039-12-02
Also published as: CN110888673A

Abstract

The application provides a configuration method, a layout method and a storage medium of a configuration interface, wherein the configuration interface is provided with a parent element representing a first logical relationship, the parent element comprises multiple groups of child elements which are arranged in parallel and have the first logical relationship with each other, the first logical relationship is one of ' and ' or ', and the layout method comprises the following steps: obtaining a first width of a gap between a first group of child elements and a first boundary of a parent element, and obtaining a second width of a gap between a last group of child elements and a second boundary of the parent element, wherein the first boundary is positioned on one side of the first group of child elements far away from the last group of child elements, and the second boundary is positioned on one side of the last group of child elements far away from the first group of child elements; determining a first legend covering each group of child elements in the parent element according to the first width and the second width; and determining the position of a first character which is arranged at intervals with the first legend and represents the first logical relationship according to the width of the parent element in the direction in which the plurality of groups of child elements are arranged in parallel.

Description

Configuration interface configuration method, layout method and storage medium

Technical Field

The present application relates to the field of data processing, and in particular, to a configuration method, a layout method, and a storage medium for a configuration interface.

Background

With the increased capabilities and technological advances of computer browsers, it has become increasingly common to configure complex logical relationships in websites. Where "and", "or" logical relationships are very common logical relationships, they often occur in various configuration interfaces.

However, in the conventional configuration and layout manner, for example, in a scenario where a logical operation can be added/deleted by a user, because the number of the logical operations edited by the user cannot be estimated in advance, and a legend representing a "and" or "relationship often cannot be placed at an optimal position as the number of the logical operations changes (the width changes caused by the change of the width) (for example, a bracket located at the same end of a plurality of logical operations arranged in parallel encloses the plurality of logical operations to represent that the plurality of logical operations have the same logical relationship, the size and the position of the bracket are usually fixed, and after the logical operation is edited by the user (i.e., the logical operation is added/deleted), the size and the position of the bracket cannot be adjusted adaptively, so that the representation range of the bracket is unclear, or the range of the bracket is difficult to cover all the logical operations). Therefore, when the configuration interface is configured and laid out in the existing manner, the legend representing the "and" or "relationship is difficult to adjust along with the change of the number of logical operations (the width change caused), and usually, a user is required to achieve an interface effect by additional operations or even cutting some functions, so that the work efficiency of the user is reduced, and bad experience is brought to the user.

Disclosure of Invention

An object of the embodiments of the present application is to provide a configuration method, a layout method, and a storage medium for configuring an interface, so that a legend representing a "and" or "relationship is adjusted along with a change of a logical operation number (a width change caused), an interface effect can be achieved without an additional operation, and a working efficiency of a user can be improved, thereby improving a user experience.

In order to achieve the above object, embodiments of the present application are implemented as follows:

in a first aspect, an embodiment of the present application provides a layout method for a configuration interface, where the configuration interface has a parent element representing a first logical relationship, and the parent element includes, in a range of the parent element, multiple sets of child elements having the first logical relationship with each other, where the first logical relationship is one of "and" or ", the method includes: obtaining a first width of a space between a first group of child elements and a first boundary of the parent element, and obtaining a second width of a space between a last group of child elements and a second boundary of the parent element, wherein the first boundary is located on a side of the first group of child elements away from the last group of child elements, and the second boundary is located on a side of the last group of child elements away from the first group of child elements; determining a first legend covering each group of child elements within the parent element according to the first width and the second width; and determining the position of a first character which is arranged at an interval with the first legend and represents the first logical relationship according to the width of the parent element in the direction in which the multiple groups of child elements are arranged in parallel.

A first legend covering each set of child elements within the parent element is determined by combining a second width between a second boundary of the parent element and a last set of child elements with a first width between the first set of child elements and the first boundary of the parent element. Therefore, the determined first legend can be adjusted along with the change of the number of the sub-elements (the width change caused), so that the interface effect can be achieved without extra operation, the working efficiency of a user can be improved, and the user experience is improved. In addition, by spacing a first character representing a first logical relationship next to the first legend, the logical relationships between all child elements within the parent element can be explicitly revealed.

With reference to the first aspect, in a first possible implementation manner of the first aspect, determining a first legend that covers each group of sub-elements according to the first width and the second width includes: determining a width of the first set of sub-elements and a width of the last set of sub-elements; determining the first legend based on a first legend starting width determined by the first width and the width of the first group of sub-elements and a first legend ending width determined by the second width and the width of the last group of sub-elements.

By determining the range of the first legend at the first width and the second width, in combination with the width of the first set of child elements and the width of the last set of child elements, the first legend may be made to better cover all child elements within the parent element.

With reference to the first possible implementation manner of the first aspect, in a first possible implementation manner of the first aspect, determining the first legend according to a first legend starting width determined by the first width and the width of the first group of sub-elements, and a first legend ending width determined by the second width and the width of the last group of sub-elements, includes: dividing the width of the first group of sub-elements by two and adding the resulting quotient to the first width to determine a first legend starting width between the starting point of the first legend and the first border; dividing the width of the last group of sub-elements by two and adding the resulting quotient to the second width to determine a first legend end width between the end point of the first legend and the second boundary; the first legend is determined based on the first legend starting width and the first legend ending width.

In this way, the first legend can be determined based on the position corresponding to half the width of the first group of sub-elements and the position corresponding to half the width of the last group of sub-elements, so that the range of the first legend can be expressed simply.

In a second aspect, an embodiment of the present application provides a layout method for a configuration interface, where a configuration interface has a parent element representing a second logical relationship, and the parent element includes multiple sets of parent elements, which are arranged in parallel and have the second logical relationship with each other, and are laid out based on the layout method for the configuration interface according to any one of the first aspect or possible implementations of the first aspect, where the second logical relationship is one of "and" or ", and the second logical relationship is different from the first logical relationship, and the method includes: obtaining a third width of a space between a first group of parent elements and a third boundary of the parent element, and obtaining a fourth width of a space between a last group of elements and a fourth boundary of the parent element, wherein the third boundary is located on a side of the first group of parent elements far away from the last group of elements, and the fourth boundary is located on a side of the last group of elements far away from the first group of parent elements; determining a second legend covering each group of elements in the parent element according to the third width and the fourth width; and determining the position of a second character which is arranged at intervals with the second legend and represents the second logical relationship according to the width of the parent element in the direction in which the multiple groups of parent elements are arranged in parallel.

Determining a second legend covering each group of elements within the parent element by combining a third width between the first group of parent elements and a third boundary of the parent element with a fourth width between the last group of elements and a fourth boundary of the parent element. Like this, can guarantee that the second legend of determining is adjusted along with the change of the figure of wherein element (the width change that arouses), consequently, need not to reach interface effect through extra operation, can improve user's work efficiency to promote user experience. In addition, a second character indicating a second logical relationship is arranged beside the second legend at intervals, so that the logical relationship among all elements in the mother element can be clearly revealed.

With reference to the second aspect, in a first possible implementation manner of the second aspect, when an operation element for adding a new parent element is further included in the range of the parent element, the last group of elements are the operation elements, where a width of the operation element is a preset width; and when the range of the parent element is the parent element, the last group of elements are the parent elements.

The parent element may contain an operation element, and when contained, the last group of elements is the operation element, and when not contained, the last group of elements is the parent element. Therefore, the method can be suitable for configuration interfaces under different conditions, and is beneficial to improving the application range.

With reference to the first possible implementation manner of the second aspect, in a second possible implementation manner of the second aspect, determining a second legend that covers each group of elements in the parent element according to the third width and the fourth width includes: determining a width of the first set of parent elements and a width of the last set of elements; determining the second legend based on a second legend starting width determined from the third width and the width of the first set of parent elements, and a second legend ending width determined from the fourth width and the width of the last set of elements.

This may enable the second legend to better cover all elements within the parent element.

With reference to the second possible implementation manner of the second aspect, in a third possible implementation manner of the second aspect, the determining the widths of the first group of parent elements and the last group of parent elements includes: determining the number of groups of child elements in the first group of parent elements, and determining the width of the first group of parent elements according to the number of groups of child elements in the first group of parent elements, the width of each group of child element intervals, the first width and the second width; when the last group of elements is a parent element, determining the number of groups of child elements in the last group of elements, and determining the width of the last group of elements according to the number of groups of child elements in the last group of elements, the width of each group of child element intervals, the first width and the second width; and when the last group of elements are operation elements, determining the preset width as the width of the last group of elements.

The width of the parent element can be accurately obtained through the widths of all the child elements in the parent element, the first width, the second width and the width of the interval between each group of child elements, so that the range covered by the second legend can be accurately determined.

With reference to the second possible implementation manner of the second aspect, in a fourth possible implementation manner of the second aspect, determining the second legend according to a second legend starting width determined by the third width and the width of the first group parent element, and a second legend ending width determined by the fourth width and the width of the last group element, includes: dividing the width of the first set of parent elements by two and adding the resulting quotient to the third width to determine a second legend starting width between the starting point of the second legend and the third boundary; dividing the width of the last group of elements by two and adding the resulting quotient to the fourth width to determine a second legend termination width between the end point of the second legend and the fourth border; determining the second legend based on the second legend starting width and the second legend ending width.

In this way, the second legend may be determined based on the position corresponding to half the width of the first set of parent elements and the position corresponding to half the width of the last set of elements, which may enable a concise representation of the scope of the second legend.

In a third aspect, an embodiment of the present application provides a configuration method for a configuration interface, where the method includes: acquiring a first configuration instruction, and configuring a parent element according to the first configuration instruction, wherein the parent element comprises a plurality of groups of child elements with a first logical relationship with each other, and the first logical relationship is one of ' and ' or '; and laying out the parent element based on the layout method of the configuration interface of the first aspect or any one of possible implementation manners of the first aspect; acquiring a second configuration instruction, and configuring parent elements according to the second configuration instruction, wherein the parent elements comprise multiple groups of parent elements with a second logical relationship therebetween, the second logical relationship is one of a "and" or ", and the second logical relationship is different from the first logical relationship; and laying out the parent element based on the layout method of the configuration interface of the second aspect or any one of possible implementation manners of the second aspect.

By adopting the layout method for configuring the interface to configure the interface of the parent element and/or the parent element, the legend expressing the ' and ' or ' relationship is adjusted along with the change of the number of the logical operation (the width change caused), the interface effect can be achieved without extra operation, the configuration work of the configuration interface can be simplified, and the working efficiency and the user experience of a user are improved.

In a fourth aspect, an embodiment of the present application provides a storage medium, where the storage medium stores one or more programs, and the one or more programs are executable by one or more processors to implement the configuration interface layout method according to any one of the first aspect, the possible implementation manner of the first aspect, the second aspect, or the possible implementation manner of the second aspect; or implementing the configuration method of the configuration interface according to the third aspect.

In order to make the aforementioned objects, features and advantages of the present application more comprehensible, preferred embodiments accompanied with figures are described in detail below.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings that are required to be used in the embodiments of the present application will be briefly described below, it should be understood that the following drawings only illustrate some embodiments of the present application and therefore should not be considered as limiting the scope, and that those skilled in the art can also obtain other related drawings based on the drawings without inventive efforts.

Fig. 1 is a schematic structural diagram of a parent element according to an embodiment of the present disclosure.

Fig. 2 is a flowchart of a layout method for a configuration interface according to an embodiment of the present disclosure.

Fig. 3 is a schematic diagram illustrating different arrangements of child elements in a parent element according to an embodiment of the present disclosure.

FIG. 4 is a schematic diagram of a first legend within a parent element to indicate different contexts provided in accordance with an embodiment of the present application.

Fig. 5 is a schematic structural diagram of a parent element provided in an embodiment of the present application.

Fig. 6 is a flowchart of another layout method for a configuration interface according to an embodiment of the present application.

Fig. 7 is a schematic diagram of different arrangement manners of elements in a parent element according to an embodiment of the present application.

Fig. 8 is a schematic diagram of a parent element and an operation element included in a parent element according to an embodiment of the present disclosure.

FIG. 9 is a diagram illustrating a second example of a parent element of the present application in different contexts.

Fig. 10 is a flowchart of a configuration method for configuring an interface according to an embodiment of the present application.

Fig. 11 is a block diagram of an electronic device according to an embodiment of the present application.

The figure is as follows: 100-parent element; 110-parent element; 111-subelement; 112-first legend; 120-second legend; 130-an operation element; 20-an electronic device; 21-a memory; 22-a communication module; 23-a bus; 24-a processor; 25-a display; a-a first character; b-second character.

Detailed Description

However, in the conventional configuration and layout manner, for example, in a scenario where a logical operation can be added/deleted by a user, because the number of the logical operations edited by the user cannot be estimated in advance, and a legend representing a "and" or "relationship often cannot be placed at an optimal position as the number of the logical operations changes (the width changes caused by the change of the width) (for example, a bracket located at the same end of a plurality of logical operations arranged in parallel encloses the plurality of logical operations to represent that the plurality of logical operations have the same logical relationship, the size and the position of the bracket are usually fixed, and after the logical operation is edited by the user (i.e., the logical operation is added/deleted), the size and the position of the bracket cannot be adjusted adaptively, so that the representation range of the bracket is unclear, or the range of the bracket is difficult to cover all the logical operations).

Therefore, when the configuration interface is configured and laid out in the existing manner, the legend representing the "and" or "relationship is difficult to adjust along with the change of the number of logical operations (the width change caused), and usually, a user is required to achieve an interface effect by additional operations or even cutting some functions, so that the work efficiency of the user is reduced, and bad experience is brought to the user.

Based on this, the inventor of the present application proposes a layout method and a configuration method of a configuration interface, so that a legend representing a "and" or "relationship is adjusted according to a change (a width change caused) of a logical operation number, and work efficiency of a user and experience brought to the user are improved.

The technical solutions in the embodiments of the present application will be described below with reference to the drawings in the embodiments of the present application.

Referring to fig. 1, fig. 1 is a schematic structural diagram of a parent element 110 according to an embodiment of the present disclosure.

In the embodiment, the configuration interface has a parent element 110 representing a first logical relationship, and includes multiple sets of child elements 111 arranged in parallel within the scope of the parent element 110, and the child elements 111 have the first logical relationship with each other, wherein the first logical relationship is one of "and" or ".

And the child elements 111 may be arranged in parallel within the parent element 110 to make the first logical relationship represented by the parent element 110 clear and concise. For example, the first logical relationship may be a "and" logical relationship, i.e., a logical relationship representing that the child elements 111 within the parent element 110 are in a "and" logical relationship with each other; of course, the first logical relationship may also be an or logical relationship, i.e. the logical relationship between the child elements 111 in the parent element 110 is an or logical relationship.

For example, the parent element 110 may be a selection box for conditional filtering (or an information collection column including a plurality of information columns, etc., without limitation), and the child element 111 may be a selected filtering condition (or an information column, etc., without limitation). Of course, the parent elements 110 may all be child elements 111 having a first logical relationship with each other, and may also include the child elements 111 and operation child elements for adding or deleting the child elements 111, which is not limited herein. Since the operational sub-element is not the same as the other sub-elements 111, but is used to add or delete the sub-elements 111, the operational sub-element and the remaining sub-elements 111 can also be considered to have a first logical relationship without substantially affecting the functionality of the sub-elements 111 within the parent element 110. In addition, the width of the operation child element may be the same as or different from the width of the other child elements 111 in the parent element 110, and is not limited herein, depending on actual needs.

By setting the operation child element, the parent element 110 including the child element 111 and the operation child element can be made to have a wider applicable range. Moreover, the parent element 110 may not include an operation child element, and is not limited herein.

Referring to fig. 2, fig. 2 is a flowchart illustrating a layout method of a configuration interface according to an embodiment of the present disclosure. In the present embodiment, the layout method of the configuration interface is performed by the electronic device corresponding to the configuration interface, and the method may include step S11, step S12, and step S13.

Step S11: a first width of a space between a first group of child elements and a first boundary of the parent element is obtained, and a second width of a space between a last group of child elements and a second boundary of the parent element is obtained, wherein the first boundary is located on a side of the first group of child elements away from the last group of child elements, and the second boundary is located on a side of the last group of child elements away from the first group of child elements.

Referring to fig. 1 and fig. 3 in combination, fig. 3 is a schematic diagram of different arrangement manners of child elements 111 in a parent element 110 according to an embodiment of the present application. In this embodiment, parent element 110 may be an enclosed area that contains a range, the enclosed area having a boundary. Illustratively, the boundaries (first boundary and second boundary) of the parent element 110 in the direction to which the arrangement depends may be determined according to the arrangement of the child elements 111 within the scope of the parent element 110 (e.g., in rows from left to right or from right to left in order, as in fig. 3, or in columns from top to bottom or from bottom to top in order, as in fig. 1). For example, a boundary on a side of the first group of sub-elements remote from the last group of sub-elements may be taken as a first boundary, and a boundary on a side of the last group of sub-elements remote from the first group of sub-elements may be taken as a second boundary.

In this embodiment, the electronic device may obtain a first width of the space between the first set of child elements and the first boundary of the parent element 110, and obtain a second width of the space between the last set of child elements and the second boundary of the parent element 110.

After determining the first width and the second width, the electronic device may perform step S12.

Step S12: and determining a first legend covering each group of child elements in the parent element according to the first width and the second width.

In this embodiment, the electronic device can determine a first legend 112 that encompasses each set of child elements 111 within the parent element 110 based on the determined first and second widths. The first legend 112 is used to cover all the child elements 111 in the parent element 110 in the configuration interface, for example, by using parentheses, lines, etc., and may even be represented by a figure, for example, a rose, where a flower starts from a position with a first width from the first boundary and ends at a position with a second width from the second boundary, that is, all the child elements 111 in the parent element 110 are covered. Therefore, the present application should not be considered as limited herein.

Referring to fig. 1 and 4 in combination, fig. 4 is a schematic diagram of a first legend 112 in a parent element 110 for indicating different ranges according to an embodiment of the present application. Illustratively, the first legend 112, determined based on the first width and the second width, may start at the beginning of the first set of sub-elements (i.e., where the width from the first boundary is the first width) in its alignment direction (i.e., the direction from the first set of sub-elements to the last set of sub-elements) and end at the end of the last set of sub-elements (i.e., where the distance from the second boundary is the second width). This allows for a simple and convenient determination of the first legend 112, the determined first legend 112 being shown in FIG. 4.

Of course, the manner of determining the first legend 112 is not limited to this manner, and referring again to fig. 1, the electronic device may also determine the first legend 112 according to a first legend starting width determined by the first width and the width of the first group of sub-elements, and a first legend ending width determined by the second width and the width of the last group of sub-elements.

For example, the width of the first group of sub-elements may be divided by two, and the resulting quotient may be added to the first width to determine the width between the start of the first legend 112 and the first border (i.e., the first legend start width); and dividing the width of the last group of sub-elements by two and adding the resulting quotient to the second width to determine the width between the end point of the first legend 112 and the second boundary (i.e., the first legend end width). Then the first legend 112 may be determined based on the first legend starting width and the first legend ending width, the determined first legend 112 being as shown in fig. 1.

By determining the range of the first legend 112 in combination with the width of the first set of child elements and the width of the last set of child elements at the first width and the second width, the first legend 112 may be enabled to better cover all child elements 111 within the parent element 110. The first legend 112 is determined based on the position corresponding to half the width of the first group of sub-elements and the position corresponding to half the width of the last group of sub-elements, which can briefly indicate the range of the first legend 112.

Of course, the first legend 112 can be determined in other ways, such as adding (or subtracting) a predetermined value from the first width to determine the first legend starting width, adding (or subtracting) the predetermined value from the second width to determine the first legend ending width, and determining the first legend 112 covering all the child elements 111 in the parent element 110 according to the result. Therefore, how to determine the specific manner of the first legend 112 based on the first width and the second width should not be considered as a limitation of the present application, and may be determined as the case may be.

A first legend 112 is determined to encompass each set of child elements 111 within the parent element 110 by combining a first width between the first set of child elements and a first border of the parent element 110 with a second width between the last set of child elements and a second border of the parent element 110. Therefore, the determined first legend 112 can be adjusted along with the change of the number of the sub-elements 111 (the width change caused), so that an interface effect can be achieved without extra operation, the working efficiency of a user can be improved, and the user experience is improved. Additionally, spacing a first character representing a first logical relationship next to the first legend 112 (e.g., on the side of the first legend 112 facing away from the child elements 111) may explicitly reveal the logical relationship between all of the child elements 111 within the parent element 110.

After determining the first legend 112, the electronic device may perform step S13.

Step S13: and determining the position of a first character which is arranged at intervals with the first legend and represents the first logical relationship according to the width of the parent element in the direction in which the plurality of groups of child elements are arranged in parallel.

In this embodiment, in order to more clearly reveal the logical relationship between the groups of child elements 111 within the parent element 110, a first character a representing the first logical relationship may be determined next to the first legend 112. For example, when the first logical relationship is "and" logical relationship, "the first character a may be a character that represents" and "logical relationship, such as" and "," n ", etc.; when the first logical relationship is an "or" logical relationship, the first character a may be a character representing the "or" logical relationship, such as "or", "u", etc., and is not limited herein.

Of course, in order to make the position where the first character a is set unobtrusive, the position of the first character a may be determined according to the width of the parent element 110 in the direction of the parallel arrangement of the child elements 111 (referred to as the width of the parent element 110). For example, it may be half, one third, etc. of the width of the parent element 110, and of course, it may also be determined according to the width of the first legend 112, for example, half the width of the first legend 112. Where the width of the first legend 112 may be determined by subtracting the first width and the second width from the width of the parent element 110.

Referring to fig. 5, fig. 5 is a schematic structural diagram of a parent element 100 according to an embodiment of the present disclosure. In a configuration interface, it also often occurs that the parent element 100 includes multiple sets of parent elements 110, and that there is a second logical relationship between the multiple sets of parent elements 110. .

Of course, in the present embodiment, the first logical relationship and the second logical relationship are one of a "and" or "logical relationship, but the first logical relationship is different from the second logical relationship. That is, when the parent element 110 represents a logical "and" (i.e., there is a logical "and" between the child elements included in the parent element), the parent element 100 represents a logical "or" (i.e., there is a logical "or" between the elements included in the parent element); if the parent element 110 represents an "OR" logical relationship, then the parent element 100 represents an "AND" logical relationship. It should be noted that, the parent element 110 herein is not limited to the parent element 110 obtained by being laid out according to the layout method of the configuration interface provided in the embodiment of the present application, and may also not be the parent element 110 provided in the embodiment of the present application, and the parent element 110 obtained by being laid out according to the layout method of the configuration interface provided in the embodiment of the present application is described as an example in the embodiment of the present application, but the present application is not limited herein.

The multiple sets of parent elements 110 are also arranged in parallel in parent element 100 (see the above description of the structure of parent elements 110), so that the second logical relationship represented by parent element 100 is clear and concise.

Since the structure of the parent element 100 has more similarities with the structure of the parent element 110, reference may be made to the structural description of the parent element 110, and the repeated portions are briefly described here, and the different portions are mainly described.

First, the parent elements 110 having the second logical relationship with each other may all be included in the parent element 100, and the parent element 110 and the operation element 130 for adding or deleting the parent element 110 may also be included, which is not limited herein. In addition, the width of the operation element 130 is usually different from the width of other parent elements 110 in the parent element 100 (wherein the widths of the parent elements 110 are not necessarily the same as each other, and depend on the number of child elements 111 in each group of parent elements 110), but it is not an absolute case. By setting the operation element 130, the parent element 100 including the parent element 110 and the operation element 130 can be made to have a wider applicable range.

To layout a parent element 100 that contains multiple sets of parent elements 110 representing a first logical relationship, the electronic device may run another layout method of interface configuration.

Referring to fig. 6, fig. 6 is a flowchart of another layout method for a configuration interface according to an embodiment of the present application. In this embodiment, the layout method of the configuration interface may include: step S21, step S22, and step S23.

The electronic device may perform step S21.

Step S21: and acquiring a third width of an interval between a first group of parent elements and a third boundary of the parent element, and acquiring a fourth width of an interval between a last group of elements and a fourth boundary of the parent element, wherein the third boundary is positioned on a side of the first group of parent elements far away from the last group of elements, and the fourth boundary is positioned on a side of the last group of elements far away from the first group of parent elements.

Referring to fig. 5 and fig. 7 in combination, fig. 7 is a schematic diagram of different arrangement modes of elements in a parent element 100 according to an embodiment of the present disclosure. In this embodiment, parent element 100 may be a closed region comprising a range, the closed region having a boundary. Illustratively, the boundaries (third boundary and fourth boundary) of the parent element 110 in the direction to which the arrangement is dependent may be determined according to the arrangement of the parent element 110 within the parent element 100 (e.g., in rows from left to right or from right to left in order, as in fig. 7, or in columns from top to bottom or from bottom to top in order, as in fig. 5). For example, a boundary on a side of the first group of parent elements remote from the last group of elements may be taken as a third boundary and a boundary on a side of the last group of elements remote from the first group of parent elements may be taken as a fourth boundary.

In this embodiment, the electronic device may obtain a third width of the interval between the first set of parent elements and the third boundary of the parent element 100, and obtain a fourth width of the interval between the last set of elements and the fourth boundary of the parent element 100.

It should be noted that, since the parent element 100 in the present embodiment includes the parent element 110, it may include the operation element 130. Referring to fig. 8, fig. 8 is a schematic diagram of a parent element 100 including a parent element 110 and an operation element 130 according to an embodiment of the present application.

In the present embodiment, when the last group of elements is the parent element 110, then the width between the last group of parent elements 110 and the fourth boundary can be determined to be the fourth width (see fig. 5); when the last group element is the operation element 130, then the width between the operation element 130 and the fourth boundary can be determined as the fourth width (see fig. 8).

After determining the third width and the fourth width, the electronic device may perform step S12.

Step S22: and determining a second legend covering each group of elements in the parent element according to the third width and the fourth width.

In this embodiment, the electronic device may determine a second legend 120 covering each group of elements within the parent element 100 according to the determined third and fourth widths. The second legend 120 is used to cover all elements in the parent element 100 in the configuration interface, and the first legend 112 is referred to in the representation of the second legend 120. Therefore, the present application should not be considered as limited herein.

Referring to fig. 5 and 9 in combination, fig. 9 is a schematic diagram of a second legend 120 in a parent element 100 according to an embodiment of the present application to indicate different ranges. Illustratively, the second legend 120, determined based on the third width and the fourth width, may begin at the beginning of the first set of parent elements in its alignment direction (i.e., the direction from the first set of parent elements to the last set of elements) (i.e., the width from the third boundary is the third width) and end at the end of the last set of elements (i.e., the distance from the fourth boundary is the fourth width). This allows for a simple and convenient determination of the second legend 120, the determined second legend 120 being shown in FIG. 9.

The second legend 120 is also determined in a manner similar to the determination of the first legend 112, but in more than one manner.

Referring again to fig. 5, the electronic device may further determine a width of the first group parent element and a width of the last group element (the width of the group parent element 110 is determined when the last group element is the parent element 110; the width of the operation element 130 may be directly determined when the last group element is the operation element 130 because the width of the operation element 130 is a preset width), and determine the second legend 120 according to a second legend start width determined by the third width and the width of the first group parent element and a second legend end width determined by the fourth width and the width of the last group element, and the determined second legend 20 is as shown in fig. 5.

Illustratively, the number of sets of child elements 111 within the first set of parent elements may be determined, and the width of the first set of parent elements may be determined based on the number of sets of child elements 111 within the first set of parent elements, the width of each set of child elements 111, the width of the space between each set of child elements 111, and the first and second widths.

When the last group of elements is the parent element 110, the number of groups of the child elements 111 in the group of parent elements 110 may be determined, and the width of the group of parent elements 110 may be determined as the width of the last group of elements according to the number of groups of the child elements 111 in the group of parent elements 110, the width of each group of child elements 111, the width of the interval between each group of child elements 111, and the first width and the second width. When the last group of elements is the operation element 130, the predetermined width is determined to be the width of the last group of elements.

The width of the parent element 110 can be accurately obtained through the widths of all the child elements 111 in the parent element 110, the first width, the second width, and the width of the interval between each group of child elements 111, so as to be beneficial to accurately determining the range covered by the second legend 120.

After determining the width of the first set of parent elements and the width of the last set of elements, the electronic device may divide the width of the first set of parent elements by two and add the resulting quotient to a third width to determine a width between the start of the second legend 120 and a third boundary (i.e., a second legend start width); and dividing the width of the last group of elements by two and adding the resulting quotient to the fourth width to determine the width between the end point of the second legend 120 and the fourth boundary (i.e., the second legend end width). Then the second legend 120 may be determined based on the width between the start of the second legend 120 and the third boundary, and the width between the end of the second legend 120 and the fourth boundary.

By determining the extent of the second legend 120 in combination with the width of the first set of parent elements and the width of the last set of elements in the third and fourth widths, the second legend 120 may be made to better cover all elements within the parent element 100. And the second legend 120 is determined based on the position corresponding to half the width of the first set of parent elements and the position corresponding to half the width of the last set of elements, which allows for a concise representation of the scope of the second legend 120.

Of course, similar to the determination of the first legend 112, other manners for determining the second legend 120 may be selected, specifically referring to the determination manner of the first legend 112. Therefore, the present application should not be considered as limited herein.

After determining the second legend 120, the electronic device may perform step S23.

Step S23: and determining the position of a second character which is arranged at intervals with the second legend and represents the second logical relationship according to the width of the parent element in the direction in which the multiple groups of parent elements are arranged in parallel.

In the present embodiment, in order to more clearly disclose the logical relationship between multiple groups of elements (multiple groups of parent elements 110 and possible contained operation elements 130) in the parent element 100, a second character B representing the second logical relationship may be determined next to the second legend 120 (e.g., on the side of the second legend 112 facing away from the parent element 110). Wherein the second character B is used for revealing a second logical relationship, for example, when the second logical relationship is "and" logical relationship, the second character can be a character representing "and" logical relationship, such as "and" relationship "," and logical "," and "," n ", etc., moreover, the first logical relationship is an or logical relationship, and the first character a may be an or, an or relationship, an or logical, an or, a u, or, etc. When the second logical relationship is "or", the second character B may be "or", "u", or the like, which represents "or" a logical relationship, and the first logical relationship is "and" a logical relationship, and the first character a may be "and", "and relationship", "and logical", "and", "n", or the like, which is not limited herein.

Of course, the setting position of the second character may refer to the setting manner of the setting position of the first character, and will not be described herein again.

A second legend 120 covering each group of elements within parent element 100 is determined by combining a fourth width between the last group of elements and the fourth boundary of parent element 100 with a third width between the first group of parent elements and the third boundary of parent element 100. Thus, the determined second legend 120 can be adjusted along with the number of the elements in the second legend, so that an interface effect can be achieved without additional operation, the working efficiency of a user can be improved, and the user experience is improved. In addition, a second character indicating a second logical relationship is provided at an interval next to the second legend 120, which may explicitly reveal the logical relationship between all elements within the parent element 100.

The embodiment of the present application will explain the application of the method by way of an example in a practical example. The method can be realized by using the CSS (Cascading Style Sheets), and the realized codes are as follows:

the above code defines DIV (tag) elements (i.e. parent elements, exemplified by the fact that the child elements are arranged from top to bottom in the parent element) of a "and" logical relationship, where the upper and lower left inner distances are both 20px (i.e. the first and second widths are 20 px), the right inner distance is 50px, the height of the region defining each logical operation is 34px (i.e. the width of each group of child elements is 34 px), the margin-bottom is 15px (i.e. the interval between two groups of child elements is 15 px), but the margin-bottom of the last logical operation is 0px. The right brackets (i.e., the first legend) of the logical relationship "and" are used to ensure that they always start from the middle of the first logical operation (i.e., the first set of sub-elements) and end at the middle of the last logical operation (i.e., the last set of sub-elements) in an absolute positioning manner. The distance from the top edge (i.e., the first boundary) and the bottom edge (i.e., the second boundary) of the parent element is set to 37px, the height is derived from the sum of the distance from the inside of the parent element and half of the height of the logical operation region, which is calculated as 20px +34px/2=37px. While the location of the character "and" (i.e., the first character) may be determined by obtaining the first boundary.

And, the above code also defines DIV (tag) elements of a region of an OR logical relationship (i.e., parent elements, exemplified by parent elements arranged top-down within the parent element). Unlike the parent implementation described above, the last group of elements in the parent are operational elements. And the right brackets (i.e., the second legend) representing the logical relationship of "or" may also be used in the absolute positioning method: to ensure that it can always start from the middle of the first parent element (first set of parent elements), then the calculation formula defining its distance from the top edge of the parent element (i.e. the third boundary) is complex. JavaScript can be used to listen for events (such as adding or deleting a logical operation) with a changing number of logical operations (i.e., child elements) and then calculate the number (N) of logical operations in the first parent element. The specific calculation formula may be: (parent element top and bottom inner spacing (40 px) + parent element border width (2 px) + N x logical operation region height (34 px) + (N-1) x logical operation interval (15 px))/2. The upper and lower inner margins of the parent element represent a third width and a fourth width, the height of the logic operation area is the width of the child element, and the logic operation interval is the interval between the child elements.

Of course, this is only an example of a configuration method and a layout method for implementing the configuration interface, and should not be considered as a limitation of the present application. The configuration method and the layout method of the configuration interface may also be implemented by various other programs and manners, which are not limited herein.

The configuration interface layout method provided in the embodiment of the application can be used for layout of the configuration interface. Meanwhile, the embodiment of the application also provides a configuration method of the configuration interface, so as to configure the configuration interface.

Referring to fig. 10, fig. 10 is a flowchart of a configuration method of a configuration interface according to an embodiment of the present application. In this embodiment, the configuration method of the configuration interface may be executed by the electronic device. The configuration method of the configuration interface comprises the following steps: step S31, step S32, step S33, and step S34.

When the configuration interface needs to be configured, the electronic device may perform step S31.

Step S31: the method comprises the steps of obtaining a first configuration instruction, and configuring a parent element according to the first configuration instruction, wherein the parent element comprises a plurality of groups of child elements with a first logical relationship with each other, and the first logical relationship is one of ' and ' or '.

In this embodiment, the electronic device may obtain the first configuration instruction and configure the parent element 110 according to the first configuration instruction. Of course, the parent element 110 includes a plurality of sets of child elements 111 having a first logical relationship with each other, and the first logical relationship is one of "and" or ".

After configuring the parent element 110, the electronic device may perform step S32.

Step S32: and the parent elements are laid out based on the layout method for laying out the parent elements of the configuration interface.

In this embodiment, the manner of configuring the parent element 110 may be performed according to the content described above, and is not described herein again.

After laying out the parent element 110, the electronic device may further perform step S33.

Step S33: and acquiring a second configuration instruction, and configuring a parent element according to the second configuration instruction, wherein the parent element comprises a plurality of groups of parent elements having a second logical relationship with each other, the second logical relationship is one of ' and ' or ', and the second logical relationship is different from the first logical relationship.

In this embodiment, the electronic device may obtain the second configuration instruction and configure the parent element 100 according to the second configuration instruction. The parent element 100 includes a plurality of sets of parent elements 110 having a second logical relationship with each other, and the second logical relationship is one of "and" or ", and the second logical relationship is different from the first logical relationship.

After configuring the mother element 100, the electronic device may perform step S34.

Step S34: and laying out the parent elements based on the layout method for laying out the parent elements of the configuration interface.

In this embodiment, the manner of configuring the parent element 100 can be performed with reference to the above descriptions, and is not described herein again.

By adopting the parent element 110 and/or the parent element 100 which are/is arranged by the arrangement method of the configuration interface to carry out interface configuration, the legend expressing the ' and ' or ' relationship is adjusted along with the change of the number of the logical operation, the interface effect can be achieved without extra operation, the configuration work of the configuration interface can be simplified, and the work efficiency and the user experience of a user can be improved.

Based on the same inventive concept, an embodiment of the present application further provides a layout apparatus for a configuration interface, where the configuration interface has a parent element representing a first logical relationship, and the parent element includes multiple sets of child elements having the first logical relationship therebetween, where the multiple sets of child elements are arranged in parallel, and the first logical relationship is one of "and" or ", and the apparatus includes: an obtaining unit, configured to obtain a first width of a gap between a first group of child elements and a first boundary of the parent element, and obtain a second width of a gap between a last group of child elements and a second boundary of the parent element, where the first boundary is located on a side of the first group of child elements away from the last group of child elements, and the second boundary is located on a side of the last group of child elements away from the first group of child elements; the processing unit is used for determining a first legend covering each group of child elements in the parent element according to the first width and the second width; and the processing unit is further configured to determine, according to the width of the parent element in the direction in which the plurality of groups of child elements are arranged in parallel, the position of a first character which is arranged at an interval from the first legend and represents the first logical relationship.

In this embodiment, the processing unit is further configured to determine a width of the first group of sub-elements and a width of the last group of sub-elements; determining the first legend based on a first legend starting width determined by the first width and the width of the first group of sub-elements and a first legend ending width determined by the second width and the width of the last group of sub-elements.

In this embodiment, the processing unit is further configured to divide the width of the first group of sub-elements by two, and add the obtained quotient to the first width to determine a first legend starting width between a starting point of the first legend and the first boundary; dividing the width of the last group of sub-elements by two and adding the resulting quotient to the second width to determine a first legend end width between the end point of the first legend and the second boundary; determining the first legend according to a width between a start point of the first legend and the first boundary, and a width between an end point of the first legend and the second boundary.

In addition, another layout device for a configuration interface is further provided in this embodiment of the present application, where a configuration interface has a parent element representing a second logical relationship, and the parent element includes multiple sets of parent elements that are arranged in parallel and have the second logical relationship with each other and are laid out based on the layout method for the configuration interface according to any one of the first aspect or possible implementations of the first aspect, where the second logical relationship is one of "and" or ", and the second logical relationship is different from the first logical relationship, and the device includes: an obtaining unit, configured to obtain a third width of an interval between a first group parent element and a third boundary of the parent element, and obtain a fourth width of an interval between a last group element and a fourth boundary of the parent element, where the third boundary is located on a side of the first group parent element away from the last group element, and the fourth boundary is located on a side of the last group element away from the first group parent element; the processing unit is used for determining a second legend covering each group of elements in the parent element according to the third width and the fourth width; and the processing unit is further configured to determine, according to the width of the parent element in the direction in which the multiple sets of parent elements are arranged in parallel, the position of a second character which is arranged at an interval from the second legend and represents the second logical relationship.

In this embodiment, the processing unit is further configured to determine a width of the first group parent element and a width of the last group element; determining the second legend based on a second legend starting width determined from the third width and the width of the first set of parent elements, and a second legend ending width determined from the fourth width and the width of the last set of elements.

In this embodiment, the processing unit is further configured to determine the number of groups of child elements in the first group of parent elements, and determine the width of the first group of parent elements according to the number of groups of child elements in the first group of parent elements, the width of each group of child element intervals, and the first width and the second width; when the last group of elements is a parent element, determining the number of groups of child elements in the last group of elements, and determining the width of the last group of elements according to the number of groups of child elements in the last group of elements, the width of each group of child element intervals, the first width and the second width; and when the last group of elements are operation elements, determining the preset width as the width of the last group of elements.

In this embodiment, the processing unit is further configured to divide the width of the first group of parent elements by two, and add the obtained quotient to the third width to determine a second legend starting width between the starting point of the second legend and the third boundary; dividing the width of the last group of elements by two and adding the resulting quotient to the fourth width to determine a second legend termination width between the end point of the second legend and the fourth border; determining the second legend based on the second legend starting width and the second legend ending width.

In an embodiment of the present application, a configuration device for configuring an interface is further provided, including: the first configuration module is used for acquiring a first configuration instruction and configuring a parent element according to the first configuration instruction, wherein the parent element comprises a plurality of groups of child elements with a first logical relationship with each other, and the first logical relationship is one of ' and ' or '; the first layout module is used for laying out the parent elements based on the layout method of the configuration interface provided in the embodiment of the application; a second configuration module, configured to obtain a second configuration instruction, and configure a parent element according to the second configuration instruction, where the parent element includes multiple sets of parent elements having a second logical relationship with each other, the second logical relationship is one of "and" or ", and the second logical relationship is different from the first logical relationship; and the second layout module is used for laying out the parent elements based on the layout method of the configuration interface provided by the embodiment of the application.

In addition, as shown in fig. 11, an embodiment of the present application further provides an electronic device 20, and a layout method and a configuration method applied to a configuration interface of the electronic device 20 provided in the embodiment of the present application may be executed by the electronic device 20. The electronic device 20 may be a smartphone, tablet, personal computer, personal digital assistant, or the like; the server may also be a network server, a cloud server, a server cluster, etc., and is not limited herein.

Illustratively, the electronic device 20 may include: a communication module 22 connected to the outside world via a network, one or more processors 24 for executing program instructions, a bus 23, and a different form of Memory 21, such as a magnetic disk, a ROM (Read-Only Memory), or a RAM (Random Access Memory), or any combination thereof. And, the electronic device 20 may further include a display 25, the display 25 being connected to the communication module 22 through the bus 23 for displaying the configuration interface.

Illustratively, the memory 21 has stored therein a program. The processor 24 may call and execute the programs from the memory 21, so that the layout method, the configuration method of the configuration interface may be performed by executing the programs. The processor 24 may perform layout and configuration of the configuration interface by performing a layout method, a configuration method, and the like of the configuration interface.

The embodiment of the present application further provides a storage medium, where the storage medium stores one or more programs, and the one or more programs are executable by one or more processors to implement the layout method of the configuration interface according to the embodiment of the present application, or to implement the configuration method of the configuration interface according to the embodiment of the present application.

In summary, the present application provides a configuration method and a layout method of a configuration interface, that is, a storage medium, in which a first legend covering each group of child elements in a parent element is determined by using a first width between a first boundary of a first group of child elements and the parent element and combining a second width between a second boundary of a last group of child elements and the parent element. Therefore, the determined first legend can be adjusted along with the change of the number of the sub-elements (the width change caused), so that the interface effect can be achieved without extra operation, the working efficiency of a user can be improved, and the user experience is improved. In addition, by spacing a first character representing a first logical relationship next to the first legend, the logical relationships between all child elements within the parent element can be explicitly revealed.

In the embodiments provided in the present application, it should be understood that the disclosed apparatus and method may be implemented in other ways. The above-described embodiments of the apparatus are merely illustrative, and for example, the division of the units is only one logical division, and there may be other divisions when actually implemented, and for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection of devices or units through some communication interfaces, and may be in an electrical, mechanical or other form.

Furthermore, the functional modules in the embodiments of the present application may be integrated together to form an independent part, or each module may exist separately, or two or more modules may be integrated to form an independent part.

In this document, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions.

The above description is only an example of the present application and is not intended to limit the scope of the present application, and various modifications and changes may be made by those skilled in the art. Any modification, equivalent replacement, improvement and the like made within the spirit and principle of the present application shall be included in the protection scope of the present application.

Claims

1. A layout method of a configuration interface, wherein the configuration interface has a parent element representing a first logical relationship, the parent element includes multiple sets of child elements having the first logical relationship therebetween, which are arranged in parallel, wherein the first logical relationship is one of "and" or ", and the method includes:

obtaining a first width of a space between a first group of child elements and a first boundary of the parent element, and obtaining a second width of a space between a last group of child elements and a second boundary of the parent element, wherein the first boundary is located on a side of the first group of child elements away from the last group of child elements, and the second boundary is located on a side of the last group of child elements away from the first group of child elements;

determining a first legend covering each group of child elements within the parent element according to the first width and the second width;

and determining the position of a first character which is arranged at intervals with the first legend and represents the first logical relationship according to the width of the parent element in the direction in which the multiple groups of child elements are arranged in parallel.

2. The method of claim 1, wherein determining the first legend covering each group of child elements according to the first width and the second width comprises:

determining a width of the first set of sub-elements and a width of the last set of sub-elements;

determining the first legend based on a first legend starting width determined by the first width and the width of the first group of sub-elements and a first legend ending width determined by the second width and the width of the last group of sub-elements.

3. The method according to claim 2, wherein determining the first legend according to a first legend starting width determined by the first width and the width of the first group of sub-elements and a first legend ending width determined by the second width and the width of the last group of sub-elements comprises:

dividing the width of the first group of sub-elements by two and adding the resulting quotient to the first width to determine a first legend starting width between the starting point of the first legend and the first border;

dividing the width of the last group of sub-elements by two and adding the resulting quotient to the second width to determine a first legend end width between the end point of the first legend and the second boundary;

the first legend is determined based on the first legend starting width and the first legend ending width.

4. A layout method of a configuration interface, wherein the configuration interface has a parent element representing a second logical relationship, the parent element includes multiple sets of parent elements having the second logical relationship with each other and arranged in parallel, the parent elements are laid out based on the layout method of the configuration interface according to any one of claims 1 to 3, wherein the second logical relationship is one of "and" or ", and the second logical relationship is different from the first logical relationship, the method includes:

obtaining a third width of a space between a first group of parent elements and a third boundary of the parent element, and obtaining a fourth width of a space between a last group of elements and a fourth boundary of the parent element, wherein the third boundary is located on a side of the first group of parent elements far away from the last group of elements, and the fourth boundary is located on a side of the last group of elements far away from the first group of parent elements;

determining a second legend covering each group of elements in the parent element according to the third width and the fourth width;

and determining the position of a second character which is arranged at intervals with the second legend and represents the second logical relationship according to the width of the parent element in the direction in which the multiple groups of parent elements are arranged in parallel.

5. The layout method of a configuration interface according to claim 4,

when an operation element for adding a new parent element is further included in the range of the parent element, the last group of elements are the operation elements, wherein the width of the operation elements is a preset width;

and when the parent elements are all in the range of the parent elements, the last group of elements are the parent elements.

6. The method of claim 5, wherein determining a second legend that covers each group of elements in the parent element according to the third width and the fourth width comprises:

determining a width of the first set of parent elements and a width of the last set of elements;

and determining the second legend according to a second legend starting width determined by the third width and the width of the first group of parent elements and a second legend ending width determined by the fourth width and the width of the last group of elements.

7. The method of claim 6, wherein determining the width of the first set of parent elements and the width of the last set of elements comprises:

determining the number of groups of child elements in the first group of parent elements, and determining the width of the first group of parent elements according to the number of groups of child elements in the first group of parent elements, the width of each group of child element intervals, the first width and the second width;

when the last group of elements is a parent element, determining the number of groups of child elements in the last group of elements, and determining the width of the last group of elements according to the number of groups of child elements in the last group of elements, the width of each group of child element intervals, the first width and the second width;

and when the last group of elements are operation elements, determining the preset width as the width of the last group of elements.

8. The method of claim 6, wherein determining the second legend based on a second legend starting width determined from the third width and the width of the first set of parent elements and a second legend ending width determined from the fourth width and the width of the last set of elements comprises:

dividing the width of the first set of parent elements by two and adding the resulting quotient to the third width to determine a second legend starting width between the starting point of the second legend and the third border;

dividing the width of the last group of elements by two, and adding the resulting quotient to the fourth width to determine a second legend termination width between the end point of the second legend and the fourth border;

determining the second legend based on the second legend starting width and the second legend ending width.

9. A method for configuring a configuration interface, the method comprising:

acquiring a first configuration instruction, and configuring a parent element according to the first configuration instruction, wherein the parent element comprises a plurality of groups of child elements with a first logical relationship with each other, and the first logical relationship is one of ' and ' or ';

and, laying out the parent element based on the layout method of the configuration interface of any one of claims 1 to 3;

acquiring a second configuration instruction, and configuring parent elements according to the second configuration instruction, wherein the parent elements comprise multiple groups of parent elements with a second logical relationship therebetween, the second logical relationship is one of a "and" or ", and the second logical relationship is different from the first logical relationship;

and laying out the parent element based on the layout method of the configuration interface according to any one of claims 4 to 8.

10. A storage medium storing one or more programs executable by one or more processors to implement a layout method of a configuration interface according to any one of claims 1 to 8; or implementing a configuration method of a configuration interface according to claim 9.