Page layout method and related device

Abstract

The page layout method comprises the steps of detecting the position where a first U I component is dragged, and when it is detected that the first U I component is dragged to a first area of a second U I component, displaying a first identifier according to the insertion position of a new U I component associated with the first area, that is, when the first identifier indicates that the first U I component is released at the current position, displaying a second identifier according to the insertion position of the new U I component associated with the first area; an insertion position of the first U I assembly; and in response to an operation action that the first U I component is released, inserting the first UI component at a position indicated by the first identifier. Wherein the second UI component is a U I component deployed in the page. Namely, in the process that the user drags the new U I component to different hot areas where the U I component is deployed, the insertion position corresponding to the current hot area is displayed in real time so as to prompt the user of the insertion position of the new U I component after the new U I component is released from the current position, so that the user is prevented from inserting a wrong position due to the fact that the placed hot areas and the pre-insertion position are different, and the user experience is improved.

Description

Technical Field

[0001] The present application relates to the field of communication technology, and in particular to a page layout method and related devices. Background Art

[0002] In the field of communication technology, graphical page layout methods are commonly used to create application software. Currently, in page layout methods, different hot zones are usually set on deployed UI (User Interface) components. When a user drags a new UI component to a hot zone of a deployed UI component, the new UI component is inserted at a position associated with the hot zone. In the process of dragging a new UI component, the UI component is often inserted in the wrong position because the hot zone where the UI component is placed is different from the user's pre-insertion position, resulting in a poor user experience. Summary of the Invention

[0003] In order to solve the above problems, a page layout method and related devices are provided in the embodiments of the present application. When the user drags a new UI component to different hot zones of deployed UI components, the insertion position corresponding to the current hot zone is displayed in real time to prompt the user of the insertion position of the new UI component after the new UI component is released at the current position, so as to prevent the user from inserting the wrong position due to the difference between the placed hot zone and the pre-insertion position, thereby improving the user experience.

[0004] To this end, the following technical solutions are adopted in the embodiments of the present application:

[0005] In a first aspect, an embodiment of the present application provides a page layout method, comprising: detecting the position where a first UI component is dragged; when detecting that the first UI component is dragged to a first area of a second UI component, displaying a first identifier based on the insertion position of a new UI component associated with the first area, that is, the first identifier indicates the insertion position of the first UI component when the first UI component is released at the current position; and in response to the operation action of releasing the first UI component, inserting the first UI component at the position indicated by the first identifier. The second UI component is a UI component that has been deployed on the page.

[0006] That is, in the page layout method provided in the embodiment of the present application, under the premise of associating the first area of the second UI component (an example of a hot zone) with the insertion position of the new UI component, the insertion position of the new UI component is also associated with the first identifier. Thus, when it is detected that the first UI component is dragged to the first area of the second UI component, the first identifier is displayed. The user can insert the first UI component under the prompt of the first identifier.

[0007] Additionally, in practice, the user does not need to know the association between the first region and the insertion position, which reduces the user's usage difficulty and reduces the corresponding manual training costs.

[0008] In addition, at the adjacent boundaries of different hot zones, it is difficult for users to distinguish between the different hot zones, making it very easy to insert the wrong position. This is more likely to happen when the area of the second UI component is small. In the embodiment of the present application, users do not need to distinguish between different hot zones and can directly insert the new UI component based on the first identifier, thus avoiding the occurrence of wrong insertion and improving the user experience.

[0009] In one possible implementation, before inserting the first UI component, the arrangement direction of the UI components in the parent-level container of the second UI component is a first direction, and the parent-level container is a container containing the second UI component; after inserting the first UI component, the arrangement direction of the first UI component and the second UI component is a second direction; inserting the first UI component includes: when the first direction is different from the second direction, creating a first container and making the first container contain the second UI component; and inserting the first UI component into the first container.

[0010] In this implementation, an embodiment of the present application provides an adaptive page layout method. Assume that before the first UI component is inserted, the arrangement direction of the UI components in the parent-level container of the second UI component is the first direction. Assume that after the first UI component is inserted, the arrangement direction of the first UI component and the second UI component is the second direction. When the first direction is different from the second direction, a first container is created so that the first container contains the first UI component and the second UI component. Assuming that before the first UI component is inserted, the parent-level container of the second UI component also includes a third UI component, then the third UI component is at the same level as the first container, and the third UI component can regard the first container as an adjacent component and adjust the size with each other. In other words, by creating the first container, the confusion of the layout after the first UI component is inserted is avoided, the phenomenon of misalignment between adjacent components or the appearance of idle areas is avoided, and the user experience is improved.

[0011] In another possible implementation, the method may further include: when it is detected that the first UI component is dragged to the first identifier and a displacement exceeding a first threshold occurs, based on the association between the first identifier and the insertion position of the first UI component, displaying a second identifier, the second identifier indicating the insertion position of the first UI component relative to the parent-level container of the second UI component when the first UI component is released at the current position, the parent-level container representing the container containing the second UI component; in response to the first UI component being released, inserting the first UI component at the position indicated by the second identifier.

[0012] In this implementation, by placing the first marker, the first UI component can be placed outside the parent container of the second UI component, thereby meeting complex UI component layout scenarios. In other words, by placing the first area of the second UI component, this embodiment of the application can meet basic scenario requirements; by placing the first marker, this embodiment of the application can meet complex layout scenario requirements.

[0013] Furthermore, in the general streaming layout method, the requirements of the basic scenario can only be met by being located in the first area of the second UI component. Except for being located in the first area of the second UI component, other insertion methods cannot be implemented. Therefore, after the page layout is completed, it is difficult to make changes, and the changes required by the user cannot be met. The cost of the changes is high and the user experience is poor. At the same time, due to the single insertion method, it is difficult to meet the needs of complex page layouts. In the embodiment of the present application, by being located in the first identifier, it is possible to jump from the reference target of the second UI component to the reference target of the parent first-level container, thereby achieving the purpose of inserting UI components at multiple levels and solving the user's complex page arrangement needs. By using the method of inserting UI components at the parent container level, the user's need to change the deployed page can be met. For example, a new UI component can be inserted on the upper side of the parent container without redesigning the page.

[0014] Furthermore, in a method for laying out containers, a complex container layout is designed to meet the needs of specific complex page layout scenarios. Due to the complexity of the container layout rules, a complex container nesting process is required, the entire page layout process is less intuitive, and the process of arranging components is complex. After the page layout is completed, due to the container nesting, the UI component cannot be inserted or deleted, and the layout container needs to be redesigned. The entire arrangement process is conceptually complex, has many steps, and the operating experience is extremely poor. However, the embodiment of the present application abandons the method of using complex layout containers and complex configurations to arrange pages. In the process of dragging the UI component, the placement mark (first mark) can be displayed in real time, and the latest placement position can be prompted in real time. During the dragging and placement process, it can be placed not only in different hot zones of the second UI component, but also on the placement mark. When placed on the placement mark, it can jump out of the hierarchy of the second UI component to the parent-level container of the second UI component, thereby meeting the UI component arrangement requirements of various complex layout scenarios.

[0015] In another possible implementation, the method further includes: when it is detected that the first UI component is dragged to the second identifier and a displacement exceeding a second threshold occurs, a third identifier is displayed based on the association between the second identifier and the insertion position of the first UI component, the third identifier indicating the insertion position of the first UI component relative to the parent secondary container of the second UI component when the first UI component is released at the current position, the parent secondary container representing the container containing the parent first-level container of the second UI component; in response to the first UI component being released, the first UI component is inserted at the position indicated by the third identifier.

[0016] In this implementation, in order to meet the UI component arrangement requirements of various complex layout scenarios, the first UI component can also be placed in the parent secondary container of the second UI component by placing it on the second identifier, thereby meeting the UI component arrangement requirements of various complex layout scenarios.

[0017] It can be further inferred that when it is detected that the first UI component is dragged to the Nth marker and a displacement exceeds the Nth threshold occurs, based on the association between the N+1th marker and the insertion position of the first UI component, the N+1th marker is displayed. The Nth marker indicates the insertion position of the first UI component relative to the parent N-level container of the second UI component when the first UI component is released at the current position. The parent N-level container represents the container that contains the parent N-1-level container of the second UI component. In response to the first UI component being released, the first UI component is inserted at the position indicated by the N+1th marker. N is an integer greater than or equal to 1.

[0018] In other words, it is also possible to achieve jumps to multiple placement levels through the placement identification method, and then place the first UI component in the multi-level parent container of the second UI component, thereby meeting the UI component arrangement requirements of various complex layout scenarios.

[0019] In another possible implementation, the method further includes: when detecting that the first UI component is dragged to the second area of the second UI component, in response to the first UI component being released, replacing the second UI component with the first UI component.

[0020] In this implementation, the embodiment of the present application also creatively proposes setting a second area in the second UI component to achieve replacement of the second UI component.

[0021] In another possible implementation, the method further includes: when detecting that the first UI component is dragged to the second area of the second UI component, displaying replacement indication information, where the replacement indication information is relevant indication information that the second UI component is replaced by the first UI component.

[0022] In this implementation, when it is detected that the first UI component is dragged to the second area of the second UI component, replacement indication information is displayed to prompt the user to release the first UI component at the current position, and the second UI component will be replaced by the first UI component, which can prevent user erroneous operations and improve user experience.

