Page layout file generation method and device, equipment and storage medium

By obtaining control design information in the user interface design file, determining the interface layout type and control layout information, and generating page layout files based on the mapping relationship, it solves the problems of low manual encoding efficiency and poor accuracy for developers, and achieves efficient and accurate page layout file generation.

CN119105758APending Publication Date: 2024-12-1058 CHANG LIFE (BEIJING) INFORMATION TECH CO LTD
View PDF 0 Cites 1 Cited by

Patent Information

Application Number
CN202411195152.1
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2024-08-28
Publication Date
2024-12-10

AI Technical Summary

Technical Problem

During the user interface development stage, developers are inefficient and prone to coding errors when writing page layout files manually, resulting in inaccurate generation of page layout files.

Method used

By obtaining control design information in the user interface design file, determining the interface layout type and control layout information, and automatically generating page layout files based on the mapping relationship between the control design information and the code language.

Benefits of technology

It improves the generation efficiency and accuracy of page layout files, reduces coding errors, can quickly respond to design changes, and improves the iterative update efficiency of the application.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN119105758A_ABST
    Figure CN119105758A_ABST
Patent Text Reader

Abstract

The embodiment of the invention provides a page layout file generation method and device, equipment and a storage medium, and the method comprises the steps: obtaining a user interface design file of an application program, the user interface design file comprising control design information of a plurality of target controls corresponding to a target user interface; according to the control design information of the multiple target controls, determining an interface layout type of the target user interface and control arrangement information of the multiple target controls; according to a data storage format of the control design information and a code language category adopted by the application program, determining a mapping relationship between fields and code expressions in the control design information; according to the control design information and the mapping relation, determining multiple pieces of target control code information corresponding to the multiple target controls; and according to the interface layout type, the control arrangement information and the multiple pieces of target control code information, generating a page layout file of the target user interface. Through the scheme, the generation efficiency and accuracy of the page layout file are improved.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a page layout file generation method, device, equipment and storage medium. Background Art

[0002] The construction of an application (Appl ication, referred to as APP) is inseparable from the construction of a user interface (User Interface, referred to as UI). Generally, the construction of a user interface includes a user interface design phase and a user interface development phase. In the user interface design phase, designers generate design files corresponding to the user interface through user interface design tools such as Sketch based on the user interface usage requirements. Among them, the design file contains information such as the type, location, style, etc. of multiple UI controls configured for the user interface. In the user interface development phase, developers manually write program codes for implementing the UI controls in the design file based on the design file to generate a page layout file. Thus, based on the page layout file, an interactive user interface can be constructed.

[0003] In actual applications, when developers manually code to generate page layout files, the efficiency is low and coding errors are prone to occur. For example, when writing the program code corresponding to the UI control, the location and style of the UI control are omitted or written incorrectly. Therefore, a method that can accurately and efficiently generate page layout files is urgently needed. Summary of the invention

[0004] Embodiments of the present invention provide a page layout file generation method, apparatus, device and storage medium, which are used to improve the generation efficiency and accuracy of page layout files.

[0005] In a first aspect, an embodiment of the present invention provides a method for generating a page layout file, the method comprising:

[0006] Acquire a user interface design file of the application, wherein the user interface design file includes control design information of multiple target controls corresponding to the target user interface;

[0007] Determining, according to the control design information of the multiple target controls, the interface layout type of the target user interface and the control arrangement information of the multiple target controls;

[0008] Determining a mapping relationship between fields in the control design information and code expressions according to a data storage format of the control design information and a code language category adopted by the application;

[0009] Determining, according to the control design information and the mapping relationship, multiple target control code information corresponding to the multiple target controls;

[0010] A page layout file of the target user interface is generated according to the interface layout type, the control arrangement information and the plurality of target control code information.

[0011] In a second aspect, an embodiment of the present invention provides a device for generating a page layout file, the device comprising:

[0012] An acquisition module, used to acquire a user interface design file of an application, wherein the user interface design file includes control design information of multiple target controls corresponding to a target user interface;

