A form page display method and product

Abstract

The application provides a form page display method and product. The method comprises the following steps: in response to a display instruction of a first form page, determining a first candidate cell width of the first form page according to a first natural width of a first component and a number of occupied cells of the first component; the first component is a non-fixed-width component included in the first form page; determining a first target cell width of the first form page according to the first candidate cell width; and displaying the first form page according to the first target cell width, a target width corresponding to the first form page, the number of occupied cells and the display order of the components included in the first form page. The application determines the target cell width of the form page based on the natural width and the number of occupied cells of the non-fixed-width component, divides the form page into cells with the width, and allocates the cells to the components, so that the components are aligned in the form page, and the component alignment efficiency and the component alignment display effect of the form page are improved.

Description

Technical Field

[0001] This application relates to the field of display technology, specifically to a method and product for displaying a form page. Background Technology

[0002] As a window for user interaction, the user-friendliness of form pages and their visual appeal are increasingly valued. Form pages typically include multiple components, such as input fields, dropdown menus, and segmented controllers.

[0003] Aligning components on a form page can make the form page more aesthetically pleasing and more interactive. Most current alignment methods rely on alignment lines on the form page and use component dragging to align components. This method is inefficient and cannot guarantee the display effect of the aligned components.

[0004] Improving the efficiency and display effect of component alignment on form pages is an urgent problem to be solved. Summary of the Invention

[0005] The main objective of this application is to provide a method and product for displaying form pages, aiming to improve the component alignment efficiency and display effect of form pages.

[0006] This application provides a method for displaying a form page, comprising: responding to a display instruction for a first form page, determining a first candidate unit width of the first form page based on a first natural width of a first component and the number of units occupied by the first component; the first component being a component with a non-fixed width included in the first form page; determining a first target unit width of the first form page based on the first candidate unit width; and displaying the first form page based on the first target unit width, the target width corresponding to the first form page, the number of units occupied by the components included in the first form page, and the display order.

[0007] In one embodiment, after the step of displaying the first form page based on the first target unit width, the target width corresponding to the first form page, the number of units occupied by the components included in the first form page, and the display order, the form page display method further includes: in response to an event triggering a change in the natural width of the first component from the first natural width to the second natural width, determining a second candidate unit width of the first form page based on the second natural width of the first component and the number of units occupied by the first component; determining a second target unit width of the first form page based on the second candidate unit width; and updating the first form page based on the second target unit width, the target width corresponding to the first form page, the number of units occupied by the components, and the display order.

[0008] In one embodiment, the step of displaying the first form page based on the width of the first target unit, the target width corresponding to the first form page, the number of units occupied by the components included in the first form page, and their display order includes: obtaining the target display state of the first form page, wherein the target display state is an expanded state or a collapsed state; determining the number m of display components of the first form page based on the target display state, where m is a positive integer; and displaying the first form page based on the width of the first target unit, the target width corresponding to the first form page, the m components of the first form page, the number of units occupied by the m components, and their display order.

[0009] In one embodiment, determining the number m of display components of the first form page according to the target display state includes: determining the number of target row units of the first form page according to the width of the first target unit and the target width corresponding to the first form page; and determining the number m of display components of the first form page in the target display state according to the number of target row units, the number of display rows of the first form page in the target display state, the number of units occupied by the components, and the display order.

[0010] In one embodiment, after the step of displaying the first form page based on the first target unit width, the target width corresponding to the first form page, the number of units occupied by the components included in the first form page, and their display order, the method for displaying the form page further includes: determining a scaling factor of the first form page in response to a scaling operation on the first form page; multiplying the first target unit width by the scaling factor to obtain a third reference unit width of the first form page; determining a third target unit width of the first form page based on the third reference unit width; and updating the first form page based on the third target unit width, the target width corresponding to the first form page, the number of units occupied by the components, and their display order.

[0011] In one embodiment, the step of determining the first target cell width of the first form page based on the width of the first candidate cell includes: determining the larger value between the width of the first candidate cell and the preset minimum cell width of the first form page as the first reference cell width of the first form page; determining the number of cells in the first row of the first form page based on the width of the first reference cell and the target width corresponding to the first form page; rounding down the number of cells in the first row when the number of cells in the first row is not an integer to obtain the number of cells in the second row of the first form page; comparing a first value with a target value for the row fill rate of the first form page to obtain a comparison result; the first value is the ratio of a second value to the target width corresponding to the first form page, and the second value is the product of the number of cells in the second row and the width of the first reference cell; and determining the first target cell width based on the number of cells in the second row and the target width corresponding to the first form page when the comparison result is that the first value is less than the target value.

[0012] This application also provides a form page display system, including a first unit width module, a second unit width module, and a form page display module; the first unit width module is used to respond to a display instruction of a first form page and determine a first candidate unit width of the first form page based on a first natural width of a first component and the number of units occupied by the first component; the first component is a component with a non-fixed width included in the first form page; the second unit width module is used to determine a first target unit width of the first form page based on the first candidate unit width; the form page display module is used to display the first form page based on the first target unit width, the target width corresponding to the first form page, the number of units occupied by the components included in the first form page, and the display order.

[0013] This application also provides an electronic device, which includes a memory and a processor. The memory stores a computer program, and the processor executes the computer program to implement the above-described method for displaying the form page.

[0014] This application also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the above-described method for displaying a form page.

[0015] This application also provides a computer program product, which is stored in a storage medium and implements the above-described form page display method when executed by at least one processor.

[0016] This application provides a method and product for displaying a form page. By dividing the form page into units and assigning units to components at the unit level, the display alignment of components within the form page can be achieved, improving the efficiency of component alignment. Furthermore, by utilizing the first natural width of the first component included in the first form page and the number of units occupied by the first component, the width of the first candidate unit of the first form page is determined. Based on the width of the first candidate unit, the width of the first target unit of the first form page is determined. In this way, the target unit width suitable for all components included in the form page can be determined, thereby improving the component alignment display effect of the form page. Attached Figure Description

[0017] Figure 1 This is a flowchart illustrating the method for displaying a form page provided in an embodiment of this application;

[0018] Figure 2 This is a schematic diagram illustrating the effect of the form page display method provided in the embodiments of this application. Figure 1 ;

[0019] Figure 3 This is a schematic diagram illustrating the effect of the form page display method provided in the embodiments of this application. Figure 2 ;

[0020] Figure 4 This is a schematic diagram illustrating the effect of the form page display method provided in the embodiments of this application. Figure 3 ;

[0021] Figure 5 This is a schematic diagram illustrating the effect of the form page display method provided in the embodiments of this application. Figure 4 ;

[0022] Figure 6 This is a schematic diagram of the structure of the form page display system provided in the embodiments of this application;

[0023] Figure 7This is a schematic diagram of the structure of an embodiment of the electronic device provided in this application;

[0024] Figure 8 This is a schematic diagram of another embodiment of the electronic device provided in this application. Detailed Implementation

[0025] The technical solutions of the embodiments of this application will be clearly described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of this application. All other embodiments obtained by those skilled in the art based on the embodiments of this application are within the scope of protection of this application.

[0026] The terms "first," "second," etc., used in the specification and claims of this application are used to distinguish similar objects and not to describe a specific order or sequence. It should be understood that such use of data can be interchanged where appropriate so that embodiments of this application can be implemented in orders other than those illustrated or described herein, and the objects distinguished by "first," "second," etc., are generally of the same class and the number of objects is not limited; for example, a first object can be one or more. Furthermore, in the specification and claims, "and / or" indicates at least one of the connected objects, and the character " / " generally indicates that the preceding and following objects are in an "or" relationship.

[0027] The form page display method provided in this application can be applied to a terminal, a server, or software running on either a terminal or a server. In some embodiments, the terminal can be a smartphone, tablet, laptop, desktop computer, etc.; the server can be configured as an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms; the software can be an application that implements the form page display method, but is not limited to the above forms.

[0028] The method for displaying the form page provided in this application will be described in detail below with reference to the accompanying drawings and specific embodiments.

[0029] Please see Figure 1 The present application provides a method for displaying a form page, which may include:

[0030] Step S101: In response to the display instruction of the first form page, determine the width of the first candidate cell of the first form page based on the first natural width of the first component and the number of cells occupied by the first component; the first component is a component with a non-fixed width included in the first form page;

[0031] Step S102: Determine the width of the first target cell on the first form page based on the width of the first candidate cell;

[0032] Step S103: Display the first form page according to the width of the first target unit, the target width corresponding to the first form page, the number of units occupied by the components included in the first form page, and the display order.

[0033] This application provides a method for displaying a form page. By dividing the form page into units and assigning units to components at the unit level, the display alignment of components within the form page can be achieved, improving the efficiency of component alignment. Furthermore, by utilizing the first natural width of the first component included in the first form page and the number of units occupied by the first component, the width of the first candidate unit of the first form page is determined. Based on the width of the first candidate unit, the width of the first target unit of the first form page is determined. In this way, the target unit width suitable for all components included in the form page can be determined, thereby improving the component alignment display effect of the form page.

[0034] Optionally, the natural width of the first component is the width that the first component intends to occupy when its width is not explicitly specified. The natural width of the first component will change depending on the displayed content. Generally, to ensure that the content of the first component is fully displayed, the display width of the first component on the form page should not be less than its natural width. Optionally, the default minimum unit width is 210 pixels. Optionally, the target width of the first form page is equal to the width of the container on the first form page used to accommodate the component.

[0035] In one embodiment, the step S101 above, which determines the width of the first candidate cell of the first form page based on the first natural width of the first component included in the first form page and the number of cells occupied by the first component, includes:

[0036] The ratio of the first natural width of the first component to the number of cells occupied by the first component is determined as the width of the first candidate cell of the first form page.

[0037] In another embodiment, determining the width of the first candidate cell of the first form page based on the first natural width of the first component included in the first form page and the number of cells occupied by the first component in step S101 includes:

[0038] The width of the first candidate cell is determined using the following formula:

[0039] L'1=n'1*w0+(n'1-1)*r

[0040] Where L'1 represents the first natural width of the first component, n'1 represents the number of units occupied by the first component, w0 represents the width of the first candidate unit, r represents the unit spacing, and r is a preset value. Optionally, r = 16 pixels.

[0041] It is worth mentioning that when the number of first components included in the form page is greater than 1, the width of the first candidate unit corresponding to each first component can be determined according to the first natural width of each first component and the number of units occupied by each first component. Then, the maximum value of the width of the first candidate unit corresponding to each first component can be selected as the width of the first candidate unit of the first form page.

[0042] In one embodiment, step S102 above: determining the width of the first target cell on the first form page based on the width of the first candidate cell, includes:

[0043] The larger value between the width of the first candidate cell and the preset minimum cell width of the first form page is determined as the width of the first reference cell of the first form page;

[0044] The width of the first target cell on the first form page is determined based on the width of the first reference cell.

[0045] In this embodiment of the application, when the first form page has a minimum unit width requirement, the larger value between the first candidate unit width and the preset minimum unit width of the first form page is determined as the first reference unit width of the first form page. Based on the first reference unit width, the first target unit width of the first form page is determined. In this way, the target unit width suitable for all components included in the form page can be determined while satisfying the preset minimum unit width of the form page, thereby improving the component alignment display effect of the form page.

[0046] Determining the width of the first target cell on the first form page based on the width of the first reference cell can include:

[0047] The width of the first reference cell is determined as the width of the first target cell on the first form page.

[0048] In this embodiment of the application, when the first form page has a minimum unit width requirement, the larger value between the first candidate unit width and the preset minimum unit width of the first form page is directly determined as the first target unit width of the first form page. This allows for the rapid determination of the target unit width suitable for all components included in the form page while satisfying the preset minimum unit width of the form page, thereby improving the component alignment efficiency and component alignment display effect of the form page.

[0049] The above-mentioned determination of the width of the first target cell of the first form page based on the width of the first reference cell may further include:

[0050] The number of cells in the first row of the first form page is determined based on the width of the first reference cell and the target width corresponding to the first form page.

[0051] If the number of cells in the first row is an integer, the width of the first reference cell is determined as the width of the first target cell.

[0052] If the number of cells in the first row is not an integer, the number of cells in the first row is rounded down to obtain the number of cells in the second row of the first form page. The first value is then compared with the target value of the row fill rate of the first form page to obtain the comparison result.

[0053] If the comparison result shows that the first value is less than the target value, the width of the first target cell is determined based on the number of cells in the second row and the target width corresponding to the first form page.

[0054] If the comparison result is that the first value is greater than or equal to the target value, the width of the first reference cell is determined as the width of the first target cell;

[0055] The first value is the ratio of the second value to the target width of the first form page, and the second value is the product of the number of cells in the second row and the width of the first reference cell.

[0056] Optionally, the number of cells in the first row of the first form page can be calculated using the following formula:

[0057] L=n1*w1+(n1-1)*r

[0058] Where L represents the target width of the first form page, n1 represents the number of cells in the first row, w1 represents the width of the first reference cell, and r represents the cell spacing.

[0059] If the number of cells in the first row n1 calculated by the above formula is not an integer, then the number of cells in the first row n1 can be rounded down to obtain the number of cells in the second row n2 of the first form page. For example, if n1 = 4.3, by rounding down, we can get n2 = 4.

[0060] Furthermore, the second value A2 = n2 * w1, and the first value A1 = A2 / L = (n2 * w1) / L.

[0061] Optionally, the target value for the row fill rate of the first form page is A0 = [L - (n2 - 1) * r] / L.

[0062] If A1 < A0, the width w'1 of the first target cell can be calculated using the following formula:

[0063] L=n2*w'1+(n2-1)*r,or

[0064] L=n2*w'1

[0065] If A1≥A0, then the width of the first target element w'1 = the width of the first reference element w1.

[0066] Taking the first component as a segmented controller component as an example, such as Figure 2 As shown, when A1 < A0, if the width w1 of the first reference unit is directly used as the width w'1 of the first target unit, the display width of the segment controller component on the first form page is the width of the red box = 2 * w1. If the width w'1 of the first target unit is calculated by the formula L = n2 * w'1 + (n2 - 1) * r, the display width of the segment controller component on the first form page is widened from the width of the red box 2 * w1 to 2 * w'1 along the direction of the arrow, making the fill rate of the first form page higher, the first form page more beautiful and more interactive.

[0067] In this embodiment, when the first form page has a minimum unit width requirement, the number of units in the first row of the first form page is determined based on the width of the first reference unit and the target width corresponding to the first form page. If the number of units in the first row is not an integer, it is rounded down to obtain the number of units in the second row of the first form page. Based on the comparison between the first value determined by the number of units in the second row and the target value of the row fill rate of the first form page, the first target unit width is further determined based on the number of units in the second row and the target width corresponding to the first form page. This can further improve the fill rate of the first form page while ensuring the alignment of each component in the first form page, making the first form page more beautiful and more interactive.

[0068] In another embodiment, step S102 above: determining the width of the first target cell on the first form page based on the width of the first candidate cell includes:

[0069] The width of the first candidate cell is determined as the width of the first target cell on the first form page.

[0070] In this embodiment of the application, when there is no minimum unit width requirement on the first form page, the width of the first candidate unit is directly determined as the width of the first target unit of the first form page, and the first form page and components are divided based on the width of the first target unit. This can improve the component alignment efficiency and component alignment display effect of the form page.

[0071] In another embodiment, step S102 above: determining the width of the first target cell on the first form page based on the width of the first candidate cell includes:

[0072] The number of cells in the third row of the first form page is determined based on the width of the first candidate cell and the target width corresponding to the first form page.

[0073] If the number of cells in the third row is an integer, the width of the first candidate cell is determined as the width of the first target cell.

[0074] If the number of cells in the third row is not an integer, the number of cells in the third row is rounded down to obtain the number of cells in the fourth row of the first form page. The third value is then compared with the target value of the row fill rate of the first form page to obtain the comparison result.

[0075] If the comparison result shows that the third value is less than the target value, the width of the first target cell is determined based on the number of cells in the fourth row and the target width corresponding to the first form page.

[0076] If the comparison result shows that the third value is greater than or equal to the target value, the width of the first candidate cell is determined as the width of the first target cell.

[0077] The third value is the ratio of the fourth value to the target width of the first form page, and the fourth value is the product of the number of cells in the fourth row and the width of the first candidate cell.

[0078] The above method of determining the width of the first target cell based on the number of cells in the fourth row and the target width corresponding to the first form page can be referenced from the process of determining the width of the first target cell based on the number of cells in the second row and the target width corresponding to the first form page, which will not be repeated here.

[0079] In this embodiment of the application, when there is no minimum unit width requirement for the first form page, the number of units in the first row of the first form page is determined based on the width of the first candidate unit and the target width corresponding to the first form page. If the number of units in the first row is not an integer, it is rounded down to obtain the number of units in the second row of the first form page. Based on the comparison between the third value determined by the number of units in the second row and the target value of the row fill rate of the first form page, the first target unit width is further determined based on the number of units in the second row and the target width corresponding to the first form page. This can further improve the fill rate of the first form page while ensuring the alignment of each component in the first form page, making the first form page more beautiful and more interactive.

[0080] It is worth mentioning that the components included in the first form page in step S103 above are any type of components included in the first form page, that is, any component included in the first form page can be a non-fixed width component or a fixed width component.

[0081] For example, the first form page includes eight selection box components, one segment controller component, and one operation button combination component. The eight selection box components are all fixed-width components, and their labels to be displayed on the first form page are: Period, Calculate or Not, Indicator Type, Submitter, Reviewer, Tracker, Indicator ID / Name, and Result Inconsistency, respectively. The segment controller component is a non-fixed-width component, and its label to be displayed on the first form page is "Status." The operation button combination component is a fixed-width component, and the labels to be displayed for each operation button on the first form page are "Reset," "Query," and "Collapse," respectively. Each selection box component occupies one unit, the segment controller component occupies two units, and the operation button combination component occupies one unit. The components are displayed on the first form page in the following order from front to back: Period selection box component, Segment controller component, Result Inconsistency selection box component, Indicator ID / Name selection box component, Calculate or Not selection box component, Indicator Type selection box component, Submitter selection box component, Reviewer selection box component, Tracker selection box component, and Operation Button Combination Component.

[0082] Furthermore, the width of the first candidate unit on the first form page can be determined based on the first natural width of the segment controller component and the number of occupied units. Next, the larger of the first candidate unit width and the preset minimum unit width of the first form page can be determined as the first reference unit width of the first form page, and the first target unit width l1 of the first form page can be determined based on the first reference unit width. Then, the number of row units on the first form page can be determined based on the first target unit width l1 and the corresponding target width of the first form page. That is, the first form page is divided into units of the first target unit width l1. Based on the number of row units on the first form page and the number of occupied units of the components, according to the display order of the components on the first form page from front to back, the first division unit of the first row on the first form page can be assigned to the periodic selection box component, the second and third division units of the first row to the segment controller component, the fourth division unit of the first row to the result inconsistency selection box component, and so on. The fifth division unit is assigned to the indicator ID / name selection box component, the first division unit in the second row is assigned to the "Calculate?" selection box component, the second division unit in the second row is assigned to the indicator type selection box component, the third division unit in the second row is assigned to the submitter selection box component, the fourth division unit in the second row is assigned to the reviewer selection box component, the fifth division unit in the second row is assigned to the tracker selection box component, and the first division unit in the third row is assigned to the operation button combination component allocation unit. This ensures that the eight selection box components, one segment controller component, and one operation button combination component are aligned on the first form page, resulting in the following: Figure 3 The first form page shown.

[0083] Continue to refer to Figure 3 Since the determined first target unit width l1 is suitable for each component, the content displayed by the segment controller component can be fully displayed on the first form page, and the sum of the display width of the indicator type selection box component and the filler selection box component and the unit spacing is exactly equal to the display width of the segment controller component, thus achieving a good component alignment display effect.

[0084] In one embodiment, after step S103 above: displaying the first form page according to the width of the first target unit, the target width corresponding to the first form page, the number of units occupied by the components of the first form page, and the display order, the form page display method provided in this application embodiment further includes:

[0085] In response to an event that triggers the change of the natural width of the first component from the first natural width to the second natural width, the width of the second candidate cell of the first form page is determined based on the second natural width of the first component and the number of cells occupied by the first component.

[0086] The width of the second target cell on the first form page is determined based on the width of the second candidate cell.

[0087] Update the first form page based on the width of the second target cell, the target width of the first form page, the number of cells occupied by the components on the first form page, and their display order.

[0088] Combination Figure 3 and Figure 4 When the user selects period 202408 through the period selection box component, the segment controller component displays five items: All, Pending Submission, Under Review, Completed, and No Required to Fill In. When the user selects period 202407 through the period selection box component, the segment controller component displays six items: All, Pending Submission, Under Review, Completed, Filling Closed, and No Required to Fill In. Furthermore, the number of the same item displayed may not be the same in different periods. For example, the number of items under review in period 202407 is 7, while the number of items under review in period 202408 is 63. Changes in the displayed items and the number of items displayed will cause changes in the natural width of the segment controller component.

[0089] Furthermore, in response to the user changing the selection period from 202708 to 202707, the second natural width of the segment controller component corresponding to period 202707 can be obtained. Based on the second natural width of the segment controller component, the number of occupied units, and the preset minimum unit width, the second target unit width l2 of the first form page can be determined. Further, based on the second target unit width l2 and the target width corresponding to the first form page, the number of row units on the first form page can be determined. That is, the first form page is re-divided into units of the second target unit width l2, and based on the number of row units, the number of occupied units of the components, and the display order, the division units on the first form page are redistributed to 8 selection box components, 1 segment controller component, and 1 operation button combination component, so that the 8 selection box components, 1 segment controller component, and 1 operation button combination component can still be aligned in the first form page, resulting in... Figure 4 The first form page shown.

[0090] Continue to refer to Figure 4When the selection period is changed from 202708 to 202707, the eight selection box components, one segment controller component, and one operation button combination component are re-aligned and displayed on the form page in the order of display. Since the determined first target cell width l2 is suitable for each component, the display content of the segment controller component corresponding to the period 202707 can still be fully displayed on the first form page. The sum of the display width of the indicator type selection box component and the cell spacing of the filler selection box component is still equal to the display width of the segment controller component, which also has a good component alignment display effect.

[0091] The process of determining the width of the second candidate cell of the first form page based on the second natural width of the first component and the number of cells occupied by the first component can be referred to the implementation process of step S101 above, and will not be repeated here.

[0092] The process of determining the width of the second target cell of the first form page based on the width of the second candidate cell can be referred to the implementation process of step S102 above, and will not be repeated here.

[0093] This application embodiment, in response to an event triggering a change in the natural width of the first component from a first natural width to a second natural width, determines the second target unit width of the first form page based on the second natural width of the first component, the number of occupied units, and a preset minimum unit width. The first form page is then re-divided into units of the second target unit width, and the divided units on the first form page are redistributed to the components. This ensures that the components in the first form page can still be aligned within the first form page, further improving the component alignment efficiency and display effect of the form page.

[0094] In one embodiment, step S103 above: displaying the first form page according to the width of the first target unit, the target width corresponding to the first form page, the number of units occupied by the components of the first form page, and the display order, includes:

[0095] Get the target display state of the first form page, which is either expanded or collapsed.

[0096] Based on the target display status, determine the number m of display components on the first form page, where m is a positive integer;

[0097] The first form page is displayed based on the width of the first target unit, the target width corresponding to the first form page, the m components of the first form page, the number of units occupied by the m components, and the display order.

[0098] Optionally, the unfolded state can be either fully unfolded or partially unfolded.

[0099] The m components of the first form page can be any m components included in the first form page, or the first m components of the first form page determined according to the display order of the components on the first form page, or the s components that must be displayed on the first form page in the target display state, and the first ms components of the first form page other than the above s components determined according to the display order of the components on the first form page, where s is a positive integer.

[0100] For example, the components are displayed in the following order on the first form page: period selection box component, segment controller component, result inconsistency selection box component, indicator ID / name selection box component, whether to calculate selection box component, indicator type selection box component, submitter selection box component, reviewer selection box component, tracker selection box component, and operation button combination component. Assuming that the number of components displayed on the first form page is m=3 when the target display state is collapsed, and the operation button combination component is a component that must be displayed on the first form page when collapsed, then based on the display order of each component on the first form page, the first two components (excluding the operation button combination component) on the first form page are determined to be the period selection box component and the segment controller component, respectively. Finally, the three components to be displayed when the first form page is collapsed are the period selection box component, the segment controller component, and the operation button combination component.

[0101] Assuming the target width of the first form page is determined to be 5 row units based on the width of the first target unit and the corresponding target width of the first form page, the number of row units on the first form page can be allocated as follows, according to the number of row units and the number of units occupied by the periodic selection box component, the segment controller component, and the operation button combination component: the first division unit of the first row is allocated to the periodic selection box component, the second and third division units of the first row are allocated to the segment controller component, and the fourth division unit of the first row is allocated to the operation button combination component, in the order of display from front to back. Figure 5 The first form page shown.

[0102] This application embodiment determines the number m of display components on the first form page in the target display state, divides the first form page into units of the width of the first target unit, and assigns the division units on the first form page to the m components of the first form page. This ensures that the components displayed on the first form page can be aligned in the first form page under different display states or when the display state is switched, thereby further improving the component alignment efficiency and component alignment display effect of the form page.

[0103] In one embodiment, determining the number m of display components on the first form page based on the target display state includes:

[0104] The minimum value between the preset number of display components in the target display state and the number of components included in the first form page is determined as the number of display components m of the first form page.

[0105] For example, in the expanded state of the first form page, the preset number of displayed components is 5. If the first form page includes 10 components, then the number of displayed components m = 5.

[0106] In another embodiment, determining the number m of display components on the first form page based on the target display state includes:

[0107] The number of target row cells for the first form page is determined based on the width of the first target cell and the target width corresponding to the first form page.

[0108] The number of components m displayed on the first form page in the target display state is determined based on the number of target row units, the number of rows displayed on the first form page in the target display state, the number of units occupied by the components, and the display order.

[0109] Optionally, if the number of units in the first row n1 is an integer, the number of units in the target row n = the number of units in the first row n1; if the number of units in the first row is not an integer, the number of units in the target row n = the number of units in the second row n2.

[0110] Furthermore, the number of target row cells can be multiplied by the number of rows displayed on the first form page in the target display state to obtain the total number of cells that can be occupied on the first form page in the target display state, 'a'. Furthermore, if there are no components that must be displayed on the first form page in the target display state, the number of cells occupied by each component can be accumulated sequentially according to the display order of each component on the first form page from front to back. If the accumulated value of the number of cells occupied by the first b components is less than or equal to the number of cells that can be occupied, 'a', and the accumulated value of the number of cells occupied by the first b+1 components is greater than the number of cells that can be occupied, then the number of display components on the first form page, m = b, is determined.

[0111] If, under the target display state, there are s components that must be displayed on the first form page, then the number of units occupied by the components other than the aforementioned s components can be accumulated sequentially according to the display order of each component on the first form page from front to back. If the accumulated value of the number of units occupied by the first c components other than the aforementioned s components is less than or equal to ad, and the accumulated value of the number of units occupied by the first c+1 components other than the aforementioned s components is greater than ad, then the number of components to be displayed on the first form page is determined to be m = s + c, where d is the sum of the number of units occupied by the aforementioned s components.

[0112] This application embodiment determines the number of target row units of the first form page by using the width of the first target unit and the target width corresponding to the first form page. Based on the number of target row units, the number of rows displayed on the first form page in the target display state, the number of units occupied by the components, and the display order, the number of components m displayed on the first form page in the target display state can be accurately determined. This can improve the accuracy of allocating the division units on the first form page to the m components of the first form page, and further improve the component alignment efficiency and component alignment display effect of the form page.

[0113] In one embodiment, after step S103 above: displaying the first form page according to the width of the first target unit, the target width corresponding to the first form page, the number of units occupied by the components included in the first form page, and the display order, the form page display method provided in this application embodiment further includes:

[0114] In response to a zoom operation on the first form page, determine the zoom level of the first form page;

[0115] Multiply the width of the first target cell by the scaling factor to obtain the width of the third reference cell on the first form page;

[0116] Determine the width of the third target cell on the first form page based on the width of the third reference cell;

[0117] Update the first form page based on the width of the third target unit, the target width corresponding to the first form page, the number of units occupied by the components included in the first form page, and their display order.

[0118] This application embodiment determines the width of the third reference unit of the first form page in response to a scaling operation on the first form page, determines the width of the third target unit of the first form page based on the width of the third reference unit, divides the first form page with the width of the third target unit, and sequentially assigns the division units on the first form page to each component according to the display order of each component on the first form page from front to back, which can further improve the component alignment efficiency and component alignment display effect of the form page.

[0119] Determining the width of the third target cell on the first form page based on the width of the third reference cell can include:

[0120] If there is no minimum cell width requirement on the first form page, the width of the third reference cell will be determined as the width of the third target cell on the first form page.

[0121] If the first form page has a minimum cell width requirement, the larger value between the third reference cell width and the preset minimum cell width of the first form page is determined as the third target cell width of the first form page.

[0122] Optionally, when the scaling operation on the first form page is to shrink the first form page, the scaling factor of the first form page is less than 1. The width of the first target unit is multiplied by the scaling factor, resulting in a third reference unit width that is less than the first target unit width. Assuming the third reference unit width is less than or equal to a preset minimum unit width, the preset minimum unit width can be determined as the third target unit width. Further, based on the preset minimum unit width and the target width corresponding to the first form page, the number of row units on the first form page can be determined. That is, the first form page is divided into units with the preset minimum unit width, resulting in the number of division units per row of the first form page. Further, based on the number of row units on the first form page and the number of units occupied by each component, the division units on the first form page are sequentially allocated to each component according to the display order of each component on the first form page from front to back, resulting in an updated first form page.

[0123] Optionally, when the scaling operation on the first form page is to enlarge the first form page, and the scaling factor of the first form page is greater than 1, the width of the first target unit is multiplied by the scaling factor. The resulting width of the third reference unit of the first form page is greater than the width of the first target unit. Since the width of the first target unit is greater than the preset minimum unit width, the width of the third reference unit is also greater than the preset minimum unit width. Therefore, the width of the third reference unit can be directly determined as the width of the third target unit. Furthermore, based on the width of the third reference unit and the target width corresponding to the first form page, the number of row units of the first form page can be determined. That is, the first form page is divided according to the width of the third reference unit to obtain the number of division units per row of the first form page. Further, according to the number of row units of the first form page and the number of units occupied by the components, the division units on the first form page can be sequentially allocated to each component according to the display order of each component on the first form page from front to back, to obtain the updated first form page.

[0124] This embodiment of the application determines the width of the third reference unit of the first form page in response to a scaling operation. If the first form page has a minimum unit width requirement, the larger of the third reference unit width and the preset minimum unit width of the first form page is determined as the third target unit width of the first form page. The first form page is then divided using the third target unit width. Furthermore, according to the display order of each component on the first form page from front to back, the divided units on the first form page are sequentially assigned to each component. In this way, while satisfying the preset minimum unit width of the form page, the target unit width suitable for all components included in the form page can be quickly determined, further improving the component alignment efficiency and component alignment display effect of the form page.

[0125] The form page display method provided in this application embodiment determines the first target unit width of the first form page based on the natural width and number of units occupied by the first form page components. The first form page is then divided into units of the first target unit width, and the divided units on the first form page are allocated to m components to be displayed in the target display state of the first form page. This ensures that the components displayed on the first form page are aligned within the first form page regardless of different display states or when the display state is switched. After displaying the first form page with aligned components, a second target unit width or a third target unit width can be determined in response to an event triggering a change in the natural width of the components in the first form page, or a scaling operation on the first form page. The first form page is then divided into units of the second target unit width or the third target unit width, and the divided units on the first form page are allocated to the components of the first form page. This ensures that even when the natural width of the components changes or the first form page is scaled, the components displayed on the first form page remain aligned within the first form page. In addition, in the process of determining the width of the first target cell of the first form page based on the natural width and number of cells occupied by the components of the first form page, by rounding down the number of row cells and determining the width of the first target cell based on the rounded number of row cells and the target width corresponding to the first form page, the fill rate of the first form page can be further improved while ensuring the alignment of each component in the first form page, making the first form page more beautiful and more interactive.

[0126] Please see Figure 6 This application also provides a form page display system 600, which can implement the above-mentioned form page display method. The system includes: a first unit width module 601, a second unit width module 602, and a form page display module 603.

[0127] The first unit width module 601 is used to respond to the display instruction of the first form page and determine the width of the first candidate unit of the first form page according to the first natural width of the first component and the number of units occupied by the first component; the first component is a component with a non-fixed width included in the first form page.

[0128] The second unit width module 602 is used to determine the width of the first target unit of the first form page based on the width of the first candidate unit;

[0129] The form page display module 603 is used to display the first form page according to the width of the first target unit, the target width corresponding to the first form page, the number of units occupied by the components included in the first form page, and the display order.

[0130] The form page display system provided in this application embodiment can implement all the steps of the form page display method embodiment described above, and can achieve the same technical effect. To avoid repetition, it will not be described again here.

[0131] Optionally, such as Figure 7 As shown in the illustration, this application also provides an electronic device 700, including a processor 701 and a memory 702. The memory 702 stores a program or instructions that can run on the processor 701. When the program or instructions are executed by the processor 701, they implement the various steps of the above-described form page display method embodiment and achieve the same technical effect. To avoid repetition, they will not be described again here. It should be noted that the electronic device in this application embodiment includes the above-described mobile electronic device and non-mobile electronic device.

[0132] Figure 8 To illustrate the hardware structure of the electronic device according to the embodiments of this application, the electronic device includes:

[0133] The processor 801 can be implemented using a general-purpose CPU (Central Processing Unit), microprocessor, application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of this application.

[0134] The memory 802 can be implemented as a read-only memory (ROM), a static storage device, a dynamic storage device, or a random access memory (RAM). The memory 802 can store the operating system and other application programs. When the technical solutions provided in the embodiments of this specification are implemented through software or firmware, the relevant program code is stored in the memory 802 and is called and executed by the processor 801 to execute the form page display method of the embodiments of this application.

[0135] The 803 input / output interface is used to implement information input and output.

[0136] The communication interface 804 is used to enable communication and interaction between this device and other devices. Communication can be achieved through wired means (such as USB, Ethernet cable, etc.) or wireless means (such as mobile network, WIFI, Bluetooth, etc.).

[0137] Bus 805 transmits information between various components of the device (e.g., processor 801, memory 802, input / output interface 803, and communication interface 804);

[0138] The processor 801, memory 802, input / output interface 803, and communication interface 804 are connected to each other within the device via bus 805.

[0139] The electronic device provided in this application embodiment can implement all the steps of the above-described form page display method embodiment and achieve the same technical effect. To avoid repetition, it will not be described again here.

[0140] This application also provides a computer-readable storage medium storing a program or instructions. When the program or instructions are executed by a processor, they implement the various steps of the above-described form page display method embodiment and achieve the same technical effect. To avoid repetition, they will not be described again here.

[0141] The processor is the processor in the electronic device described in the above embodiments. The computer-readable storage medium includes computer-readable storage media such as computer read-only memory (ROM), random access memory (RAM), magnetic disk, or optical disk.

[0142] This application embodiment also provides a chip, which includes a processor and a communication interface. The communication interface and the processor are coupled. The processor is used to run programs or instructions to implement the various steps of the above-described form page display method embodiment and can achieve the same technical effect. To avoid repetition, it will not be described again here.

[0143] It should be understood that the chip mentioned in the embodiments of this application may also be referred to as a system-on-a-chip, system chip, chip system, or system-on-a-chip, etc.

[0144] This application provides a computer program product stored in a storage medium. The program product is executed by at least one processor to implement the various steps of the form page display method embodiment described above, and can achieve the same technical effect. To avoid repetition, it will not be described again here.

[0145] It should be noted that, in this document, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not delete other identical elements present in the process, method, article, or apparatus that includes that element. Furthermore, it should be noted that the scope of the methods and apparatuses in the embodiments of this application is not limited to performing functions in the order shown or discussed, but may also include performing functions substantially simultaneously or in the reverse order, depending on the functions involved. For example, the described methods may be performed in a different order than described, and various steps may be added, omitted, or combined. Additionally, features described with reference to certain examples may be combined in other examples.

[0146] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a computer software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) and includes several instructions to cause a terminal (which may be a mobile phone, computer, server, or network device, etc.) to execute the methods described in the various embodiments of this application.

[0147] The embodiments of this application have been described above with reference to the accompanying drawings. However, this application is not limited to the specific embodiments described above. The specific embodiments described above are merely illustrative and not restrictive. Those skilled in the art can make many other forms under the guidance of this application without departing from the spirit and scope of the claims, and all of these forms are within the protection scope of this application.

Claims

1. A method for displaying a form page, characterized in that, include: In response to the display instruction of the first form page, the width of the first candidate unit of the first form page is determined according to the first natural width of the first component and the number of units occupied by the first component; the first component is a component with a non-fixed width included in the first form page; the natural width of the first component is the width that the first component itself wants to occupy when the width of the first component is not explicitly specified, and the natural width of the first component changes with the display content of the first component; The width of the first target cell on the first form page is determined based on the width of the first candidate cell. The first form page is displayed based on the width of the first target unit, the target width corresponding to the first form page, the number of units occupied by the components included in the first form page, and their display order.

2. The method for displaying a form page as described in claim 1, characterized in that, After the step of displaying the first form page based on the width of the first target unit, the target width corresponding to the first form page, the number of units occupied by the components included in the first form page, and their display order, the method for displaying the form page further includes: In response to an event that triggers the natural width of the first component to change from the first natural width to the second natural width, the second candidate cell width of the first form page is determined based on the second natural width of the first component and the number of cells occupied by the first component. The width of the second target cell on the first form page is determined based on the width of the second candidate cell. The first form page is updated based on the width of the second target unit, the target width corresponding to the first form page, the number of units occupied by the component, and the display order.

3. The method for displaying a form page as described in claim 1, characterized in that, The step of displaying the first form page based on the width of the first target unit, the target width corresponding to the first form page, the number of units occupied by the components included in the first form page, and their display order includes: Obtain the target display state of the first form page, wherein the target display state is either expanded or collapsed. Based on the target display state, determine the number m of display components on the first form page, where m is a positive integer; The first form page is displayed based on the width of the first target unit, the target width corresponding to the first form page, the m components of the first form page, the number of units occupied by the m components, and their display order.

4. The method for displaying a form page as described in claim 3, characterized in that, Determining the number m of display components on the first form page based on the target display state includes: The number of target row units of the first form page is determined based on the width of the first target unit and the target width corresponding to the first form page; The number of display components m of the first form page in the target display state is determined based on the number of target row units, the number of display rows of the first form page in the target display state, the number of units occupied by the components, and the display order.

5. The method for displaying a form page as described in claim 1, characterized in that, After the step of displaying the first form page based on the width of the first target unit, the target width corresponding to the first form page, the number of units occupied by the components included in the first form page, and their display order, the method for displaying the form page further includes: In response to a zoom operation on the first form page, determine the zoom factor of the first form page; Multiply the width of the first target unit by the scaling factor to obtain the width of the third reference unit of the first form page; The width of the third target unit of the first form page is determined based on the width of the third reference unit. The first form page is updated based on the width of the third target unit, the target width corresponding to the first form page, the number of units occupied by the component, and the display order.

6. The method for displaying a form page as described in claim 1, characterized in that, The step of determining the width of the first target cell on the first form page based on the width of the first candidate cell includes: The larger value between the width of the first candidate unit and the preset minimum unit width of the first form page is determined as the width of the first reference unit of the first form page; The number of cells in the first row of the first form page is determined based on the width of the first reference cell and the target width corresponding to the first form page. If the number of cells in the first row is not an integer, the number of cells in the first row is rounded down to obtain the number of cells in the second row of the first form page; The first value is compared with the target value of the row fill rate of the first form page to obtain the comparison result; the first value is the ratio of the second value to the target width of the first form page, and the second value is the product of the number of the second row cells and the width of the first reference cell; If the comparison result shows that the first value is less than the target value, the width of the first target cell is determined based on the number of cells in the second row and the target width corresponding to the first form page.

7. A form page display system, characterized in that, This includes the first unit width module, the second unit width module, and the form page display module; The first unit width module is used to respond to the display instructions of the first form page and determine the first candidate unit width of the first form page according to the first natural width of the first component and the number of units occupied by the first component; the first component is a component with a non-fixed width included in the first form page; the natural width of the first component is the width that the first component itself wants to occupy when the width of the first component is not explicitly specified, and the natural width of the first component changes with the display content of the first component. The second unit width module is used to determine the first target unit width of the first form page based on the first candidate unit width; The form page display module is used to display the first form page according to the width of the first target unit, the target width corresponding to the first form page, the number of units occupied by the components included in the first form page, and the display order.

8. An electronic device, characterized in that, The electronic device includes a memory and a processor, the memory storing a computer program, and the processor executing the computer program to implement the method for displaying a form page as described in any one of claims 1 to 6.

9. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, it implements the method for displaying a form page as described in any one of claims 1 to 6.

10. A computer program product, characterized in that, The computer program product is stored in a storage medium, and when executed by at least one processor, the computer program product implements the method for displaying a form page as described in any one of claims 1 to 6.

Images