[0023] In another possible implementation, when the first UI component is a UI component other than the second UI component that has been deployed on the page, replacing the second UI component with the first UI component includes: swapping the positions of the second UI component and the first UI component.

[0024] In this implementation, there is an actual scenario in the process of replacing the second UI component: the first UI component is a UI component other than the second UI component that has been deployed on the page. At this time, the second UI component is replaced with the first UI component, or the second UI component and the first UI component are swapped. In other implementations, in this scenario, the second UI component is replaced with the first UI component, or the second UI component is replaced with the first UI component, while deleting the first UI component in the original position. That is to say, if the first UI component comes from a UI component library outside the page, the second UI component can be replaced with the first UI component without swapping and deleting the first UI component in the original position. This achieves the arrangement of UI components that have been deployed on the page.

[0025] In another possible implementation, the method further includes: after deleting the deployed UI components of the page, adjusting the sizes of the remaining UI components of the page, and when there is a second container containing only one UI component, deleting the second container.

[0026] In this implementation, the operation of deleting UI components can be implemented. After deleting the deployed UI components of the page, the size of the remaining UI components of the page is adjusted. When there is a second container containing only one UI component, the second container can be deleted to avoid affecting the insertion of new UI components due to the existence of a second container containing only one UI component, thereby improving the user experience. In other words, when a container contains only one UI component, inserting in the hot zone of the UI component and jumping to the parent container of the UI component to insert have the same effect, which increases the workload of insertion and poors the user experience.

[0027] In another possible implementation, when the first UI component is a UI component that has been deployed on the page, inserting the first UI component includes: while inserting the first UI component, deleting the first UI component at an original position, where the original position represents the position of the first UI component before insertion.

[0028] In this implementation, the process of moving a UI component already deployed on a page includes: inserting a first UI component based on the page layout method of an embodiment of the present application; and deleting the first UI component from its original location. In other words, placing a UI component already deployed on a page in the first area of the first UI component can move the UI component already deployed on the page, thereby achieving the layout of the UI components already deployed on the page.

[0029] In another possible implementation, the first area includes at least one of an upper area, a lower area, a left area, and a right area; wherein in response to the first UI component being released, inserting the first UI component at the position indicated by the first identifier includes: when the first area is the upper area, the position indicated by the first identifier is the upper side of the second UI component, and the first UI component is inserted at the upper side of the second UI component; when the first area is the lower area, the position indicated by the first identifier is the lower side of the second UI component, and the first UI component is inserted at the lower side of the second UI component; when the first area is the left area, the position indicated by the first identifier is the left side of the second UI component, and the first UI component is inserted at the left side of the second UI component; when the first area is the right area, the position indicated by the first identifier is the right side of the second UI component, and the first UI component is inserted at the right side of the second UI component.

[0030] In this implementation, the first area is illustrated as an example. The first area includes at least one of an upper area, a lower area, a left area, and a right area. When a first UI component is dragged to a different first area, a first indicator is displayed at the insertion position associated with the first area. Guided by the first indicator, the user is guided to insert the first UI component, thereby improving the user experience.

[0031] In second aspect, an embodiment of the present application provides a page layout device, including: a display module, for displaying a first identifier based on the association relationship between the first area and the insertion position of the first UI component when it is detected that the first UI component is dragged to the first area of the second UI component, the second UI component is a UI component deployed in the page, and the first identifier indicates the insertion position of the first UI component relative to the second UI component when the first UI component is released at the current position; a deployment module, for inserting the first UI component at the position indicated by the first identifier in response to the release operation of the first UI component.

[0032] In one possible implementation, it is assumed that before inserting the first UI component, the arrangement direction of the UI components in the parent-level container of the second UI component is the first direction, and the parent-level container is the container containing the second UI component; after inserting the first UI component, the arrangement direction of the first UI component and the second UI component is the second direction; the deployment module is specifically used to: when the first direction is different from the second direction, create a first container and make the first container contain the second UI component; and insert the first UI component into the first container.

[0033] In another possible implementation, the display module is also used to: when it is detected that the first UI component is dragged to the first identifier and a displacement exceeding a first threshold occurs, display a second identifier based on the association between the first identifier and the insertion position of the first UI component, the second identifier indicating the insertion position of the first UI component relative to the parent-level container of the second UI component when the first UI component is released at the current position, the parent-level container representing the container containing the second UI component; the deployment module is also used to: in response to the release operation of the first UI component, insert the first UI component at the position indicated by the second identifier.

[0034] In another possible implementation, the display module is further used to: when it is detected that the first UI component is dragged to the second identifier and a displacement exceeding a second threshold occurs, display a third identifier based on the association between the second identifier and the insertion position of the first UI component, the third identifier indicating the insertion position of the first UI component relative to the parent secondary container of the second UI component when the first UI component is released at the current position, the parent secondary container representing the container containing the parent first-level container of the second UI component; the deployment module is further used to: in response to the first UI component being released, insert the first UI component at the position indicated by the third identifier.

[0035] In another possible implementation, the deployment module is further configured to: when detecting that the first UI component is dragged to the second area of the second UI component, replace the second UI component with the first UI component in response to the first UI component being released.

[0036] In another possible implementation, the display module is further configured to: when detecting that the first UI component is dragged to the second area of the second UI component, display replacement indication information, where the replacement indication information is relevant indication information that the second UI component is replaced by the first UI component.

[0037] In another possible implementation, when the first UI component is a UI component other than the second UI component that has been deployed on the page, the deployment module is further configured to: swap the positions of the second UI component and the first UI component.

[0038] In another possible implementation, the deployment module is further configured to: after deleting the deployed UI components of the page, adjust the sizes of the remaining UI components of the page, and delete the second container when there is a second container containing only one UI component.

[0039] In another possible implementation, when the first UI component is a UI component that has been deployed on the page, the deployment module is specifically configured to: while inserting the first UI component, delete the first UI component at the original position, where the original position indicates the position of the first UI component before insertion.

[0040] In another possible implementation, the first area includes at least one of an upper area, a lower area, a left area, and a right area; the deployment module is specifically used to: when the first area is the upper area, the position indicated by the first identifier is the upper side of the second UI component, and the first UI component is inserted on the upper side of the second UI component; and when the first area is the lower area, the position indicated by the first identifier is the lower side of the second UI component, and the first UI component is inserted on the lower side of the second UI component; and when the first area is the left area, the position indicated by the first identifier is the left side of the second UI component, and the first UI component is inserted on the left side of the second UI component; and when the first area is the right area, the position indicated by the first identifier is the right side of the second UI component, and the first UI component is inserted on the right side of the second UI component.

[0041] In a third aspect, the present application provides a computing device comprising a memory and a processor. The memory stores instructions, and when the instructions are executed by the processor, the above method is implemented.

[0042] In a fourth aspect, the present application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, enables the above method to be implemented.

[0043] In a fifth aspect, the present application provides a computer program product comprising program instructions, which, when executed by a computer, enable the computer to perform a method. BRIEF DESCRIPTION OF THE DRAWINGS

[0044] The following is a brief introduction to the drawings required for use in the embodiments or technical descriptions.

[0045] Figure 1 Schematic diagram of the different areas of the hot zone in the first solution;

[0046] Figure 2 Schematic diagram of the placement rules of different hot zones in the first solution;

[0047] Figure 3 This is a schematic diagram of the placement of components in the first solution;

[0048] Figure 4a A schematic diagram of a first example of a position that cannot be positioned in the first solution;

[0049] Figure 4b A schematic diagram of a second example of a position that cannot be positioned in the first solution;

[0050] Figure 5 Schematic diagram of the component placement process in the second solution;

[0051] Figure 6 A schematic diagram of a flow chart of a page layout method provided in an embodiment of the present application;

[0052] Figure 7 Schematic diagram of different areas of the hot zone provided in the embodiments of the present application;

[0053] Figure 8a This is a schematic diagram of inserting a first marker when the hot zone provided in the embodiment of the present application is the upper area;

[0054] Figure 8b This is a schematic diagram of inserting a first marker when the hot zone provided in the embodiment of the present application is the lower area;

[0055] Figure 8c This is a schematic diagram of inserting a first marker when the hot zone provided in the embodiment of the present application is the left area;

[0056] Figure 8d This is a schematic diagram of inserting a first marker when the hot zone provided in the embodiment of the present application is the right area;

[0057] Figure 9 This is a schematic diagram of inserting a first marker when the hot zone provided in the embodiment of the present application is the middle area;

[0058] Figure 10a This is a schematic diagram of an insertion result of a new component when the first indicator indicates a location on the right side of the target component when the first direction and the second direction are different according to an embodiment of the present application;

[0059] Figure 10b This is a schematic diagram of an insertion result of a new component when the first indicator indicates a location on the left side of the target component when the first direction and the second direction are different according to an embodiment of the present application;

[0060] Figure 11a A schematic diagram of an insertion result of a new component when the first indicator indicates an upper area of a target component when the first direction and the second direction are different according to an embodiment of the present application;

[0061] Figure 11bA schematic diagram of an insertion result of a new component when the first indicator indicates a location below the target component when the first direction and the second direction are different according to an embodiment of the present application;

[0062] Figure 12a This is a schematic diagram of an insertion result of a new component when the first indicator indicates a location on the left side of the target component when the first direction and the second direction are the same as provided in an embodiment of the present application;

[0063] Figure 12b This is a schematic diagram of an insertion result of a new component when the first indicator indicates a location on the right side of the target component when the first direction and the second direction are the same as provided in an embodiment of the present application;

[0064] Figure 13a A schematic diagram of an insertion result of a new component when the first indicator indicates a location below the target component when the first direction and the second direction are the same as provided in an embodiment of the present application;

[0065] Figure 13b A schematic diagram of an insertion result of a new component when the first indicator indicates an upper area of a target component when the first direction and the second direction are the same as provided in an embodiment of the present application;

[0066] Figure 14a This is a schematic diagram of an insertion result of a new component when the first identifier indicated by the second identifier is located on the upper side of the target component when the first direction and the third direction are different according to the embodiment of the present application;

[0067] Figure 14b This is a schematic diagram of a result of inserting a new component when the first identifier indicated by the second identifier is located below the target component when the first direction and the third direction are different according to an embodiment of the present application;

[0068] Figure 15a This is a schematic diagram of an insertion result of a new component when the first identifier indicated by the second identifier is located on the right side of the target component when the first direction and the third direction are different according to an embodiment of the present application;

[0069] Figure 15b This is a schematic diagram of an insertion result of a new component when the first identifier indicated by the second identifier is located to the left of the target component when the first direction and the third direction are different according to an embodiment of the present application;

[0070] Figure 16a This is a schematic diagram of an insertion result of a new component when the first and third directions are the same, and the first identifier indicated by the second identifier is located on the right side of the target component, as provided in an embodiment of the present application;

[0071] Figure 16bThis is a schematic diagram of an insertion result of a new component when the first and third directions are the same and the second identifier indicates a first identifier located to the left of the target component provided in an embodiment of the present application;

[0072] Figure 17a This is a schematic diagram of a result of inserting a new component when the first direction and the third direction are the same, provided in an embodiment of the present application, and the first mark indicated by the second mark is located on the upper side of the target component;

[0073] Figure 17b This is a schematic diagram of a result of inserting a new component when the first direction and the third direction are the same, and the first mark indicated by the second mark is located below the target component in an embodiment of the present application;

[0074] Figure 17c This is a schematic diagram of another insertion result of a new component when the first direction and the third direction are the same, provided in an embodiment of the present application, and the second marker indicates the first marker located below the target component;

[0075] Figure 18a This is a schematic diagram of an insertion result of a new component when the second identifier indicated by the third identifier provided in an embodiment of the present application is located to the left of the parent container of the target component;

[0076] Figure 18b This is a schematic diagram of an insertion result of a new component when the second identifier indicated by the third identifier provided in an embodiment of the present application is located to the right of the parent container of the target component;

[0077] Figure 19a This is a schematic diagram of an insertion result of a new component when the second identifier indicated by the third identifier provided in an embodiment of the present application is located on the upper side of the parent container of the target component;

[0078] Figure 19b This is a schematic diagram of an insertion result of a new component when the second identifier indicated by the third identifier provided in an embodiment of the present application is located below the parent container of the target component;

[0079] Figure 20 A schematic diagram of an insertion result of a new component provided in an embodiment of the present application when the new component is located in the central area of the target component;

[0080] Figure 21 This is a schematic diagram of an insertion result of a new component when a new component deployed on a page is placed in the center area of a target component, as provided in an embodiment of the present application;

[0081] Figure 22 This is a schematic diagram of the result of deleting a new component that has been deployed on a page, provided in an embodiment of the present application;

[0082] Figure 23 This is a schematic diagram of an insertion result of a new component when a new component deployed on a page is placed in the right area of a target component, as provided in an embodiment of the present application;

[0083] Figure 24 A schematic diagram of a page composition obtained based on the page layout method provided in an embodiment of the present application;

[0084] Figure 25 A schematic diagram of a page layout device provided in an embodiment of the present application;

[0085] Figure 26 A schematic diagram of the composition of a computing device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0086] The technical solutions in the embodiments of the present application will be described below in conjunction with the drawings in the embodiments of the present application.

[0087] The term "and / or" as used herein describes an association between related objects, indicating that three possible relationships exist. For example, "A and / or B" can represent: A exists alone, A and B exist simultaneously, or B exists alone. The symbol " / " as used herein indicates that the related objects are in an "or" relationship. For example, A / B means either A or B.

[0088] The terms "first" and "second" in this specification and claims are used to distinguish different objects rather than to describe a specific order of objects. For example, "first response message" and "second response message" are used to distinguish different response messages rather than to describe a specific order of response messages.

[0089] In the embodiments of this application, words such as "exemplary" or "for example" are used to indicate examples, illustrations, or descriptions. Any embodiment or design described as "exemplary" or "for example" in the embodiments of this application should not be construed as being preferred or advantageous over other embodiments or designs. Rather, the use of words such as "exemplary" or "for example" is intended to present the relevant concepts in a concrete manner.

[0090] In the description of the embodiments of the present application, unless otherwise specified, "multiple" means two or more, for example, multiple processing units means two or more processing units, etc.; multiple elements means two or more elements, etc.

[0091] In the field of communication technology, graphical page layout methods are commonly used to create application software. Among page layout methods, there are mainly two categories of layout methods: free layout and flow layout.

[0092] In the free layout method, since the rules are relatively simple, the complexity of the free layout page arrangement is low.

[0093] In the flow layout method, the flow layout is a method of arranging UI components in a waterfall flow from left to right and from top to bottom, wherein the UI (User Interface) component arrangement method from left to right is called inline element arrangement, and the UI component arrangement method from top to bottom is called block-level element arrangement. Inline elements and block-level elements can be nested with each other to achieve complex page layouts. The data structure of the low-code platform page under this flow layout is usually designed using a complex tree structure, and the UI operation is relatively complex. For example, the flow layout usually adopts a flexible box (Flex) layout to arrange the elements within the page. The Flex layout has two content flows: row (row) main axis (inline content flow, multiple elements are placed in a row); column (column) cross axis (block-level content flow, multiple elements are placed in multiple rows, and each element occupies a row).

[0094] In the embodiments of the present application, for the sake of simplicity, UI components are referred to as components. The pre-edited (inserted, deleted, moved, replaced, interchanged, etc.) UI component being dragged is referred to as the first UI component, also referred to as the new component or the newly inserted component. The component with a different hot zone to which the new component is dragged is referred to as the second UI component, also referred to as the target component.

[0095] A low-code platform is a development environment for creating web applications using a graphical user interface. This typically involves several key steps: page content construction, data source binding, and event orchestration. The user experience of page content construction most directly reflects the platform's ease of use.

[0096] In the first solution, you can drag components from the component panel to the page. This solution is based on the hot areas above, below, left, and right of existing components on the page, or based on the blank area of the page, to drag and drop new components. The component panel is a component library that includes multiple components that can be inserted.

[0097] like Figure 1 As shown, Figure 1 The left side is the target component, and the target component is provided with different areas of the hot zone, which can be exemplarily divided into two types: Figure 1 As shown in the middle part; Figure 1 Shown in the middle right part.

[0098] like Figure 2As shown, when the new component is dragged to the various hot zones of the target component, or to the blank area of the page, exemplarily, the placement rules include: when the new component is dragged to the upper hot zone of the target component, the insertion result of the new component is shown in part a of the figure; when the new component is dragged to the lower hot zone of the target component, the insertion result of the new component is shown in part b of the figure; when the new component is dragged to the left hot zone of the target component, the insertion result of the new component is shown in part c of the figure; when the new component is dragged to the right hot zone of the target component, the insertion result of the new component is shown in part d of the figure; when the new component is dragged to the blank area of the page, the insertion result of the new component is shown in part e of the figure.

[0099] In the first solution, different hotspots are typically set on deployed components. When a user drags a new component to a hotspot of an already deployed component, the new component is inserted at the location associated with that hotspot. However, when dragging a new component, the component often gets inserted in the wrong place because the hotspot where the component is placed differs from the user's intended insertion location, resulting in a poor user experience.

[0100] Furthermore, the method of inserting components by dragging components from the component panel to the page and dragging new components to different hot zones on the target component can only meet basic layout requirements and cannot implement complex layout scenarios. Figure 2 As shown in parts a and b in the figure, after inserting a new component, a blank area is generated on the right side of the new component, affecting the uniform distribution of components on the page.

[0101] Further, if Figure 3 As shown in , if the parent container of all components in the flow layout takes up space, then when the component nesting level is deep, the parent container of each layer takes up space, and these parent containers will take up a lot of layout space. Figure 3 As shown in the right part of , the container takes up space, which may cause problems such as component misalignment and disordered spacing, making the content of the page appear very messy.

[0102] Further, if Figure 4a and Figure 4b As shown in the figure, since the disadvantage of the parent container occupying space is very large, the parent container can be made not to occupy space. In the first solution, even if the components in different hot zones can be placed based on the parent container, when the parent container does not occupy space, the parent container is not displayed, and the components cannot be placed based on the different hot zones of the parent container. Instead, the components can only be placed based on the different hot zones of the target component. This makes it impossible to implement some layout scenarios, such as Figure 4a As shown, it is not possible to insert a new component to the right of the parent container of target component A and target component B; for example, Figure 4bAs shown, it is impossible to insert a new component under the parent container of target component A and target component B. As a result, it is impossible to implement page layout in complex scenarios.

[0103] In the second solution, you can design the layout container first and then fill in the components. This solution first requires inserting a layout container into the page, then adjusting and configuring the layout container, and finally filling in the required components into the layout container. The steps of this solution may include: first, inserting the layout container, which is also called a column or grid layout. The insertion method may be to insert and cut the layout container directly on the canvas, or to drag the layout container component from the component panel. Secondly, configure the layout container and add rows and columns as required. The columns need to be configured with a ratio. For example, the column width ratio can be set to a 3:6:3 ratio according to a 12-grid. When encountering complex scenes, it is even necessary to place the layout container in a certain unit, such as the first row and the second column, to complete the layout of the complex scene by nesting the layout container. Finally, fill in the container unit with the required components. The general filling method is to drag it into the container unit.

[0104] For example, Figure 5 As shown in the figure, the first step is to insert container 1 and configure container 1. Figure 5 As shown, container 1 includes two rows of components. The first row of components is arranged in columns, with a width of 9:3. The second row of components is not arranged in columns. The second step is to insert container 2 and configure container 2. Figure 5 As shown, container 2 includes 1 row of components, which are arranged in columns and have a width of 6:6. Step 3: drag container 1 as a whole to the first component of the 1 row of components in container 2 to get the final page layout. Step 4: fill in the required components in the container unit of the final page layout. For example, Figure 5 As shown, the filled-in components may be a title component of "xxx's trends", a component for displaying pictures, and the like.

[0105] In the second solution, you need to design the layout container before filling it with content. Therefore, for component arrangement in relatively complex scenarios, you first need to understand and distinguish the difference between ordinary components and layout container components. Secondly, you need to arrange the layout container components, understand the complex layout configuration, and even need to nest layout container components to achieve the desired layout effect. Finally, you need to fill the components into the layout container unit to complete the arrangement. If the page layout requirements change, you may need to redesign the layout container, delete the existing layout container and the components within its units, and rearrange the component layout. The entire arrangement process is conceptually complex, has many steps, and the operational experience is extremely poor.

[0106] In order to solve the problems existing in the first solution and the second solution, the embodiment of the present application provides a page layout method. Figure 6 As shown, the page layout method provided in the embodiment of the present application mainly includes the following steps:

[0107] Step S601: Detect the position where the first component is dragged. When it is detected that the first component is dragged to the first area of the second component, a first indicator is displayed according to the insertion position of the new component associated with the first area. In other words, the first indicator indicates the insertion position of the first component when the first component is released from the current position.

[0108] like Figure 7 As shown, the embodiment of the present application sets a first area in the target component. When it is detected that the first component is dragged to the first area of the second component and released or placed, the first component is placed according to the insertion position of the new component associated with the first area. The first component is an example of a new component, and the second component is an example of a target component. The first area can be as follows Figure 7 At least one of the upper area, right area, lower area, and left area on the target component shown. The area segmentation of the upper area, right area, lower area, and left area can be Figure 7 The diagram shown in the middle can also be Figure 7 The schematic diagram is shown on the right.

[0109] Alternatively, as Figure 7 As shown, the hot zone on the target component also includes a second area, which can be Figure 7 The second area can implement a different function from the first area, such as replacing the target component with a new component, etc. This part is described in detail in other examples and will not be repeated here.

[0110] like Figures 8a-8d As shown, in order to facilitate the user to judge the pre-insertion position of the new component and reduce the occurrence of incorrect insertion position of the new component, the embodiment of the present application displays a first mark at the insertion position of the new component, so that the user can insert the new component in advance and reduce the occurrence of wrong insertion. The first mark refers to any mark that can indicate the insertion position of the first component when it is released. For example, the first mark can be as follows Figure 8aThe arrows, dotted boxes, indicator lines, etc. shown. For ease of description, the embodiment of the present application is illustrated by taking the indicator line as an example, but the first identifier is not limited to the indicator line, and the implementation method of the first identifier is not limited. Furthermore, the embodiment of the present application does not limit the display method of the identifier, and different identifiers can be distinguished by color distinction, staggered display, different flashing frequencies, etc. For example, when a certain identifier is placed, the identifier of the placement and the identifier indicating the insertion position can be displayed at the same time, and the two identifiers can be distinguished by different display methods.

[0111] For example, Figure 8a As shown, when it is detected that the first component is dragged to the upper area of the second component, the insertion position of the new component associated with the upper area is the upper side of the second component, and the first logo is displayed on the upper side of the second component. Figure 8b As shown, when it is detected that the first component is dragged to the lower area of the second component, the insertion position of the new component associated with the lower area is the lower side of the second component, and the first logo is displayed on the lower side of the second component. Figure 8c As shown, when it is detected that the first component is dragged to the left area of the second component, the insertion position of the new component associated with the left area is the left side of the second component, and the first logo is displayed on the left side of the second component. Figure 8d As shown, when it is detected that the first component is dragged to the right area of the second component, the insertion position of the new component associated with the right area is the right side of the second component, and the first logo is displayed on the right side of the second component.

[0112] For example, Figure 9 As shown, when it is detected that the first component is dragged to the middle area of the second component, the insertion position of the new component associated with the middle area is the area where the second component is located, and the second component is replaced, and a "Replace" prompt message is displayed so that the user can understand the result of the first component being released at the current position.

[0113] Step S602: In response to the operation of releasing the first component, insert the first component at the position indicated by the first mark, wherein the second component is a component that has been deployed on the page.

[0114] That is, under the premise of associating the first area of the second component (an example of a hot zone) with the insertion position of the new component, the insertion position of the new component is also associated with the first indicator. Thus, when the first component is detected to be dragged to the first area of the second component, the first indicator is displayed. The user can insert the first component under the prompt of the first indicator.

[0115] Furthermore, the user does not need to know the relationship between the first area and the insertion position, which reduces the difficulty of use for the user and reduces the corresponding manual training costs. At the adjacent boundary positions of different hot zones, it is difficult for the user to distinguish between different hot zones, which makes it very easy to insert the wrong position. When the area of the second component is small, this situation of inserting the wrong position is more likely to occur. In the embodiment of the present application, the user does not need to distinguish between different hot zones and can directly insert the new component according to the first identifier, avoiding the phenomenon of inserting the wrong position and improving the user experience.

[0116] In one possible implementation, before inserting a new component, the arrangement direction of the components in the parent-level container of the target component is the first direction, and the parent-level container is the container containing the target component; after inserting the new component, the arrangement direction of the new component and the target component is the second direction; inserting the new component includes: when the first direction is different from the second direction, creating a first container and making the first container contain the target component; inserting the new component into the first container. Examples of different first and second directions can be as follows Figure 10a 、 Figure 10b 、 Figure 11a 、 Figure 11b shown.

[0117] For example, the container is a flex layout, and the arrangement direction (flex direction) of the components in the container can be row arrangement, and the flow direction of the content in the row is: multiple elements are placed in a row; the arrangement direction (flex direction) of the components in the container can be column arrangement, and the flow direction of the content in the column is: multiple elements are placed in multiple rows, and each element occupies a row.

[0118] Optionally, in the embodiment of the present application, the parent container does not occupy actual space.

[0119] For example, Figure 10a As shown in the figure, when it is detected that a new component is dragged to the left area of the target component, the insertion position of the new component associated with the left area is the left side of the target component, and a first indicator line (an example of a first identifier) is displayed on the left side of the target component. When it is detected that the new component is released or dropped to the left area of the target component, the new component is inserted to the left of the target component indicated by the first indicator line.

[0120] Further, if Figure 10a As shown in the figure, before inserting a new component, the components in the target component's parent container are arranged in columns (the first direction). After inserting the new component, the target component and the new component are arranged in rows (the second direction). In other words, the first direction and the second direction are different, so it is necessary to create a first container and make it contain the target component; then insert the new component into the first container.

[0121] For example, Figure 10b As shown in the figure, when it is detected that a new component is dragged to the right area of the target component, the insertion position of the new component associated with the right area is to the right of the target component, and a first indicator line (an example of a first identifier) is displayed to the right of the target component. When it is detected that the new component is released or dropped to the right area of the target component, the new component is inserted to the right of the target component indicated by the first indicator line.

[0122] Further, if Figure 10b As shown in the figure, before inserting a new component, the components in the target component's parent container are arranged in columns (the first direction). After inserting the new component, the target component and the new component are arranged in rows (the second direction). In other words, the first direction and the second direction are different, so it is necessary to create a first container and make it contain the target component; then insert the new component into the first container.

[0123] For example, Figure 11a As shown in the figure, when it is detected that a new component is dragged to the lower area of the target component, the insertion position of the new component associated with the lower area is the lower side of the target component, and a first indicator line (an example of a first identifier) is displayed on the lower side of the target component. When it is detected that the new component is released or dropped to the lower area of the target component, the new component is inserted on the lower side of the target component indicated by the first indicator line.

[0124] Further, if Figure 11a As shown, before inserting a new component, the components in the target component's parent container are arranged in rows (the first direction). After inserting the new component, the target component and the new component are arranged in columns (the second direction). In other words, the first direction and the second direction are different, so a first container must be created to contain the target component, and the new component must be inserted into the first container.

