CN113010162B - Page construction method, device and equipment - Google Patents

Page construction method, device and equipment Download PDF

Info

Publication number
CN113010162B
CN113010162B CN202110228111.8A CN202110228111A CN113010162B CN 113010162 B CN113010162 B CN 113010162B CN 202110228111 A CN202110228111 A CN 202110228111A CN 113010162 B CN113010162 B CN 113010162B
Authority
CN
China
Prior art keywords
page control
control
page
row
information
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN202110228111.8A
Other languages
Chinese (zh)
Other versions
CN113010162A (en
Inventor
李楚阳
贾正旭
宋夏昕
李尔涵
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Industrial and Commercial Bank of China Ltd ICBC
Original Assignee
Industrial and Commercial Bank of China Ltd ICBC
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Industrial and Commercial Bank of China Ltd ICBC filed Critical Industrial and Commercial Bank of China Ltd ICBC
Priority to CN202110228111.8A priority Critical patent/CN113010162B/en
Publication of CN113010162A publication Critical patent/CN113010162A/en
Application granted granted Critical
Publication of CN113010162B publication Critical patent/CN113010162B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/60—Software deployment
    • G06F8/65—Updates
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/70—Software maintenance or management
    • G06F8/71—Version control; Configuration management

Abstract

The specification relates to the technical field of front-end development, and particularly discloses a method, a device and equipment for constructing a page, wherein the method comprises the steps of receiving operation information of a user on a page control in a page configuration interface; the page configuration interface at least comprises a page control, and the page control is used for visually representing information of page display elements; taking a page control corresponding to the operation information as a current page control, and extracting control information determined by the current page control based on the operation information; the control information comprises the length of the page control in the appointed direction and the position information of the appointed point of the page control relative to the page configuration interface; and updating the existing page control layout information of the page configuration interface by utilizing the control information of the current page control so as to generate page display data for page display according to the updated page control layout information. By utilizing the embodiments of the specification, convenience and flexibility of page construction can be improved.

Description

Page construction method, device and equipment
Technical Field
The present disclosure relates to the field of front-end development technologies, and in particular, to a method, an apparatus, and a device for constructing a page.
Background
The financial institution has a plurality of business systems, each business system relates to a large number of front-end design and development works, the front-end pages of each page system show more similar components and layouts, and the front-end pages can be constructed in a visual layout mode, so that the development workload of the front-end pages is reduced, and the development efficiency is improved.
In order to ensure the simplicity of page construction and the accuracy of page code generation, a common visual layout tool mainly adopts two implementation modes, wherein the first mode is to perform barrier layout on pages in advance, and then add controls on the basis of the barrier layout; the second is to construct the page template first, and then the user adjusts the control according to the need on the basis of the page template. However, the page layout mode limits the position of the control to a certain extent, which is not flexible enough. Therefore, there is a need for a more flexible page construction method on the basis of ensuring the simplicity of page construction and the accuracy of page code generation.
Disclosure of Invention
An object of an embodiment of the present disclosure is to provide a method, an apparatus, and a device for constructing a page, which can further improve convenience and flexibility of constructing the page.
The present specification provides a method, an apparatus, and a device for constructing a page, which are implemented in the following manner:
a method of page construction, the method comprising:
receiving operation information of a user on a page control in a page configuration interface; the page configuration interface at least comprises a page control, wherein the page control is used for visually representing information of page display elements;
taking a page control corresponding to the operation information as a current page control, and extracting control information determined by the current page control based on the operation information; the control information comprises the length of the page control in the appointed direction and the position information of the appointed point of the page control relative to the page configuration interface;
and updating the existing page control layout information of the page configuration interface by utilizing the control information of the current page control so as to generate page display data for page display according to the updated page control layout information.
In another embodiment of the method provided in the present specification, the existing page control layout information includes control information of each laid out page control; updating the existing page control layout information comprises the following steps: under the condition that the current page control is determined to overlap with each laid page control based on the comparison result of the control information of the current page control and the control information of each laid page control, extracting the relative layout information of the current page control relative to the page configuration interface; and updating the layout information of the existing page control by using the relative layout information of the current page control relative to the page configuration interface.
In another embodiment of the method provided in the present specification, the updating the existing page control layout information includes: under the condition that the current page control and each laid page control are determined not to be overlapped based on the comparison result of the control information of the current page control and the control information of each laid page control, if the current page control is the first laid page control of the page configuration interface, configuring the row information of the current page control based on a preset datum line in the page configuration interface; wherein the row information comprises a row identifier and a row height; the height is the distance between the row containing the current page control and the datum line.
In another embodiment of the method provided by the specification, if the current page control is not the first laid page control of the page configuration interface, the laid page control which is overlapped with the position information of the current page control in the appointed direction is extracted to be used as the intersected page control; and updating the layout information of the existing page control by utilizing the position relation of the row where the current page control and the intersected page control are located.
In another embodiment of the method provided herein, it is assumed that the direction is downward in the specified direction, and the direction is upward in the reverse direction; under the assumption, the lower boundary of the page configuration interface is taken as a reference line.
In another embodiment of the method provided in the present specification, in a case that the intersecting page control is extracted and an upper boundary of the intersecting page control is located above an upper boundary of a current page control, the updating the existing page control layout information includes: setting the row identifier of the current page control as the row identifier of the intersected page control; and setting the distance between the upper boundary of the appointed row corresponding to the row identifier and the upper boundary of the current page control as the relative layout attribute value of the current page control.
In another embodiment of the method provided in the present specification, in a case that the intersecting page control is extracted and an upper boundary of the intersecting page control is located below an upper boundary of a current page control, the updating the existing page control layout information includes: setting the row identifier of the current page control as the row identifier of the intersected page control; calculating the distance between the upper boundary of the appointed row and the upper boundary of the current page control as an appointed distance; updating the height of the appointed row to be the sum of the height of the appointed row before updating and the appointed distance; and setting the distance between the upper boundary of each page control in the updated designated row and the upper boundary of the updated designated row as the relative layout attribute value of each page control in the updated designated row.
In another embodiment of the method provided in the present specification, the updating the existing page control layout information includes: acquiring a page control with an upper boundary of the page control located above the upper boundary of the current page control as a first target page control; calculating the minimum distance between the lower boundary of each first target page control and the upper boundary of the current page control, and taking the minimum distance as a first control distance; extracting a first target page control with the minimum distance from a first control of a current page control as a first appointed page control; and updating the row height of the first appointed page control to be the difference value between the row height of the first appointed page control before updating and the appointed distance.
In another embodiment of the method provided in the present specification, when the intersecting page control is extracted, and there is an upper boundary of the intersecting page control located above an upper boundary of the current page control, and there is an upper boundary of the intersecting page control located below an upper boundary of the current page control, updating the layout information of the existing page control includes: acquiring row identifiers of rows where the intersecting page controls are located; setting the row identifier of the current page control as the row identifier of the intersected page control under the condition that the acquired row identifiers are overlapped; and setting the distance between the upper boundary of the appointed row corresponding to the row identifier and the upper boundary of the current page control as the relative layout attribute value of the current page control.
In another embodiment of the method provided in the present specification, the updating the existing page control layout information includes: under the condition that the obtained row identifications are not coincident, merging the appointed rows corresponding to the row identifications to be used as updated appointed rows; configuring the line identification of the updated appointed line, and taking the newly configured line identification as the line identification of each page control in the updated appointed line; setting the height of the updated appointed row as the sum of the heights corresponding to the misaligned row identifications; and setting the distance between the upper boundary of the updated designated row and the upper boundary of each page control in the updated designated row as the relative layout attribute value of each page control in the updated designated row.
In another embodiment of the method provided in the present specification, in a case where no intersecting page control is extracted, the updating the existing page control layout information includes: acquiring a page control with an upper boundary of the page control located above the upper boundary of the current page control as a first target page control; calculating the minimum distance between the lower boundary of each first target page control and the upper boundary of the current page control, and taking the minimum distance as a first control distance; extracting a first target page control with the minimum distance from a first control of a current page control as a first appointed page control; acquiring a page control with an upper boundary of the page control positioned below the upper boundary of the current page control as a second target page control; calculating the minimum distance between the upper boundary of each second target page control and the lower boundary of the current page control, and taking the minimum distance as the second control distance; extracting a second target page control with the minimum distance from a second control of the current page control as a second designated page control; a row is newly added for the current page control, a row identification of the newly added row is configured, and the height of the newly added row is configured to be the distance between the upper boundary of the current page control and the upper boundary of the second designated page control; the row height of the first appointed page control is updated to be the difference value between the row height of the first appointed page control before updating and the row height of the newly added row.
On the other hand, the embodiment of the specification also provides a page construction device, which comprises: the operation information receiving module is used for receiving operation information of a user on a page control in the page configuration interface; the page configuration interface at least comprises a page control, wherein the page control is used for visually representing information of page display elements; the control information extraction module is used for taking the page control corresponding to the operation information as a current page control and extracting control information determined by the current page control based on the operation information; the control information comprises the length of the page control in the appointed direction and the position information of the appointed point of the page control relative to the page configuration interface; and the layout information updating module is used for updating the existing page control layout information of the page configuration interface by utilizing the control information of the current page control so as to generate page display data for page display according to the updated page control layout information.
In another aspect, embodiments of the present disclosure further provide a page building apparatus, where the apparatus includes at least one processor and a memory for storing processor executable instructions that when executed by the processor implement the steps of the method of any one or more of the embodiments described above.
According to the page construction method, device and equipment provided by one or more embodiments of the specification, through pre-constructing the visual page construction application, a user can conveniently and simply and effectively construct a page display interface based on the displayed page configuration interface, and the function of developing the page design obtained immediately after the user sees the page is realized. Meanwhile, the relative layout self-adaption of the page control can be simply and accurately realized, and codes consistent with the page design effect can be efficiently and accurately generated. And the control position is not required to be limited, the page design and code generation efficiency is improved, the code reusability is improved, and the page display interface is convenient to update and code secondary development.
Drawings
In order to more clearly illustrate the embodiments of the present description or the technical solutions in the prior art, the drawings that are required in the embodiments or the description of the prior art will be briefly described below, it being obvious that the drawings in the following description are only some of the embodiments described in the present description, and that other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art. In the drawings:
fig. 1 is a schematic flow chart of an embodiment of a page construction method provided in the present specification;
FIG. 2 is a schematic illustration of a presentation interface of a page building application in one embodiment provided herein;
FIG. 3 is a schematic diagram of a page control layout information update process according to an embodiment of the disclosure;
FIG. 4 is a schematic diagram of a control layout for a longitudinally existing intersecting page control provided herein;
FIG. 5 is a schematic diagram of another control layout provided herein in which intersecting page controls exist in a portrait orientation;
FIG. 6 is a schematic diagram of another control layout provided herein in which intersecting page controls exist in a portrait orientation;
FIG. 7 is a schematic diagram of a control layout without intersecting page controls in the portrait orientation provided herein;
FIG. 8 is a control layout diagram of a cross-page control in a lateral direction provided herein;
FIG. 9 is a schematic diagram of another control layout presented herein in which intersecting page controls exist in a lateral direction;
FIG. 10 is a schematic diagram of another control layout presented herein in which intersecting page controls exist in a lateral direction;
FIG. 11 is a control layout diagram provided herein in which intersecting page controls do not exist in the lateral direction;
FIG. 12 is a schematic diagram of a page building flow in one embodiment provided herein;
Fig. 13 is a schematic block diagram of another page building apparatus provided in the present specification.
Detailed Description
In order that those skilled in the art will better understand the technical solutions in this specification, a clear and complete description of the technical solutions in one or more embodiments of this specification will be provided below with reference to the accompanying drawings in one or more embodiments of this specification, and it is apparent that the described embodiments are only some embodiments of the specification and not all embodiments. All other embodiments, which may be made by one or more embodiments of the disclosure without undue effort by one of ordinary skill in the art, are intended to be within the scope of the embodiments of the disclosure.
In one application scenario example of the present specification, the page building method may be applied to a page building apparatus. The device can be a terminal or a system constructed by the terminal and a server. The server may be a single server or a server cluster formed by a plurality of servers. The terminal can comprise a desktop computer, a notebook, an IPAD and other intelligent terminals. The terminal can be provided with a page construction application constructed based on the visual framework. The page construction application can be a client application program for realizing page display interface construction independently, or can be a sub-application program integrated under other applications. Of course, the terminal may interact with the server, send a part of data processing to the server for processing, and receive a processing result fed back by the server, so as to construct a page display interface based on the result fed back by the server.
According to the embodiment of the specification, the visual page construction application is built in advance, so that a user can simply and effectively construct a page display interface based on the displayed page configuration interface, the design development function obtained after the user sees the page display interface is realized, meanwhile, the relative layout self-adaption of the page control can be simply and accurately realized, and codes consistent with the page design effect can be efficiently and accurately generated. And the control position is not required to be limited, the page design and code generation efficiency is improved, the code reusability is improved, and the page display interface is convenient to update and code secondary development.
Fig. 1 is a schematic flow chart of an embodiment of the page building method provided in the present specification. Although the description provides methods and apparatus structures as shown in the examples or figures described below, more or fewer steps or modular units may be included in the methods or apparatus, whether conventionally or without inventive effort. In the steps or the structures where there is no necessary causal relationship logically, the execution order of the steps or the module structure of the apparatus is not limited to the execution order or the module structure shown in the embodiments or the drawings of the present specification. The described methods or module structures may be implemented in a device, server or end product in practice, in a sequential or parallel fashion (e.g., parallel processor or multi-threaded processing environments, or even distributed processing, server cluster implementations) as shown in the embodiments or figures. In a specific embodiment, as shown in fig. 1, in one embodiment of the page building method provided in the present specification, the method may be applied to a flow building apparatus. The method may comprise the steps of:
S20: receiving operation information of a user on a page control in a page configuration interface; the page configuration interface at least comprises a page control, and the page control is used for visually representing information of page display elements.
The terminal can be pre-provided with a page construction application. At least one page control may be integrated into the page building application. The page control may be a UI component for visualizing the presentation element of the presentation page. Program codes for realizing the visualization of the information of each element are packaged in the UI component. The page display element can be information for realizing flexible display of the page and can be configured according to actual requirements. Correspondingly, the page control can be a text box, a button, a radio box, a check box, a drop-down box, a list and the like.
For example, a page control corresponding to each page display element can be constructed by utilizing Bootstrap. And integrating the constructed page control into a visual framework to obtain a page configuration interface. For example, based on the Vue. Js visualization framework, a Bootstrap tool is utilized to configure a program corresponding to each element information, and the program is packaged to form a UI component. And taking the packaged UI component as a page control to construct a page construction application. The page construction application can display a page configuration interface to a user based on the triggering operation of the user. The trigger may include, for example, a click, a long press, etc. It should be noted that the present application is not limited to implementing the construction of the page configuration interface by using other types of tools.
As shown in fig. 2, one side of the page configuration interface may also be configured with a control area. The control region may include presentation icons for a plurality of page controls. As shown in fig. 2, fig. 2 is a schematic diagram of an application interface that the page building application presents to a user. The left side of fig. 2 is the imaged display area of the page control, and the right side of fig. 2 is the page configuration interface. Of course, FIG. 2 is merely exemplary and does not constitute a direct limitation of the application interface of the present application. The user can operate the icons of the page controls. If the page control can be selected from the control area, the page control is dragged to the page configuration interface, and a unique control identification is added for each page control so as to distinguish the controls in the page configuration interface.
The required page presentation interface can be constructed through control combination and style editing. The control combination and style editing may include, for example, changing the position and size of the page control in the page configuration interface, configuring associated information for the page control, and the like. The associated information can comprise functions, presentation information and the like corresponding to the control. If the function of the control is page skip, the page executes the skip function when the control is triggered. Alternatively, the page IP address to be jumped may also be associated for the jump control to jump, etc., based on the associated IP address when executing the jump. The terminal can receive operation information of a user on a page control in a page configuration interface.
S22: taking a page control corresponding to the operation information as a current page control, and extracting control information determined by the current page control based on the operation information; the control information comprises the length of the page control in the appointed direction and the position information of the appointed point of the page control relative to the page configuration interface.
In order to facilitate distinguishing the expressions, the page control for which the operation information is aimed can be used as the current page control. The terminal can extract control information determined by the current page control based on the operation information. The control information can comprise the length of the page control in the appointed direction, the position information of the appointed point of the page control relative to the page configuration interface and the like.
The maximum value of the boundary point distance of the page control in the specified direction may be set as the length of the page control in the specified direction. The specified direction may be any direction. If the vertical direction from the bottom to the top of the page configuration interface can be used as the appointed direction, the length of the page control in the appointed direction is the vertical height of the page control correspondingly. Or, a horizontal line from the left side to the right side of the page configuration interface can be used as a designated direction, and the length of the page control in the designated direction is the width of the page control along the horizontal line.
If the page control is a regular graph, the specified point may be a graph midpoint of the page control. If the page control is an irregular graph, the specified point may be the center of gravity of the graph. Of course, the manner of setting the designated point is merely a preferred example, and may be configured as needed in practical applications. Position information of the designated point of the page control relative to the page configuration interface can also be obtained. And if the relative position information of the designated point relative to the datum line and the datum point of the page configuration interface can be acquired. The reference line may be, for example, four boundary lines of the page configuration interface, including up, down, left, and right. The datum points may be, for example, four corner points or center points of the page configuration interface. Of course, any point or any line of the page configuration interface can be set as a datum line or a datum point according to actual needs, so as to position the position information of the specified point or any point on the page control.
By positioning the length information of the page control in the appointed direction and the position information of the appointed point relative to the page configuration interface, the information such as the size and the position of the page control in the page configuration interface can be initially positioned.
S24: and updating the existing page control layout information of the page configuration interface by utilizing the control information of the current page control so as to generate page display data for page display according to the updated page control layout information.
The terminal can further acquire the existing page control layout information of the page configuration interface. The existing page control layout information can comprise page controls laid out by a page configuration interface and control information of each laid out page control. The terminal can update the control information of the current page control to the existing page control layout information of the page configuration interface to obtain updated page control layout information. After the page is built, the user may trigger a submit or complete button or the like on the page configuration interface. The terminal may generate or update the page presentation code with the last updated page control layout information based on the trigger operation. Or, the terminal may send the page control layout information updated last time to the server based on the trigger operation, and the server generates or updates the page presentation code using the page control layout information.
The page configuration interface may also include a page preview interface. The terminal can receive page preview triggering operation of the user, the page configuration interface can hide other functions of the page configuration interface, and a page display interface corresponding to the page control layout information updated last time is displayed to the user, so that the user can preview the page display effect corresponding to the last operation.
The page design is carried out based on the visual dragging, so that the page design and code generation efficiency can be improved, and the code reusability is improved. Meanwhile, the operation of the interface control can be previewed in real time, the design development effect obtained immediately after the user sees the user can be achieved, and the convenience of page design is improved.
In other embodiments, the layout information of the page control may further include a relative positional relationship of the page control, and the like. The device can further update the layout information of the page controls based on the relative position relation between the current page control and each laid page control so as to further accurately determine the position relation between the current page control and each laid page control. By further combining the relative position relation of the page control to determine the layout information of the page control, the accuracy of generating the page display code can be improved, the page display code is more matched with the construction of an actual page display interface, and the accuracy of page display is improved.
In some embodiments, the relative layout information of the current page control relative to the page configuration interface may be extracted when it is determined that the current page control overlaps with each laid page control based on the comparison result of the control information of the current page control and the control information of each laid page control; and updating the layout information of the existing page control by using the relative layout information of the current page control relative to the page configuration interface.
The device can judge whether the current page control and each laid page control are overlapped or not by comparing the control information. If a Cartesian coordinate system can be constructed on the page configuration interface, then the control information of the page control is projected into the Cartesian coordinate system, and an abscissa value interval and an ordinate value interval of the page control are extracted. And then, comparing the coordinate value interval of the current page control with the coordinate value interval of each laid page control to determine whether the current page control and the laid page control overlap in position. Of course, the position information of the boundary point of the page control can be positioned by selecting the datum line or the datum point and comparing the boundary point of the page control with the datum line or the datum point, and whether the current page control overlaps the laid page control in position or not can be determined by comparing the position information.
Under the condition that the current page control and at least one laid page control are overlapped, the relative layout information of the current page control relative to the page configuration interface can be extracted, and the layout information of the existing page control is updated by utilizing the relative layout information of the current page control relative to the page configuration interface. For example, the percentage of the interface length from the left/upper boundary line of the page configuration interface to the left/upper boundary point of the leftmost/upper boundary point of the current page control can be calculated. The current page control is then laid out using an absolute layout approach based on the percentage. Of course, other arrangements may be used, and are not limited herein.
When the layout information of the page controls is characterized, row information of the page controls can be configured, and the row information is utilized to further simply and accurately position the relative position information of the page controls on the page configuration interface and the relative position information among the page controls. Of course, the row extending direction corresponding to the row information is not particularly specified as the horizontal direction, and may be the vertical direction or may be the oblique direction. The row extending direction corresponding to the row information may be perpendicular to the specified direction. Accordingly, if the specified direction is the vertical direction, the row extending direction of each row is the horizontal direction. If the specified direction is the horizontal direction, the row extending direction of each row is the vertical direction. The row information may also include a row identification and a row height. The row identification may be used to identify the corresponding row. The height may be used to characterize the vertical distance between the two borderlines of the row.
For the first page control arranged on the page configuration interface, the row information of the first page control can be directly determined based on the relative position relation between the page control and the page configuration interface. For the page control arranged on the page configuration interface, the row information of the newly arranged page control can be configured according to the relative position relation between the page control and the arranged page control, and the row information of the arranged page control is updated based on the position of the newly arranged page control, so that the updating of the layout information of the page control is completed.
One line in the page configuration interface can be selected as a datum line, the row information of the first page control arranged on the page configuration interface is determined, then the row information of each page control arranged can be determined based on the position relation between the first page control and the arranged page control, the row information of the arranged page is adjusted adaptively, and the accurate determination of the relative layout relation of the page controls is simply and effectively realized. By adopting the mode, the position of the page control is not required to be limited, and the flexibility of the layout of the page control can be improved. For example, a boundary of the page configuration interface may be used as a reference line. For a first laid out page control on the page configuration interface, the height of the first laid out page control may be determined based on a boundary of the page configuration interface. Such as the height being the maximum distance between the boundary line of the page control and a certain boundary of the page configuration interface. The boundary point of the page control closest to the boundary of the page configuration interface in the direction corresponding to the boundary of the page configuration interface can be obtained, and a line passing through the boundary point and extending along the designated direction is taken as the boundary line of the page control.
Accordingly, in one embodiment, under the condition that it is determined that the current page control and each laid page control do not overlap, whether the current page control is the first laid page control of the page configuration interface can be determined. If the current page control is the first laid page control of the page configuration interface, configuring row information of the current page control based on a preset datum line in the page configuration interface; wherein the row information comprises a row identifier and a row height; the height is the distance between the row containing the current page control and the datum line.
If the current page control is not the first laid page control of the page configuration interface, the laid page control which is overlapped with the position information of the current page control in the appointed direction can be extracted to be used as the intersected page control. And updating the layout information of the existing page control by utilizing the position relation of the row where the current page control and the intersected page control are located.
If the designated direction is the ordinate direction of the Cartesian coordinate system, the ordinate value interval of the current page control and the ordinate interval of the laid page control can be obtained. Then, traversing the laid page control, and judging whether the coordinate value of coincidence exists between the ordinate interval of the current page control and the ordinate interval of the laid page control. For example, the ordinate interval of the current page control C Is [5,8 ]]Some laid page control C 1 The ordinate interval of (2, 6)]There is a coincidence of the ordinate values. Can also be marked as control C and control C 1 Intersecting in the ordinate direction, i.e. control C 1 Is an intersecting page control of the control C in the ordinate direction. Of course, other manners may be adopted to extract the laid page control that coincides with the position information of the current page control in the specified direction.
In one or more embodiments below, for ease of description, it may be assumed that the direction is downward in the specified direction and the direction is upward in the opposite direction. Of course, this assumption is merely for convenience of description and does not directly limit the inventive concept corresponding to each embodiment. Unless specifically stated otherwise, the lower boundary, upper and lower boundary mentioned in one or more embodiments below are all the corresponding upper and lower positional relationships under each hypothesis, and are not the upper and lower positional relationships set in practical applications. If the specified direction is horizontal to the right, the lower boundary is actually corresponding to the right boundary, the upper boundary is actually corresponding to the left boundary, the lower is actually corresponding to the right, and the upper is actually corresponding to the left. And so on.
Under the above assumption, a preferred embodiment of updating page control layout information using the lower boundary of the page layout interface as a reference line is described below.
In one embodiment, when the intersecting page control is extracted and the intersecting page control is only located above the current page control, the current page control may be directly merged to the row where the intersecting page control is located. The row identifier of the row where the intersecting page control is located can be obtained, and the row corresponding to the row identifier is used as the designated row. And setting the row identifier of the current page control as the row identifier of the intersected page control. The position of the current page control in the row may then also be configured to further locate the relative positional relationship of the current page control. The relative layout attribute value of the current page control may be utilized to characterize the position of the current page control in the row to which it is assigned. Accordingly, a distance between an upper boundary of the designated row corresponding to the row identifier and an upper boundary of the current page control may be set as a relative layout attribute value of the current page control.
In another embodiment, when the intersecting page control is extracted and the intersecting page control is only located below the current page control, the current page control may be directly merged to the row where the intersecting page control is located. The row identifier of the row where the intersecting page control is located can be obtained, and the row corresponding to the row identifier is used as the designated row. And setting the row identifier of the current page control as the row identifier of the intersected page control.
The row information of the specified row may be further updated. The distance between the upper boundary of the designated row and the upper boundary of the current page control can be calculated as the designated distance, and the height of the designated row is updated as the sum of the height of the designated row before updating and the designated distance.
And, the line information of the previous line of the specified line also needs to be updated. For example, each row may be numbered from bottom to top, and each row may be sequentially changed in number every time one row is added. Such as the row number may be set as the row identification. The last line of the specified line may be determined as the target line based on the line identification. And updating the height of the target row to be the difference value between the height of the target row before updating and the specified distance. Or, a page control with the upper boundary of the page control located above the upper boundary of the current page control may also be obtained as the first target page control. And calculating the minimum distance between the lower boundary of each first target page control and the upper boundary of the current page control, and taking the minimum distance as the first control distance. And extracting a first target page control with the smallest distance from the first control of the current page control as a first appointed page control. The row on which the first specified page control is located is the row above the specified row. The row height of the first designated page control can be updated to be the difference between the row height of the first designated page control before the row update and the designated distance.
Then, the positional relationship between the current page control and the intersecting page control can also be configured so as to further locate the relative positional relationship of the current page control. The distance between the upper boundary of each page control in the updated designated row and the upper boundary of the updated designated row can be set as the relative layout attribute value of each page control in the updated designated row.
In another embodiment, when the intersecting page control is extracted, and the upper boundary of the intersecting page control is located above the upper boundary of the current page control and the upper boundary of the intersecting page control is located below the upper boundary of the current page control, the row identifier of the row where each intersecting page control is located may be obtained first.
And under the condition that the acquired row identifiers are coincident, namely the intersecting page controls are positioned in the same row. The current page control may be directly merged into the row where the intersecting page control is located. The row identifier of the row where the intersecting page control is located can be obtained, and the row corresponding to the row identifier is used as the designated row. And setting the row identifier of the current page control as the row identifier of the intersected page control. Then, the positional relationship between the current page control and the intersecting page control can also be configured so as to further locate the relative positional relationship of the current page control. And setting the distance between the upper boundary of the appointed row corresponding to the row identifier and the upper boundary of the current page control as the relative layout attribute value of the current page control.
If the acquired row identifiers do not overlap, the designated row corresponding to the row identifiers may be combined to be used as the updated designated row. In this case, the row identifier, the row height, and the relative layout attribute values of the page controls (including the current page control) within the merged row all need to be updated. The updated row identification of the designated row can be configured, and the newly configured row identification is used as the row identification of each page control in the updated designated row. And setting the height of the updated appointed row as the sum of the heights corresponding to the misaligned row identifications. And setting the distance between the upper boundary of the updated designated row and the upper boundary of each page control in the updated designated row as the relative layout attribute value of each page control in the updated designated row.
In another embodiment, under the condition that the intersecting page control is not extracted, a page control with the upper boundary of the page control located above the upper boundary of the current page control can be obtained as the first target page control. And then, calculating the minimum distance between the lower boundary of each first target page control and the upper boundary of the current page control as the first control distance. And extracting a first target page control with the smallest distance from the first control of the current page control as a first appointed page control.
And the page control with the upper boundary of the page control positioned below the upper boundary of the current page control can be obtained and used as a second target page control. And then, calculating the minimum distance between the upper boundary of each second target page control and the lower boundary of the current page control as the second control distance. And extracting a second target page control with the smallest distance from the second control of the current page control as a second designated page control.
And adding a row for the current page control, and setting the height of the added row as the distance between the upper boundary of the current page control and the upper boundary of the second designated page control. The row height of the first appointed page control is updated to be the difference value between the row height of the first appointed page control before updating and the row height of the newly added row.
Alternatively, the initial row where the current page control is located may be initially determined. And the boundary lines on two sides of the initial line are boundary lines of the current page control. Intersecting page controls or closest page controls, etc., may then be located based on the boundary lines of the initial row. The specific implementation manner may be flexibly designed based on the schemes of the foregoing embodiments, which are not described herein. Other variations will be possible by those skilled in the art in light of the technical spirit of the present application, but are intended to be encompassed within the scope of the embodiments of the present description so long as the functions and effects achieved are the same or similar to those of the embodiments of the present description.
According to the embodiments, the row information is further configured for each page control, and the row information of each page control is based on the position relation between the newly laid page control and each laid page control. And the page control is positioned accurately relative to the page configuration interface and the position relation among the page controls in a gradual iteration updating mode, so that the simplicity and the accuracy of positioning the page control can be greatly improved, and the page display interface code generated based on the page control layout information can be higher in accuracy corresponding to the actual layout. Meanwhile, when the control in the page is changed each time, the original layout information can be directly updated, and then the original page code is updated by using the new layout information, so that the cyclic utilization of the page code is realized, the code generation efficiency of the page construction interface is greatly improved, and the code reusability is improved. Furthermore, by adopting the mode, the layout position and the mode of the page control are required to be limited, the device adaptively adjusts the layout information according to the control position, and codes convenient for secondary development can be simply and conveniently generated, so that the flexibility of control layout is improved.
Based on the solution of the foregoing embodiment, the present specification also provides a scene example, so as to more clearly describe the solution of the foregoing embodiment.
It should be noted that the up, down, left, and right directions given in the present scene example are not determined under the above assumption, but the up, down, left, and right directions of the page configuration interface are adopted. As shown in fig. 2, a cartesian coordinate system is set in the page configuration interface, and an intersection point of a left boundary and an upper boundary of the page configuration interface is taken as an origin, a horizontal line where the upper boundary is located is taken as an X axis, and a vertical line where the left boundary is located is taken as a Y axis. Correspondingly, after receiving the operation information of the current page control, the control information of the current page control can be recorded as follows:
current page control: control identification C, the coordinate X of a designated point (such as a drag release point) of the control C relative to the left boundary of the interface, the coordinate Y relative to the upper boundary of the interface, the width (the length of the control along the X axis) W of the control C, and the height (the length of the control along the Y axis) H of the control C.
Page configuration interface information may also be obtained: interface width (length of interface in X-axis direction) VW, interface height (length of interface in Y-axis direction) VH;
and, the existing page control layout information of the page configuration interface can also be obtained:
The identification of each laid page control and the coordinate X 'of the designated point of each page control relative to the left boundary of the interface and the coordinate Y' relative to the upper boundary of the interface are the width (the length of the control along the X axis) W 'and the height (the length of the control along the Y axis) H' of the control.
The following manner may be employed to determine whether there is overlap between the current page control and the laid out page controls.
And circularly traversing the laid page controls, and executing the following steps for each laid page control:
1) And extracting the maximum value and the minimum value in the boundary point coordinates of the current page control C. Assuming that the page control C is a regular rectangle, a circle, a diamond, etc., the specified point is the center point of the graph, then:
X max ＝X+W/2
X min ＝X-W/2
Y max ＝Y+H/2
Y min ＝Y-H/2
2) And extracting the maximum value and the minimum value in the boundary point coordinates of each laid page control. Assuming that the laid page control is a regular rectangle, a circle, a diamond, etc., the specified point is the center point of the graph, then:
X' max ＝X'+W'/2
X' min ＝X'-W'/2
Y' max ＝Y'+H'/2
Y' min ＝Y'-H'/2
3) When the following overlapping condition one and condition two are satisfied, determining that the current page control overlaps with each laid page control,
condition one: x'. min ＜X max ＜X' max Or X' min ＜X min ＜X' max
Condition II: y'. min ＜Y max ＜Y' max Or Y' min ＜Y max ＜Y' max
Of course, the above determination method is merely a preferred example, and other determination methods may be adopted in the implementation, for example, the positional relationship between all points in the area occupied by the page control and a certain reference point may be determined, and then the positional relationship between all points in the area occupied by each page control may be compared to determine whether there is an overlap or not.
As shown in fig. 3, in the case that it is determined that the current page control overlaps at least one laid page control, the device may further extract relative layout information of the current page control with respect to the page configuration interface, and update the layout information of the existing page control with the relative layout information of the current page control with respect to the page configuration interface. If the left boundary distance from the left boundary of the current page control to the interface accounts for the percentage l of the interface width, and the upper boundary distance from the upper boundary of the current page control to the interface accounts for the percentage t of the interface height, the absolute layout mode is used for layout of the current page control. The corresponding CSS code may be expressed as style= "position: position; left: l; top: t). And then, the layout information of the current page control and the control information can be updated into the existing page control layout information, and updated page control layout information is obtained. Wherein,
l＝(X-W/2)/VW×100％
t＝(Y-H/2)/VH×100％
and under the condition that the current page control and each laid page control are determined not to be overlapped based on the comparison result of the control information of the current page control and the control information of each laid page control, extracting the laid page control which is overlapped with the position information of the current page control in the appointed direction as an intersecting page control. If the coordinate interval occupied by the current page control in the Y direction and the coordinate interval occupied by the laid page control in the Y direction can be obtained. Then, traversing the laid page control, and judging whether coordinate values of coincidence exist between the coordinate interval of the current page control and the coordinate interval of the laid page control. For the X-direction, reference may be made to the Y-direction, and details are not described here.
When the layout information of the page controls is characterized, row information of the page controls can be configured, and the row information is utilized to further simply and accurately position the relative position information of the page controls on the page configuration interface and the relative position information among the page controls. Of course, the row extending direction corresponding to the row information is not particularly specified as the horizontal direction, and may be the vertical direction or may be the oblique direction. In this scenario example, for easier visual representation, the row direction corresponding to the row information is defined as the row in the X direction, and the row direction is defined as the column in the Y direction.
The layout positions between the page controls in the Y direction are analyzed as follows.
Traversing the laid page controls, and judging whether controls intersected with the current page control C exist or not. The judging manner may refer to the above embodiment, and will not be described herein.
If there is intersecting page control C 1 The position is shown in FIG. 4, and the dotted line in FIG. 4 is control C 1 Boundary line of line where I is located 1 Is the height of the row. Acquisition control C 1 Line identifier R 1 . Control C 1 Row identifier R of (2) 1 Giving the control C and adding the relative layout attribute M of the control C top 。
M top ＝Y min -Y 1min
Wherein Y is 1min For row R 1 Is set to the upper boundary of the frame.
If there is intersecting page control C 2 The positions are shown in fig. 5. Control C is shown in FIG. 5 1 C (C) 2 Line in which I 1 Is control C 1 Height of row, I 2 Is control C 2 The height of the row. Acquisition control C 2 Line identifier R 2 . Control C 2 Row identifier R of (2) 2 Giving control C and updating control C 1 Line R at 1 Height I of (2) 1 、C 2 Line R at 2 Height I of (2) 2 Update row R 2 Relative layout property M of all controls in 2top . Relative layout property M of new control C top Zero.
I 1 ′＝I 1 -(Y 2min -Y min )
I 2 ′＝I 2 +(Y 2min -Y min )
M 2top ′＝M 2top +(Y 2min -Y min )
Wherein Y is 2min For row R before update 2 Coordinates of the upper boundary of (I) 1 ' is updated row R 1 Height, I 2 ' is updated row R 2 Height, M 2top ' is row R 2 The updated relative layout attribute of all the controls.
If there is intersecting page control C 1 C (C) 2 The positions are shown in fig. 6. At this time, intersecting page control C 1 C (C) 2 The row identification of the row is not coincident, i.e. the intersecting page control C 1 C (C) 2 Not in the same row. Control C 1 C (C) 2 The rows are combined into a row R '(the height is I'), and the attribute M of the control C is newly added top Update control C 2 Attribute M of all controls in the original row 2top 。
I′＝I 1 +I 2
M top ＝Y min -Y 1min
M 2top ′＝M 2top +(Y min -Y 1min )
In the case that the intersecting page control is not extracted, the first specified page control C is extracted based on the manner of the above embodiment 1 、C 2 The position is shown in fig. 7. A new row of single storage controls C (with the height of I) is added, and the controls C are updated 1 Line R at 1 Height I of (2) 1 。
I＝Y 2min -Y min
I 1 ′＝I 1 -I
The layout positions among the page controls in the X direction are analyzed as follows.
After the current page control row is obtained, traversing each page control row of the current page control, and determining whether an intersecting page control intersecting with the current page control exists or not.
If there is intersecting page control C 1 The position is shown in FIG. 8, and the dotted line in FIG. 8 is control C 3 Column, J 3 Is the width of the column. Acquisition control C 3 The column mark R 3 . Control C 3 Column identity R of (2) 3 Giving the control C and adding the relative layout attribute M of the control C left 。
M left ＝X min -X 3min
Wherein X is 3min For column R 3 Is the coordinate value of the left boundary of (c).
If there is intersecting page control C 4 The position is shown in fig. 9. Control C is shown in FIG. 9 3 C (C) 4 Column, J 3 Is control C 3 Width of column, J 4 Is control C 4 Width of the column. Acquisition control C 4 Column identifier R 4 . Control C 4 Column identifier R 4 Giving control C and updating control C 3 In column R 3 Width J of (1) 3 、C 4 In column R 4 Width J of (1) 4 Update column R 4 Relative layout property M of all controls in 4left . Relative layout property M of new control C left Zero.
J 3 ′＝J 3 -(X 4min -X min )
J 4 ′＝J 4 +(X 4min -X min )
M 4left ′＝M 4left +(X 4min -X min )
Wherein X is 4min For the column R before update 4 Coordinates of the left boundary of J 3 ' is updated column R 3 Width of J 4 ' is updated column R 4 Width of M 4left ' is column R 4 The updated relative layout attribute of all the controls.
If there is intersecting page control C 3 C (C) 4 The position is shown in fig. 10. At this time, intersecting page control C 3 C (C) 4 The column identifications of the columns are not coincident, namely the intersecting page control C 3 C (C) 4 Not in the same column. Control C 3 C (C) 4 The columns are combined into a column R "(the width is J'), and the attribute M of the control C is newly added left Update control C 4 Attribute M of all controls in the original column 4left 。
J′＝J 3 +J 4
M left ＝X min -X 3min
M 4left ′＝M 4left +(X 4min -X 3min )
In the case that the intersecting page control is not extracted, the first specified page control C is extracted based on the manner of the above embodiment 3 、C 4 The positions are shown in fig. 11. A list of single storage controls C (with the width of J) is added, and C is updated 3 In column R 3 Width J of (1) 3 。
J＝(X 4min -X min )
J 3 ′＝J 3 -J
The relative layout information of the current control is obtained through the steps, and the relative layout information of the associated control is updated, so that the automatic layout of the page is realized.
In some embodiments, the width and height of the page configuration interface may be further considered when updating the height of the row and the width of the column, and the ratio of the calculated coordinate value to the height/width of the interface may be used as the height and the width of the column, such as j= (X) 4min -X min ) VW is 100%. By the mode, layout adjustment can be matched with the actual interface width and height of the page, and the flexibility of automatic layout is improved.
In other embodiments, event binding may also be performed on the page controls. When a control in the page configuration interface is selected, events such as clicking, double clicking, mouse moving in, mouse moving out, content changing, content being selected and the like can be bound to the control, and binding content comprises page jumping and state switching (switching the state of the page control, such as whether the control is visible or not, changing the color of the control and the like). If binding events can be added for the selected control according to the control identification, the control state is changed according to the control identification.
The style of a single control may also be updateable. Style types may include control shape, width, height, background color, text color, font style, font size, position, outer margin, inner margin, border style, and the like. All drag, edit and event binding operations in the page design and page contents at corresponding time points can be recorded, and when undoing or redoing operations are performed, the page contents can be restored to corresponding states based on the recorded information.
As shown in fig. 12, the layout code of the page may be automatically adjusted after the page control layout information is updated based on the operation information each time. If the control can be newly added, the layout code of the new control can be generated and the existing page layout code can be updated. But when the control style is edited, codes of corresponding styles can be generated for the corresponding controls according to the control identifications. When operations on dragging, editing, event binding and the like are cancelled, corresponding code updating can be performed according to the operation type. Or, after the submitting operation based on the user, the layout code of the page can be adjusted based on the submitted page control layout information.
In this specification, each embodiment is described in a progressive manner, and identical and similar parts of each embodiment are all referred to each other, and each embodiment mainly describes differences from other embodiments. Specific reference may be made to the foregoing description of related embodiments of the related process, which is not described herein in detail.
The foregoing describes specific embodiments of the present disclosure. Other embodiments are within the scope of the following claims. In some cases, the actions or steps recited in the claims can be performed in a different order than in the embodiments and still achieve desirable results. In addition, the processes depicted in the accompanying figures do not necessarily require the particular order shown, or sequential order, to achieve desirable results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.
According to the page construction method provided by one or more embodiments of the specification, through pre-constructing a visual flow drawing interface, a user can easily and effectively draw an approval flow based on the interface. And then, the original approval process file generated based on the drawn approval process chart is sent to the server so that the server can be converted into executable approval process data to complete the construction of the approval process. Therefore, the high-efficiency convenience of page construction is improved, the process drawing and maintenance are not needed through professionals, and the labor cost is further reduced.
Based on the page construction method, one or more embodiments of the present disclosure further provide a page construction device. The apparatus may include a system, software (application), module, component, server, etc. using the methods described in the embodiments of the present specification in combination with necessary hardware implementation. Based on the same innovative concepts, the embodiments of the present description provide means in one or more embodiments as described in the following embodiments. Because the implementation scheme and the method for solving the problem by the device are similar, the implementation of the device in the embodiment of the present disclosure may refer to the implementation of the foregoing method, and the repetition is not repeated. As used below, the term "unit" or "module" may be a combination of software and/or hardware that implements the intended function. While the means described in the following embodiments are preferably implemented in software, implementation in hardware, or a combination of software and hardware, is also possible and contemplated. Specifically, fig. 13 is a schematic block diagram illustrating an embodiment of a page building apparatus provided in the specification, and as shown in fig. 13, the apparatus may include:
the operation information receiving module 102 may be configured to receive operation information of a user on a page control in a page configuration interface; the page configuration interface at least comprises a page control, and the page control is used for visually representing information of page display elements.
The control information extraction module 104 may be configured to use a page control corresponding to the operation information as a current page control, and extract control information determined by the current page control based on the operation information; the control information comprises the length of the page control in the appointed direction and the position information of the appointed point of the page control relative to the page configuration interface.
The layout information updating module 106 may be configured to update the existing page control layout information of the page configuration interface by using the control information of the current page control, so as to generate page display data for displaying a page according to the updated page control layout information.
It should be noted that the above description of the apparatus according to the method embodiment may also include other implementations. Specific implementation may refer to descriptions of related method embodiments, which are not described herein in detail.
The present specification also provides a page building apparatus which may be used in a single page system, or in a variety of computer data processing systems. The apparatus may be a single terminal or server, or may comprise a server cluster, a system (including a distributed system), software (applications), an actual operating device, a logic gate device, a quantum computer, etc., using one or more of the methods or one or more of the embodiment devices of the present specification, in combination with the necessary terminal devices to implement the hardware. In some embodiments, the apparatus includes at least one processor and memory for storing processor-executable instructions that, when executed by the processor, perform steps comprising the methods of any one or more of the embodiments described above.
The memory may include physical means for storing information, typically by digitizing the information before storing it in an electrical, magnetic or optical medium. The storage medium may include: means for storing information using electrical energy such as various memories, e.g., RAM, ROM, etc.; devices for storing information using magnetic energy such as hard disk, floppy disk, magnetic tape, magnetic core memory, bubble memory, and USB flash disk; devices for optically storing information, such as CDs or DVDs. Of course, there are other ways of readable storage medium, such as quantum memory, graphene memory, etc.
It should be noted that the description of the above apparatus according to the method or apparatus embodiment may further include other embodiments, and specific implementation manner may refer to the description of the related method embodiment, which is not described herein in detail.
The present description embodiments are not limited to cases that are necessarily compliant with standard data models/templates or described in the present description embodiments. Some industry standards or embodiments modified slightly based on the implementation described by the custom manner or examples can also realize the same, equivalent or similar or predictable implementation effect after modification of the above examples. Examples of data acquisition, storage, judgment, processing, etc., using these modifications or variations are still within the scope of alternative embodiments of the present description.
In this specification, each embodiment is described in a progressive manner, and identical and similar parts of each embodiment are all referred to each other, and each embodiment mainly describes differences from other embodiments. In particular, for system embodiments, since they are substantially similar to method embodiments, the description is relatively simple, as relevant to see a section of the description of method embodiments. In the description of the present specification, a description referring to terms "one embodiment," "some embodiments," "examples," "specific examples," or "some examples," etc., means that a particular feature, structure, material, or characteristic described in connection with the embodiment or example is included in at least one embodiment or example of the present specification. In this specification, schematic representations of the above terms are not necessarily directed to the same embodiment or example. Furthermore, the particular features, structures, materials, or characteristics described may be combined in any suitable manner in any one or more embodiments or examples. Furthermore, the different embodiments or examples described in this specification and the features of the different embodiments or examples may be combined and combined by those skilled in the art without contradiction.
The foregoing is merely exemplary of the present disclosure and is not intended to limit the disclosure. Various modifications and alterations to this specification will become apparent to those skilled in the art. Any modifications, equivalent substitutions, improvements, or the like, which are within the spirit and principles of the present description, are intended to be included within the scope of the claims of the present description.

