CN110069257B - Interface processing method and device and terminal - Google Patents
Interface processing method and device and terminal Download PDFInfo
- Publication number
- CN110069257B CN110069257B CN201910343319.7A CN201910343319A CN110069257B CN 110069257 B CN110069257 B CN 110069257B CN 201910343319 A CN201910343319 A CN 201910343319A CN 110069257 B CN110069257 B CN 110069257B
- Authority
- CN
- China
- Prior art keywords
- end interface
- layout
- file
- layer
- position information
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Abstract
The embodiment of the invention provides an interface processing method, an interface processing device and a terminal, wherein the method comprises the following steps: acquiring a design file of a front-end interface, wherein the design file comprises a layer data structure and position information of elements in the front-end interface; acquiring control information required by the front-end interface layout according to the design file, wherein the control information comprises attributes of controls and relations among the controls; generating a general layout file of the front-end interface according to the control information; and converting the general layout file of the front-end interface into a target layout file of a target platform. The invention can improve the development efficiency of the front-end interface.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to an interface processing method, an interface processing apparatus, and a terminal.
Background
The front-end Interface may also be called a UI (User Interface), and generally needs to be exposed on various types of platforms, for example, the front-end Interface needs to be exposed on platforms such as a web (web page), H5 (hypertext markup language 5.0), Android (Android, an open source operating system), iOS (apple mobile operating system), and the like. Generally, a design draft needs to be delivered to developers after the front-end interface is designed, and the developers write codes respectively for various platforms to restore a design layout frame of the front-end interface, so that the front-end interface is displayed in the various platforms; however, the inventor finds that, when the display of the front-end interface on various platforms is to be realized, developers need to manually write codes for the various platforms respectively, the development efficiency is low, and the display effect of the front-end interface cannot be guaranteed.
Disclosure of Invention
The embodiment of the invention provides an interface processing method, an interface processing device and a terminal, which can improve the development efficiency of a front-end interface.
In one aspect, an embodiment of the present invention provides an interface processing method, including:
acquiring a design file of a front-end interface, wherein the design file comprises a layer data structure and position information of elements in the front-end interface;
acquiring control information required by the front-end interface layout according to the design file, wherein the control information comprises attributes of controls and relations among the controls;
generating a general layout file of the front-end interface according to the control information;
and converting the general layout file of the front-end interface into a target layout file of a target platform.
In another aspect, an embodiment of the present invention provides an interface processing apparatus, including:
the design file acquisition unit is used for acquiring a design file of a front-end interface, wherein the design file comprises a layer data structure and position information of elements in the front-end interface;
the control information acquisition unit is used for acquiring control information required by the front-end interface layout according to the design file, wherein the control information comprises the attribute of the control and the relationship between the controls;
the generating unit is used for generating a general layout file of the front-end interface according to the control information;
and the conversion unit is used for converting the general layout file of the front-end interface into a target layout file of a target platform.
In another aspect, an embodiment of the present invention provides a terminal, including:
a processor adapted to implement one or more instructions; and the number of the first and second groups,
a computer storage medium having stored thereon one or more instructions adapted to be loaded by the processor and to execute the interface processing method according to any of claims 1-8.
In the embodiment of the invention, a design file of a front-end interface is obtained, wherein the design file comprises a layer data structure and position information of elements in the front-end interface; acquiring control information required by the front-end interface layout according to the design file, wherein the control information comprises attributes of controls and relations among the controls; generating a general layout file of the front-end interface according to the control information; converting the general layout file of the front-end interface into a target layout file of a target platform; therefore, the universal layout file is automatically generated according to the design file, the universal layout file can be converted simply to obtain the layout files which are adaptive to various platforms, front-end interfaces can be displayed in the various platforms, the universality is high, developers do not need to manually write complicated codes, and the development efficiency is high.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.
Fig. 1a is a diagram illustrating a front-end interface in a platform 100 according to an embodiment of the present invention;
fig. 1b is a diagram illustrating an effect of a front-end interface in a platform 200 according to an embodiment of the present invention;
fig. 2 is a schematic flowchart of an interface processing method according to an embodiment of the present invention;
fig. 3 is a schematic diagram of a design draft of a front-end interface according to an embodiment of the present invention;
fig. 4 is a schematic flow chart of another interface processing method according to an embodiment of the present invention;
FIG. 5a is a diagram illustrating an effect of a layout template 400 in a target platform according to an embodiment of the present invention;
FIG. 5b is a diagram illustrating an effect of the reference layout template 500 in the target platform according to the embodiment of the present invention;
fig. 6a is a diagram illustrating an effect of a front-end interface provided in an embodiment of the present invention in a target platform;
fig. 6b is an effect diagram of a design draft of the front-end interface in fig. 6a according to an embodiment of the present invention;
fig. 7a to 7c are application scene diagrams of an interface processing method according to an embodiment of the present invention;
fig. 8 is a schematic structural diagram of an interface processing apparatus according to an embodiment of the present invention;
fig. 9 is a schematic structural diagram of a terminal according to an embodiment of the present invention.
Detailed Description
The technical solution in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention.
The front-end interface is an interface capable of being displayed in various platforms, is an integral design for man-machine interaction, operation logic and interface attractiveness of software, and is a medium for interaction and information exchange between a system and a user. Wherein, the platform refers to an environmental system suitable for front-end interface display, including but not limited to: web, H5, Android, iOS, etc. Front-end interfaces include, but are not limited to: a UI (User Interface) displayed by an APP (Application) on a mobile terminal; an operation interface displayed by an application on a PC (Personal Computer) side, and the like. The implementation of the front-end interface is generally divided into a design phase and a development phase, where: the designer designs the front-end interface by using graphics processing software such as sketch (software for drawing), Photoshop (image processing software), and the like, and generates a design file of the front-end interface. In the development stage: and the background developer writes codes according to the design files obtained in the design stage so as to display the front-end interface on various platforms. The process by which the design files for the front-end interface in the development phase are translated into front-end interfaces displayed on various platforms is also referred to as visual restoration. The visual restoration effect of the front-end interface is affected by the difference between different platforms or the difference between display screens of the same platform but different sizes. Taking the platform difference as an example, please refer to the display effect of the same front-end interface on different platforms shown in fig. 1 a-1 b; wherein, fig. 1a shows the display effect of the front interface on the platform 100, and fig. 1b shows the display effect of the same front plane on the platform 200; as can be seen from the comparison, the size of the front-end interface displayed on the platform 100 and the distance between the front-end interface and each edge of the display screen are both appropriate, and the presented visual effect is better; however, the front interface has a small display size on the platform 200 and a large distance from the right edge and the lower edge of the platform 200, and thus the visual effect is relatively poor. In order to enable the front-end interface to be capable of being adapted to different platforms or display screens with different sizes, in the development process, a background developer needs to compile codes of different front-end interfaces for different platforms according to a design file of the front-end interface and also needs to adjust a layout frame of the original design of the front-end interface according to the attribute of the platform or the size attribute of the display screen, so that the development workload is large, the development efficiency is low, and the visual reduction degree of the display effect of the front-end interface is lower than that of the original design.
Based on this, an embodiment of the present invention provides an interface processing method, where a design file of a front-end interface is obtained, where the design file includes a layer data structure and position information of an element in the front-end interface; acquiring control information required by the front-end interface layout according to the design file, wherein the control information comprises attributes of controls and relations among the controls; generating a general layout file of the front-end interface according to the control information; converting the general layout file of the front-end interface into a target layout file of a target platform; therefore, the universal layout file is automatically generated according to the design file, the universal layout file can be converted simply to obtain the layout files suitable for various platforms, the universality is high, the front-end interface can be restored and displayed in various platforms without manual complicated code compiling of developers, and the development efficiency is high. In addition, the embodiment of the invention can also mark the position of the element of the front-end interface in the design stage, so that the front-end interface has the self-adaptive characteristic, and the front-end interface can be self-adaptively adapted to display screens with various sizes when being restored and displayed on each platform, thereby achieving a better restoration display effect and improving the visual restoration degree of the front-end interface.
Based on the above description, the embodiment of the present invention provides an interface processing method, which may be completed in the design stage of a front-end interface, and the method may be executed by a terminal used by a designer, where the terminal may include but is not limited to: a PC, smart phone, tablet, etc. Referring to fig. 2, the method may include the following steps S201 to S204:
s201, obtaining a design file of a front-end interface, wherein the design file comprises a layer data structure and position information of elements in the front-end interface.
The designer can use image processing software such as Sketch, PhotoShop and the like to design the front-end interface. The front-end interface generally comprises a plurality of elements, the elements are basic units forming the front-end interface, and the style, the position and the arrangement mode of the elements in the front-end interface form the layout of the front-end interface. Elements herein may include, but are not limited to: text, images (e.g., icons, avatars), video, etc. Each element is typically composed of one or more layers, which are the basic units of the constituent element, where layers may include, but are not limited to: text, pictures, tables, etc. After the front-end interface is designed, a design file of the front-end interface can be generated by using image processing software, and the design file can include a layer data structure and position information of elements in the front-end interface, wherein the layer data structure of the elements can include, but is not limited to, the number of layers constituting the elements, the types of the layers, and the hierarchical relationship of the layers. The hierarchical relationship of the layers is used to indicate a dependency relationship between the layers, and specifically, the hierarchical relationship may indicate which layer is a parent layer, and which layer or layers are sub-layers that depend on the parent layer. Further, the layer data structure of an element may include a parent layer and a child layer subordinate to the parent layer. In another possible embodiment, the design file may further include resource files in the front-end interface, where the resource files may include, but are not limited to, pictures, links to pictures, text content, and the like, for example: if one of the image layers of a certain element is a picture image layer, the picture resource used by the picture image layer or the link of the picture resource can be stored in the resource file.
Taking fig. 3 as an example, fig. 3 shows a design draft of a front-end interface, in which the front-end interface includes an element 30, an element 31, and an element 32. Wherein element 30 is comprised of layer 301; element 31 is composed of layer 311 and layer 312; element 32 is comprised of layer 321 and layer 322. The layout of the front-end interface is formed by arranging the elements 30, 31, and 32 according to the positional information shown in fig. 3. The position information of the element can be represented by coordinates of a geometric center of the element in the front-end interface and a size of the element, for example: the position information of the element 30 may be represented as (+15, +15,30,50), where (+15, +10) represents the geometric center coordinates of the element 30, represents that the geometric center of the element 30 is 15px (pixel) away from the upper edge of the front-end interface, and represents that the geometric center is 15px away from the left edge of the front-end interface; (30, 50) is used to indicate that the element 30 is shaped as a rectangle with a height of 30px and a width of 50 px. It will be appreciated that the location information of an element may also be represented in other ways, such as: the position coordinates of the vertex of the element in the front-end interface and the size of the element can be used for representation; alternatively, the coordinate range of each point of the edge of the element in the front-end interface can be used for representation; etc., the present invention does not limit the manner in which the position information of the elements is expressed. The hierarchical relationship of the layers may be preset by a designer according to the display effect of the front-end interface, for example: the element 31 is composed of a layer 311 and a layer 312, where the layer 311 is set as a parent layer, and the layer 312 is a child layer subordinate to the layer 311.
S202, acquiring control information required by the front-end interface layout according to the design file, wherein the control information comprises attributes of controls and relations among the controls.
The design file comprises a layer data structure and position information of elements, and controls are needed when the layout of a front-end interface is reduced to various platforms for display; it is therefore desirable to convert the layers of elements in the design file into controls required for the layout. Here, the control means encapsulation of data and methods, and can help complete development of interface elements such as windows, text boxes, buttons, and pull-down menus. The controls required by the layout of the front-end interface can be formed by mapping elements in the front-end interface, wherein one element corresponds to one or more controls. Attributes such as the type and the appearance of the element, and the type and the appearance of each layer included by the element are mapped into attributes of the corresponding control; and correspondingly mapping the layer data structure of the element into the relationship between the controls, wherein the control information required by the front-end interface layout comprises the attribute of the control and the relationship between the controls. For example: the element 31 shown in fig. 3 is composed of a picture layer 311 and a text layer 312, where the layer 311 is a parent layer, and the layer 312 is a sub-picture layer subordinate to the layer 311; then, after the element 31 is mapped as a control, the control information includes the attribute of the control and the relationship between the controls, which specifically includes: element 31 corresponds to control 311 and control 312, control 311 is a picture control, and control 312 is a text control; control 311 is a parent control and control 312 is a child control subordinate to control 311.
In another possible implementation, the properties of the control may include, but are not limited to, the size of the control, the type of control (e.g., text, picture, etc.), the appearance of the control (e.g., fill, shape, shading, etc.). The attributes of the control can be stored and read in a table form, and the attributes of some of the controls are shown in table 1.
Table 1: control attribute table
In another possible implementation, the relationship between the controls may include a placement relationship between the controls and a control relationship between the controls, where the placement relationship between the controls may include, but is not limited to, horizontal centering, vertical centering, left centering, right centering, up centering, down centering, and middle centering; for example: if the arrangement relationship between the control 1 and the control 2 is lower, it indicates that the control 2 is located below the control 1 in the front-end interface. The control relationships between the controls may include, but are not limited to, linear relationships and hierarchical relationships; for example: the control 1 and the control 2 are in a vertical relationship, and the control 1 may be located below the control 2, or the control 1 may be located above the control 2; another example is: the control 1 and the control 2 are in a hierarchical relationship, and the control 1 may be a parent level of the control 2, or the control 1 may be a child level of the control 2.
And S203, generating a general layout file of the front-end interface according to the control information.
The generic layout file includes control information required for front-end interface layout, regardless of platform type. The generic layout file may include a Domain Specific Language (DSL) file, the DSL may be a computer Language designed for a Specific application Domain, and common DSLs include hypertext Markup Language (HTML), Shell Language, regular expression, Structured Query Language (SQL), and the like. It can be understood that the general layout file can be acquired and analyzed by different platforms, and the general layout file can be converted simply to obtain layout files suitable for various platforms.
And S204, converting the general layout file of the front-end interface into a target layout file of a target platform.
When the front-end interface needs to be restored and displayed in the target platform, the general layout file of the front-end interface can be simply converted to obtain the target layout file of the target platform, and the front-end interface can be restored and displayed by running the target layout file in the target platform environment. The target layout file refers to a file that can be executed in a target platform environment, and may include target layout code. In this step, since the control information required for the front-end interface layout is stored in the general layout file, the control information can be obtained by analyzing the general layout file; then, matching a specific layout model on the target platform according to the control information to obtain a simulated layout scheme; and generating a target layout file according to the target layout scheme. For example: when the target platform is an Android platform, if the arrangement of the controls 1 in the control information is in a linear horizontal mode, the specific layout model matched on the target platform is linear layout, and the arrangement of the controls in the layout model is in a horizontal arrangement, the controls 1 are arranged in the target platform in a linear horizontal mode, that is, the target layout file of the controls 1 comprises the controls 1 arranged in the target platform in a linear horizontal mode.
In the embodiment of the invention, a design file of a front-end interface is obtained, wherein the design file comprises a layer data structure and position information of elements in the front-end interface; acquiring control information required by the front-end interface layout according to the design file, wherein the control information comprises attributes of controls and relations among the controls; generating a general layout file of the front-end interface according to the control information; converting the general layout file of the front-end interface into a target layout file of a target platform; therefore, the universal layout file is automatically generated according to the design file, the universal layout file can be converted simply to obtain the layout files which are adaptive to various platforms, front-end interfaces can be displayed in the various platforms, the universality is high, developers do not need to manually write complicated codes, and the development efficiency is high.
The embodiment of the present invention provides another interface processing method, which may be completed in a design stage of a front-end interface, and the method may be executed by a terminal used by a designer, where the terminal may include but is not limited to: a PC, smart phone, tablet, etc. Referring to fig. 4, the method may include the following steps S401 to S406:
s401, obtaining a design file of a front-end interface, wherein the design file comprises a layer data structure and position information of elements in the front-end interface.
The designer can design the front-end interface by using image processing software such as Sketch, PhotoShop and the like, and after the design draft of the front-end interface is finished, the position of each element in the front-end interface in the design draft can be identified by using the image processing software, and the position is called as an absolute position. In order to enable elements in the front-end interface to have a better display effect on different platforms, in a design stage, a designer can also label the position of the element needing adaptive adjustment in the front-end interface, and the labeled content can include, but is not limited to, the geometric center coordinate of the element, the vertex coordinate of the element, the size of the element, the distance between the element and the edge of the front-end interface, and the like; for example: the position (i.e., the absolute position) of a certain element in the design draft is a first coordinate, and in order to enable the element to be adaptively adjusted for a platform or a screen, the coordinate of the element may be modified to a first coordinate range, which means that the element is located at any coordinate position in the first coordinate range when being laid out in the platform or the screen, so that the position of the element is changed from the absolute position in the design draft to a relative position obtained by labeling in the laying out process, and thus the element can be adaptively adjusted to adapt to different platforms in the laying out process. It is understood that, if no position labeling is performed on any element in the front-end interface, the position information of the element stored in the design file is the absolute position of the element in the front-end interface (i.e. the position of the element in the design draft), and if the element is position-labeled, the position information of the element stored in the design file is the labeled relative position (i.e. the position of the element in the front-end interface may be changed relative to the position of the element in the design draft).
In another possible embodiment, S401 may include the following steps:
s11, acquiring a design draft of a front-end interface, and acquiring a layer data structure of an element in the front-end interface;
s12, identifying first position information of the element from the design, the first position information describing an absolute position of the element in the front-end interface;
s13, generating a design file of the front-end interface according to the layer data structure of the element and the first position information.
Wherein the first position information is used to describe an absolute position of the element in the front-end interface (i.e. a position of the element in the design draft of the front-end interface), for example: the first location information of the element 30 in fig. 3 may be represented as (+15, +10,30,50), (+15, +10) represents the geometric center coordinates of the element 30, represents that the geometric center of the element 30 is 15px away from the upper edge of the front-end interface and 10px away from the left edge of the front-end interface; (30, 50) is used to indicate that the element 30 is shaped as a rectangle with a height of 30px and a width of 50 px.
In another possible embodiment, S401 may include the following steps:
s21, acquiring a design draft of a front-end interface, and acquiring a layer data structure of an element in the front-end interface;
s22, if the position marking operation of the element is detected, responding to the position marking operation, and acquiring second position information marked on the element, where the second position information is used to describe the relative position of the element in the front-end interface;
s23, generating a design file of the front-end interface according to the layer data structure of the element and the second position information.
Wherein the second position information is used to describe the relative position of the element in the front-end interface (i.e. the position coordinate range and the size range of the element that can be adaptively adjusted in the front-end interface), for example: the second position information of the element 30 in fig. 3 may be represented as (+10 to 20, +10 to 15,20 to 30,30 to 50), (+10 to 20, +10 to 15) represents the geometric center coordinate of the element 30, represents that the distance between the geometric center of the element 30 and the upper edge of the front-end interface ranges from 10 to 20px, and represents that the distance between the geometric center of the element 30 and the left edge of the front-end interface ranges from 10 to 15 px; (20-30, 30-50) is used for indicating that the height range of the element 30 is 20-30 px, and the width range is 30-50 px.
S402, simplifying the layer data structure of the elements.
Generally, the front-end interface includes a plurality of elements, each element may be composed of one or more layers, and then the layer data structure of the elements included in the design file may be complex, which is not convenient for further processing the design file. Then, before acquiring control information required by the front-end interface layout according to the design file, the layer data structure of the elements can be simplified; the purpose of compaction is to remove layers that are not useful for the layout of the elements.
In another possible implementation, the compaction process of step S402 may include the following steps: if the number of the child layers is zero, removing the parent layer from the layer data structure of the element, for example: if the element 2 only includes the layer 21, when the layer data structure of the element is simplified, the layer 21 is deleted from the layer data structure of the element 2.
In another possible implementation, the compaction process of step S402 may include the following steps: and if the sub-graph layer comprises a style layer used for describing the style attribute of the element, merging the style layer to the parent layer. Wherein the style attributes of the elements may include: shadow, background color, foreground color, etc.; the style layers do not affect the layout of the elements, so the style layers can be simplified and combined into the corresponding parent layer in the embodiment; for example: the element 3 comprises a layer 31, a layer 32 and a layer 33, wherein the layer 31 is a parent layer, and the layer 32 and the layer 33 are child layers; layer 32 is a style layer for describing style attributes of element 3, and then layer 31 and layer 32 may be combined into one layer 31'.
In another possible implementation, the compaction process of step S402 may include the following steps: if the number of the child image layers is 1, merging the child image layers and the father image layers; for example: element 4 comprises layer 41 and layer 42; wherein, the layer 41 is a parent layer, and the layer 42 is a sub-layer, the layer 41 only includes a single sub-layer 42, and the layer 41 and the layer 42 are merged into one layer 41'.
And S403, acquiring control information required by layout according to the position information of the elements and the simplified layer data structure of the elements.
In the layer data structure of the simplified elements, determining attributes of controls required by element layout according to attributes such as types and appearances of layers of the simplified elements, and determining relationships between the controls according to the relationships between layers of the simplified elements and position information of the elements; for example: the element 4 includes a layer 41 and a layer 42, where the types of the layer 41 and the layer 42 are picture layers, the layer 41 is a parent layer, the layer 42 is a sub-picture layer, and the layer 42 is located on the right side of the layer 41 in the horizontal direction; the simplified elements 4 'include layers 41', the layers 41 'are layers obtained by combining the layers 41 and 42, the simplified elements 4' are correspondingly mapped to simplified controls 4 ', and the arrangement manner of the simplified control information including the controls 4' is horizontal arrangement.
S404, generating a general layout file of the front-end interface according to the control information. Please refer to S203 in the embodiment of fig. 2 for a specific implementation of S404 in the embodiment of the present invention, which is not described herein.
S405, converting the general layout file of the front-end interface into a target layout file of a target platform.
In another possible embodiment, S405 may include the following steps:
s31, analyzing the general layout file to obtain the control information;
s32, performing simulated layout under the target platform environment according to the control information to obtain a simulated layout scheme;
s33, optimizing the simulated layout plan;
s34, generating a target layout file of the target platform according to the optimized simulated layout scheme, wherein the target layout file comprises target layout codes.
In steps s31-s34, for example: analyzing the general layout file to obtain control information including a control 1, a control 2, a control 3 and a control 4; the type of the control 1 is a picture, the hierarchy is a father control, and the controls are linearly and horizontally arranged in a front-end interface; according to the control information, when the target platform is an Android platform, since the arrangement of the controls 1 is in a linear horizontal mode, a specific layout model matched on the target platform is linear layout, and the arrangement of the controls in the layout model is in a horizontal arrangement, the controls 1 included in the simulated layout scheme are arranged in the target platform in a linear horizontal mode. The control 2, the control 3 and the control 4 can be respectively matched with a specific layout model on a target platform by adopting the same method, so that a simulated layout scheme is obtained. Further, the present embodiment may optimize the simulation layout scheme, and s33 may include the following steps:
s331, matching the layout template in the simulated layout scheme with a reference layout template;
and s332, if the matching is successful, replacing the layout template in the simulated layout scheme with the reference layout template.
After each control is respectively matched with a specific layout model, the layout model of each control can form a layout template, for example: a layout template 400 formed by layout models corresponding to the control 1, the control 2, the control 3, and the control 4 is shown in fig. 5a, and the layout template includes layout information of each control. Meanwhile, the target platform can pre-store reference layout templates corresponding to different layout models, and it can be understood that the reference layout templates are obtained by optimizing a large number of layout templates and are better layout templates; for example: according to the layout models corresponding to the control 1, the control 2, the control 3, and the control 4, a reference layout template 500 corresponding to the target platform may be obtained, as shown in fig. 5 b. The layout template 400 in the simulated layout scheme is matched with the reference layout template 500, and if the matching is successful (if the matching degree exceeds a preset threshold), the layout template 400 in the simulated layout scheme is replaced by the reference layout template 500 to obtain a better layout scheme.
After determining the optimized simulated layout solution, a target layout file of the target platform may be generated according to the optimized simulated layout solution, where the target layout file may include, but is not limited to, target layout code, resource files (e.g., pictures, videos, text contents, etc.).
S406, executing the target layout file under the target platform environment to display the front-end interface.
After generating the target layout file, the target layout file may be executed at the target platform to display a front-end interface in order to detect a visual reduction of the target layout file. In another possible implementation, when the front-end interface is displayed, the design draft of the front-end interface can be simultaneously displayed to check whether the layout of the front-end interface accurately restores the design draft; for example, fig. 6a is a diagram showing an effect of the front-end interface on the target platform, and fig. 6b is a diagram showing an effect of the design draft of the front-end interface in fig. 6a, which shows that the front-end interface more accurately restores the design draft and is adapted to the target platform, so that the display effect is better.
The embodiment of the invention provides an interface processing method, which comprises the steps of obtaining a design file of a front-end interface, wherein the design file comprises a layer data structure and position information of elements in the front-end interface; acquiring control information required by the front-end interface layout according to the design file, wherein the control information comprises attributes of controls and relations among the controls; generating a general layout file of the front-end interface according to the control information; converting the general layout file of the front-end interface into a target layout file of a target platform; therefore, the universal layout file is automatically generated according to the design file, the universal layout file can be converted simply to obtain the layout files suitable for various platforms, the universality is high, the front-end interface can be restored and displayed in various platforms without manual complicated code compiling of developers, and the development efficiency is high. In addition, the embodiment of the invention can also mark the position of the element of the front-end interface in the design stage, so that the front-end interface has the self-adaptive characteristic, and the front-end interface can be self-adaptively adapted to display screens with various sizes when being restored and displayed on each platform, thereby achieving a better restoration display effect and improving the visual restoration degree of the front-end interface.
Based on the above description of the embodiment of the interface processing method, an application scenario of the interface processing method is provided in the embodiment of the present invention, as shown in fig. 7a to 7 c. The application scenario may be operated on a terminal or a network device, and this embodiment takes the terminal as an example, and may include the following steps: 1) after completing the design draft 800 of the front-end interface, the designer can click the configuration button at the lower right corner of the screen to label the elements needing adaptive adjustment in the design draft, as shown in fig. 7 a; 2) after the designer clicks the configuration button, the screen will display the design draft 800 and the annotation list 900 of the front-end interface at the same time, as shown in fig. 7 b; wherein, the annotation list includes a plurality of annotation items, for example: element items, layer items, position information labeling items of elements, and the like; the designer can select the corresponding labeling item to perform labeling operation on the element, and can select the element to be labeled and the layer to be labeled; the content of the markup may include, but is not limited to, the distance of the element from the edges of the front-end interface, the size of the element, etc.; 3) after the marking of the designer is finished, a submission button can be clicked to submit the design draft of the front-end interface and the marking data to a background, wherein the marking data at least comprise second position information of the marked element; the background acquires control information required by layout according to the design file and generates a general layout file of the front-end interface according to the control information; 4) converting the general layout file into a target layout file of the target platform, and executing the target layout file in the target platform environment, i.e. displaying a target front-end interface on the target platform, as shown in fig. 7 c; the designer can design the walkthrough according to the display effect of the front-end interface of fig. 7c, and can continuously perfect the layout of the front-end interface according to the walkthrough result.
In the embodiment of the invention, a design file of a front-end interface is obtained, wherein the design file comprises a layer data structure and position information of elements in the front-end interface; acquiring control information required by the front-end interface layout according to the design file, wherein the control information comprises attributes of controls and relations among the controls; generating a general layout file of the front-end interface according to the control information; converting the general layout file of the front-end interface into a target layout file of a target platform; therefore, the universal layout file is automatically generated according to the design file, the universal layout file can be converted simply to obtain the layout files suitable for various platforms, the universality is high, the front-end interface can be restored and displayed in various platforms without manual complicated code compiling of developers, and the development efficiency is high. In addition, the embodiment of the invention can also mark the position of the element of the front-end interface in the design stage, so that the front-end interface has the self-adaptive characteristic, and the front-end interface can be self-adaptively adapted to display screens with various sizes when being restored and displayed on each platform, thereby achieving a better restoration display effect and improving the visual restoration degree of the front-end interface.
Based on the description of the embodiment of the interface processing method, the embodiment of the present invention provides an interface processing apparatus, which may be a computer program (including program codes) running in a terminal, and which may be applied in the interface processing methods shown in fig. 2 and 4 for executing the corresponding steps in the interface processing methods. Referring to fig. 8, the interface processing apparatus operates as follows:
a design file obtaining unit 801, configured to obtain a design file of a front-end interface, where the design file includes a layer data structure and position information of an element in the front-end interface;
a control information obtaining unit 802, configured to obtain, according to the design file, control information required by the front-end interface layout, where the control information includes attributes of controls and relationships between the controls;
a generating unit 803, configured to generate a general layout file of the front-end interface according to the control information;
a converting unit 804, configured to convert the general layout file of the front-end interface into a target layout file of a target platform.
In one embodiment, the location information of the element comprises first location information or second location information; the design file acquisition unit 801 is specifically configured to:
acquiring a design draft of a front-end interface, and acquiring a layer data structure of elements in the front-end interface;
identifying first position information of the element from the design draft, wherein the first position information is used for describing the absolute position of the element in the front-end interface;
if the position marking operation on the element is detected, responding to the position marking operation, and acquiring second position information marked on the element, wherein the second position information is used for describing the relative position of the element in the front-end interface;
and generating a design file of the front-end interface according to the layer data structure of the element and the first position information, or according to the layer data structure of the element and the second position information.
In an embodiment, the control information obtaining unit 802 is specifically configured to:
simplifying the layer data structure of the elements;
and acquiring control information required by the front-end interface layout according to the position information of the elements and the simplified layer data structure of the elements.
In one embodiment, the layer data structure of the element includes a parent layer and a child layer subordinate to the parent layer; the control information obtaining unit 802 is specifically configured to:
if the number of the child layers is zero, the parent layer is removed from the layer data structure of the element; alternatively, the first and second electrodes may be,
if the sub-graph layer comprises a style layer used for describing the style attribute of the element, merging the style layer to the parent layer; alternatively, the first and second electrodes may be,
and if the number of the child image layers is 1, merging the child image layers and the father image layer.
In one embodiment, the generic layout file comprises a domain-specific language file; the generating of the general layout file of the front-end interface according to the control information specifically includes: and storing the control information according to a data structure of the domain-specific language to obtain a general layout file of the front-end interface.
In an embodiment, the conversion unit 804 is specifically configured to:
analyzing the general layout file to obtain the control information;
performing simulated layout under the target platform environment according to the control information to obtain a simulated layout scheme;
optimizing the simulated layout scheme;
and generating a target layout file of the target platform according to the optimized simulated layout scheme, wherein the target layout file comprises a target layout code.
In an embodiment, the conversion unit 804 is specifically configured to:
matching a layout template in the simulated layout scheme with a reference layout template;
and if the matching is successful, replacing the layout template in the simulated layout scheme with the reference layout template.
In one embodiment, the interface processing device further operates the following units:
a display unit 805, configured to execute the target layout file in a target platform environment to display the front-end interface.
In the embodiment of the invention, a design file of a front-end interface is obtained, wherein the design file comprises a layer data structure and position information of elements in the front-end interface; acquiring control information required by the front-end interface layout according to the design file, wherein the control information comprises attributes of controls and relations among the controls; generating a general layout file of the front-end interface according to the control information; converting the general layout file of the front-end interface into a target layout file of a target platform; therefore, the universal layout file is automatically generated according to the design file, the universal layout file can be converted simply to obtain the layout files suitable for various platforms, the universality is high, the front-end interface can be restored and displayed in various platforms without manual complicated code compiling of developers, and the development efficiency is high. In addition, the embodiment of the invention can also mark the position of the element of the front-end interface in the design stage, so that the front-end interface has the self-adaptive characteristic, and the front-end interface can be self-adaptively adapted to display screens with various sizes when being restored and displayed on each platform, thereby achieving a better restoration display effect and improving the visual restoration degree of the front-end interface.
Based on the description of the interface processing method and the interface processing apparatus in the foregoing embodiments, the embodiments of the present invention further provide a terminal, which is used for performing interface processing, and in a specific implementation, the terminal described in the embodiments of the present invention includes, but is not limited to, other portable devices such as a mobile phone with a display, a laptop computer, or a tablet computer. It should also be understood that in some embodiments, the device is not a portable communication device, but is a desktop computer having a display. Referring to fig. 9, the internal structure of the terminal may include a processor, a user interface, a network interface, and a computer storage medium. The processor, the user interface, the network interface and the computer storage medium in the terminal may be connected by a bus or other means, and fig. 9 shown in the embodiment of the present invention is exemplified by being connected by a bus.
The user interface is a medium for implementing interaction and information exchange between a user and a terminal, and may specifically include a Display screen (Display) for output and a Keyboard (Keyboard) for input, and the like. However, it should be understood that the user interface may also include one or more other physical user interface devices such as a mouse and/or joystick. The processor (or CPU) is a computing core and a control core of the terminal, and is adapted to implement one or more instructions, and in particular, is adapted to load and execute the one or more instructions so as to implement a corresponding method flow or a corresponding function; for example: the CPU can be used for analyzing a power-on and power-off instruction sent to the terminal by a user and controlling the terminal to carry out power-on and power-off operation; the following steps are repeated: the CPU may transmit various types of interactive data between the internal structures of the terminal, and so on. A computer storage medium (Memory) is a Memory device in a terminal for storing programs and data. It is understood that the computer storage medium herein may include both the built-in storage device of the terminal and, of course, the extended storage device supported by the terminal. The computer storage medium provides a storage space that stores an operating system of the terminal. Also stored in the memory space are one or more instructions, which may be one or more computer programs (including program code), suitable for loading and execution by the processor. It should be noted that the computer storage medium may be a high-speed RAM (Random Access Memory) or a non-volatile Memory (non-volatile Memory), such as at least one disk Memory; and optionally at least one computer storage medium located remotely from the processor.
In the embodiment of the present invention, the processor loads and executes one or more instructions stored in the computer storage medium to implement the corresponding steps of the interface processing method flows shown in fig. 2 and 4; in particular implementations, one or more instructions in a computer storage medium are loaded by a processor and perform the following steps:
acquiring a design file of a front-end interface, wherein the design file comprises a layer data structure and position information of elements in the front-end interface;
acquiring control information required by the front-end interface layout according to the design file, wherein the control information comprises attributes of controls and relations among the controls;
generating a general layout file of the front-end interface according to the control information;
and converting the general layout file of the front-end interface into a target layout file of a target platform.
In one embodiment, the location information of the element comprises first location information or second location information; when one or more instructions in the computer storage medium are loaded by the processor and the step of obtaining the design file of the front-end interface is executed, the following steps are specifically executed:
acquiring a design draft of a front-end interface, and acquiring a layer data structure of elements in the front-end interface;
identifying first position information of the element from the design draft, wherein the first position information is used for describing the absolute position of the element in the front-end interface;
if the position marking operation on the element is detected, responding to the position marking operation, and acquiring second position information marked on the element, wherein the second position information is used for describing the relative position of the element in the front-end interface;
and generating a design file of the front-end interface according to the layer data structure of the element and the first position information, or according to the layer data structure of the element and the second position information.
In an embodiment, when one or more instructions in the computer storage medium are loaded by the processor and the step of obtaining the control information required by the front-end interface layout according to the design file is executed, the following steps are specifically executed:
simplifying the layer data structure of the elements;
and acquiring control information required by the front-end interface layout according to the position information of the elements and the simplified layer data structure of the elements.
In one embodiment, the layer data structure of the element includes a parent layer and a child layer subordinate to the parent layer; when one or more instructions in the computer storage medium are loaded by the processor and the step of simplifying the layer data structure of the element is executed, the following steps are specifically executed:
if the number of the child layers is zero, the parent layer is removed from the layer data structure of the element; alternatively, the first and second electrodes may be,
if the sub-graph layer comprises a style layer used for describing the style attribute of the element, merging the style layer to the parent layer; alternatively, the first and second electrodes may be,
and if the number of the child image layers is 1, merging the child image layers and the father image layer.
In one embodiment, the generic layout file comprises a domain-specific language file; the generating of the general layout file of the front-end interface according to the control information specifically includes: and storing the control information according to a data structure of the domain-specific language to obtain a general layout file of the front-end interface.
In an embodiment, when one or more instructions in the computer storage medium are loaded by the processor and the step of converting the general layout file of the front-end interface into the target layout file of the target platform is executed, the following steps are specifically executed:
analyzing the general layout file to obtain the control information;
performing simulated layout under the target platform environment according to the control information to obtain a simulated layout scheme;
optimizing the simulated layout scheme;
and generating a target layout file of the target platform according to the optimized simulated layout scheme, wherein the target layout file comprises a target layout code.
In one embodiment, when one or more instructions in the computer storage medium are loaded by the processor and the step of optimizing the simulated layout scheme is performed, the following steps are specifically performed:
matching a layout template in the simulated layout scheme with a reference layout template;
and if the matching is successful, replacing the layout template in the simulated layout scheme with the reference layout template.
In one embodiment, after the one or more instructions in the computer storage medium are loaded and executed by the processor to convert the common layout file of the front-end interface into the target layout file of the target platform, the following steps are further performed:
and executing the target layout file under the target platform environment to display the front-end interface.
In the embodiment of the invention, a design file of a front-end interface is obtained, wherein the design file comprises a layer data structure and position information of elements in the front-end interface; acquiring control information required by the front-end interface layout according to the design file, wherein the control information comprises attributes of controls and relations among the controls; generating a general layout file of the front-end interface according to the control information; converting the general layout file of the front-end interface into a target layout file of a target platform; therefore, the universal layout file is automatically generated according to the design file, the universal layout file can be converted simply to obtain the layout files suitable for various platforms, the universality is high, the front-end interface can be restored and displayed in various platforms without manual complicated code compiling of developers, and the development efficiency is high. In addition, the embodiment of the invention can also mark the position of the element of the front-end interface in the design stage, so that the front-end interface has the self-adaptive characteristic, and the front-end interface can be self-adaptively adapted to display screens with various sizes when being restored and displayed on each platform, thereby achieving a better restoration display effect and improving the visual restoration degree of the front-end interface.
The above disclosure is only for the purpose of illustrating the preferred embodiments of the present invention, and it is therefore to be understood that the invention is not limited by the scope of the appended claims.
Claims (8)
1. An interface processing method, comprising:
acquiring a design file of a front-end interface, wherein the design file comprises a layer data structure and position information of elements in the front-end interface; the layer data structure of the element comprises a father layer and a child layer subordinate to the father layer; the position information of the element includes first position information or second position information; the first position information is used for describing the absolute position of the element in the front-end interface; the second position information is used for describing the relative position of the element in the front-end interface; for any element in the front-end interface, if the position marking operation is not performed on the any element, the position information of the any element in the design file is first position information of the any element; if the position marking operation is executed on any element, the position information of any element in the design file is second position information of any element obtained after marking; displaying a configuration button to label the adaptively adjusted elements in the design draft after the design draft of the front-end interface is finished; after the configuration button is clicked, simultaneously displaying a design draft and a marking list of the front-end interface, wherein the marking list comprises a plurality of marking items, and executing the position marking operation on any element through the marking items;
simplifying the layer data structure of the elements;
acquiring control information required by the front-end interface layout according to the position information of the elements and the simplified layer data structure of the elements, wherein the control information comprises attributes of controls and relations among the controls;
generating a general layout file of the front-end interface according to the control information;
converting the general layout file of the front-end interface into a target layout file of a target platform;
wherein, the simplifying the layer data structure of the element includes:
if the number of the child layers is zero, the parent layer is removed from the layer data structure of the element; alternatively, the first and second electrodes may be,
if the sub-graph layer comprises a style layer used for describing the style attribute of the element, merging the style layer to the parent layer; alternatively, the first and second electrodes may be,
and if the number of the child image layers is 1, merging the child image layers and the father image layer.
2. The method of claim 1, wherein the obtaining a design file for a front-end interface comprises:
acquiring a design draft of a front-end interface, and acquiring a layer data structure of elements in the front-end interface;
identifying first location information for the element from the design draft;
if the position marking operation on the element is detected, responding to the position marking operation, and acquiring second position information marked on the element;
and generating a design file of the front-end interface according to the layer data structure of the element and the first position information, or according to the layer data structure of the element and the second position information.
3. The method of claim 1, wherein the generic layout file comprises a domain-specific language file; the generating of the general layout file of the front-end interface according to the control information specifically includes: and storing the control information according to a data structure of the domain-specific language to obtain a general layout file of the front-end interface.
4. The method of claim 1, wherein converting the generic layout file of the front-end interface to a target layout file of a target platform comprises:
analyzing the general layout file to obtain the control information;
performing simulated layout under the target platform environment according to the control information to obtain a simulated layout scheme;
matching a layout template in the simulated layout scheme with a reference layout template;
if the matching is successful, replacing a layout template in the simulated layout scheme with a reference layout template to obtain an optimized simulated layout scheme;
and generating a target layout file of the target platform according to the optimized simulated layout scheme, wherein the target layout file comprises a target layout code.
5. The method of claim 1, further comprising:
and executing the target layout file under the target platform environment to display the front-end interface.
6. An interface processing apparatus, comprising:
the design file acquisition unit is used for acquiring a design file of a front-end interface, wherein the design file comprises a layer data structure and position information of elements in the front-end interface; the layer data structure of the element comprises a father layer and a child layer subordinate to the father layer; the position information of the element includes first position information or second position information; the first position information is used for describing the absolute position of the element in the front-end interface; the second position information is used for describing the relative position of the element in the front-end interface; for any element in the front-end interface, if the position marking operation is not performed on the any element, the position information of the any element in the design file is first position information of the any element; if the position marking operation is executed on any element, the position information of any element in the design file is second position information of any element obtained after marking; displaying a configuration button to label the adaptively adjusted elements in the design draft after the design draft of the front-end interface is finished; after the configuration button is clicked, simultaneously displaying a design draft and a marking list of the front-end interface, wherein the marking list comprises a plurality of marking items, and executing the position marking operation on any element through the marking items;
the control information acquisition unit is used for simplifying the layer data structure of the elements; acquiring control information required by the front-end interface layout according to the position information of the elements and the simplified layer data structure of the elements, wherein the control information comprises attributes of controls and relations among the controls;
the generating unit is used for generating a general layout file of the front-end interface according to the control information;
the conversion unit is used for converting the general layout file of the front-end interface into a target layout file of a target platform;
wherein, the simplifying the layer data structure of the element includes:
if the number of the child layers is zero, the parent layer is removed from the layer data structure of the element; alternatively, the first and second electrodes may be,
if the sub-graph layer comprises a style layer used for describing the style attribute of the element, merging the style layer to the parent layer; alternatively, the first and second electrodes may be,
and if the number of the child image layers is 1, merging the child image layers and the father image layer.
7. A terminal, comprising:
a processor adapted to implement one or more instructions; and the number of the first and second groups,
computer storage medium storing one or more instructions adapted to be loaded by the processor and to perform the interface processing method according to any of claims 1-5.
8. A computer storage medium having stored thereon one or more instructions adapted to be loaded by a processor and to perform the interface processing method according to any one of claims 1 to 5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910343319.7A CN110069257B (en) | 2019-04-25 | 2019-04-25 | Interface processing method and device and terminal |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910343319.7A CN110069257B (en) | 2019-04-25 | 2019-04-25 | Interface processing method and device and terminal |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110069257A CN110069257A (en) | 2019-07-30 |
| CN110069257B true CN110069257B (en) | 2022-02-11 |
Family
ID=67369022
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910343319.7A Active CN110069257B (en) | 2019-04-25 | 2019-04-25 | Interface processing method and device and terminal |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110069257B (en) |
Families Citing this family (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110633121A (en) * | 2019-09-05 | 2019-12-31 | 北京无限光场科技有限公司 | Interface rendering method and device, terminal equipment and medium |
| CN110990010B (en) * | 2019-12-03 | 2023-08-25 | 锐捷网络股份有限公司 | Method and device for generating software interface code |
| CN111124409B (en) * | 2019-12-24 | 2023-06-06 | 深圳乐信软件技术有限公司 | Sketch-based service page generation method, device, equipment and storage medium |
| CN113961242B (en) * | 2020-07-20 | 2022-09-20 | 荣耀终端有限公司 | Method and device for converting layout file, electronic equipment and storage medium |
| CN112035772A (en) * | 2020-07-27 | 2020-12-04 | 长沙市到家悠享网络科技有限公司 | Page evaluation method, device and equipment |
| CN112083924A (en) * | 2020-08-28 | 2020-12-15 | 杭州数云信息技术有限公司 | Software design interface consistency improving method and tool |
| CN112150431A (en) * | 2020-09-21 | 2020-12-29 | 京东数字科技控股股份有限公司 | UI visual walkthrough method and device, storage medium and electronic device |
| CN112328234B (en) * | 2020-11-02 | 2023-12-08 | 广州博冠信息科技有限公司 | Image processing method and device |
| CN112596730A (en) * | 2020-12-30 | 2021-04-02 | 广州繁星互娱信息科技有限公司 | Layout adjustment method, device, terminal and storage medium |
| CN114296857A (en) * | 2021-12-29 | 2022-04-08 | 北京五八信息技术有限公司 | Interface adjusting method and device, electronic equipment and readable medium |
| CN116775174A (en) * | 2022-03-10 | 2023-09-19 | 北京字跳网络技术有限公司 | Processing method, device, equipment and medium based on user interface frame |
| CN114429101B (en) * | 2022-04-06 | 2022-06-17 | 北京燧原智能科技有限公司 | Drawing method, device, equipment and medium for AI processor architecture |
| CN115495079A (en) * | 2022-09-30 | 2022-12-20 | 南京芯传汇电子科技有限公司 | Dynamic Qt interface generation method and system based on PSD file format |
| CN116204184B (en) * | 2023-04-28 | 2023-07-14 | 深圳华龙讯达信息技术股份有限公司 | UI editing method, system and storage medium for improving page style adaptation |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107391134A (en) * | 2017-07-19 | 2017-11-24 | 北京勤哲软件技术有限责任公司 | A kind of General Mobile application interactive interface automatically generates and dynamic mapping method and apparatus |
| CN108228183A (en) * | 2018-01-12 | 2018-06-29 | 北京三快在线科技有限公司 | Front-end interface code generating method, device, electronic equipment and storage medium |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9116710B2 (en) * | 2012-12-22 | 2015-08-25 | Oracle International Corporation | Dynamic user interface authoring |
-
2019
- 2019-04-25 CN CN201910343319.7A patent/CN110069257B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107391134A (en) * | 2017-07-19 | 2017-11-24 | 北京勤哲软件技术有限责任公司 | A kind of General Mobile application interactive interface automatically generates and dynamic mapping method and apparatus |
| CN108228183A (en) * | 2018-01-12 | 2018-06-29 | 北京三快在线科技有限公司 | Front-end interface code generating method, device, electronic equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110069257A (en) | 2019-07-30 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110069257B (en) | Interface processing method and device and terminal | |
| US11650910B2 (en) | Automated testing method and apparatus, storage medium and electronic device | |
| US11790158B1 (en) | System and method for using a dynamic webpage editor | |
| CN102221993B (en) | The declarative definition of complex user interface Status Change | |
| US20210303108A1 (en) | System and method for on-screen graphical user interface encapsulation and reproduction | |
| US9507480B1 (en) | Interface optimization application | |
| US20120297341A1 (en) | Modified Operating Systems Allowing Mobile Devices To Accommodate IO Devices More Convenient Than Their Own Inherent IO Devices And Methods For Generating Such Systems | |
| US10691880B2 (en) | Ink in an electronic document | |
| US11221833B1 (en) | Automated object detection for user interface generation | |
| AU2019205973A1 (en) | Responsive resize | |
| US10410606B2 (en) | Rendering graphical assets on electronic devices | |
| CN110096275B (en) | Page processing method and device | |
| CN110968305A (en) | Applet visualization generation method, device, equipment and storage medium | |
| US20150074519A1 (en) | Method and apparatus of controlling page element | |
| CN111881662A (en) | Form generation method, device, processing equipment and storage medium | |
| CN111459501A (en) | SVG-based Web configuration picture storage and display system, method and medium | |
| CN110286971B (en) | Processing method and system, medium and computing device | |
| CN111324381B (en) | Development system, development method, development apparatus, computer device, and storage medium | |
| US10846061B2 (en) | Development environment for real-time application development | |
| US10761719B2 (en) | User interface code generation based on free-hand input | |
| CN112181396A (en) | RN code automatic generation system, method, equipment and medium | |
| WO2022152159A1 (en) | Adaptive ui constraint solving method and related device | |
| CN111782333B (en) | Interface display method and device in game, storage medium and terminal equipment | |
| CN110147260B (en) | Method, medium, apparatus and computing device for implementing scene transition animation | |
| US20240004675A1 (en) | Exhibiting method of desktop element and electronic device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |