Page generation method, device, equipment, readable storage medium and program product

Abstract

The application provides a page generation method and device, equipment, readable storage medium and program product. In the case that a display operation interface includes a component identification list and an initial page, a first input of N component identifications in the component identification list is received, N is a positive integer; in response to the first input, N components corresponding to the N component identifications one by one are determined, and the placeholder attribute value of each component is determined; according to the placeholder attribute value of each component, the gridding layout of the N components in the initial page is displayed; and according to the gridding layout, a target page is generated. According to the embodiments of the application, the technical problem that the process operation of page generation is difficult and the cycle is long can be solved.

Description

Technical Field

[0001] This application belongs to the field of Internet technology, and in particular relates to a page generation method, apparatus, device, readable storage medium, and program product. Background Technology

[0002] In the current page development process, developers usually use open-source user interface (UI) component frameworks for page design. This requires developers to be very familiar with front-end programming languages. In particular, when page development requires the generation of pages with specific layouts, developers often need to manually modify and adjust the specific code related to the page layout, which makes the page generation process difficult and time-consuming. Summary of the Invention

[0003] This application provides a page generation method, apparatus, device, readable storage medium, and program product to solve the technical problem that the page generation process is difficult to operate and has a long cycle.

[0004] In a first aspect, embodiments of this application provide a page generation method, the method comprising:

[0005] When displaying the operation interface, which includes a list of component identifiers and an initial page, the system receives the first input for N component identifiers in the list of component identifiers, where N is a positive integer.

[0006] In response to the first input, determine the N components that correspond one-to-one with the N component identifiers, and the placeholder attribute value for each component;

[0007] Based on the placeholder attribute value of each component, display a grid layout of N components on the initial page;

[0008] Generate the target page based on the grid layout.

[0009] Secondly, embodiments of this application provide a page generation apparatus, the apparatus comprising:

[0010] The first receiving module is used to receive a first input for N component identifiers in the component identifier list, where N is a positive integer, when the operation interface is displayed and the operation interface includes a component identifier list and an initial page.

[0011] The determination module is used to determine, in response to the first input, the N components that correspond one-to-one with the N component identifiers, and the placeholder attribute value of each component;

[0012] The display module is used to display a gridded layout of N components on the initial page based on the placeholder attribute value of each component.

[0013] The generation module is used to generate the target page based on the gridded layout.

[0014] Thirdly, embodiments of this application provide an electronic device, the device comprising:

[0015] Processor and memory storing programs or instructions;

[0016] The processor implements the above-described method when executing the program or instructions.

[0017] Fourthly, embodiments of this application provide a machine-readable storage medium storing a program or instructions that, when executed by a processor, implement the method described above.

[0018] Fifthly, embodiments of this application provide a computer program product in which instructions, when executed by a processor of an electronic device, cause the electronic device to perform the above-described method.

[0019] The page generation method, apparatus, device, readable storage medium, and program product of this application embodiment can, when displaying an operation interface including a component identifier list and an initial page, receive a first input of N component identifiers in the component identifier list, where N is a positive integer; in response to the first input, determine N components corresponding one-to-one with the N component identifiers, and the placeholder attribute value of each component; display a gridded layout of the N components in the initial page according to the placeholder attribute value of each component; and generate a target page according to the gridded layout. In this way, the components corresponding to the component identifiers received from the first input can be directly added to the initial page, and the placeholder attribute values ​​of these components can be used as the layout basis to display their gridded layout in the initial page for developers to view, and the target page of the gridded layout can be generated. This eliminates the need for developers to manually adjust code related to page layout, reducing the difficulty of page development and making page generation operations more convenient and efficient. Attached Figure Description

[0020] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments of this application will be briefly introduced below. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0021] Figure 1 This is a schematic flowchart of a page generation method provided in one embodiment of this application;

[0022] Figure 2 This is a flowchart illustrating a scenario embodiment of the page generation method provided in this application;

[0023] Figure 3This is a schematic diagram illustrating a scenario embodiment of the page generation method provided in one embodiment of this application;

[0024] Figure 4 This is a schematic diagram illustrating a scenario embodiment of a page generation method provided in another embodiment of this application;

[0025] Figure 5 This is a schematic diagram of the structure of a page generation apparatus provided in another embodiment of this application;

[0026] Figure 6 This is a schematic diagram of the structure of an electronic device provided in another embodiment of this application. Detailed Implementation

[0027] The features and exemplary embodiments of various aspects of this application will be described in detail below. To make the objectives, technical solutions, and advantages of this application clearer, the application will be further described in detail below with reference to the accompanying drawings and specific embodiments. It should be understood that the specific embodiments described herein are only intended to explain this application and not to limit it. For those skilled in the art, this application can be implemented without some of these specific details. The following description of the embodiments is merely to provide a better understanding of this application by illustrating examples.

[0028] It should be noted that, in this document, relational terms such as "first" and "second" are used merely to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising..." does not exclude the presence of additional identical elements in the process, method, article, or apparatus that includes said element.