[0125] For example, Figure 11b As shown in the figure, when it is detected that a new component is dragged to the upper area of the target component, the insertion position of the new component associated with the upper area is the upper side of the target component, and a first indicator line (an example of a first identifier) is displayed on the upper side of the target component. When it is detected that the new component is released or dropped to the upper area of the target component, the new component is inserted on the upper side of the target component indicated by the first indicator line.

[0126] Further, if Figure 11b As shown, before inserting a new component, the components in the target component's parent container are arranged in rows (the first direction). After inserting the new component, the target component and the new component are arranged in columns (the second direction). In other words, the first direction and the second direction are different, so a first container must be created to contain the target component, and the new component must be inserted into the first container.

[0127] Further, if Figure 11b As shown on the right side of , if the first and second directions are different, you can also not create a first container and insert the new component into the parent container of the target component. However, this will result in blank areas, affecting the page layout and poor user experience.

[0128] For example, Figure 12a As shown in the figure, when it is detected that a new component is dragged to the left area of the target component, the insertion position of the new component associated with the left area is the left side of the target component, and a first indicator line (an example of a first identifier) is displayed on the left side of the target component. When it is detected that the new component is released or dropped to the left area of the target component, the new component is inserted to the left of the target component indicated by the first indicator line.

[0129] Further, if Figure 12a As shown, before inserting a new component, the components in the target component's parent first-level container are arranged in rows (the first direction). After inserting the new component, the target component and the new component are arranged in rows (the second direction). In other words, the first and second directions are the same, so there is no need to create a first container. The new component is then inserted into the target component's parent first-level container.

[0130] For example, Figure 12b As shown in the figure, when it is detected that a new component is dragged to the right area of the target component, the insertion position of the new component associated with the right area is to the right of the target component, and a first indicator line (an example of a first identifier) is displayed to the right of the target component. When it is detected that the new component is released or dropped to the right area of the target component, the new component is inserted to the right of the target component indicated by the first indicator line.

[0131] Further, if Figure 12b As shown, before inserting a new component, the components in the target component's parent first-level container are arranged in rows (the first direction). After inserting the new component, the target component and the new component are arranged in rows (the second direction). In other words, the first and second directions are the same, so there is no need to create a first container. The new component is then inserted into the target component's parent first-level container.

[0132] For example, Figure 13a As shown in the figure, when it is detected that a new component is dragged to the lower area of the target component, the insertion position of the new component associated with the lower area is the lower side of the target component, and a first indicator line (an example of a first identifier) is displayed on the lower side of the target component. When it is detected that the new component is released or dropped to the lower area of the target component, the new component is inserted on the lower side of the target component indicated by the first indicator line.

[0133] Further, if Figure 13aAs shown in the figure, before inserting the new component, the components in the target component's parent first-level container are arranged in columns (the first direction). After inserting the new component, the target component and the new component are arranged in columns (the second direction). In other words, the first and second directions are the same, so there is no need to create a first container. The new component is then inserted into the target component's parent first-level container.

[0134] For example, Figure 13b As shown in the figure, when it is detected that a new component is dragged to the upper area of the target component, the insertion position of the new component associated with the upper area is the upper side of the target component, and a first indicator line (an example of a first identifier) is displayed on the upper side of the target component. When it is detected that the new component is released or dropped to the upper area of the target component, the new component is inserted on the upper side of the target component indicated by the first indicator line.

[0135] Further, if Figure 13b As shown in the figure, before inserting the new component, the components in the target component's parent first-level container are arranged in columns (the first direction). After inserting the new component, the target component and the new component are arranged in columns (the second direction). In other words, the first and second directions are the same, so there is no need to create a first container. The new component is then inserted into the target component's parent first-level container.