Claims (12)

1. A method of page construction, the method comprising:
receiving operation information of a user on a page control in a page configuration interface; the page configuration interface at least comprises a page control, wherein the page control is used for visually representing information of page display elements;
taking a page control corresponding to the operation information as a current page control, and extracting control information determined by the current page control based on the operation information; the control information comprises the length of the page control in the appointed direction and the position information of the appointed point of the page control relative to the page configuration interface;
updating the existing page control layout information of the page configuration interface by utilizing the control information of the current page control to generate page display data for page display according to the updated page control layout information;
The existing page control layout information comprises control information of each laid page control; updating the existing page control layout information comprises the following steps:
under the condition that the current page control and each laid page control are determined not to be overlapped based on the comparison result of the control information of the current page control and the control information of each laid page control, if the current page control is the first laid page control of the page configuration interface, configuring the row information of the current page control based on a preset datum line in the page configuration interface; wherein the row information comprises a row identifier and a row height; the height is the distance between the row containing the current page control and the datum line.
2. The method of claim 1, wherein updating the existing page control layout information further comprises:
under the condition that the current page control is determined to overlap with each laid page control based on the comparison result of the control information of the current page control and the control information of each laid page control, extracting the relative layout information of the current page control relative to the page configuration interface;
and updating the layout information of the existing page control by using the relative layout information of the current page control relative to the page configuration interface.
3. The method of claim 1, wherein if the current page control is not the first laid page control of the page configuration interface, extracting the laid page control overlapping with the position information of the current page control in the specified direction as an intersecting page control;
and updating the layout information of the existing page control by utilizing the position relation of the row where the current page control and the intersected page control are located.
4. A method according to claim 3, wherein the designated direction is assumed to be downward and the reverse direction is assumed to be upward; under the assumption, the lower boundary of the page configuration interface is taken as a reference line.
5. The method of claim 4, wherein the updating the existing page control layout information in the case where the intersecting page control is extracted and an upper boundary of the intersecting page control is located above an upper boundary of a current page control comprises:
setting the row identifier of the current page control as the row identifier of the intersected page control;
and setting the distance between the upper boundary of the appointed row corresponding to the row identifier and the upper boundary of the current page control as the relative layout attribute value of the current page control.
6. The method of claim 4, wherein the updating the existing page control layout information in the case where the intersecting page control is extracted and an upper boundary of the intersecting page control is located below an upper boundary of a current page control comprises:
setting the row identifier of the current page control as the row identifier of the intersected page control;
calculating the distance between the upper boundary of the appointed row and the upper boundary of the current page control as an appointed distance; updating the height of the appointed row to be the sum of the height of the appointed row before updating and the appointed distance;
and setting the distance between the upper boundary of each page control in the updated designated row and the upper boundary of the updated designated row as the relative layout attribute value of each page control in the updated designated row.
7. The method of claim 6, wherein the updating the existing page control layout information comprises:
acquiring a page control with an upper boundary of the page control located above the upper boundary of the current page control as a first target page control;
calculating the minimum distance between the lower boundary of each first target page control and the upper boundary of the current page control, and taking the minimum distance as a first control distance;
Extracting a first target page control with the minimum distance from a first control of a current page control as a first appointed page control;
and updating the row height of the first appointed page control to be the difference value between the row height of the first appointed page control before updating and the appointed distance.
8. The method of claim 4, wherein updating the existing page control layout information in the case where the intersecting page control is extracted and there is both an upper boundary of the intersecting page control above and an upper boundary of the intersecting page control below an upper boundary of the current page control, comprises:
acquiring row identifiers of rows where the intersecting page controls are located;
setting the row identifier of the current page control as the row identifier of the intersected page control under the condition that the acquired row identifiers are overlapped;
and setting the distance between the upper boundary of the appointed row corresponding to the row identifier and the upper boundary of the current page control as the relative layout attribute value of the current page control.
9. The method of claim 8, wherein the updating the existing page control layout information comprises:
Under the condition that the obtained row identifications are not coincident, merging the appointed rows corresponding to the row identifications to be used as updated appointed rows;
configuring the line identification of the updated appointed line, and taking the newly configured line identification as the line identification of each page control in the updated appointed line;
setting the height of the updated appointed row as the sum of the heights corresponding to the misaligned row identifications;
and setting the distance between the upper boundary of the updated designated row and the upper boundary of each page control in the updated designated row as the relative layout attribute value of each page control in the updated designated row.
10. The method of claim 4, wherein the updating the existing page control layout information without extracting an intersecting page control comprises:
acquiring a page control with an upper boundary of the page control located above the upper boundary of the current page control as a first target page control; calculating the minimum distance between the lower boundary of each first target page control and the upper boundary of the current page control, and taking the minimum distance as a first control distance; extracting a first target page control with the minimum distance from a first control of a current page control as a first appointed page control;
Acquiring a page control with an upper boundary of the page control positioned below the upper boundary of the current page control as a second target page control; calculating the minimum distance between the upper boundary of each second target page control and the lower boundary of the current page control, and taking the minimum distance as the second control distance; extracting a second target page control with the minimum distance from a second control of the current page control as a second designated page control;
a row is newly added for the current page control, a row identification of the newly added row is configured, and the height of the newly added row is configured to be the distance between the upper boundary of the current page control and the upper boundary of the second designated page control;
the row height of the first appointed page control is updated to be the difference value between the row height of the first appointed page control before updating and the row height of the newly added row.
11. A page building apparatus, the apparatus comprising:
the operation information receiving module is used for receiving operation information of a user on a page control in the page configuration interface; the page configuration interface at least comprises a page control, wherein the page control is used for visually representing information of page display elements;
The control information extraction module is used for taking the page control corresponding to the operation information as a current page control and extracting control information determined by the current page control based on the operation information; the control information comprises the length of the page control in the appointed direction and the position information of the appointed point of the page control relative to the page configuration interface;
the layout information updating module is used for updating the existing page control layout information of the page configuration interface by utilizing the control information of the current page control so as to generate page display data for page display according to the updated page control layout information;
the existing page control layout information comprises control information of each laid page control; the layout information updating module is specifically configured to:
under the condition that the current page control and each laid page control are determined not to be overlapped based on the comparison result of the control information of the current page control and the control information of each laid page control, if the current page control is the first laid page control of the page configuration interface, configuring the row information of the current page control based on a preset datum line in the page configuration interface; wherein the row information comprises a row identifier and a row height; the height is the distance between the row containing the current page control and the datum line.
12. A page building apparatus, comprising at least one processor and a memory for storing processor executable instructions which when executed by the processor implement steps comprising the method of any of claims 1-10.
CN202110228111.8A 2021-03-02 2021-03-02 Page construction method, device and equipment Active CN113010162B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110228111.8A CN113010162B (en) 2021-03-02 2021-03-02 Page construction method, device and equipment

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110228111.8A CN113010162B (en) 2021-03-02 2021-03-02 Page construction method, device and equipment