[0029] To address the problems of the prior art, embodiments of this application provide a page generation method, apparatus, device, readable storage medium, and program product. The page generation method provided in this application embodiment will be described first below.

[0030] Figure 1 A flowchart illustrating a page generation method according to an embodiment of this application is shown. This page generation method can be applied in page development scenarios. Figure 1 As shown, the page generation method may include:

[0031] S110, when displaying the operation interface, which includes a component identifier list and an initial page, receives the first input for N component identifiers in the component identifier list;

[0032] S120, in response to the first input, determine the N components that correspond one-to-one with the N component identifiers, and the placeholder attribute value of each component;

[0033] S130, based on the placeholder attribute value of each component, display the grid layout of N components on the initial page;

[0034] S140, Generate the target page based on the grid layout.

[0035] The specific implementation methods of each of the above steps will be described in detail below.

[0036] In this embodiment of the application, the page generation method can directly add the component corresponding to the component identifier received from the first input to the initial page, and can use the placeholder attribute values ​​of these components as the layout basis to display their grid layout on the initial page for developers to view, and can generate the target page of the grid layout without developers having to manually adjust the code related to the page layout, which reduces the difficulty of page development and makes the page generation operation more convenient and efficient.

[0037] The specific implementation methods for each of the above steps are described below.

[0038] In S110, the user interface may include a component identifier list and an initial page. The user interface can be displayed on any operating device. The component identifier list may be a component bar containing N component identifiers, where N is a positive integer. The initial page may be a page displayed on the user interface, which may be a blank page or a page containing default template content; there is no limitation here.

[0039] The first input can be: a user's click on N component identifiers, a voice command input by the user, or a specific gesture input by the user. The specific gesture can be determined according to actual usage needs, and this application embodiment does not limit this. The specific gesture in this application embodiment can be any one of a single-click gesture, a swipe gesture, a drag gesture, a pressure-recognition gesture, a long-press gesture, an area-change gesture, a double-press gesture, or a double-tap gesture. The click input in this application embodiment can be a single-click input, a double-tap input, or any number of clicks, and can also be a long-press input or a short-press input. For example, the first input can be a user's movement operation on N component identifiers in the component identifier list, specifically, the user moving at least one of the N component identifiers to the initial page.

[0040] In S120, the component identifier can be a label used to identify the corresponding component, and the placeholder attribute value can at least include a component row space value, which represents the size of the space required by the component in the grid array of the UI framework design; that is, each component has a corresponding component identifier and a placeholder attribute value. In response to the first input, N components corresponding one-to-one with N component identifiers, and the placeholder attribute value of each component can be determined.

[0041] In S130, depending on the placeholder attribute value of each component, the grid layout of N components on the initial page can be displayed directly, or it can be displayed on other display interfaces; there is no limitation here.

[0042] In front-end styling, grid layout refers to using a regular grid array to guide and standardize the layout of web pages, including elements such as rows, columns, slots, and containers. It is a method and style of graphic design.

[0043] In this embodiment, N components can be freely arranged according to the placeholder attribute value of each component and the grid array of the initial page to display the grid layout of N components in the initial page.

[0044] In S140, generating the target page can be based on the grid layout of N components in the initial page. That is, the target page can include the initial page and the N components displayed in the initial page using a grid layout.

[0045] To make page generation more convenient and efficient, this application provides a specific implementation of S130, which may include:

[0046] Based on the placeholder attribute value of each component and the line space value of the initial page, construct layout tags for each component;

[0047] Based on the layout tag corresponding to each component, display the grid layout of N components in the initial page.

[0048] In some embodiments, layout tags can be tags used by computers to identify the arrangement of components, including row layout tags and / or column layout tags, where the placeholder attribute value can be less than or equal to the row space value. The row space value can be a preset value in the gridded layout based on actual conditions, and the preset value is any positive integer greater than the placeholder attribute value of each component. Row layout tags can include row layout start tags and row layout close tags, and column layout tags can include column layout start tags and column layout close tags.

[0049] As an example, the row space value can be determined based on the following practical reasons:

[0050] Common personal computer (PC) screen resolutions are 1920, 1440, and 1200. Since both 24 and 12 are divisible by these resolutions, the row space value can be 24 or 12 for ease of design and layout. Furthermore, because existing front-end UI frameworks use a grid layout with 24 columns per row, setting the row space value to 24 can improve the adaptability of page generation methods.

[0051] In some embodiments, the splicing layout label can be a label that can be recognized by a computer added to the beginning or end of a component. For example, adding a row layout start label to the beginning of a component can indicate that the component is the first item in a row.

[0052] In some embodiments, a gridded layout of N components in the initial page is displayed based on the layout tag corresponding to each component. Specifically, the arrangement position of each component in the initial page can be determined based on the layout tag of each component, thereby determining the gridded layout of N components based on the arrangement position of each component in the initial page and displaying it.

[0053] In this way, by splicing layout tags onto each component based on the placeholder attribute value of each component and the preset line space value of the initial page, the spliced ​​layout tags can clearly indicate the arrangement position of each component in the initial page, thereby displaying the grid layout of N components in the initial page, and thus generating a target page including the grid layout of the components, making the page generation operation more convenient and efficient.

[0054] In some embodiments of this application, to ensure that the splicing layout tags of each component are more accurate, thereby enabling the components to be displayed correctly in the gridded layout, this application provides a specific implementation method for splicing layout tags of each component based on the placeholder attribute value of each component and the initial page line space value. This specific implementation method may include:

[0055] If the placeholder attribute value of the i-th component is less than the row space value, determine whether the first value of the current placeholder counter is 0, where i is a positive integer and i is less than or equal to N;

[0056] When the first value is 0, the header of the i-th component is spliced ​​with the start tag of the row layout.

[0057] Based on the sum of the first value and the placeholder attribute value of the i-th component, the second value of the placeholder counter is obtained after accumulation;

[0058] If i is less than N and the sum of the placeholder attribute value of the (i+1)th component and the second value is greater than the line space value, or if i is equal to N, append a line layout closing tag to the end of the i-th component.

[0059] The second value is cleared to zero.

[0060] In some embodiments, the computer may perform a traversal of N components to determine the i-th component; the placeholder counter may be used to represent the sum of the placeholder attribute values ​​of the components present in the current row layout. The capacity of the placeholder counter may be set to a value equal to the row space value, or it may be other values, which are not limited here.

[0061] To determine if the first value of the current placeholder counter is 0, the computer can read the number from the current placeholder counter. When the first value is 0, it means no component has been added to the current row layout; therefore, a row layout start tag can be appended to the header of the i-th component to indicate that this component is the first item in the current row layout. Alternatively, if the first value is not 0, it means a component has been added to the current row layout. This can be determined by checking if the sum of the placeholder attribute value of the i-th component and the first value is greater than the row space value. If it is greater, the i-th component cannot be added to the current row layout, so the first value can be cleared, and the i-th component can be added to the next row layout. If it is less than or equal to the first value, the i-th component can be added to the current row layout; therefore, a column layout start tag can be appended to the header of the i-th component, and a column layout close tag can be appended to the tail of the i-th component.

[0062] The second value obtained after the placeholder counter has accumulated can be obtained by using the placeholder attribute value of the i-th component as the second value after the i-th component is attached to the starting tag of the row layout, that is, after the i-th component is displayed as the first component in the current row layout.

[0063] In some embodiments, after the display position of the i-th component is determined, it can be determined whether i is equal to N, that is, whether the i-th component is the last component. If i is equal to N, the i-th component can be considered as the last component among all components that needs to be displayed on the initial page. At this time, a line layout closing tag can be appended to the end of the i-th component, which can indicate that the component is the last item in the current line layout.

[0064] If i is less than N, then the i-th component is not the last component. In this case, we can determine whether the sum of the placeholder attribute value and the second value of the (i+1)-th component is greater than the line space value. If the sum of the placeholder attribute value and the second value of the (i+1)-th component is greater than the line space value, then the current line layout cannot display the i-th component and the (i+1)-th component at the same time. In this case, we can append a line layout closing tag to the end of the i-th component.

[0065] After appending a row layout closing tag to the end of the i-th component, the second value can be cleared to zero. This indicates that the process of determining the components to be displayed in the current row layout has ended, and the determination of the components to be displayed in the next row layout can proceed.

[0066] As an example, with a line space value of 24, for component A out of N components, its placeholder attribute value is known to be 16. Since the placeholder attribute value is less than the line space value, the first value of the current placeholder counter is determined to be 0. Therefore, a line layout start tag is appended to the header of component A. The second value is then the sum of the first value and the placeholder attribute value of component A, which is 16. Next, for component B out of the N components, which is after component A, its placeholder attribute value is known to be 10. Therefore, the sum of the placeholder attribute value of the (i+1)th component and the second value is 26, which is greater than the line space value. This indicates that the current line layout cannot display component B. At this point, a line layout close tag is appended to the tail of component A, resetting the placeholder counter to zero.

[0067] As another example, if the placeholder attribute value of the i-th component is 24, that is, when the placeholder attribute value of the i-th component is equal to the line space value, a line layout start tag can be directly appended to the header of the i-th component, and a line layout close tag can be appended to the tail of the i-th component. In other words, the i-th component occupies a separate line layout for display.

[0068] Thus, by determining whether the first value of the current placeholder counter is 0 and whether the placeholder attribute value of the component is less than the line space value, it is determined whether the component is the first component to be displayed in the current line layout. If so, a line layout start tag is appended to the header of the component. Then, it is determined whether the sum of the placeholder attribute value of the next component and the first value is greater than the line space value, thereby determining whether the next component can also be displayed in the current line layout. This ensures that the appended layout tags of each component are more accurate, so that the components are displayed correctly in the gridded layout.

[0069] To ensure more accurate layout tags for each component, thereby enabling correct display of components in a gridded layout, this application provides another specific implementation method for adding layout tags to each component based on its placeholder attribute value and the initial page line space value. This specific implementation method, after obtaining the second value accumulated by the placeholder counter, may further include:

[0070] If i is less than N, and the sum of the placeholder attribute value of the (i+1)th component and the second value is less than or equal to the row space value, then the header of the (i+1)th component is laid out with a start label, and the tail of the (i+1)th component is laid out with a close label.

[0071] The third value of the placeholder counter is obtained by summing the second value with the placeholder attribute value of the (i+1)th component.

[0072] If i+1 is less than N, and the sum of the placeholder attribute value of the i+2th component and the third value is greater than the line space value, or if i+1 is equal to N, a line layout closing tag is spliced ​​to the end of the i+1th component.

[0073] The third value is cleared to zero;

[0074] Among them, line layout tags include line layout start tags and line layout close tags.

[0075] In some embodiments, if the sum of the placeholder attribute value of the (i+1)th component and the second value is less than or equal to the row space value, it means that the (i+1)th component can be displayed in the current row layout. In this case, a column layout start label can be appended to the header of the (i+1)th component, and a column layout close label can be appended to its tail. That is, the (i+1)th component is displayed as a column in the current row layout.

[0076] At this point, the current row layout displays the i-th component and the (i+1)-th component. We can then obtain the third value after the placeholder counter has accumulated. Specifically, we can add the column layout closing tag at the end of the (i+1)-th component and use the sum of the second value and the placeholder attribute value of the (i+1)-th component as the third value.

[0077] Then we can determine whether i+1 equals N, that is, whether the i+1th component is the last component. If i+1 equals N, then the i+1th component can be considered as the last component among all components that needs to be displayed on the initial page. At this time, we can append a line layout closing tag to the end of the i+1th component, which can indicate that the component is the last item in the current line layout.

[0078] If i+1 is less than N, then the (i+1)th component is not the last component. In this case, we can further check if the sum of the placeholder attribute value and the third value of the (i+2)th component is greater than the row space value. If the sum is greater, then the current row layout cannot display the i-th, (i+1)-th, and (i+2)-th components simultaneously. In this case, a row layout closing tag can be appended to the end of the (i+1)-th component. Alternatively, if the sum of the placeholder attribute value and the third value of the (i+2)-th component is less than or equal to the row space value, then the current row layout can display the i-th, (i+1)-th, and (i+2)-th components simultaneously. In this case, a column layout start tag can be appended to the header of the (i+2)-th component, and a column layout closing tag can be appended to the tail of the (i+2)-th component.

[0079] After appending a row layout closing tag to the end of the (i+1)th component, the third value can be cleared to zero. This indicates that the process of determining the components to be displayed in the current row layout has ended, and the determination of the components to be displayed in the next row layout can proceed.

[0080] As an example, with a line space value of 24, for a component C of N components, if its placeholder attribute value is known to be 12, then the placeholder attribute value is less than the line space value. If the first value of the current placeholder counter is 0, then a line layout start tag is appended to the header of component A. At this time, the second value is the sum of the first value and the placeholder attribute value of component A, which is 12. After obtaining component D from component C out of N components, given that its placeholder attribute value is 8, we know that the sum of the placeholder attribute value of the (i+1)th component and the second value is 20, which is less than the row space value, indicating that the current row layout can display component D. At this time, we use 20 as the third value, and append a column layout start tag to the header of component D and a column layout close tag to its tail. After obtaining component E from component D out of N components, given that its placeholder attribute value is 6, we know that the sum of the placeholder attribute value of the (i+2)th component and the third value is 26, which is greater than the row space value, indicating that the current row layout can no longer display component E. At this time, we append a row layout close tag to the tail of component D and clear the value in the placeholder counter to zero.

[0081] Thus, by determining whether the first value of the current placeholder counter is 0 and whether the placeholder attribute value of the component is less than the line space value, it is determined whether the component is the first component to be displayed in the current line layout. If so, a line layout start tag is appended to the header of the component. Then, it is determined whether the sum of the placeholder attribute value of the next component and the first value is greater than the line space value, thereby determining whether the next component can also be displayed in the current line layout. This ensures that the appended layout tags of each component are more accurate, so that the components are displayed correctly in the gridded layout.

[0082] To facilitate understanding of the page generation method provided in the above embodiments, the following describes the page generation method using a specific scenario embodiment. Figure 2 A flowchart illustrating a scenario embodiment of the above page generation method is shown. For example... Figure 2 As shown, the page generation method may include:

[0083] S201, the initial value of the placeholder counter is set to 0.

[0084] S202, traverse N components.

[0085] S203, determine whether the placeholder attribute of each component is less than the row space value. If so, proceed to S204; otherwise, proceed to S208.

[0086] S204, further determine whether the current placeholder counter value is 0. If it is, proceed to S205; otherwise, proceed to S206.

[0087] S205 adds a row layout start tag to the header of the current component to indicate the start of a new row layout.

[0088] S206, in the current row layout, append a column layout start tag to the header of the current component based on the size of the placeholder attribute value.

[0089] S207, add the component's placeholder attribute value to the placeholder counter.

[0090] S208, Display components on the initial page.

[0091] S209 appends a column layout closing label to the end of the current component.

[0092] S210, determine if the component is the last item. If it is, proceed to S211; otherwise, proceed to S213.

[0093] S211, append a line layout closing tag to the end of the current component.

[0094] S212 clears the value of the placeholder counter.

[0095] S213: Get the placeholder attribute value of the next component, add it to the value of the current placeholder counter, and determine whether the sum is greater than the row space value. If it is, execute S214; otherwise, continue to execute S202.

[0096] S214, appends a line layout closing tag to the end of the current component.

[0097] S215 clears the value of the placeholder counter to zero.

[0098] To further simplify the page generation process, this application provides a specific implementation of S140, which may include:

[0099] Receive the second input to the target component among N components;

[0100] In response to the second input, the property configuration window is displayed. The property configuration window includes the property information corresponding to the target component, where the property information includes placeholder property values.

[0101] Upon receiving a third input to the property configuration window, update the property information in response to the third input;

[0102] Based on the updated attribute information, update the grid layout of N components displayed on the initial page;

[0103] Generate the target page based on the updated grid layout.

[0104] In the above specific implementation, the second input can be: a user's click on the target component, a voice command input by the user, or a specific gesture input by the user. The specific gesture can be determined according to actual usage needs, and this application embodiment does not limit this. The specific gesture in this application embodiment can be any one of a single-click gesture, a swipe gesture, a drag gesture, a pressure-recognition gesture, a long-press gesture, an area-change gesture, a double-press gesture, or a double-tap gesture; the click input in this application embodiment can be a single-click input, a double-tap input, or any number of clicks, and can also be a long-press input or a short-press input.

[0105] In response to a second input, an attribute configuration window can be displayed. The attribute configuration window can include editable attribute information of the target component. The attribute information can include placeholder attribute values, as well as name attributes, appearance attributes, etc.

[0106] After displaying the property configuration window, it can receive third input from the user, which can be a change to the property information. In response to this third input, the property information can be updated, and based on the updated property information, the grid layout of the displayed N components on the initial page can be updated.

[0107] In this way, by customizing the attribute information of each component, the grid layout of N components in the initial page is updated based on the updated attribute information after the configuration is completed. This makes the configuration operation of components easier for users, eliminating the need to re-code or change the page layout in other ways, and simplifying the operations required to generate the page.

[0108] To enhance the personalization and flexibility of the target page, in some embodiments, the attribute information may include general attribute information and custom attribute information corresponding to the target component, and the general attribute information includes placeholder attribute values.

[0109] In this embodiment, general attribute information may include placeholder attribute values, name attributes, etc., while custom attribute information may include color attributes, font attributes, and appearance attributes, etc. The display position and effect of the component on the initial page can be changed by modifying these general and custom attribute information.

[0110] It is understandable that the custom attribute information corresponding to the target component can be set according to actual needs, that is, the custom attribute information corresponding to different components can be different.

[0111] By customizing attribute information, users can perform more custom operations on components, enhancing the personalization and flexibility of the target page.

[0112] To facilitate understanding of the page generation method provided in the above embodiments, the following describes the page generation method using two specific scenario embodiments. Figure 3 A schematic diagram illustrating a scenario embodiment of the above page generation method is shown.

[0113] like Figure 3 As shown, the component identifiers in the component identifier list are dragged and dropped onto the initial page. After the dragging is complete, the corresponding components are matched based on the selected component identifier. The display data of the initial page is deep copied and appended with the matched components to make the components appear on the initial page. When a component displayed on the initial page is clicked, its custom attribute information is determined. An attribute configuration window is displayed, showing the custom and general attribute information for the component. By configuring the attribute information in the attribute configuration window, the dynamic update display effect of the component on the initial page can be achieved.

[0114] Figure 4 A schematic diagram illustrating another scenario embodiment of the above-described page generation method is shown. For example... Figure 4As shown, the process iterates through the components on the initial page, adding layout tags to each component. For example, we can first obtain the placeholder attribute value of the component. If the placeholder attribute value equals 24, the component can be directly displayed on the initial page. If the placeholder attribute value is less than 24, we can obtain the placeholder counter value, which can be understood as the placeholder counter's capacity (i.e., the row space value is 24). If the placeholder counter value is 0, a row layout start tag is added to this row. The component is added to this row, and column layout start and close tags can be added to the component. We then determine if this component is the last component. If it is not the last component, and the sum of the placeholder attribute values ​​of this component and the next component is greater than 24, a row layout close tag is added to this row, the placeholder counter is cleared, and the process continues to iterate through the next component. If this component is the last component, a row layout close tag is added to this row.

[0115] Based on the page generation method provided in the above embodiments, this application also provides an embodiment of a page generation apparatus.

[0116] Figure 5 A schematic diagram of the structure of a page generation apparatus provided in another embodiment of this application is shown. For ease of explanation, only the parts related to the embodiments of this application are shown.

[0117] Reference Figure 5 The page generation device 500 includes:

[0118] The first receiving module 501 is used to receive a first input for N component identifiers in the component identifier list, where N is a positive integer, when the operation interface is displayed and the operation interface includes a component identifier list and an initial page.

[0119] The determination module 502 is used to determine, in response to the first input, N components that correspond one-to-one with N component identifiers, and the placeholder attribute value of each component;

[0120] Display module 503 is used to display a gridded layout of N components on the initial page based on the placeholder attribute value of each component.

[0121] Generation module 504 is used to generate the target page based on the gridded layout.

[0122] Therefore, the components corresponding to the component identifiers received from the first input can be directly added to the initial page, and the placeholder attribute values ​​of these components can be used as the layout basis to display their grid layout on the initial page for developers to view. The target page of the grid layout can be generated without developers having to manually adjust the code related to the page layout, which reduces the difficulty of page development and makes the page generation operation more convenient and efficient.

[0123] In some embodiments, to make the page generation operation more convenient and efficient, the display module 503 may include the following units:

[0124] The splicing unit is used to splice layout tags for each component based on the placeholder attribute value of each component and the row space value of the initial page. The layout tags include row layout tags and / or column layout tags, and the placeholder attribute value is less than or equal to the row space value.

[0125] The first display unit is used to display the gridded layout of N components on the initial page according to the layout tag corresponding to each component.

[0126] In some embodiments, to ensure that the splicing layout labels of each component are more accurate, thereby enabling the components to be displayed correctly in the gridded layout, the splicing unit may include the following sub-units:

[0127] Determine the sub-unit, which is used to determine whether the first value of the current placeholder counter is 0 when the placeholder attribute value of the i-th component is less than the row space value, where i is a positive integer and i is less than or equal to N;

[0128] The first splicing sub-unit is used to splice the start label of the header of the i-th component when the first value is 0.

[0129] The first summation subunit is used to obtain the second value of the placeholder counter after accumulation, based on the sum of the first value and the placeholder attribute value of the i-th component.

[0130] The second splicing sub-unit is used to splice a line layout closing tag at the end of the i-th component when i is less than N and the sum of the placeholder attribute value of the (i+1)-th component and the second value is greater than the line space value, or when i is equal to N.

[0131] The first clearing subunit is used to clear the second value;

[0132] The row layout labels include the row layout start label and the row layout close label.

[0133] In some embodiments, to ensure that the splicing layout labels of each component are more accurate, thereby enabling the components to be displayed correctly in the gridded layout, after obtaining the second value of the accumulated placeholder counter, the splicing unit may further include the following sub-units:

[0134] The third splicing sub-unit is used to lay out the start label of the header splicing column of the (i+1)th component and the closing label of the tail splicing column when i is less than N and the sum of the placeholder attribute value of the (i+1)th component and the second value is less than or equal to the row space value.

[0135] The second summation subunit is used to obtain the third value of the placeholder counter after accumulation, based on the sum of the second value and the placeholder attribute value of the (i+1)th component.

[0136] The fourth splicing sub-unit is used to splice a line layout closing tag at the end of the (i+1)th component when i+1 is less than N and the sum of the placeholder attribute value of the (i+2)th component and the third value is greater than the line space value, or when i+1 is equal to N.

[0137] The second clearing subunit is used to clear the third value;

[0138] The column layout labels include the column layout start label and the column layout close label.

[0139] In some embodiments, to further simplify the page generation operation, the generation module 504 may include the following units:

[0140] A receiving unit is used to receive a second input to a target component among N components;

[0141] The second display unit is used to display an attribute configuration window in response to the second input. The attribute configuration window includes attribute information corresponding to the target component, wherein the attribute information includes placeholder attribute values.

[0142] A response unit is used to update attribute information in response to a third input received on the attribute configuration window.

[0143] The update unit is used to update the grid layout of N components displayed on the initial page based on the updated attribute information.

[0144] The generation unit is used to generate the target page based on the updated raster layout.

[0145] It should be noted that the information interaction and execution process between the above-mentioned devices / units are based on the same concept as the method embodiments of this application, and are devices corresponding to the above-mentioned page generation method. All implementation methods in the above-mentioned method embodiments are applicable to the embodiments of this device. For details on its specific functions and the technical effects it brings, please refer to the method embodiment section, which will not be repeated here.

[0146] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is merely an example. In practical applications, the above functions can be assigned to different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiments can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit. Furthermore, the specific names of the functional units and modules are only for easy differentiation and are not intended to limit the scope of protection of this application. The specific working process of the units and modules in the above system can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0147] Figure 6 A schematic diagram of the hardware structure of an electronic device provided in yet another embodiment of this application is shown.

[0148] The device may include a processor 601 and a memory 602 storing programs or instructions.

[0149] When the processor 601 executes the program, it implements the steps in any of the above method embodiments.

[0150] For example, the program can be divided into one or more modules / units, one or more of which are stored in memory 602 and executed by processor 601 to complete this application. The one or more modules / units can be a series of program instruction segments capable of performing a specific function, which describe the execution process of the program in the device.

[0151] Specifically, the processor 601 may include a central processing unit (CPU), an application-specific integrated circuit (ASIC), or one or more integrated circuits that can be configured to implement the embodiments of this application.

[0152] Memory 602 may include mass storage for data or instructions. For example, and not limitingly, memory 602 may include a hard disk drive (HDD), floppy disk drive, flash memory, optical disk, magneto-optical disk, magnetic tape, or Universal Serial Bus (USB) drive, or a combination of two or more of these. Where appropriate, memory 602 may include removable or non-removable (or fixed) media. Where appropriate, memory 602 may be internal or external to the integrated gateway disaster recovery device. In a particular embodiment, memory 602 is non-volatile solid-state memory.

[0153] Memory may include read-only memory (ROM), random access memory (RAM), disk storage media devices, optical storage media devices, flash memory devices, and electrical, optical, or other physical / tangible memory storage devices. Therefore, typically, memory includes one or more tangible (non-transitory) machine-readable storage media (e.g., memory devices) encoded with software including computer-executable instructions, and when the software is executed (e.g., by one or more processors), it is operable to perform the operations described with reference to the methods according to one aspect of this disclosure.

[0154] The processor 601 implements any of the methods described above by reading and executing programs or instructions stored in the memory 602.

[0155] In one example, the electronic device may also include a communication interface 603 and a bus 604. The processor 601, memory 602, and communication interface 603 are connected via the bus 604 and communicate with each other.

[0156] The communication interface 603 is mainly used to realize communication between various modules, devices, units and / or equipment in the embodiments of this application.

[0157] Bus 604 includes hardware, software, or both, that couples components of an online data traffic metering device together. For example, and not limitingly, the bus may include an Accelerated Graphics Port (AGP) or other graphics bus, an Enhanced Industry Standard Architecture (EISA) bus, a Front Side Bus (FSB), HyperTransport (HT) interconnect, an Industry Standard Architecture (ISA) bus, an Infinite Bandwidth Interconnect, a Low Pin Count (LPC) bus, a memory bus, a Microchannel Architecture (MCA) bus, a Peripheral Component Interconnect (PCI) bus, a PCI-Express (PCI-X) bus, a Serial Advanced Technology Attachment (SATA) bus, a Video Electronics Standards Association Local (VLB) bus, or other suitable buses, or combinations of two or more of these. Where appropriate, bus 604 may include one or more buses. Although specific buses are described and illustrated in embodiments of this application, any suitable bus or interconnect is contemplated herein.

[0158] Furthermore, in conjunction with the methods in the above embodiments, this application embodiment can provide a machine-readable storage medium for implementation. This machine-readable storage medium stores a program or instructions; when executed by a processor, the program or instructions implement any of the methods in the above embodiments. This machine-readable storage medium can be read by a machine such as a computer.

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

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

[0161] This application provides a computer program product stored in a machine-readable storage medium. The program product is executed by at least one processor to implement the various processes of the above method embodiments and achieve the same technical effects. To avoid repetition, it will not be described again here.

[0162] It should be clarified that this application is not limited to the specific configurations and processes described above and shown in the figures. For the sake of brevity, detailed descriptions of known methods are omitted here. In the above embodiments, several specific steps are described and shown as examples. However, the method process of this application is not limited to the specific steps described and shown. Those skilled in the art can make various changes, modifications, and additions, or change the order of steps, after understanding the spirit of this application.

[0163] The functional modules shown in the above-described block diagram can be implemented as hardware, software, firmware, or a combination thereof. When implemented in hardware, they can be, for example, electronic circuits, application-specific integrated circuits (ASICs), appropriate firmware, plug-ins, function cards, etc. When implemented in software, the elements of this application are programs or code segments used to perform the required tasks. Programs or code segments can be stored on a machine-readable medium or transmitted over a transmission medium or communication link via data signals carried on a carrier wave. "Machine-readable medium" can include any medium capable of storing or transmitting information. Examples of machine-readable media include electronic circuits, semiconductor memory devices, ROM, flash memory, erasable ROM (EROM), floppy disks, CD-ROMs, optical disks, hard disks, fiber optic media, radio frequency (RF) links, etc. Code segments can be downloaded via computer grids such as the Internet, intranets, etc.

[0164] It should also be noted that the exemplary embodiments mentioned in this application describe methods or systems based on a series of steps or apparatus. However, this application is not limited to the order of the above steps; that is, the steps can be performed in the order mentioned in the embodiments, or in a different order, or several steps can be performed simultaneously.

[0165] The aspects of this disclosure have been described above with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and program products according to embodiments of this disclosure. It should be understood that each block in the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by a computer program or instructions. These programs or instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing apparatus to produce a machine such that these instructions, executable via the processor of the computer or other programmable data processing apparatus, enable the implementation of the functions / actions specified in one or more blocks of the flowchart illustrations and / or block diagrams. Such a processor can be, but is not limited to, a general-purpose processor, a special-purpose processor, a special application processor, or a field-programmable logic circuit. It is also understood that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can also be implemented by special-purpose hardware performing the specified functions or actions, or can be implemented by a combination of special-purpose hardware and computer instructions.