[0136] Furthermore, suppose that before inserting the new component, the parent level container of the target component also includes a third component (such as Figure 11a If a component is placed on the top right of the page, the third component is placed on the same level as the first container. The third component can treat the first container as an adjacent component and adjust its size relative to the first container. In other words, creating the first container avoids layout confusion after inserting a new component, prevents misalignment between adjacent components, and avoids the appearance of empty space, thus improving the user experience.

[0137] In another possible implementation, the method may further include: when detecting that a new component has been dragged to the first identifier and a displacement exceeding a first threshold occurs, displaying a second identifier based on the association between the first identifier and the insertion position of the new component, the second identifier indicating the insertion position of the new component relative to the parent container of the target component when the new component is released at the current position, the parent container being the container containing the target component; in response to the new component being released, inserting the new component at the position indicated by the second identifier. With the parent container of the target component as the new target component, the width or length of the new component needs to be adapted to the new target component and adaptively adjusted.

[0138] In the embodiment of the present application, it is assumed that the component arrangement direction inside the parent first-level container of the target component is the first direction; after inserting a new component outside the parent first-level container of the target component, the parent first-level container of the target component is used as the new target component, and the arrangement direction of the new component and the new target component is the third direction. When the first direction and the third direction are different, Figure 14a 、 Figure 14b 、 Figure 15a 、 Figure 15b is an example of the insertion result. When the first and third directions are the same, Figure 16a 、 Figure 16b 、 Figure 17a 、 Figure 17b This is an example of the insertion result.

[0139] For example, Figure 14a As shown, when it is detected that a new component is dragged to the upper area of the target component, the insertion position of the new component associated with the upper area is the upper side of the target component, and a first indicator line (an example of a first identifier) is displayed on the upper side of the target component. When it is detected that the new component is dragged to the first indicator line, when a displacement exceeding the first threshold occurs, a second indicator line (an example of a second identifier) is displayed at the insertion position of the new component associated with the first indicator line. The insertion position of the new component associated with the first indicator line refers to the position where the new component is inserted around the parent container of the target component if the new component is dropped at the current position when the new component is detected to be dragged to the first indicator line. When it is detected that the new component is released or dropped to the first indicator line, the new component is inserted on the upper side of the parent container of the target component indicated by the second indicator line.

[0140] For example, Figure 14b As shown, when a new component is detected to be dragged to the lower area of the target component, the insertion position of the new component associated with the lower area is the lower side of the target component, and a first indicator line is displayed below the target component. When the new component is detected to be dragged to the first indicator line and a displacement exceeding a first threshold occurs, a second indicator line is displayed at the insertion position of the new component associated with the first indicator line. When the new component is detected to be released or dropped to the first indicator line, the new component is inserted above the parent container of the target component indicated by the second indicator line.

[0141] For example, Figure 15aAs shown, when a new component is detected to be dragged to the right area of the target component, the new component associated with the right area is inserted to the right of the target component, and a first indicator line is displayed to the right of the target component. When the new component is detected to be dragged to the first indicator line and then moves beyond a first threshold, a second indicator line is displayed at the insertion position of the new component associated with the first indicator line. When the new component is detected to be released or dropped to the first indicator line, the new component is inserted to the right of the parent container of the target component indicated by the second indicator line.

[0142] For example, Figure 15b As shown, when a new component is detected to be dragged to the left area of the target component, the new component associated with the left area is inserted to the left of the target component, and a first indicator line is displayed to the left of the target component. When the new component is detected to be dragged to the first indicator line and a displacement exceeding a first threshold occurs, a second indicator line is displayed at the insertion position of the new component associated with the first indicator line. When the new component is detected to be released or dropped to the first indicator line, the new component is inserted to the left of the parent container of the target component indicated by the second indicator line.

[0143] For example, Figure 16a As shown, the components in the parent container of the target component are arranged in rows, the target component is the last component on the right side of the row, and the position for inserting the new component is the first indicator line on the right side of the target component. Or, as Figure 16b As shown, the components in the parent level container of the target component are arranged in rows, the target component is the first component on the left side of the row, and the position for inserting the new component is the first indicator line on the left side of the target component. Or, as Figure 17a As shown, the components in the parent container of the target component are arranged in columns, the target component is the first component above the column, and the position for inserting the new component is the first indicator line above the target component. Or, as Figure 17b As shown, the components in the parent-level container of the target component are arranged in columns, the target component is the last component at the bottom of the column, and the position for inserting the new component is the first indicator line below the target component. In the above example, the length and position of the first indicator line and the second indicator line are close, which may make them difficult to identify. In the embodiment of the present application, by staggering the first indicator line and the second indicator line, the problem of difficulty in identification is avoided and the user experience is improved. For example, the first indicator line is closer to the target component; in contrast, the second indicator line is farther away from the target component.

[0144] For example, Figure 17cAs shown, the components in the target component's parent container are arranged in columns, the target component is the first component at the top of the column, and the position where the new component is inserted is the first indicator line below the target component. In this example, the first indicator line and the second indicator line are positioned differently, making them easier to identify.

[0145] It should be further explained that by placing the new component on the first indicator line, it is possible to place the new component outside the parent container of the target component, thereby meeting complex component layout scenarios. In other words, by placing the new component on the first area of the target component, the present embodiment can meet basic scenario requirements; by placing the new component on the first indicator line, the present embodiment can also meet complex layout scenario requirements.

[0146] Furthermore, in general streaming layout methods, the requirements of basic scenarios can only be met by being located in the first area of the target component. Except for being located in the first area of the target component, other insertion methods cannot be implemented. Therefore, after the page layout is completed, it is difficult to make changes, and the changes required by users cannot be met. The cost of changes is high and the user experience is poor. At the same time, due to the single insertion method, it is difficult to meet the needs of complex page layouts. In the embodiment of the present application, by being located in the first identifier, it is possible to jump from the reference target of the target component to the reference target of the parent first-level container, thereby achieving the purpose of inserting components at multiple levels and solving the user's complex page layout needs. By using the method of inserting components at the parent container level, the user's needs to change deployed pages can be met. For example, a new component can be inserted on the upper side of the parent container without redesigning the page.

[0147] Furthermore, in a method for laying out containers, a complex container layout is designed to meet the needs of specific complex page layout scenarios. Due to the complexity of the container layout rules, a complex container nesting process is required, the entire page layout process is less intuitive, and the process of arranging components is complex. After the page layout is completed, due to the container nesting, components cannot be inserted or deleted, and the layout container needs to be redesigned. The entire arrangement process is conceptually complex, has many steps, and the operating experience is extremely poor. However, the embodiment of the present application abandons the method of using complex layout containers and complex configurations to arrange pages. In the process of dragging and dropping components, the placement mark (first mark) can be displayed in real time, and the latest placement position can be prompted in real time. During the dragging and dropping process, not only can the target component be dropped in different hot zones, but also can be dropped on the placement mark. When dropped on the placement mark, it is possible to jump out of the target component hierarchy to the parent-level container of the target component, thereby meeting the component arrangement requirements of various complex layout scenarios.

[0148] In another possible implementation, the method further includes: when it is detected that the new component is dragged to the second identifier and a displacement exceeding a second threshold occurs, a third identifier is displayed based on the association between the second identifier and the insertion position of the new component, the third identifier indicating the insertion position of the new component relative to the parent secondary container of the target component when the new component is released at the current position, the parent secondary container representing the container containing the parent primary container of the target component; in response to the new component being released, the new component is inserted at the position indicated by the third identifier.

[0149] In this implementation, in order to meet the component arrangement requirements of various complex layout scenarios, the new component can also be placed in the parent secondary container (parent container of parent container) of the target component by placing it on the second indicator line (an example of the second identifier), thereby meeting the component arrangement requirements of various complex layout scenarios.

[0150] For example, Figure 18a As shown, when it is detected that the new component is dragged to the left area of the target component, the insertion position of the new component associated with the left area is the left side of the target component, and a first indicator line (an example of the first identification) is displayed on the left side of the target component. When it is detected that the new component is dragged to the first indicator line, a displacement exceeding the first threshold occurs, and a second indicator line (an example of the second identification) is displayed at the insertion position of the new component associated with the first indicator line. The insertion position of the new component associated with the first indicator line is the insertion position relative to the parent first-level container of the target component, which will not be repeated here. When it is detected that the new component is dragged to the second indicator line, a displacement exceeding the second threshold occurs, and a third indicator line (an example of the third identification) is displayed at the insertion position of the new component associated with the second indicator line. The insertion position of the new component associated with the second indicator line is the insertion position relative to the parent second-level container of the target component, and the parent second-level container refers to the container in which the parent first-level container of the target component is nested, that is, the parent container of the parent container. That is to say, when the new component is placed on the second indicator line, the new component will be inserted outside the parent second-level container of the target component indicated by the third indicator line. Finally, when it is detected that the new component is released or positioned at the second indicator line, the new component is inserted to the left of the parent secondary container of the target component indicated by the third indicator line.

[0151] For example, Figure 18bAs shown, when it is detected that a new component is dragged to the right area of the target component, a first indicator line is displayed on the right side of the target component. When it is detected that the new component is dragged to the first indicator line and a displacement exceeding a first threshold occurs, a second indicator line is displayed at the insertion position of the new component associated with the first indicator line. When it is detected that the new component is dragged to the second indicator line and a displacement exceeding a second threshold occurs, a third indicator line is displayed at the insertion position of the new component associated with the second indicator line. When it is detected that the new component is dropped to the second indicator line, the new component is inserted to the right of the parent secondary container of the target component indicated by the third indicator line.

[0152] For example, Figure 19a As shown, when it is detected that a new component is dragged to the upper area of the target component, a first indicator line is displayed on the upper side of the target component. When it is detected that the new component is dragged to the first indicator line and a displacement exceeding a first threshold occurs, a second indicator line is displayed at the insertion position of the new component associated with the first indicator line. When it is detected that the new component is dragged to the second indicator line and a displacement exceeding a second threshold occurs, a third indicator line is displayed at the insertion position of the new component associated with the second indicator line in a staggered manner. When it is detected that the new component is dropped to the second indicator line, the new component is inserted on the upper side of the parent secondary container of the target component indicated by the third indicator line.

[0153] For example, Figure 19b As shown, when it is detected that a new component is dragged to the lower area of the target component, a first indicator line is displayed on the lower side of the target component. When it is detected that the new component is dragged to the first indicator line and a displacement exceeding a first threshold occurs, a second indicator line is displayed at the insertion position of the new component associated with the first indicator line. When it is detected that the new component is dragged to the second indicator line and a displacement exceeding a second threshold occurs, a third indicator line is displayed at the insertion position of the new component associated with the second indicator line. When it is detected that the new component is dropped to the second indicator line, the new component is inserted below the parent secondary container of the target component indicated by the third indicator line.

[0154] It can be further inferred that when it is detected that the new component is dragged to the Nth mark and a displacement exceeding the Nth threshold occurs, the N+1th mark is displayed based on the association between the N+1th mark and the insertion position of the new component. The Nth mark indicates the insertion position of the new component relative to the parent N-level container of the target component when the new component is released at the current position. The parent N-level container represents the container of the parent N-1 level container of the target component; in response to the new component being released, the new component is inserted at the position indicated by the N+1th mark. N is an integer greater than or equal to 1. In other words, the embodiment of the present application can also realize the jump of multiple landing levels through the method of landing on the mark, and then land the new component in the multi-level parent container of the target component, thereby meeting the component arrangement requirements of various complex layout scenarios. Exemplarily, the Nth threshold can be a value between 2 pixels and 4 pixels.

[0155] That is to say, the embodiment of the present application provides a variety of rules for adaptive drag and drop arrangement. When a new component is dragged onto the logo based on the above rules, and after the mouse has a certain displacement on the logo, it can jump to the parent container of the target component according to the rules of the embodiment of the present application, and use the parent container of the target component as the new target component. Finally, draw an indication logo based on the new target component, and complete the placement of the new component on the new indication logo. Furthermore, you can continue to drag the component to the new placement indicator line, jump to the parent container of the parent container of the current target component, use the parent container of the parent container of the target component as the new target component, and finally draw a placement indicator line based on the new target component. By analogy, the method of the embodiment of the present application can be applied to complex page layout scenarios.

[0156] In another possible implementation, the method further includes: when it is detected that the new component is dragged to the second area of the target component, in response to the new component being released, replacing the target component with the new component.

[0157] Optionally, when it is detected that the new component is dragged to the second area of the target component, replacement indication information is displayed, where the replacement indication information is related indication information that the target component is replaced with the new component.

[0158] In this implementation, when it is detected that a new component is dragged to the second area of the target component, replacement indication information is displayed to prompt the user to release the new component at the current position, and the target component will be replaced by the new component, which can prevent user errors and improve user experience.

[0159] For example, Figure 20As shown, when it is detected that a new component is dragged to the center area of the target component, the insertion rule of the new component associated with the center area is to replace the target component. Optionally, a replacement instruction message is displayed on the page to prompt the user of the result of the new component being placed at the current position. When it is detected that the new component is dropped to the center area of the target component, the target component is replaced with the new component.

[0160] In another possible implementation, when the new component is a component other than the target component that has been deployed on the page, replacing the target component with the new component includes: swapping the positions of the target component and the new component.

[0161] In this implementation, a practical scenario for replacing the target component involves the new component being a component already deployed on the page, other than the target component. In this case, replacing the target component with the new component can also involve swapping the positions of the target and new components. In other implementations, in this scenario, replacing the target component with the new component can also involve replacing the target component with the new component while simultaneously deleting the new component from its original location. In other words, if the new component comes from a component library outside of the page, the target component can be replaced with the new component without swapping or deleting the new component from its original location. This allows for the orchestration of components already deployed on the page.

[0162] For example, Figure 21 As shown, the new component is a component deployed on the page other than the target component. When it is detected that the new component is dragged to the second area of the target component, in response to the new component being released, as shown in FIG. Figure 21 As shown in the middle, the target component and the new component may be swapped; Figure 21 As shown on the right, you can also replace the target component with a new component, that is, delete the new component in the original position.

[0163] In another possible implementation, the method further includes: after deleting the deployed components of the page, adjusting the sizes of the remaining components of the page, and when a second container containing only one component exists, deleting the second container.

[0164] In this implementation, the component deletion operation can be implemented. After deleting the deployed components of the page, the size of the remaining components on the page is adjusted. It is also possible to delete the second container when there is only one component. This can avoid affecting the insertion of new components due to the existence of the second container containing only one component, thereby improving the user experience. In other words, when a container contains only one component, inserting in the component's hot zone has the same effect as jumping to the component's parent container for insertion, which increases the workload of insertion and poors the user experience.

[0165] For example, Figure 22As shown in the figure, after deleting a deployed new component on a page, the page automatically adjusts the size of the remaining components. At the same time, since the parent container of the target component only contains one component after deleting the new component, the page deletes the second container to avoid any impact on the insertion of the new component, improving the user experience.

[0166] In another possible implementation, when the new component is a component that has been deployed on the page, inserting the new component includes: while inserting the new component into the first group, deleting the new component at an original position, where the original position represents the position of the new component before insertion.

[0167] In this implementation, the process of moving components already deployed on a page includes: inserting the first group based on the page layout method of an embodiment of the present application; and deleting the new component from the original location. In other words, placing the components already deployed on the page in the first area of the new component can achieve the movement of the components already deployed on the page, thereby achieving the layout of the components already deployed on the page.

[0168] For example, Figure 23 As shown, when the new component is a component that has been deployed on the page, when it is detected that the new component falls on the right area of the target, a first indicator line is displayed on the right side of the target component. When it is detected that the new component falls on the first indicator line, the first group of new components is inserted and the original position is deleted, as shown in FIG. Figure 23 As shown in the middle, it is similar to moving the new component. Alternatively, when it is detected that the new component falls on the first indicator line, the first group of new components and the original position of the new component are inserted, as shown in FIG. Figure 23 As shown in the middle, it is similar to a copy operation for the new component.

[0169] This application is mainly aimed at low-code page layout under streaming layout.

[0170] In the embodiment of this application, Figure 24 As shown in , users can drag new components from the component panel to the page to complete the page layout. Figure 24 As shown, the component panel can include but is not limited to: buttons, titles, icons, pictures, input boxes, switches, multiple-choice, single-choice, line charts, pie charts and other components; the page with completed layout can be suitable for simple scenarios or complex scenarios.

[0171] In an embodiment of the present application, in a low-code platform, it is realized how to abandon the use of complex layout containers and complex configurations to arrange pages, and to complete the arrangement of pages only by simple dragging. Exemplarily, based on the layout technology of the elastic box, the insertion or deletion of components can be completed according to the content flow of the container in which the component is located. Among them, the component operation can adopt the most direct drag-and-drop operation, and the page layout can be arranged at one time through the placement rules and algorithms when it is placed. The placement indicator line is marked in real time during the dragging process to indicate the latest position of the placement. During the dragging and placement process, it can be placed not only on different hot zones of the target component, but also on the indicator line. Landing on the indicator line can jump out of the hierarchy of the target component to the parent container of the target component, and so on, to meet the arrangement of various complex layout scenarios. Optionally, by releasing the mouse after placement, the component is inserted based on the content flow of the elastic box layout.

[0172] In an embodiment of the present application, the complexity of page construction is reduced through adaptive drag and drop arrangement, thereby improving the usability of the low-code platform. Page construction is based on user expectations. The layout of the page is completed by dragging components from the component panel to the page and adjusting existing components on the page (such as moving, deleting, swapping positions, resizing, adjusting spacing, etc.). In an embodiment of the present application, new components can be dragged to complete the placement based on different hot zones of the target component. During the drag and drop process, it can be placed not only on the target component, but also on the indicator mark.

[0173] In the embodiment of the present application, the indicator does not occupy actual space and is only displayed during the dragging process; all parent containers also do not occupy actual space. Components arranged in rows are also called inline components, and components arranged in columns are also called block-level components. Dragging and dropping to the left or right area of a block-level target component and inserting a new component will compress the width of the original target component.

[0174] The embodiments of the present application provide a variety of rules for adaptive drag and drop layout, but do not constitute a limitation on the application of landing on the logo or indicator line. In other words, when the mouse continues to land on the latest indicator line, more complex layout scenarios can be inferred based on the above rules. Based on all the above adaptive drag and drop layout scenarios, and combined with the drag adjustment of component width, height, and spacing, all layout scenarios in the low-code streaming canvas can be met.

[0175] Furthermore, in the embodiments of the present application, all adaptive drag-and-drop layouts are based on dragging and dropping, as well as real-time labeled logos or indicator lines, without the need for other additional configurations, simplifying the operation of page layout. In addition, drag-and-drop can be based on the hot zone of the target component or on the drop indicator line. Dropping new components based on the target component hot zone can meet the needs of basic scenarios; dropping new components based on indicator lines can meet the needs of various complex layout scenarios.

[0176] In the embodiments of the present application, the scenarios in which the page layout method is used are not limited to page layout of the Web low-code platform, but can also be applied to all related products for building UI applications.

[0177] Based on the same concept as the above embodiments, Figure 25 As shown, the embodiment of the present application further provides a page layout device 2500, which mainly includes:

[0178] Display module 2510 is used to display a first identifier based on the association between the first area and the insertion position of the new component when it is detected that the new component is dragged to the first area of the target component. The target component is a component deployed on the page. The first identifier indicates the insertion position of the new component relative to the target component when the new component is released at the current position.

[0179] The deployment module 2520 is configured to insert the new component at the location indicated by the first identifier in response to the new component being released.

[0180] In one possible implementation, it is assumed that before inserting a new component, the arrangement direction of the components in the parent-level container of the target component is a first direction, and the parent-level container is a container containing the target component; after inserting the new component, the arrangement direction of the new component and the target component is a second direction; the deployment module 2520 is specifically used to: when the first direction is different from the second direction, create a first container and make the first container contain the target component; and insert the new component into the first container.

[0181] In another possible implementation, the display module 2510 is also used to: when it is detected that the new component is dragged to the first identifier and a displacement exceeding a first threshold occurs, a second identifier is displayed based on the association between the first identifier and the insertion position of the new component, and the second identifier indicates the insertion position of the new component relative to the parent-level container of the target component when the new component is released at the current position, and the parent-level container represents the container containing the target component; the deployment module 2520 is also used to: in response to the new component being released, insert the new component at the position indicated by the second identifier.

[0182] In another possible implementation, the display module 2510 is further used to: when it is detected that the new component is dragged to the second identifier and a displacement exceeding the second threshold occurs, a third identifier is displayed based on the association between the second identifier and the insertion position of the new component, and the third identifier indicates the insertion position of the new component relative to the parent secondary container of the target component when the new component is released at the current position, and the parent secondary container represents the container that contains the parent first-level container of the target component; the deployment module 2520 is further used to: in response to the new component being released, insert the new component at the position indicated by the third identifier.

[0183] In another possible implementation, the deployment module 2520 is further configured to: when detecting that the new component is dragged to the second area of the target component, replace the target component with the new component in response to the new component being released.

[0184] In another possible implementation, the display module 2510 is further configured to: when detecting that a new component is dragged to the second area of the target component, display replacement indication information, where the replacement indication information is related indication information that the target component is replaced with the new component.

[0185] In another possible implementation, when the new component is a component other than the target component that has been deployed on the page, the deployment module 2520 is further configured to swap the positions of the target component and the new component.

[0186] In another possible implementation, the deployment module 2520 is further configured to: after deleting the deployed components of the page, adjust the size of the remaining components of the page, and delete the second container when there is a second container containing only one component.

[0187] In another possible implementation, when the new component is a component that has been deployed on the page, the deployment module 2520 is specifically configured to: while inserting the new component into the first group, delete the new component at the original position, where the original position indicates the position of the new component before insertion.

[0188] In another possible implementation, the first area includes at least one of an upper area, a lower area, a left area, and a right area; the deployment module 2520 is specifically used to: when the first area is the upper area, the position indicated by the first identifier is the upper side of the target component, and the new component is inserted on the upper side of the target component; and when the first area is the lower area, the position indicated by the first identifier is the lower side of the target component, and the new component is inserted on the lower side of the target component; and when the first area is the left area, the position indicated by the first identifier is the left side of the target component, and the new component is inserted on the left side of the target component; and when the first area is the right area, the position indicated by the first identifier is the right side of the target component, and the new component is inserted on the right side of the target component.

[0189] Based on the same concept as the aforementioned embodiment, a computing device is also provided in the embodiment of the present application. The computing device includes at least a processor and a memory, and a program is stored in the memory. When the processor executes the program, it can implement the algorithm function embodied by the above method or device.

[0190] Figure 26 This is a schematic diagram of the structure of a computing device provided in an embodiment of the present application. Figure 26 As shown, the computing device 2600 includes at least one processor 2601, a memory 2602, and a communication interface 2603. The processor 2601, the memory 2602, and the communication interface 2603 are communicatively connected, and the communication connection can be achieved through a wired (e.g., bus) or wireless communication. The communication interface 2603 is used to receive data sent by other devices; the memory 2602 stores computer instructions, and the processor 2601 executes the computer instructions to perform the method in the aforementioned method embodiment.

[0191] It should be understood that in the embodiment of the present application, the processor 2601 may be a central processing unit (CPU), or may be other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware UI components, etc. A general-purpose processor may be a microprocessor or any conventional processor, etc.

[0192] The memory 2602 may include a read-only memory and a random access memory, and provides instructions and data to the processor 2601. The memory 2602 may also include a nonvolatile random access memory.

[0193] The memory 2602 may be a volatile memory or a non-volatile memory, or may include both volatile and non-volatile memories. The non-volatile memory may be a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), or a flash memory. The volatile memory may be a random access memory (RAM), which is used as an external cache. By way of example and not limitation, many forms of RAM are available, such as static RAM (SRAM), dynamic random access memory (DRAM), synchronous DRAM (SDRAM), double data rate synchronous dynamic random access memory (DDR SDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous link DRAM (SLDRAM), and direct ram bus RAM (DR RAM).

[0194] It should be understood that the computing device 2600 according to the embodiment of the present application can execute the method mentioned in the embodiment of the present application. The detailed description of the implementation of the method is given above and will not be repeated here for the sake of brevity.

[0195] An embodiment of the present application provides a computer-readable storage medium having a computer program stored thereon. When the computer instructions are executed by a processor, the above-mentioned technical solution is implemented.

[0196] An embodiment of the present application provides a chip, which includes at least one processor and an interface, wherein the at least one processor determines program instructions or data through the interface; the at least one processor is used to execute the program instructions to implement the technical solution mentioned above.

[0197] An embodiment of the present application provides a computer program or a computer program product, which includes instructions. When the instructions are executed, the computer is caused to execute the technical solution mentioned above.

[0198] Those skilled in the art should further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in terms of function in the above description. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art may use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0199] The steps of the methods or algorithms described in conjunction with the embodiments disclosed herein may be implemented using hardware, a software module executed by a processor, or a combination of the two. The software module may be placed in a random access memory (RAM), a memory, a read-only memory (ROM), an electrically programmable ROM, an electrically erasable programmable ROM, a register, a hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.