Publications (2)

Publication Number Publication Date
CN113010162A CN113010162A (en) 2021-06-22
CN113010162B true CN113010162B (en) 2024-03-29

Family

ID=76402035

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110228111.8A Active CN113010162B (en) 2021-03-02 2021-03-02 Page construction method, device and equipment

Country Status (1)

Country Link
CN (1) CN113010162B (en)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113486283B (en) * 2021-07-27 2024-02-13 中国银行股份有限公司 Page merging method, device, server, medium and product
CN116451709A (en) * 2021-09-02 2023-07-18 荣耀终端有限公司 Control method of translation control and electronic equipment
CN114489623B (en) * 2022-02-18 2022-11-04 北京立达政通科技集团有限公司 Method, device and equipment for generating front-end page based on drag mode and storage medium

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111182345A (en) * 2019-12-20 2020-05-19 海信视像科技股份有限公司 Display method and display equipment of control

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6961750B1 (en) * 2000-05-18 2005-11-01 Microsoft Corp. Server-side control objects for processing client-side user interface elements

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111182345A (en) * 2019-12-20 2020-05-19 海信视像科技股份有限公司 Display method and display equipment of control

Also Published As

Publication number Publication date
CN113010162A (en) 2021-06-22

Similar Documents

Publication Publication Date Title
CN113010162B (en) Page construction method, device and equipment
US10255044B2 (en) Method and system for modifying deployed applications
US10733775B1 (en) Generating technical drawings from building information models
US7478328B2 (en) Method of entering a presentation into a computer
CN105630939B (en) A kind of general painting canvas input interface design method and device
US9459780B1 (en) Documenting interactive graphical designs
US10049095B2 (en) In-context editing of output presentations via automatic pattern detection
US11205220B2 (en) System and method for visual traceability of requirements for products
US10169313B2 (en) In-context editing of text for elements of a graphical user interface
JP2016224599A (en) Guide file creation program
US9910643B2 (en) Program for program editing
CN111475163A (en) Method, device and equipment for generating code file of view template and storage medium
CN105659221A (en) Graphical user interface having enhanced tool for connecting components
CN111881662A (en) Form generation method, device, processing equipment and storage medium
JP2007233565A (en) Design support program
CN113535165A (en) Interface generation method and device, electronic equipment and computer readable storage medium
CN113791760A (en) Commercial intelligent instrument panel generation method and device, electronic equipment and storage medium
JP6168206B2 (en) Information processing apparatus, information processing apparatus control method, and program
JP4902567B2 (en) Work procedure manual creation system and work procedure manual creation program
AU2020221451A1 (en) Generating technical drawings from building information models
CN111638881A (en) Method for adjusting chart and instrument panel
CN115509665B (en) Method, device, medium and equipment for recording control in window
JP5447621B2 (en) PROGRAM GENERATION DEVICE, PROGRAM GENERATION METHOD, AND PROGRAM
JP5264305B2 (en) Circuit editing support method, program thereof, recording medium thereof, and circuit editing support device
WO2009046272A1 (en) Gesture based modeling system and method

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant