CN117032676A - Container self-adaption method and device, storage medium and electronic equipment - Google Patents
Container self-adaption method and device, storage medium and electronic equipment Download PDFInfo
- Publication number
- CN117032676A CN117032676A CN202311298510.7A CN202311298510A CN117032676A CN 117032676 A CN117032676 A CN 117032676A CN 202311298510 A CN202311298510 A CN 202311298510A CN 117032676 A CN117032676 A CN 117032676A
- Authority
- CN
- China
- Prior art keywords
- container
- size
- parent
- processed
- containers
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 58
- 238000011161 development Methods 0.000 claims abstract description 34
- 238000004590 computer program Methods 0.000 claims description 16
- 230000006978 adaptation Effects 0.000 claims description 11
- 230000004044 response Effects 0.000 claims description 11
- 238000010586 diagram Methods 0.000 description 10
- 230000006870 function Effects 0.000 description 9
- 230000006872 improvement Effects 0.000 description 8
- 238000005516 engineering process Methods 0.000 description 6
- 238000012545 processing Methods 0.000 description 6
- 230000008569 process Effects 0.000 description 5
- 230000003287 optical effect Effects 0.000 description 3
- 230000005540 biological transmission Effects 0.000 description 2
- 230000008859 change Effects 0.000 description 2
- 238000004519 manufacturing process Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000009877 rendering Methods 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 230000003044 adaptive effect Effects 0.000 description 1
- 230000004075 alteration Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008901 benefit Effects 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000005055 memory storage Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 229920001296 polysiloxane Polymers 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 239000010979 ruby Substances 0.000 description 1
- 229910001750 ruby Inorganic materials 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000009466 transformation Effects 0.000 description 1
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
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Design And Manufacture Of Integrated Circuits (AREA)
Abstract
The specification discloses a container self-adapting method, a device, a storage medium and an electronic device, wherein a low-code development platform can respond to the operation of adjusting the size of a container, determine a container to be processed and a parent container where the container to be processed is located, determine a first container in all containers contained in the parent container, and fix the size of the first container. And adjusting the size of the container to be processed based on the operation, and modifying the size of the DOM node corresponding to the container to be processed according to the adjusted size of the container to be processed. And determining the proportion of each container occupied in the parent container according to the sizes of all containers in the parent container, and updating the size of the DOM node corresponding to each container to the proportion of the container occupied in the parent container. When the size of a certain container is adjusted, the method can adjust the sizes of other containers which are the same as the certain container in real time, so that the container can be self-adaptive to a father container, and the container can be self-adaptive to display equipment with different sizes.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to a method and apparatus for container adaptation, a storage medium, and an electronic device.
Background
With the development of technology, the internet is rapidly developed. Along with gradual deep enterprise digital transformation, development iteration speeds of various application software such as web-side application programs, fifth-generation hypertext markup language (HyperText Markup Language, HTML 5) pages, applets and the like are faster and faster, and the application development mode based on pure codes is difficult to meet the requirements, so that the low-code development platform is widely applied.
In the low-code development platform, a user can build different pages and applications through dragging the assembly. However, since the width and height of the container in the current low-code development platform are fixed, and since the container is a carrier of the component, the container cannot adapt to the display device in different sizes of display devices, resulting in failure of the component to display properly and failure of the adaptive display device.
Based on this, the present specification provides a method of container adaptation based on a low code development platform.
Disclosure of Invention
The present specification provides a container adapting method, apparatus, storage medium, and electronic device, to at least partially solve the above-mentioned problems of the prior art.
The technical scheme adopted in the specification is as follows:
the present specification provides a method of container adaptation that applies to a low code development platform for: generating a page application based on a drag operation of a user on the component and the container; the method comprises the following steps:
determining a container to be processed and a parent container where the container to be processed is located in response to an operation of adjusting the size of the container; determining a first container from all containers contained in the parent container according to the container to be processed; wherein, the layout mode corresponding to the container is an elastic flex layout;
fixing the size of the first container, and removing the flex attribute of the DOM node corresponding to the first container;
adjusting the size of the container to be processed based on the operation, and modifying the size of the DOM node corresponding to the container to be processed according to the adjusted size of the container to be processed;
determining the proportion of each container in all the containers occupied in the parent container according to the sizes of all the containers in the parent container;
And updating the size of the DOM node corresponding to the container to the ratio occupied by the container in the parent container according to each container, and resetting the flex attribute on the DOM node corresponding to the container.
Optionally, determining a first container from all containers contained in the parent container according to the container to be processed, including:
when the container to be processed is determined to be a row container, taking a container positioned at a first appointed position of the container to be processed as a first container in all containers contained in the parent container;
and when the container to be processed is determined to be a column container, taking the container positioned at the second designated position of the container to be processed as a first container in all containers contained in the parent container.
Optionally, fixing the size of the first container, and removing the flex attribute of the DOM node corresponding to the first container specifically includes:
determining a size of the first container; and removing the flex attribute of the DOM node corresponding to the first container to fix the size of the first container.
Optionally, determining the size of the first container specifically includes:
determining a first sum of proportions occupied by all containers in the parent container;
And determining the size of the first container according to the size of the DOM node corresponding to the parent container and the first sum.
Optionally, determining the proportion of each container in the parent container occupied by all containers according to the sizes of the containers in the parent container specifically includes:
determining the size of a second container in all containers contained in the parent container, and determining the smallest size in all containers;
and determining the proportion of each container in all the containers occupied in the parent container according to the minimum size.
Optionally, determining the second container in all containers contained in the parent container specifically includes:
when the container to be processed is determined to be a row container, taking a container positioned at a third appointed position of the container to be processed as a second container in all containers contained in the father container;
and when the container to be processed is determined to be a column container, taking the container positioned at the fourth appointed position of the container to be processed as a second container in all containers contained in the parent container.
Optionally, determining the size of the second container in all containers contained in the parent container specifically includes:
Determining a second sum of proportions occupied by the second container in the parent container and determining a third sum of other container sizes in the parent container than the second container;
and determining the size of the first container according to the size of the DOM node corresponding to the parent container, the second sum and the third sum.
Optionally, updating the size of the DOM node corresponding to the container to be the proportion occupied by the container in the parent container, and resetting the flex attribute on the DOM node corresponding to the container, which specifically includes:
deleting the size attribute of the DOM node corresponding to the container;
and resetting the flex attribute of the DOM node corresponding to the container on the DOM node corresponding to the container according to the proportion occupied by the container in the parent container.
The present specification provides a container-adaptive apparatus located on a low code development platform for: generating a page application based on a drag operation of a user on the component and the container; comprising the following steps:
the response module is used for responding to the operation of adjusting the size of the container and determining the container to be processed and the parent container where the container to be processed is located; determining a first container from all containers contained in the parent container according to the container to be processed; wherein, the layout mode corresponding to the container is an elastic flex layout;
The fixing module is used for fixing the size of the first container and removing the flex attribute of the DOM node corresponding to the first container;
the adjusting module is used for adjusting the size of the container to be processed based on the operation, and modifying the size of the DOM node corresponding to the container to be processed according to the adjusted size of the container to be processed;
a determining module, configured to determine a proportion of each container in the parent containers occupied by the containers according to sizes of all containers in the parent containers;
and the updating module is used for updating the size of the DOM node corresponding to each container to the proportion occupied by the container in the parent container, and resetting the flex attribute on the DOM node corresponding to the container.
Optionally, the response module is specifically configured to, when determining that the to-be-processed container is a row container, take, as a first container, a container located in a first designated orientation of the to-be-processed container, from all containers included in the parent container; and when the container to be processed is determined to be a column container, taking the container positioned at the second designated position of the container to be processed as a first container in all containers contained in the parent container.
Optionally, the fixing module is specifically configured to determine a size of the first container; and removing the flex attribute of the DOM node corresponding to the first container to fix the size of the first container.
Optionally, the fixing module is specifically configured to determine a first sum of proportions occupied by all containers in the parent container; and determining the size of the first container according to the size of the DOM node corresponding to the parent container and the first sum.
Optionally, the determining module is specifically configured to determine a size of a second container in all containers contained in the parent container, and determine a smallest size in the sizes of all containers; and determining the proportion of each container in all the containers occupied in the parent container according to the minimum size.
Optionally, the determining module is specifically configured to, when determining that the to-be-processed container is a row container, take, as a second container, a container located in a third designated orientation of the to-be-processed container, from all containers included in the parent container; and when the container to be processed is determined to be a column container, taking the container positioned at the fourth appointed position of the container to be processed as a second container in all containers contained in the parent container.
Optionally, the determining module is specifically configured to determine a second sum of proportions occupied by the second container in the parent container, and determine a third sum of sizes of other containers in the parent container except the second container; and determining the size of the first container according to the size of the DOM node corresponding to the parent container, the second sum and the third sum.
Optionally, the updating module is specifically configured to delete a size attribute of a DOM node corresponding to the container; and resetting the flex attribute of the DOM node corresponding to the container on the DOM node corresponding to the container according to the proportion occupied by the container in the parent container.
The present description provides a computer-readable storage medium storing a computer program which, when executed by a processor, implements the method of container adaptation described above.
The present specification provides an electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing a method of container adaptation as described above when executing the program.
The above-mentioned at least one technical scheme that this specification adopted can reach following beneficial effect:
According to the container self-adaption method provided by the specification, the low-code development platform can respond to the operation of adjusting the size of the container, determine the container to be processed and the parent container where the container to be processed is located, and determine the first container in all containers contained in the parent container according to the container to be processed, wherein the layout mode corresponding to the container is an elastic flex layout. And then the size of the first container can be fixed, the size of the container to be processed is adjusted based on the user operation, and the size of the DOM node corresponding to the container to be processed is modified according to the adjusted size of the container to be processed. And finally, determining the proportion of each container in all the containers occupied in the parent container according to the sizes of all the containers in the parent container, and updating the size of the DOM node corresponding to each container to the proportion of the container occupied in the parent container. The method is to continuously update and replace the ratio of the size of the container to the occupied ratio of the container in the father container, so that when the size of a certain container is adjusted, the sizes of other containers in the same level with the certain container can be adjusted in real time, and the container can be self-adaptive to the father container, so that the container can be self-adaptive to display equipment with different sizes.
Drawings
The accompanying drawings, which are included to provide a further understanding of the specification, illustrate and explain the exemplary embodiments of the present specification and their description, are not intended to limit the specification unduly. In the drawings:
FIG. 1 is a flow chart of a method of container adaptation in the present specification;
FIG. 2 is a schematic illustration of a container provided herein;
FIG. 3 is a schematic illustration of a container provided herein;
FIG. 4 is a schematic view of a container adapting apparatus provided herein;
fig. 5 is a schematic view of the electronic device corresponding to fig. 1 provided in the present specification.
Detailed Description
The low-code development platform can shorten the time of page building, application development and the like, and reduce development cost and the like, so that the low-code development platform is widely applied. The low-code development platform comprises a page designer, the page designer can be used for building and configuring a page, the page designer mainly comprises a component library, component configuration and canvas rendering, a user can operate in a user interface, and can drag components in the component library to a proper position in the canvas, so that a canvas rendering module in the page designer can re-render. In the low-code development platform, in order to realize accurate position control, the components need container package bearing, and the container is a layout container. However, the containers of the page designer in the low-code development platform at present adopt a layout mode with fixed width and height, namely a fixed layout, so that the containers cannot adapt to display devices with different sizes under the display devices with different sizes, and therefore components in the containers cannot be displayed completely.
Based on the above, the present disclosure provides a container self-adapting method, which continuously updates and replaces the ratio of the size of a container to the ratio of the size of a container occupied in a parent container, so that when a certain container is adjusted in size, the sizes of other containers in the same level as the certain container can be adjusted in real time, thereby enabling the container to be self-adapted to the parent container, and realizing the container self-adapting to display devices with different sizes.
For the purposes of making the objects, technical solutions and advantages of the present specification more apparent, the technical solutions of the present specification will be clearly and completely described below with reference to specific embodiments of the present specification and corresponding drawings. It will be apparent that the described embodiments are only some, but not all, of the embodiments of the present specification. All other embodiments, which can be made by one of ordinary skill in the art without undue burden from the present disclosure, are intended to be within the scope of the present disclosure.
The following describes in detail the technical solutions provided by the embodiments of the present specification with reference to the accompanying drawings.
Fig. 1 is a flow chart of a method for adapting a container provided in the present specification, which specifically includes the following steps:
S100: determining a container to be processed and a parent container where the container to be processed is located in response to an operation of adjusting the size of the container; determining a first container from all containers contained in the parent container according to the container to be processed; the layout mode corresponding to the container is an elastic flex layout.
First, the low-code development platform may determine a to-be-processed container and a parent container in which the to-be-processed container is located in response to an operation of adjusting a size of the container by a user, and may determine a first container from all containers included in the parent container in which the to-be-processed container is located according to the to-be-processed container. In an embodiment of the present description, the containers in the low code development platform include row containers and column containers, the adjusting the dimensions of the row containers is specifically adjusting the height of the row containers, and the adjusting the dimensions of the column containers is specifically adjusting the width of the column containers. As shown in fig. 2, a schematic diagram of a container provided in the present disclosure is shown in fig. 2, where the container is divided into a row container and a column container, and there is an inclusion relationship between the containers, that is, there is a parent container and a child container. And when the low-code development platform determines that the container to be processed is a row container, the container positioned at the first designated position of the container to be processed is taken as the first container in all containers contained in the parent container, and when the container to be processed is determined as a column container, the container positioned at the second designated position of the container to be processed is taken as the first container in all containers contained in the parent container. The first designated direction is the upper side of the container to be treated, and the second designated direction is the left side of the container to be treated.
It should be noted that, in one or more embodiments of the present disclosure, the layout of the parent container where the container to be processed is located is an elastic flex layout, and the flex of the peer container corresponding to the container to be processed may be set to 1 by default, and the peer container corresponding to the container to be processed, that is, all other containers in the parent container where the container to be processed is located.
S102: and fixing the size of the first container, and removing the flex attribute of the DOM node corresponding to the first container.
S104: and adjusting the size of the container to be processed based on the operation, and modifying the size of the DOM node corresponding to the container to be processed according to the adjusted size of the container to be processed.
Then, the low-code development platform can fix the size of the first container, remove the flex attribute of the DOM node corresponding to the first container, adjust the size of the container to be processed based on the operation of the user, and modify the size of the DOM node corresponding to the container to be processed, that is, the document node, according to the adjusted size of the container to be processed. Specifically, the low-code development platform can determine the size of the first container, and change the automatic adjustment state of the DOM node corresponding to each first container based on the flex attribute into an unadjustable state so as to fix the size of the first container, that is, the determined size of each first container is added to the DOM node corresponding to each first container by deleting the flex attribute of the DOM node corresponding to each first container, so as to fix the size of the first container. More specifically, when determining the size of the first container, a first sum of the proportions occupied by all containers in the parent container may be determined first, and then the size of the first container may be determined according to the size of the DOM node corresponding to the parent container and the first sum. Alternatively, for each container in the parent container, a flex value of the DOM node corresponding to the container may be determined, the flex value characterizing a proportion of the container occupied in the parent container, and determining a ratio of the flex value to the first sum, to obtain a first result, and determining a first product of the first result and a size of the DOM node corresponding to the parent container, where the first product may be taken as the size of the first container.
In one or more embodiments of the present disclosure, when the container to be treated is a row container, the size of the container is the height of the container, then the formula may be used:determining the height of the first container, wherein +.>For the height of the DOM node corresponding to the parent container,/->For the flex value of the first container at the current time (i.e., at the parentThe proportion occupied in the container),>for the height of the first container, +.>Is the sum of the flex values of all the containers in the parent container (i.e., the first sum of the proportions occupied by all the containers in the parent container). When the container to be treated is a column container, the size of the container is the width of the container, and then the formula can be adopted: />Determining the height of the first container, wherein +.>For the width of the DOM node corresponding to the parent container, < >>For the flex value of the first container at the current moment (i.e. the proportion occupied in the parent container),>for the width of the first container, +.>Is the sum of the flex values of all the containers in the parent container (i.e., the first sum of the proportions occupied by all the containers in the parent container).
S106: and determining the occupied proportion of each container in the parent containers according to the sizes of all containers in the parent containers.
The low code development platform may then determine the proportion of each of the containers that is occupied in the parent container based on the size of all of the containers in the parent container. Specifically, the low-code development platform may determine the size of the second container in all the containers contained in the parent container, determine the smallest size in all the containers, and determine, according to the determined smallest size, the ratio of each container in all the containers to be occupied in the parent container, that is, determine, for each container in the parent container, the ratio of the size of the container to the smallest size, and use the ratio as the ratio of the container to be occupied in the parent container. And when the to-be-processed container is determined to be a row container, the container positioned at the third appointed position of the to-be-processed container is taken as a second container in all containers contained in the father container, and when the to-be-processed container is determined to be a column container, the container positioned at the fourth appointed position of the to-be-processed container is taken as the second container in all containers contained in the father container. The third designated direction is the lower part of the container to be treated, and the fourth designated direction is the right side of the container to be treated.
In one or more embodiments of the present disclosure, when the low-code development platform determines the size of the second container in all the containers included in the parent container, the second sum of the proportion occupied by the second container in the parent container and the third sum of the sizes of other containers except the second container in the parent container may be determined first, and then the size of the first container may be determined according to the size of the DOM node corresponding to the parent container, the second sum, and the third sum. Specifically, the low-code development platform may determine, for each second container in the parent container, a flex value of a DOM node corresponding to the second container, where the flex value characterizes a proportion occupied by the second container in the parent container, determines a ratio of the flex value to a second sum, and obtains a second result, further determines a difference value between a size of the DOM node corresponding to the parent container and a third sum, determines a second product of the second result and the difference value, and may use the second product as the size of the first container.
In one or more embodiments of the present disclosure, when the container to be treated is a row container, the size of the container is the height of the container, then the formula may be used:determining the height of the second container, wherein +.>For the height of the DOM node corresponding to the parent container,/->For the flex value of the second container at the present moment (i.e. the proportion occupied in the parent container),>for the height of the second container, +.>Is the sum of the flex values of the second containers in the parent container (i.e. the second sum of the proportions each second container in the parent container occupies in the parent container), +.>Is the third sum of the heights of the other containers except the second container in the parent container, +.>Is the height of the other containers in the parent container except the second container. When the container to be treated is a column container, the size of the container is the width of the container, and then the formula can be adopted:determining the width of the second container, wherein ∈>For the width of the second container, +.>For the width of the DOM node corresponding to the parent container, < >>For the flex value of the second container at the present moment (i.e. the proportion occupied in the parent container),>is the third sum of the widths of the other containers except the second container in the parent container, +.>Is the sum of the flex values of the second containers in the parent container (i.e., parent A second sum of the proportions occupied by the second containers in the parent container),>is the width of the other containers in the parent container except the second container.
S108: and updating the size of the DOM node corresponding to the container to the ratio occupied by the container in the parent container according to each container, and resetting the flex attribute on the DOM node corresponding to the container.
Finally, the low-code development platform can update the size of the DOM node corresponding to each container to the proportion of the container occupied in the parent container, and reset the flex attribute on the DOM node corresponding to the container. Deleting the size attribute of the DOM node corresponding to the container, resetting the flex attribute on the DOM node corresponding to the container, and adding the proportion occupied by the container in the parent container to the DOM node corresponding to the container.
In the method for adapting a container provided by the present disclosure based on fig. 1, the low-code development platform may determine a container to be processed and a parent container where the container to be processed is located in response to an operation of adjusting the size of the container, and determine, according to the container to be processed, a first container in all containers included in the parent container, where a layout mode corresponding to the container is an elastic flex layout. And then the size of the first container can be fixed, the size of the container to be processed is adjusted based on the user operation, and the size of the DOM node corresponding to the container to be processed is modified according to the adjusted size of the container to be processed. And finally, determining the proportion of each container in all the containers occupied in the parent container according to the sizes of all the containers in the parent container, and updating the size of the DOM node corresponding to each container to the proportion of the container occupied in the parent container. The method is characterized in that the size of the container is continuously replaced with the ratio of the container occupied by the container in the parent container, so that when the size of a certain container is adjusted, the sizes of other containers which are identical to the certain container can be adjusted in real time, and the container can be self-adaptive to the parent container, so that the container can be self-adaptive to display equipment with different sizes.
The method realizes the horizontal and vertical self-adaption of the layout container in the low-code development platform, thereby realizing the self-adaption of the layout container as a whole, namely, the layout container can be scaled and displayed in equal proportion in different sizes of display equipment, and the suitability is good, so that components in the layout container can be completely displayed and are suitable for the display equipment with different sizes.
Further, in further embodiments of the present description, a method of moving at least two containers for welting is also provided. Referring to fig. 3, a schematic diagram of a container provided in the present disclosure is shown, where a parent container and a child container are attached to each other. Currently, for containers with edges attached up and down, when a component is in a sub-container, the component cannot be directly removed from the sub-container by only one operation when the component is dragged and moved. For example: assuming that the component A is to be moved from the child container to a position below the parent container, the component A is pulled out of the child container, moved to a position above the parent container, and then moved to a position above the component A.
In another embodiment of the present disclosure, the method may increase the packing-top and packing-bottom of all parent nodes of the DOM nodes corresponding to the container where the drawing component is located by monitoring the start and stop of the drawing action, so that two containers originally attached are not attached any more, and the problems of unsmooth drawing and a large number of drawing times are solved.
Specifically, a component to be dragged can be determined, drag operation of the component to be dragged can be detected in real time, when it is determined that drag of the component to be dragged is started, all father nodes are traversed upwards in a DOM node tree, and for each father node, if the father node is a DOM node corresponding to a layout container where the component to be dragged is located, a packing-top value and a packing-bottom value are added in the father node, the packing-top value and the packing-bottom value can be preset to 20px, and all nodes with the packing-top value and the packing-bottom value added are recorded. Further, when it is determined that the dragging of the component to be dragged is ended, the padding-top value and the padding-bottom value in each DOM node recorded are deleted.
Based on the above-mentioned container adapting method, the embodiment of the present disclosure further provides a schematic device for container adaptation, as shown in fig. 4.
FIG. 4 is a schematic diagram of an apparatus for container adaptation provided in an embodiment of the present disclosure, the apparatus being located on a low code development platform for: generating a page application based on a drag operation of a user on the component and the container; the device comprises:
a response module 400, configured to determine a container to be processed and a parent container in which the container to be processed is located, in response to an operation of adjusting a size of the container; determining a first container from all containers contained in the parent container according to the container to be processed; wherein, the layout mode corresponding to the container is an elastic flex layout;
A fixing module 402, configured to fix the size of the first container, and remove a flex attribute of a DOM node corresponding to the first container;
the adjustment module 404 is configured to adjust the size of the container to be processed based on the operation, and modify the size of the DOM node corresponding to the container to be processed according to the adjusted size of the container to be processed;
a determining module 406, configured to determine a proportion of each container in the parent container occupied by the containers according to the sizes of all containers in the parent container;
and the updating module 408 is configured to update, for each container, the size of the DOM node corresponding to the container to the proportion occupied by the container in the parent container, and reset the flex attribute on the DOM node corresponding to the container.
Optionally, the response module 400 is specifically configured to, when it is determined that the to-be-processed container is a row container, take, as a first container, a container located in a first designated orientation of the to-be-processed container, from all containers included in the parent container; and when the container to be processed is determined to be a column container, taking the container positioned at the second designated position of the container to be processed as a first container in all containers contained in the parent container.
Optionally, the fixing module 402 is specifically configured to determine a size of the first container; and removing the flex attribute of the DOM node corresponding to the first container to fix the size of the first container.
Optionally, the fixing module 402 is specifically configured to determine a first sum of proportions occupied by all containers in the parent container; and determining the size of the first container according to the size of the DOM node corresponding to the parent container and the first sum.
Optionally, the determining module 406 is specifically configured to determine a size of a second container in all containers contained in the parent container, and determine a smallest size in the sizes of all containers; and determining the proportion of each container in all the containers occupied in the parent container according to the minimum size.
Optionally, the determining module 406 is specifically configured to, when determining that the to-be-processed container is a row container, take, as a second container, a container located in a third designated orientation of the to-be-processed container, from all containers included in the parent container; and when the container to be processed is determined to be a column container, taking the container positioned at the fourth appointed position of the container to be processed as a second container in all containers contained in the parent container.
Optionally, the determining module 406 is specifically configured to determine a second sum of proportions occupied by the second container in the parent container, and determine a third sum of sizes of other containers in the parent container except the second container; and determining the size of the first container according to the size of the DOM node corresponding to the parent container, the second sum and the third sum.
Optionally, the updating module 408 is specifically configured to delete a size attribute of a DOM node corresponding to the container; and resetting the flex attribute of the DOM node corresponding to the container on the DOM node corresponding to the container according to the proportion occupied by the container in the parent container.
The embodiments of the present specification also provide a computer readable storage medium storing a computer program, where the computer program is configured to perform the method of container adaptation described above.
Based on the container adapting method described above, the embodiment of the present disclosure further proposes a schematic block diagram of the electronic device shown in fig. 5. At the hardware level, as in fig. 5, the electronic device includes a processor, an internal bus, a network interface, a memory, and a non-volatile storage, although it may include hardware required for other services. The processor reads the corresponding computer program from the nonvolatile memory into the memory and then runs the same to realize the container self-adaption method.
Of course, other implementations, such as logic devices or combinations of hardware and software, are not excluded from the present description, that is, the execution subject of the following processing flows is not limited to each logic unit, but may be hardware or logic devices.
In the 90 s of the 20 th century, improvements to one technology could clearly be distinguished as improvements in hardware (e.g., improvements to circuit structures such as diodes, transistors, switches, etc.) or software (improvements to the process flow). However, with the development of technology, many improvements of the current method flows can be regarded as direct improvements of hardware circuit structures. Designers almost always obtain corresponding hardware circuit structures by programming improved method flows into hardware circuits. Therefore, an improvement of a method flow cannot be said to be realized by a hardware entity module. For example, a programmable logic device (Programmable Logic Device, PLD) (e.g., field programmable gate array (Field Programmable Gate Array, FPGA)) is an integrated circuit whose logic function is determined by the programming of the device by a user. A designer programs to "integrate" a digital system onto a PLD without requiring the chip manufacturer to design and fabricate application-specific integrated circuit chips. Moreover, nowadays, instead of manually manufacturing integrated circuit chips, such programming is mostly implemented by using "logic compiler" software, which is similar to the software compiler used in program development and writing, and the original code before the compiling is also written in a specific programming language, which is called hardware description language (Hardware Description Language, HDL), but not just one of the hdds, but a plurality of kinds, such as ABEL (Advanced Boolean Expression Language), AHDL (Altera Hardware Description Language), confluence, CUPL (Cornell University Programming Language), HDCal, JHDL (Java Hardware Description Language), lava, lola, myHDL, PALASM, RHDL (Ruby Hardware Description Language), etc., VHDL (Very-High-Speed Integrated Circuit Hardware Description Language) and Verilog are currently most commonly used. It will also be apparent to those skilled in the art that a hardware circuit implementing the logic method flow can be readily obtained by merely slightly programming the method flow into an integrated circuit using several of the hardware description languages described above.
The controller may be implemented in any suitable manner, for example, the controller may take the form of, for example, a microprocessor or processor and a computer readable medium storing computer readable program code (e.g., software or firmware) executable by the (micro) processor, logic gates, switches, application specific integrated circuits (Application Specific Integrated Circuit, ASIC), programmable logic controllers, and embedded microcontrollers, examples of which include, but are not limited to, the following microcontrollers: ARC 625D, atmel AT91SAM, microchip PIC18F26K20, and Silicone Labs C8051F320, the memory controller may also be implemented as part of the control logic of the memory. Those skilled in the art will also appreciate that, in addition to implementing the controller in a pure computer readable program code, it is well possible to implement the same functionality by logically programming the method steps such that the controller is in the form of logic gates, switches, application specific integrated circuits, programmable logic controllers, embedded microcontrollers, etc. Such a controller may thus be regarded as a kind of hardware component, and means for performing various functions included therein may also be regarded as structures within the hardware component. Or even means for achieving the various functions may be regarded as either software modules implementing the methods or structures within hardware components.
The system, apparatus, module or unit set forth in the above embodiments may be implemented in particular by a computer chip or entity, or by a product having a certain function. One typical implementation is a computer. In particular, the computer may be, for example, a personal computer, a laptop computer, a cellular telephone, a camera phone, a smart phone, a personal digital assistant, a media player, a navigation device, an email device, a game console, a tablet computer, a wearable device, or a combination of any of these devices.
For convenience of description, the above devices are described as being functionally divided into various units, respectively. Of course, the functions of each element may be implemented in one or more software and/or hardware elements when implemented in the present specification.
It will be appreciated by those skilled in the art that embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems) and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flowchart illustrations and/or block diagrams, and combinations of flows and/or blocks in the flowchart illustrations and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
In one typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.
The memory may include volatile memory in a computer-readable medium, random Access Memory (RAM) and/or nonvolatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM). Memory is an example of computer-readable media.
Computer readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of storage media for a computer include, but are not limited to, phase change memory (PRAM), static Random Access Memory (SRAM), dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), read Only Memory (ROM), electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium, which can be used to store information that can be accessed by a computing device. Computer-readable media, as defined herein, does not include transitory computer-readable media (transmission media), such as modulated data signals and carrier waves.
It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article or apparatus that comprises the element.
It will be appreciated by those skilled in the art that embodiments of the present description may be provided as a method, system, or computer program product. Accordingly, the present specification may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present description can take the form of a computer program product on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) having computer-usable program code embodied therein.
The description may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. The specification may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media including memory storage devices.
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.
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 application.
Claims (11)
1. A method of container adaptation, the method being applied to a low code development platform for: generating a page application based on a drag operation of a user on the component and the container; the method comprises the following steps:
determining a container to be processed and a parent container where the container to be processed is located in response to an operation of adjusting the size of the container; determining a first container from all containers contained in the parent container according to the container to be processed; wherein, the layout mode corresponding to the container is an elastic flex layout;
fixing the size of the first container, and removing the flex attribute of the DOM node corresponding to the first container;
adjusting the size of the container to be processed based on the operation, and modifying the size of the DOM node corresponding to the container to be processed according to the adjusted size of the container to be processed;
determining the proportion of each container in all the containers occupied in the parent container according to the sizes of all the containers in the parent container;
and updating the size of the DOM node corresponding to the container to the ratio occupied by the container in the parent container according to each container, and resetting the flex attribute on the DOM node corresponding to the container.
2. The method according to claim 1, wherein determining a first container among all containers contained in said parent container according to said containers to be treated, comprises in particular:
when the container to be processed is determined to be a row container, taking a container positioned at a first appointed position of the container to be processed as a first container in all containers contained in the parent container;
and when the container to be processed is determined to be a column container, taking the container positioned at the second designated position of the container to be processed as a first container in all containers contained in the parent container.
3. The method of claim 1, wherein fixing the size of the first container and removing the flex attribute of the DOM node corresponding to the first container specifically comprises:
determining a size of the first container; and removing the flex attribute of the DOM node corresponding to the first container to fix the size of the first container.
4. A method according to claim 3, wherein determining the size of the first container comprises:
determining a first sum of proportions occupied by all containers in the parent container;
and determining the size of the first container according to the size of the DOM node corresponding to the parent container and the first sum.
5. The method of claim 1, wherein determining the proportion of each of the containers in the parent container based on the size of all of the containers in the parent container, specifically comprises:
determining the size of a second container in all containers contained in the parent container, and determining the smallest size in all containers;
and determining the proportion of each container in all the containers occupied in the parent container according to the minimum size.
6. The method of claim 5, wherein determining a second container of all containers contained in the parent container, comprises:
when the container to be processed is determined to be a row container, taking a container positioned at a third appointed position of the container to be processed as a second container in all containers contained in the father container;
and when the container to be processed is determined to be a column container, taking the container positioned at the fourth appointed position of the container to be processed as a second container in all containers contained in the parent container.
7. The method of claim 5, wherein determining the size of the second container of all containers contained in the parent container, comprises:
Determining a second sum of proportions occupied by the second container in the parent container and determining a third sum of other container sizes in the parent container than the second container;
and determining the size of the first container according to the size of the DOM node corresponding to the parent container, the second sum and the third sum.
8. The method of claim 1, wherein updating the size of the DOM node corresponding to the container to the proportion occupied by the container in the parent container, and resetting the flex attribute on the DOM node corresponding to the container, specifically comprises:
deleting the size attribute of the DOM node corresponding to the container;
and resetting the flex attribute of the DOM node corresponding to the container on the DOM node corresponding to the container according to the proportion occupied by the container in the parent container.
9. An apparatus for container adaptation, wherein the apparatus is located on a low code development platform for: generating a page application based on a drag operation of a user on the component and the container; the device specifically comprises:
the response module is used for responding to the operation of adjusting the size of the container and determining the container to be processed and the parent container where the container to be processed is located; determining a first container from all containers contained in the parent container according to the container to be processed; wherein, the layout mode corresponding to the container is an elastic flex layout;
The fixing module is used for fixing the size of the first container and removing the flex attribute of the DOM node corresponding to the first container;
the adjusting module is used for adjusting the size of the container to be processed based on the operation, and modifying the size of the DOM node corresponding to the container to be processed according to the adjusted size of the container to be processed;
a determining module, configured to determine a proportion of each container in the parent containers occupied by the containers according to sizes of all containers in the parent containers;
and the updating module is used for updating the size of the DOM node corresponding to each container to the proportion occupied by the container in the parent container, and resetting the flex attribute on the DOM node corresponding to the container.
10. A computer readable storage medium, characterized in that the storage medium stores a computer program which, when executed by a processor, implements the method of any of the preceding claims 1-8.
11. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the method of any of the preceding claims 1-8 when the program is executed.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311298510.7A CN117032676B (en) | 2023-10-09 | 2023-10-09 | Container self-adaption method and device, storage medium and electronic equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311298510.7A CN117032676B (en) | 2023-10-09 | 2023-10-09 | Container self-adaption method and device, storage medium and electronic equipment |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN117032676A true CN117032676A (en) | 2023-11-10 |
| CN117032676B CN117032676B (en) | 2024-01-26 |
Family
ID=88641652
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311298510.7A Active CN117032676B (en) | 2023-10-09 | 2023-10-09 | Container self-adaption method and device, storage medium and electronic equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117032676B (en) |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20050235293A1 (en) * | 2004-04-14 | 2005-10-20 | Microsoft Corporation | Methods and systems for framework layout editing operations |
| WO2015074521A1 (en) * | 2013-11-19 | 2015-05-28 | Tencent Technology (Shenzhen) Company Limited | Devices and methods for positioning based on image detection |
| US20160292130A1 (en) * | 2015-04-02 | 2016-10-06 | International Business Machines Corporation | Legacy document converter for a mobile device |
| CN106503041A (en) * | 2016-09-19 | 2017-03-15 | 曙光信息产业(北京)有限公司 | Page layout self-adaptive method and system |
| CN106708985A (en) * | 2016-12-12 | 2017-05-24 | 北京奇虎科技有限公司 | Layout method and device for multi-column webpage |
| CN109948083A (en) * | 2017-07-17 | 2019-06-28 | 北京国双科技有限公司 | Web page processing method and device |
| CN111258575A (en) * | 2018-11-30 | 2020-06-09 | 阿里健康信息技术有限公司 | Page layout processing method and device |
| CN113849175A (en) * | 2021-09-15 | 2021-12-28 | 上海浦东发展银行股份有限公司 | Code generation method, device, equipment and storage medium |
| US20220350797A1 (en) * | 2021-04-29 | 2022-11-03 | Fujitsu Limited | Providing container images |
| CN116450129A (en) * | 2023-04-07 | 2023-07-18 | 北京达佳互联信息技术有限公司 | Page layout method and device, electronic equipment and storage medium |
-
2023
- 2023-10-09 CN CN202311298510.7A patent/CN117032676B/en active Active
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20050235293A1 (en) * | 2004-04-14 | 2005-10-20 | Microsoft Corporation | Methods and systems for framework layout editing operations |
| WO2015074521A1 (en) * | 2013-11-19 | 2015-05-28 | Tencent Technology (Shenzhen) Company Limited | Devices and methods for positioning based on image detection |
| US20160292130A1 (en) * | 2015-04-02 | 2016-10-06 | International Business Machines Corporation | Legacy document converter for a mobile device |
| CN106503041A (en) * | 2016-09-19 | 2017-03-15 | 曙光信息产业(北京)有限公司 | Page layout self-adaptive method and system |
| CN106708985A (en) * | 2016-12-12 | 2017-05-24 | 北京奇虎科技有限公司 | Layout method and device for multi-column webpage |
| CN109948083A (en) * | 2017-07-17 | 2019-06-28 | 北京国双科技有限公司 | Web page processing method and device |
| CN111258575A (en) * | 2018-11-30 | 2020-06-09 | 阿里健康信息技术有限公司 | Page layout processing method and device |
| US20220350797A1 (en) * | 2021-04-29 | 2022-11-03 | Fujitsu Limited | Providing container images |
| CN113849175A (en) * | 2021-09-15 | 2021-12-28 | 上海浦东发展银行股份有限公司 | Code generation method, device, equipment and storage medium |
| CN116450129A (en) * | 2023-04-07 | 2023-07-18 | 北京达佳互联信息技术有限公司 | Page layout method and device, electronic equipment and storage medium |
Non-Patent Citations (4)
| Title |
|---|
| RABIH KHAZAKA等: "Design of Power Modules Using Containers Filled With Phase Change Materials as Device Top Interconnection for Power Peak Management", DESIGN OF POWER MODULES USING CONTAINERS FILLED WITH PHASE CHANGE MATERIALS AS DEVICE TOP INTERCONNECTION FOR POWER PEAK MANAGEMENT * |
| 叶潮流;马林山;: "基于HTML 5+CSS3+jQuery的响应式布局网页设计", 梧州学院学报, no. 03 * |
| 张?;: "基于CSS3的网页布局研究", 电子世界, no. 23 * |
| 陈豪;吴健;: "基于Drupal 7的HTML5布局模板的二次开发", 计算机时代, no. 12 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN117032676B (en) | 2024-01-26 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| EP3547168A1 (en) | Block chain based data processing method and device | |
| CN110941784A (en) | Page generation method and device | |
| CN110633437B (en) | Method and device for omitting display of multiple lines | |
| CN117032676B (en) | Container self-adaption method and device, storage medium and electronic equipment | |
| CN116245051A (en) | Simulation software rendering method and device, storage medium and electronic equipment | |
| CN114115643A (en) | Component display method and device, electronic equipment and readable medium | |
| CN116091895B (en) | Model training method and device oriented to multitask knowledge fusion | |
| CN116341642B (en) | Data processing method and device, storage medium and electronic equipment | |
| CN107369192B (en) | Connection relation processing method and device | |
| CN110046090B (en) | Page element positioning method and device | |
| CN117033844B (en) | Canvas element layout method and device, storage medium and electronic equipment | |
| CN117152040B (en) | Point cloud fusion method and device based on depth map | |
| CN114520770B (en) | Topology diagram generation method, device, equipment and medium of network equipment | |
| CN116107636B (en) | Hardware acceleration method and device, storage medium and electronic equipment | |
| CN111061978A (en) | Page skipping method and device | |
| CN107783761B (en) | Interface construction method, device and equipment | |
| CN117331557B (en) | Form rendering method, device, medium and equipment | |
| CN112434486B (en) | Automatic paging method, device, equipment and medium for device in PCB design | |
| CN117173321B (en) | Method and device for selecting three-dimensional reconstruction texture view | |
| CN116188633B (en) | Method, device, medium and electronic equipment for generating simulated remote sensing image | |
| CN111651450B (en) | Block copy method, device, equipment and medium based on block chain | |
| CN117522669B (en) | Method, device, medium and equipment for optimizing internal memory of graphic processor | |
| CN112883136B (en) | Task generation method for manufacturing high-precision map | |
| CN113687894B (en) | Transition processing method, device and equipment for animation items | |
| CN114490001A (en) | Method, device and equipment for executing aggregated event stream |
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 |