[0013] A determination module, configured to determine, according to the control design information of the multiple target controls, the interface layout type of the target user interface and the control arrangement information of the multiple target controls; determine, according to the data storage format of the control design information and the code language category adopted by the application, the mapping relationship between the fields in the control design information and the code expression; and determine, according to the control design information and the mapping relationship, multiple target control code information corresponding to the multiple target controls;

[0014] A generating module is used to generate a page layout file of the target user interface according to the interface layout type, the control arrangement information and the plurality of target control code information.

[0015] In a third aspect, an embodiment of the present invention provides an electronic device, comprising: a memory, a processor, and a communication interface; wherein the memory stores executable code, and when the executable code is executed by the processor, the processor can at least implement the page layout file generation method described in the first aspect.

[0016] In a fourth aspect, an embodiment of the present invention provides a non-temporary machine-readable storage medium having executable code stored thereon. When the executable code is executed by a processor of an electronic device, the processor can at least implement the page layout file generation method described in the first aspect.

[0017] In a fifth aspect, an embodiment of the present invention provides a computer program product, comprising: a computer program, when the computer program is executed by a processor of an electronic device, the processor can at least implement the page layout file generation method as described in the first aspect.

[0018] In an embodiment of the present invention, first, a user interface design file of an application is obtained, wherein the user interface design file includes control design information of multiple target controls corresponding to the target user interface, such as: control type, control position, control style, etc. of the target control. Afterwards, the interface layout type of the target user interface and the control arrangement information of the multiple target controls are determined based on the control design information of the multiple target controls. Then, based on the control design information and the code language categories respectively adopted by the application, the mapping relationship between the fields in the control design information and the code expression is determined; based on the control design information and the mapping relationship, the multiple target control code information corresponding to the multiple target controls is determined. Finally, based on the interface layout type, the control arrangement information and the multiple target control code information, a page layout file of the target user interface is generated.

[0019] In this solution, in the process of generating a page layout file corresponding to a target user interface based on a user interface design file of an application, based on the control design information of multiple target controls corresponding to the target user interface included in the user interface design file, the interface layout type of the target user interface and the control arrangement information of multiple target controls are respectively determined, and according to the mapping relationship between the fields in the pre-configured control design information and the code expression, multiple target control code information corresponding to the multiple target controls is automatically generated. Among them, the interface layout type and the control arrangement information constrain the arrangement of the multiple target control code information in the page layout file, so that according to the interface layout type, the control arrangement information and the multiple target control code information, the page layout file of the target user interface can be generated efficiently, accurately and automatically. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0021] Figure 1 A flow chart of a method for generating a page layout file provided by an embodiment of the present invention;

[0022] Figure 2 A flowchart of a method for determining control arrangement information provided by an embodiment of the present invention;

[0023] Figure 3 A schematic diagram of a target user interface provided by an embodiment of the present invention;

[0024] Figure 4 A flowchart of a method for determining an interface layout type provided by an embodiment of the present invention;

[0025] Figure 5 A flowchart of a method for determining target control code information provided by an embodiment of the present invention;

[0026] Figure 6 A schematic diagram of the structure of a device for generating a page layout file provided by an embodiment of the present invention;

[0027] Figure 7 For Figure 6 A schematic diagram of the structure of an electronic device corresponding to the page layout file generating device provided in the illustrated embodiment. DETAILED DESCRIPTION

[0028] In order to make the purpose, technical solution and advantages of the embodiments of the present invention clearer, the technical solution in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0029] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in the embodiments of the present invention are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data need to comply with the relevant laws, regulations and standards of relevant countries and regions, and provide corresponding operation entrances for users to choose to authorize or refuse.

[0030] Some embodiments of the present invention are described in detail below in conjunction with the accompanying drawings. In the case where there is no conflict between the embodiments, the following embodiments and the features in the embodiments can be combined with each other. In addition, the step sequence in the following method embodiments is only an example and not a strict limitation.

[0031] The page layout file generation method provided in the embodiment of the present invention can be executed by an electronic device, which can be a terminal device such as a PC, a laptop, a smart phone, etc., or a server. The server can be a physical server including an independent host, or a virtual server, or a cloud server or a server cluster.

[0032] Figure 1 A flow chart of a method for generating a page layout file provided by an embodiment of the present invention, such as Figure 1 As shown, the following steps may be included:

[0033] 101. Obtain a user interface design file of an application, where the user interface design file includes control design information of multiple target controls corresponding to a target user interface.

[0034] 102. Determine, according to the control design information of the multiple target controls, the interface layout type of the target user interface and the control arrangement information of the multiple target controls.

[0035] 103. Determine the mapping relationship between the fields in the control design information and the code expression according to the data storage format of the control design information and the code language category adopted by the application.

[0036] 104. Determine multiple target control code information corresponding to the multiple target controls according to the control design information and the mapping relationship.

[0037] 105. Generate a page layout file of the target user interface according to the interface layout type, control arrangement information and multiple target control code information.

[0038] The embodiment of the present invention aims to provide a method for automatically generating a page layout file of a user interface based on a user interface design file of an application. By automatically generating a page layout file, on the one hand, it is possible to effectively avoid code writing errors caused by negligence of developers and improve the accuracy of the page layout file; on the other hand, when the user interface design file changes, it is possible to quickly respond to the design change and generate a new page layout file, thereby improving the generation efficiency of the page layout file and further improving the iterative update efficiency of the application.

[0039] In the process of generating the page layout file, first, the user interface design file of the application is obtained. The user interface design file includes: design information corresponding to multiple user interfaces in the application; the design information corresponding to each user interface includes: control design information corresponding to multiple controls in the user interface; the control design information of each control includes: control type, control position, control style, etc. of the control.

[0040] For ease of description, the page layout file generation method provided by the embodiment of the present invention is described by taking a target user interface among multiple user interfaces as an example, wherein the target user interface is any one of the multiple user interfaces, and the multiple controls included in the target user interface are called multiple target controls.

[0041] In actual applications, the control design information in the user interface design file usually needs to be parsed to be obtained, and the user interface design files generated by different UI design tools use different data storage formats. In order to improve the efficiency of generating page layout files of the target user interface, optionally, a parsing tool that matches the data storage format of various user interface design files can be pre-configured to parse user interface design files of different data storage formats through the parsing tool. For example, for the user interface design file generated by the UI design tool Sketch, the JSON source file in the source file of the user interface design file can be parsed by the JSON (JavaScript Object Notation) parsing tool, so as to determine the control design information of multiple target controls corresponding to the target user interface based on the parsed JSON source data.

[0042] Then, according to the control positions in the control design information of the multiple target controls in the target user interface, the interface layout type of the target user interface and the control arrangement information of the multiple target controls are determined, wherein the control position of the target control includes the height information and width information corresponding to the target control in the target user interface.

[0043] Among them, the interface layout types include: scrollable layout and non-scrollable layout. In scrollable layout, when the page content exceeds the visible area of ​​the screen, the user can scroll to view more content; in non-scrollable layout, the content of the page is all displayed in a single view, and the user can see all content without scrolling. Control arrangement information refers to the control grouping results of multiple target controls and the target position information corresponding to each control group in the target user interface.

[0044] In an optional embodiment, the control arrangement information of the multiple target controls may be determined first according to the control design information of the multiple target controls; and then, the interface layout type of the target user interface may be determined according to the control arrangement information.

[0045] The following is a detailed description of the process of determining the control arrangement information and the interface layout type.

[0046] Figure 2 A flowchart of a method for determining control arrangement information provided by an embodiment of the present invention is shown in FIG. Figure 2 As shown, the following steps may be included:

[0047] 201. Divide the multiple target controls into multiple control groups according to the control positions in the control design information of the multiple target controls, and the target controls in the same control group are located in the same row or the same column in the target user interface.

[0048] 202. For any control group among the multiple control groups, determine target position information of any control group according to position information of a target control included in any control group.

[0049] 203. Determine control arrangement information of the target user interface according to target position information corresponding to the plurality of control groups.

[0050] In the embodiment of the present invention, the control position corresponding to the target control is used to describe the position of the target control in the target application interface, and the height information and width information contained in the control position can be represented by the position coordinates of the target control in the target application interface. Among them, the height information is used to describe the height range corresponding to the target control in the target user interface, that is, the vertical coordinate interval; the width information is used to describe the width range corresponding to the target control in the target user interface, that is, the horizontal coordinate interval.

[0051] For example, for a rectangular text box control, obtain the corresponding position coordinates A (x1, y1) and position coordinates B (x2, y2) of the two ends of the diagonal of the rectangular text box in the target application interface, where x1 is smaller than x2 and y1 is smaller than y2. According to the ordinates of the position coordinates A (x1, y1) and B (x2, y2), determine the height information indicating the rectangular text box control within the height range of y1 to y2 in the target user interface; according to the abscissas of the position coordinates A (x1, y1) and B (x2, y2), determine the width information indicating the rectangular text box control within the width range of x1 to x2 in the target user interface.

[0052] According to the height information respectively corresponding to the multiple target controls, the multiple target controls are divided into multiple first control groups, and the target controls contained in each first control group have the same or similar height information, that is, the target controls in the same first control group are located in the same row in the target user interface. According to the width information respectively corresponding to the multiple target controls, the multiple target controls are divided into multiple second control groups, and the target controls contained in each second control group have the same or similar width information, that is, the target controls in the same second control group are located in the same column in the target user interface. The multiple control groups obtained by dividing the multiple target controls include: multiple first control groups and multiple second control groups.

[0053] For ease of understanding, combined Figure 3 Let me give you an example to illustrate this. Figure 3 A schematic diagram of a target user interface provided by an embodiment of the present invention. Figure 3As shown, it is assumed that the target user interface includes multiple target controls: control 1, control 2, control 3 and control 4, control 1 and control 2 are located in the same row in the target user interface, control 3 and control 4 are located in the same row in the target user interface, control 1 and control 3 are located in the same column in the target user interface, and control 2 and control 4 are located in the same column in the target user interface. Based on this assumption, according to the height information corresponding to controls 1 to 4, the multiple first control groups corresponding to controls 1 to 4 are determined to be: first control group 1 {control 1, control 2} and first control group 2 {control 3, control 4}; according to the width information corresponding to controls 1 to 4, the multiple second control groups corresponding to controls 1 to 4 are determined to be: second control group 1 {control 1, control 3}, second control group 2 {control 2, control 4}.

[0054] Afterwards, for any first control group among the multiple first control groups (referred to as the target first control group), the first target position information of the target first control group is determined according to the position information of the target controls contained in the target first control group. The first target position information includes first target height information and first target width information. The first target height information is the height information of any target control among the target controls contained in the target first control group; the first target width information is the statistical result of the width information of all target controls contained in the target first control group, that is, the width range corresponding to the first target width information in the target user interface covers the width range corresponding to the width information of all target controls contained in the target first control group.

[0055] For any second control group among the multiple second control groups (referred to as the target second control group), the second target position information of the target second control group is determined according to the position information of the target controls contained in the target second control group. The second target position information includes second target height information and second target width information. The second target height information is the statistical result of the height information of all target controls contained in the target second control group, that is, the height range corresponding to the second target height information in the target user interface covers the height range corresponding to the height information of all target controls contained in the target second control group; the second target width information is the width information of any target control among the target controls contained in the target second control group.

[0056] Finally, the control arrangement information of the target user interface is determined according to the first target position information corresponding to the plurality of first control groups and the second target position information corresponding to the plurality of second control groups.

[0057] Figure 4 A flowchart of a method for determining an interface layout type provided by an embodiment of the present invention, such as Figure 4As shown, the following steps may be included:

[0058] 401. Determine page heights corresponding to the plurality of control groups in a target user interface according to height information in target position information corresponding to the plurality of control groups.

[0059] 402. Determine an interface layout type of the target user interface according to a page height and a screen height of a terminal device for running the application.

[0060] As an optional method of determining the page height, the height range covered by multiple first target height information can be determined based on multiple first target height information corresponding to multiple first control groups; the height corresponding to the height range covered by the multiple first target height information is used as the page height corresponding to the multiple control groups in the target user interface.

[0061] As another optional method of determining the page height, multiple height ranges covered by multiple second target height information can be determined based on multiple second target height information corresponding to multiple second control groups; and the maximum value of the multiple heights corresponding to the multiple height ranges is used as the page height corresponding to the multiple control groups in the target user interface.

[0062] Afterwards, if the page height is less than or equal to the screen height of the terminal device used to run the application, the interface layout type of the target user interface is determined to be a non-scrollable layout; if the page height is greater than the screen height of the terminal device used to run the application, the interface layout type of the target user interface is determined to be a scrollable layout.

[0063] In this embodiment, the method of first determining the control arrangement information and then determining the interface layout type based on the control arrangement information can effectively utilize the control arrangement information and improve the efficiency of determining the interface layout type.

[0064] In another optional embodiment, the interface layout type of the target user interface and the control arrangement information of the multiple target controls in the target user interface can be determined respectively according to the control positions in the control design information of the multiple target controls in the target user interface, that is, determining the interface layout type and determining the control arrangement information are performed in parallel.

[0065] The process of determining the control layout information can be found in Figure 2 The embodiment shown is not described in detail in this embodiment.

[0066] For the interface layout type, you can first filter out target controls that do not belong to the same row in the target user interface from multiple target controls according to the control positions in the control design information of multiple target controls in the target user interface (for example: Figure 31 and control 3, control 1 and control 4, control 2 and control 4, etc.); then, determine the height range covered by the height information in the position information of the filtered target control; then, use the height corresponding to the height range as the page height corresponding to the multiple controls grouped in the target user interface; finally, if the page height is less than or equal to the screen height of the terminal device used to run the application, determine that the interface layout type of the target user interface is a non-scrollable layout; if the page height is greater than the screen height of the terminal device used to run the application, determine that the interface layout type of the target user interface is a scrollable layout.

[0067] In this embodiment, by executing the control arrangement information and the interface layout type determination process in parallel, the interface layout type determination time can be reduced and the interface layout type determination efficiency can be improved.

[0068] The above describes the process of determining the two elements of the three elements used to generate a page layout file, namely, "the interface layout type of the target user interface" and "the control arrangement information of multiple target controls". Next, the process of determining another element used to generate a page layout file, namely, "the target control code information corresponding to the target control", is described.

[0069] It is understandable that the data storage format of the control design information may be different in the user interface design files generated by different UI design tools. For example, in the user interface design files generated by Sketch, the control design information is stored in JSON format; in the user interface design files generated by Adobe Photoshop, the control design information is stored in binary format, etc. For the same target user interface, the control design information in the user interface design files stored in different data storage formats contains different fields.

[0070] In addition, the code language categories used by the application are different, and the code expressions corresponding to the same type of controls are also different. For example, for the same rectangular text box control, the code expression corresponding to Android is different from the code expression corresponding to Ark TypeScript.

[0071] In order to improve the efficiency of determining multiple target control code information, in the implementation of the present invention, for each control design information in a data storage format, a mapping relationship between fields in the control design information and code expressions of multiple types of application codes is pre-established, so that the target control code information of the target control can be determined based on the pre-established mapping relationship and the control design information of the target control.

[0072] During the specific implementation process, the data storage format of the control design information of the target control and the code language category adopted by the application can be determined first; then, a mapping relationship that matches the data storage format of the control design information and the code language category adopted by the application can be determined from the pre-established multiple mapping relationships. For example, assuming that the pre-established multiple mapping relationships include: mapping relationship 1 between each field in the control design information corresponding to JSON and the Android code expression, mapping relationship 2 between each field in the control design information corresponding to JSON and the Ark TypeScr ipt code expression, if the data storage format of the control design information of the target control is JSON, and the code language category adopted by the application is ArkTypeScr ipt, then mapping relationship 2 is determined from the pre-established multiple mapping relationships for later determination of the target control code information of the target control.

[0073] The following takes any target control x among multiple target controls as an example to illustrate the process of determining the target control code information of the target control x based on the mapping relationship.

[0074] Figure 5 A flowchart of a method for determining target control code information provided by an embodiment of the present invention is shown in FIG. Figure 5 As shown, the following steps may be included:

[0075] 501. For any target control x among multiple target controls, determine a first target field that identifies a control type in control design information of the target control x.

[0076] 502. Determine the initialization control code information corresponding to the target control x according to the first target field and the mapping relationship.

[0077] The mapping relationship includes the control type field and the initialization code expression of the corresponding type of control. Through the first target field, the initialization code expression of the control corresponding to the control type identified by the first target field can be screened out from the mapping relationship, that is, the initialization control code information.

[0078] In the initialization control code information, the information related to the control style is a preset default value. The style information of the target control x can be added to the initialization control code information by using the field identifying the control style in the control design information to obtain the target control code information corresponding to the target control x.

[0079] 503. Determine a second target field that identifies a control style in the control design information of the target control x.

[0080] 504. Set the style information in the initialization control code information as the style information corresponding to the second target field to determine the target control code information corresponding to the target control x.

[0081] In this embodiment, by pre-establishing a mapping relationship between the fields in the control design information and the code expression, the target control code information corresponding to the target control can be automatically generated without human intervention, which can effectively reduce the code writing errors generated when manually writing the target control code.

[0082] After determining the three elements used to generate a page layout file, namely, "interface layout type of the target user interface", "control arrangement information of multiple target controls" and "target control code information corresponding to the target control", a page layout file of the target user interface is generated according to the interface layout type, control arrangement information and multiple target control code information.

[0083] As an optional page layout file generation method, a page layout template of the target user interface can be generated according to the interface layout type of the target user interface and the control arrangement information of multiple target controls. The interface layout type of the page layout template is the same as the interface layout type of the target user interface, and the page layout template constrains the positions of multiple control groups in the control arrangement information in the page layout template.

[0084] Afterwards, the target positions of the target control code information in the page layout template are determined according to the corresponding relationship between the target controls and the control arrangement information (that is, the corresponding relationship between the target controls and the control groups in the control arrangement information). In layman's terms, the target positions of the target control code information in the page layout template are determined according to the positions of the control groups in the page layout template and the positions of the target controls in the control groups.

[0085] Finally, the multiple target control code information is written into the page layout template according to the target positions respectively corresponding to the multiple target control code information in the page layout template, so as to generate a page layout file of the target user interface.

[0086] In summary, in the process of generating a page layout file corresponding to a target user interface based on a user interface design file of an application, the embodiment of the present invention determines the interface layout type of the target user interface and the control arrangement information of the multiple target controls respectively based on the control design information of the multiple target controls corresponding to the target user interface included in the user interface design file, and automatically generates multiple target control code information corresponding to the multiple target controls according to the mapping relationship between the fields in the pre-configured control design information and the code expression. Among them, the interface layout type and the control arrangement information constrain the arrangement of the multiple target control code information in the page layout file, so that the page layout file of the target user interface can be generated efficiently, accurately and automatically according to the interface layout type, the control arrangement information and the multiple target control code information.

[0087] The following will describe in detail the page layout file generation device of one or more embodiments of the present invention. Those skilled in the art will appreciate that these devices can be configured using commercially available hardware components through the steps taught in this solution.

[0088] Figure 6 A schematic diagram of a page layout file generating device provided by an embodiment of the present invention is shown in FIG. Figure 6 As shown, the device includes: an acquisition module 11, a determination module 12, and a generation module 13.

[0089] An acquisition module 11 is used to acquire a user interface design file of an application, wherein the user interface design file includes control design information of multiple target controls corresponding to a target user interface;

[0090] The determination module 12 is used to determine the interface layout type of the target user interface and the control arrangement information of the multiple target controls according to the control design information of the multiple target controls; determine the mapping relationship between the fields in the control design information and the code expression according to the data storage format of the control design information and the code language category adopted by the application; determine the multiple target control code information corresponding to the multiple target controls according to the control design information and the mapping relationship;

[0091] The generating module 13 is used to generate a page layout file of the target user interface according to the interface layout type, the control arrangement information and the plurality of target control code information.

[0092] Optionally, the determination module 12 is specifically configured to determine control arrangement information of the multiple target controls according to control design information of the multiple target controls; and determine an interface layout type of the target user interface according to the control arrangement information.

[0093] Optionally, the determination module 12 is further specifically used to divide the multiple target controls into multiple control groups according to the control positions in the control design information of the multiple target controls, and the target controls in the same control group are located in the same row or the same column in the target user interface; for any control group among the multiple control groups, determine the target position information of the any control group according to the position information of the target controls contained in the any control group; and determine the control arrangement information of the target user interface according to the target position information respectively corresponding to the multiple control groups.

[0094] Optionally, the determination module 12 is further specifically used to determine the page heights corresponding to the multiple control groups in the target user interface based on the height information in the target position information corresponding to the multiple control groups respectively; determine the interface layout type of the target user interface based on the page height and the screen height of the terminal device used to run the application; wherein the interface layout types include: scrollable layout and non-scrollable layout.

[0095] Optionally, the determination module 12 is further specifically used to determine, for any target control among the multiple target controls, a first target field that identifies a control type in the control design information of any target control; determine initialization control code information corresponding to any target control based on the first target field and the mapping relationship; determine a second target field that identifies a control style in the control design information of any target control; and set the style information in the initialization control code information to the style information corresponding to the second target field to determine the target control code information corresponding to any target control.

[0096] Optionally, the generation module 13 is specifically used to generate a page layout template of the target user interface according to the interface layout type and the control arrangement information; determine the target positions corresponding to the multiple target control code information in the page layout template according to the correspondence between the multiple target controls and the control arrangement information; and write the multiple target control code information into the page layout template according to the target positions to generate a page layout file of the target user interface.

[0097] Figure 6 The device shown can execute the steps introduced in the aforementioned embodiments. For detailed execution process and technical effects, please refer to the description in the aforementioned embodiments, which will not be repeated here.

[0098] In one possible design, the above Figure 6 The structure of the page layout file generating device shown can be implemented as an electronic device, such as Figure 7As shown, the electronic device may include: a memory 21, a processor 22, and a communication interface 23. The memory 21 stores executable codes, and when the executable codes are executed by the processor 22, the processor 22 can at least implement the page layout file generation method provided in the above embodiments.

[0099] In addition, an embodiment of the present invention provides a non-temporary machine-readable storage medium, on which executable code is stored. When the executable code is executed by a processor of an electronic device, the processor can at least implement the page layout file generation method provided in the aforementioned embodiment.

[0100] An embodiment of the present invention provides a computer program product, including: a computer program, when the computer program is executed by a processor of an electronic device, the processor is caused to execute the page layout file generation method provided in the above embodiment.

[0101] The device embodiments described above are merely illustrative, wherein the units described as separate components may or may not be physically separated. Some or all of the modules may be selected according to actual needs to achieve the purpose of the present embodiment. Those of ordinary skill in the art may understand and implement the present invention without creative effort.

[0102] Through the description of the above embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by adding a necessary general hardware platform, and of course can also be implemented by combining hardware and software. Based on such an understanding, the above technical solution is essentially or the part that contributes to the prior art can be embodied in the form of a computer product, and the present invention can be in the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program codes.

[0103] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A method for generating a page layout file, characterized in that: include: Acquire a user interface design file of the application, wherein the user interface design file includes control design information of multiple target controls corresponding to the target user interface; Determining, according to the control design information of the multiple target controls, the interface layout type of the target user interface and the control arrangement information of the multiple target controls; Determining a mapping relationship between fields in the control design information and code expressions according to a data storage format of the control design information and a code language category used by the application; Determining, according to the control design information and the mapping relationship, multiple target control code information corresponding to the multiple target controls; A page layout file of the target user interface is generated according to the interface layout type, the control arrangement information and the plurality of target control code information.

2. The method according to claim 1, characterized in that: The determining, according to the control design information of the multiple target controls, the interface layout type of the target user interface and the control arrangement information of the multiple target controls comprises: Determining control arrangement information of the multiple target controls according to control design information of the multiple target controls; The interface layout type of the target user interface is determined according to the control arrangement information.

3. The method according to claim 2, characterized in that The determining, according to the control design information of the multiple target controls, the control arrangement information of the multiple target controls comprises: According to the control positions in the control design information of the multiple target controls, the multiple target controls are divided into multiple control groups, and the target controls in the same control group are located in the same row or the same column in the target user interface; For any control group among the multiple control groups, determining target position information of the any control group according to position information of a target control included in the any control group; The control arrangement information of the target user interface is determined according to the target position information respectively corresponding to the multiple control groups.

4. The method according to claim 3, characterized in that The determining the interface layout type of the target user interface according to the control arrangement information includes: Determining page heights corresponding to the multiple control groups in the target user interface according to the height information in the target position information respectively corresponding to the multiple control groups; The interface layout type of the target user interface is determined according to the page height and the screen height of the terminal device used to run the application; wherein the interface layout type includes: a scrollable layout and a non-scrollable layout.

5. The method according to claim 1, characterized in that The determining, according to the control design information and the mapping relationship, a plurality of target control code information corresponding to the plurality of target controls comprises: For any target control among the multiple target controls, determine a first target field identifying a control type in the control design information of the any target control; Determine, according to the first target field and the mapping relationship, the initialization control code information corresponding to any one of the target controls; Determine a second target field identifying a control style in the control design information of any target control; The style information in the initialization control code information is set as the style information corresponding to the second target field to determine the target control code information corresponding to any target control.

6. The method according to any one of claims 1 to 5, characterized in that The step of generating a page layout file of the target user interface according to the interface layout type, the control arrangement information and the plurality of target control code information comprises: Generate a page layout template of the target user interface according to the interface layout type and the control arrangement information; Determining target positions corresponding to the code information of the multiple target controls in the page layout template according to the corresponding relationship between the multiple target controls and the control arrangement information; According to the target position, the plurality of target control code information is written into the page layout template to generate a page layout file of the target user interface.

7. A page layout file generating device, characterized in that: include: An acquisition module, used to acquire a user interface design file of an application, wherein the user interface design file includes control design information of multiple target controls corresponding to a target user interface; A determination module, configured to determine, according to the control design information of the multiple target controls, the interface layout type of the target user interface and the control arrangement information of the multiple target controls; and to determine, according to the data storage format of the control design information and the code language category adopted by the application, a mapping relationship between fields in the control design information and code expressions; Determining, according to the control design information and the mapping relationship, multiple target control code information corresponding to the multiple target controls; A generating module is used to generate a page layout file of the target user interface according to the interface layout type, the control arrangement information and the plurality of target control code information.

8. An electronic device, characterized in that: include: A memory, a processor, and a communication interface; wherein the memory stores executable code, and when the executable code is executed by the processor, the processor executes the page layout file generation method as described in any one of claims 1 to 6.

9. A non-transitory machine-readable storage medium, characterized in that: The non-transitory machine-readable storage medium stores executable code, and when the executable code is executed by a processor of an electronic device, the processor is caused to execute the page layout file generation method according to any one of claims 1 to 6.

10. A computer program product, characterized in that include: A computer program, when executed by a processor of an electronic device, causes the processor to execute the page layout file generation method according to any one of claims 1 to 6.

Citation Information

Cited By

  • Page layout file generation method and device, equipment and storage medium

    CN119902762A