[0166] The above description is merely a specific implementation of this application. Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems, modules, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here. It should be understood that the protection scope of this application is not limited thereto. Any person skilled in the art can easily conceive of various equivalent modifications or substitutions within the technical scope disclosed in this application, and these modifications or substitutions should all be covered within the protection scope of this application.

Claims

1. A page generation method, characterized in that, include: When displaying the operation interface, which includes a component identifier list and an initial page, the system receives a first input for N component identifiers in the component identifier list, where N is a positive integer. In response to the first input, determine N components that correspond one-to-one with the N component identifiers, and the placeholder attribute value of each component; If the placeholder attribute value of the i-th component is less than the row space value, determine whether the first value of the current placeholder counter is 0, where i is a positive integer and i is less than or equal to N; When the first value is 0, the header splicing row layout start label of the i-th component is set; Based on the sum of the first value and the placeholder attribute value of the i-th component, the second value of the placeholder counter after accumulation is obtained; If i is less than N, and the sum of the placeholder attribute value of the (i+1)th component and the second value is less than or equal to the row space value, then the header splicing column of the (i+1)th component is laid out with a start label, and the tail splicing column of the (i+1)th component is laid out with a close label. Based on the sum of the second value and the placeholder attribute value of the (i+1)th component, the third value of the placeholder counter after accumulation is obtained; If i+1 is less than N, and the sum of the placeholder attribute value of the (i+2)th component and the third value is greater than the row space value, or if i+1 is equal to N, a row layout closing tag is spliced ​​to the end of the (i+1)th component. The third value is cleared to zero; The column layout label includes a column layout start label and a column layout close label; the layout label includes a row layout label and / or a column layout label, and the placeholder attribute value is less than or equal to the row space value. Based on the layout tag corresponding to each component, display the gridded layout of the N components in the initial page; The target page is generated based on the gridded layout.

2. The method according to claim 1, characterized in that, After obtaining the second accumulated value of the placeholder counter, the method further includes: If i is less than N and the sum of the placeholder attribute value of the (i+1)th component and the second value is greater than the row space value, or if i is equal to N, a row layout closing tag is spliced ​​to the end of the i-th component. The second value is cleared to zero; The row layout labels include the row layout start label and the row layout close label.

3. The method according to claim 1, characterized in that, The step of generating the target page based on the raster layout includes: Receive a second input to the target component among the N components; In response to the second input, an attribute configuration window is displayed, the attribute configuration window including attribute information corresponding to the target component, wherein the attribute information includes the placeholder attribute value; Upon receiving a third input to the attribute configuration window, the attribute information is updated in response to the third input; Based on the updated attribute information, update the grid layout of the N components in the initial page; Generate the target page based on the updated grid layout.

4. The method according to claim 1, characterized in that, The attribute information includes general attribute information and custom attribute information corresponding to the target component, wherein the general attribute information includes the placeholder attribute value.

5. A page generation device, characterized in that, The device includes: The first receiving module is configured to receive a first input for N component identifiers in the component identifier list, where N is a positive integer, when displaying an operation interface, the operation interface including a component identifier list and an initial page; The determination module is used to determine, in response to the first input, N components that correspond one-to-one with the N component identifiers, and the placeholder attribute value of each component; The determination submodule is used to determine whether the first value of the current placeholder counter is 0 when the placeholder attribute value of the i-th component is less than the row space value, where i is a positive integer and i is less than or equal to N; The first splicing subunit is used to splice the start label of the header of the i-th component when the first value is 0. The first summation subunit is used to obtain the second value of the placeholder counter after accumulation based on the sum of the first value and the placeholder attribute value of the i-th component. The third splicing subunit is used to lay out a start label for the header splicing column of the (i+1)th component and a closing label for the tail splicing column of the (i+1)th component when i is less than N and the sum of the placeholder attribute value of the (i+1)th component and the second value is less than or equal to the row space value. The second summation subunit is used to obtain the third value of the accumulated placeholder counter based on the sum of the second value and the placeholder attribute value of the (i+1)th component. The fourth splicing subunit is used to splice a line layout closing tag at the end of the (i+1)th component when i+1 is less than N and the sum of the placeholder attribute value of the (i+2)th component and the third value is greater than the line space value, or when i+1 is equal to N. The second clearing subunit clears the third value to zero. The column layout label includes a column layout start label and a column layout close label; the layout label includes a row layout label and / or a column layout label, and the placeholder attribute value is less than or equal to the row space value. The first display unit is used to display the gridded layout of the N components in the initial page according to the layout tag corresponding to each component; The generation module is used to generate the target page based on the gridded layout.

6. An electronic device, characterized in that, The device includes: a processor and a memory storing programs or instructions; When the processor executes the program or instructions, it implements the method as described in any one of claims 1-4.

7. A machine-readable storage medium, characterized in that, The machine-readable storage medium stores a program or instructions that, when executed by a processor, implement the method as described in any one of claims 1-4.

8. A computer program product, characterized in that, When the instructions in the computer program product are executed by the processor of the electronic device, the electronic device causes the electronic device to perform the method as described in any one of claims 1-4.

Images