[0200] The specific implementation methods described above further illustrate the purpose, technical solutions and beneficial effects of this application. It should be understood that the above description is only the specific implementation methods of this application and is not intended to limit the scope of protection of this application. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of this application should be included in the scope of protection of this application.

Claims

1. A page layout method, characterized in that: include: When it is detected that a first UI component is dragged to a first area of a second UI component, a first identifier is displayed based on the association between the first area and the insertion position of the first UI component, where the second UI component is a UI component deployed on the page, and the first identifier indicates the insertion position of the first UI component relative to the second UI component when the first UI component is released at the current position; In response to the first UI component being released, the first UI component is inserted at the position indicated by the first identifier.

2. The method according to claim 1, characterized in that Before inserting the first UI component, the arrangement direction of the UI components in the parent first-level container of the second UI component is the first direction, and the parent first-level container is the container containing the second UI component; After the first UI component is inserted, the first UI component and the second UI component are arranged in a second direction; and the inserting of the first UI component includes: When the first direction is different from the second direction, creating a first container, and making the first container contain the second UI component; Insert the first UI component into the first container.

3. The method according to claim 1 or 2, characterized in that Also includes: When it is detected that the first UI component is dragged to the first identifier and a displacement exceeding a first threshold occurs, a second identifier is displayed based on the association between the first identifier and the insertion position of the first UI component, where the second identifier indicates the insertion position of the first UI component relative to a parent-level container of the second UI component when the first UI component is released at the current position, where the parent-level container represents a container containing the second UI component; In response to the first UI component being released, the first UI component is inserted at the position indicated by the second identifier.

4. The method according to claim 3, characterized in that Also includes: When it is detected that the first UI component is dragged to the second identifier and a displacement exceeding a second threshold occurs, based on the association between the second identifier and the insertion position of the first UI component, the third identifier is displayed, where the third identifier indicates the insertion position of the first UI component relative to the parent secondary container of the second UI component when the first UI component is released at the current position, where the parent secondary container represents a container that contains the parent primary container of the second UI component; In response to the first UI component being released, the first UI component is inserted at the position indicated by the third identifier.

5. The method according to any one of claims 1 to 4, characterized in that Also includes: When it is detected that the first UI component is dragged to the second area of the second UI component, in response to a release operation of the first UI component, the second UI component is replaced with the first UI component.

6. The method according to claim 5, characterized in that Also includes: When it is detected that the first UI component is dragged to the second area of the second UI component, replacement indication information is displayed, where the replacement indication information is related indication information that the second UI component is replaced by the first UI component.

7. The method according to claim 5 or 6, characterized in that When the first UI component is a UI component other than the second UI component that has been deployed on the page, replacing the second UI component with the first UI component includes: The second UI component and the first UI component are swapped in position.

8. The method according to any one of claims 1 to 7, characterized in that Also includes: After deleting the deployed UI components of the page, the sizes of the remaining UI components of the page are adjusted, and when a second container containing only one UI component exists, the second container is deleted.

9. The method according to any one of claims 1 to 8, characterized in that When the first UI component is a UI component that has been deployed on the page, inserting the first UI component includes: While inserting the first UI component, the first UI component at the original position is deleted, where the original position indicates the position of the first UI component before insertion.

10. The method according to any one of claims 1 to 9, characterized in that: The first area includes at least one of an upper area, a lower area, a left area, and a right area; In response to the first UI component being released, inserting the first UI component at the position indicated by the first identifier includes: When the first area is the upper area, the position indicated by the first marker is the upper side of the second UI component, and the first UI component is inserted above the second UI component; When the first area is the lower area, the position indicated by the first identifier is the lower side of the second UI component, and the first UI component is inserted below the second UI component; When the first area is the left area, the position indicated by the first identifier is the left side of the second UI component, and the first UI component is inserted to the left side of the second UI component; When the first area is the right area, the position indicated by the first identifier is the right side of the second UI component, and the first UI component is inserted on the right side of the second UI component.

11. A page layout device, characterized in that: include: A display module, configured to, upon detecting that a first UI component is dragged to a first area of a second UI component, display a first identifier based on an association between the first area and an insertion position of the first UI component, wherein the second UI component is a UI component deployed on the page, and the first identifier indicates the insertion position of the first UI component relative to the second UI component when the first UI component is released at the current position; A deployment module is configured to insert the first UI component at a position indicated by the first identifier in response to a release operation of the first UI component.

12. The device according to claim 11, characterized in that Before inserting the first UI component, the arrangement direction of the UI components in the parent first-level container of the second UI component is the first direction, and the parent first-level container is the container containing the second UI component; after inserting the first UI component, the arrangement direction of the first UI component and the second UI component is the second direction; the deployment module is specifically used to: When the first direction is different from the second direction, creating a first container, and making the first container contain the second UI component; Insert the first UI component into the first container.

13. The device according to claim 11 or 12, characterized in that The display module is further configured to: when detecting that the first UI component is dragged to the first identifier and a displacement exceeding a first threshold occurs, display a second identifier based on an association between the first identifier and the insertion position of the first UI component, wherein the second identifier indicates the insertion position of the first UI component relative to a parent-level container of the second UI component when the first UI component is released at the current position, where the parent-level container represents a container containing the second UI component; The deployment module is further configured to: in response to a release operation of the first UI component, insert the first UI component at a position indicated by the second identifier.

14. The device according to claim 13, characterized in that The display module is further configured to: when detecting that the first UI component is dragged to the second identifier and a displacement exceeding a second threshold occurs, display the third identifier based on the association between the second identifier and the insertion position of the first UI component, the third identifier indicating the insertion position of the first UI component relative to the parent secondary container of the second UI component when the first UI component is released at the current position, where the parent secondary container represents a container that contains the parent primary container of the second UI component; The deployment module is further configured to: in response to a release operation of the first UI component, insert the first UI component at the position indicated by the third identifier.

15. The device according to any one of claims 11 to 14, characterized in that The deployment module is further configured to: when detecting that the first UI component is dragged to the second area of the second UI component, replace the second UI component with the first UI component in response to a release operation of the first UI component.

16. The device according to claim 15, characterized in that The display module is further configured to: when detecting that the first UI component is dragged to the second area of the second UI component, display replacement indication information, where the replacement indication information is related indication information that the second UI component is replaced by the first UI component.

17. The device according to claim 15 or 16, characterized in that When the first UI component is a UI component other than the second UI component that has been deployed on the page, the deployment module is further configured to: swap the positions of the second UI component and the first UI component.

18. The device according to any one of claims 11 to 17, characterized in that The deployment module is further configured to: after deleting the deployed UI components of the page, adjust the sizes of the remaining UI components of the page, and when a second container containing only one UI component exists, delete the second container.

19. The device according to any one of claims 11 to 18, characterized in that When the first UI component is a UI component that has been deployed on the page, the deployment module is specifically configured to: while inserting the first UI component, delete the first UI component at an original position, where the original position indicates the position of the first UI component before insertion.

20. The device according to any one of claims 11 to 19, characterized in that The first area includes at least one of an upper area, a lower area, a left area, and a right area; The deployment module is specifically configured to: when the first area is the upper area, the position indicated by the first identifier is the upper side of the second UI component, and the first UI component is inserted above the second UI component; and When the first area is the lower area, the position indicated by the first identifier is the lower side of the second UI component, and the first UI component is inserted below the second UI component; as well as When the first area is the left area, the position indicated by the first identifier is the left side of the second UI component, and the first UI component is inserted to the left side of the second UI component; as well as When the first area is the right area, the position indicated by the first identifier is the right side of the second UI component, and the first UI component is inserted on the right side of the second UI component.

21. A computing device comprising a memory and a processor, characterized in that: Instructions are stored in the memory, and when the instructions are executed by the processor, the method according to any one of claims 1 to 10 is implemented.

22. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the method according to any one of claims 1 to 10 is implemented.

23. A computer program product, characterized in that The computer program product comprises program instructions, and when the program instructions are executed by a computer, the computer is caused to perform the method according to any one of claims 1 to 10.

Images