CN110333862A - UI page code generation method, device and server - Google Patents
UI page code generation method, device and server Download PDFInfo
- Publication number
- CN110333862A CN110333862A CN201910522313.6A CN201910522313A CN110333862A CN 110333862 A CN110333862 A CN 110333862A CN 201910522313 A CN201910522313 A CN 201910522313A CN 110333862 A CN110333862 A CN 110333862A
- Authority
- CN
- China
- Prior art keywords
- design drawing
- code
- program
- page
- location 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 32
- 238000013461 design Methods 0.000 claims abstract description 145
- 230000006870 function Effects 0.000 claims description 38
- 238000004590 computer program Methods 0.000 claims description 9
- 238000010586 diagram Methods 0.000 description 5
- 230000008569 process Effects 0.000 description 5
- 238000012545 processing Methods 0.000 description 5
- 230000008901 benefit Effects 0.000 description 3
- 238000004891 communication Methods 0.000 description 3
- 238000011161 development Methods 0.000 description 3
- 238000011160 research Methods 0.000 description 3
- 238000010295 mobile communication Methods 0.000 description 2
- 238000012360 testing method Methods 0.000 description 2
- 241000208340 Araliaceae Species 0.000 description 1
- 235000005035 Panax pseudoginseng ssp. pseudoginseng Nutrition 0.000 description 1
- 235000003140 Panax quinquefolius Nutrition 0.000 description 1
- 230000009471 action Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 235000008434 ginseng Nutrition 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 239000000463 material Substances 0.000 description 1
- 230000001105 regulatory effect Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
The invention discloses a kind of UI page code generation methods, this method comprises: the UI page code for receiving user generates request and the UI page code generates after requesting corresponding UI design drawing, obtain the location information and call parameter information of UI element and each UI element included in the UI design drawing, then according to preset UI element -- source code contingency table calls original source code program corresponding with UI element each in the UI design drawing, again by the program code of the original source code program of all UI elements UI design drawing in conjunction with described in the corresponding location information of each UI element and call parameter information combination producing.The program code that UI page code generation method, device, server and computer readable storage medium provided by the invention can intelligently generate the corresponding UI page according to UI Pages Design demand improves efficiency so as to avoid the work of overprogram.
Description
Technical field
The present invention relates to the page code generation technique field UI more particularly to a kind of UI page code generation method, device,
Server and computer readable storage medium.
Background technique
Design for UI (User Interface, the user interface) page generally all includes identical element, such as eventually
The pages or HTML at different levels (Hyper Text Markup Language, hypertext markup language) page of APP is applied at end,
Most of all includes identical element and layout.Such as front end page generally all includes: window, text, picture and button group
The elements such as part.Currently, research staff is when carrying out Pages Design, it will usually to different page progress written in code, and these
Code is exactly the same or similar element on these corresponding different pages.Therefore, in the process of development for same type
Action and the execution repeatedly that carries out can consume many unnecessary manpower and material resources.Certainly, also have currently on the market
Partial code Auto-Generation Tool, however, existing Code Generator can not automatic identification page elements and layout, need
It manually carries out filling in page elements and layout, then recalls corresponding code.Therefore not smart enough, efficiency is also still relatively low
Under.
Summary of the invention
In view of this, the present invention proposes a kind of user UI page code generation method, device, computer equipment and computer
Readable storage medium storing program for executing can generate request in the UI page code for receiving user and the UI page code generates request and corresponds to
UI design drawing after, obtain in the UI design drawing location information and necessity of included UI element and each UI element
Parameter information, then according to preset UI element -- source code contingency table calls corresponding with each UI element in the UI design drawing
Original source code program, then by the original source code program of all UI elements combine the corresponding location information of each UI element
With the program code of UI design drawing described in call parameter information combination producing.It therefore, can be according to UI Pages Design demand intelligence
The program code that ground generates the corresponding UI page improves efficiency so as to avoid the work of overprogram.
Firstly, to achieve the above object, the present invention provides a kind of UI page code generation method, which comprises
The UI page code for receiving user generates request and the UI page code generates and requests corresponding UI design drawing；
Obtain the location information and call parameter information of UI element and each UI element included in the UI design drawing；According to
Preset UI element -- source code contingency table calls original source code program corresponding with UI element each in the UI design drawing；
The original source code program of all UI elements is combined into the corresponding location information of each UI element and call parameter information, combination
Generate the program code of the UI design drawing.
Optionally, the UI design drawing is that UI element template is carried out having on position by preset image editing tools
The mode editor of sequence splicing forms, wherein the UI element configures corresponding call parameter by UI element template and forms.
Optionally, described " to obtain the location information of UI element and each UI element included in the UI design drawing
With call parameter information " step includes: to be carried out the UI design drawing by the corresponding resolution unit of described image edit tool
Parsing, parses all UI elements for including in the UI design drawing, obtains each UI element in the position of the UI design drawing
Information and the corresponding call parameter of each UI element.
Optionally, described " to combine the corresponding position of each UI element to believe the original source code program of all UI elements
The step of breath and call parameter information, program code of UI design drawing described in combination producing " includes: respectively by each UI element pair
It answers call parameter to be updated to the source code program of corresponding UI element, obtains the program code of each UI element；Call preset hold
The program code of each UI element and corresponding location information are updated to the logical function by row logical function template
In template, the program code of the UI design drawing is obtained；Wherein, the logical function template be default UI element code and
The logical function of the location information of UI element, UI element for being shown to by the logical function according to location information
The corresponding position of UI design drawing.
In addition, to achieve the above object, the present invention also provides a kind of UI page code generating means, described device includes:
Receiving module, the UI page code for receiving user generates request and the UI page code generates request pair
The UI design drawing answered；Module is obtained, for obtaining the position of UI element and each UI element included in the UI design drawing
Confidence breath and call parameter information；Calling module, for according to preset UI element -- source code contingency table calls and the UI
The corresponding original source code program of each UI element in design drawing；Generation module, for by the initial source generation of all UI elements
Coded program combines the corresponding location information of each UI element and call parameter information, the program generation of UI design drawing described in combination producing
Code.
Optionally, the UI design drawing is that UI element template is carried out having on position by preset image editing tools
The mode editor of sequence splicing forms, wherein the UI element is configured in corresponding call parameter forms by UI element template.
Optionally, the acquisition module is also used to the UI through the corresponding resolution unit of described image edit tool
Design drawing is parsed, and all UI elements for including in the UI design drawing are parsed, and is obtained each UI element and is set in the UI
Count the location information and the corresponding call parameter of each UI element of figure.
Optionally, the generation module is also used to: each UI element being corresponded to call parameter respectively and is updated to corresponding UI member
The source code program of element, obtains the program code of each UI element；Preset logical function template is called, by each UI member
The program code and corresponding location information of element are updated in the logical function template, obtain the UI design drawing
Program code；Wherein, the logical function template is that the execution of the location information of default UI element code and UI element is patrolled
Function is collected, and the logical function is used to UI element is shown to according to location information the corresponding position of UI design drawing.
Further, the present invention also proposes that a kind of server, the server include memory, processor, the storage
The computer program that can be run on the processor is stored on device, it is real when the computer program is executed by the processor
Now such as the step of above-mentioned UI page code generation method.
Further, to achieve the above object, the present invention also provides a kind of computer readable storage medium, the computers
Readable storage medium storing program for executing is stored with computer program, and the computer program can be executed by least one processor so that it is described extremely
A few processor is executed such as the step of above-mentioned UI page code generation method.
Compared to the prior art, UI page code generation method, device, computer equipment and calculating proposed by the invention
Machine readable storage medium storing program for executing can generate request in the UI page code for receiving user and the UI page code generates request pair
After the UI design drawing answered, obtain in the UI design drawing included UI element and each UI element location information and must
Parameter information is wanted, then according to preset UI element -- source code contingency table calls and each UI element pair in the UI design drawing
The original source code program answered, then combine the corresponding position of each UI element to believe the original source code program of all UI elements
The program code of UI design drawing described in breath and call parameter information combination producing.It therefore, can be according to UI Pages Design demand intelligence
The program code that energy ground generates the corresponding UI page improves efficiency so as to avoid the work of overprogram.
Detailed description of the invention
Fig. 1 is the schematic diagram of the optional hardware structure of server one of the present invention；
Fig. 2 is the program module schematic diagram of one embodiment of UI page code generating means of the present invention；
Fig. 3 is the flow diagram of UI page code generation method first embodiment of the present invention.
Appended drawing reference:
The object of the invention is realized, the embodiments will be further described with reference to the accompanying drawings for functional characteristics and advantage.
Specific embodiment
In order to make the objectives, technical solutions, and advantages of the present invention clearer, with reference to the accompanying drawings and embodiments, right
The present invention is further elaborated.It should be appreciated that described herein, specific examples are only used to explain the present invention, not
For limiting the present invention.Based on the embodiments of the present invention, those of ordinary skill in the art are not before making creative work
Every other embodiment obtained is put, shall fall within the protection scope of the present invention.
It should be noted that the description for being related to " first ", " second " etc. in the present invention is used for description purposes only, and cannot
It is interpreted as its relative importance of indication or suggestion or implicitly indicates the quantity of indicated technical characteristic.Define as a result, " the
One ", the feature of " second " can explicitly or implicitly include at least one of the features.In addition, the skill between each embodiment
Art scheme can be combined with each other, but must be based on can be realized by those of ordinary skill in the art, when technical solution
Will be understood that the combination of this technical solution is not present in conjunction with there is conflicting or cannot achieve when, also not the present invention claims
Protection scope within.
As shown in fig.1, being the schematic diagram of the optional hardware structure of server 1 one of the present invention.
In the present embodiment, the server 1 may include, but be not limited only to, and can be in communication with each other connection by system bus and deposit
Reservoir 11, processor 12, network interface 13.
The server 1 connects network (Fig. 1 is not marked) by network interface 13, by network connection to other systems or
Person's terminal device such as mobile terminal, the end PC, development system and test macro etc..The network can be intranet
(Intranet), internet (Internet), global system for mobile communications (Global System of Mobile
Communication, GSM), wideband code division multiple access (Wideband Code Division Multiple Access,
WCDMA), the wirelessly or non-wirelessly network such as 4G network, 5G network, bluetooth (Bluetooth), Wi-Fi, speech path network.
It should be pointed out that Fig. 1 illustrates only the server 1 with component 11-13, it should be understood that simultaneously should not
Realistic to apply all components shown, the implementation that can be substituted is more or less component.
Wherein, the memory 11 includes at least a type of readable storage medium storing program for executing, and the readable storage medium storing program for executing includes
Flash memory, hard disk, multimedia card, card-type memory (for example, SD or DX memory etc.), random access storage device (RAM), it is static with
Machine accesses memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable
Read memory (PROM), magnetic storage, disk, CD etc..In some embodiments, the memory 11 can be the clothes
The internal storage unit of business device 1, such as the hard disk or memory of the server 1.In further embodiments, the memory 11
It can be the External memory equipment of the server 1, such as the plug-in type hard disk that the server 1 is equipped with, intelligent memory card
(Smart Media Card, SMC), secure digital (Secure Digital, SD) card, flash card (Flash Card) etc..When
So, the memory 11 can also both including the server 1 internal storage unit and also including its External memory equipment.This reality
It applies in example, the memory 11 is installed on the operating system and types of applications software of the server 1 commonly used in storage, such as
The program code etc. of UI page code generating means 200.In addition, the memory 11 can be also used for temporarily storing it is defeated
Out or the Various types of data that will export.
The processor 12 can be in some embodiments central processing unit (Central Processing Unit,
CPU), controller, microcontroller, microprocessor or other data processing chips.The processor 12 is commonly used in the control clothes
The overall operation of business device 1, such as execute data interaction or the relevant control of communication and processing etc..In the present embodiment, the place
Reason device 12 is used to run the program code stored in the memory 11 or processing data, such as runs the UI page generation
Code generating means 200 etc..
The network interface 13 may include radio network interface or wired network interface, which is commonly used in
Between the server 1 and other systems or terminal device such as mobile terminal, the end PC, development system and test macro etc.
Establish communication connection.
In the present embodiment, when installing in the server 1 and run UI page code generating means 200, as the UI
When page code generating means 200 are run, enough connects and generate request and the UI page generation in the UI page code for receiving user
After code generates the corresponding UI design drawing of request, UI element and each UI element included in the UI design drawing are obtained
Location information and call parameter information, then according to preset UI element -- in source code contingency table calling and the UI design drawing
The corresponding original source code program of each UI element, then the original source code program of all UI elements is combined into each UI element
The program code of UI design drawing described in corresponding location information and call parameter information combination producing.It therefore, can be according to UI pages
The program code that face design requirement intelligently generates the corresponding UI page improves effect so as to avoid the work of overprogram
Rate.
So far, oneself is through describing the application environment of each embodiment of the present invention and the hardware configuration and function of relevant device in detail
Energy.In the following, above-mentioned application environment and relevant device will be based on, each embodiment of the invention is proposed.
Firstly, the present invention proposes a kind of UI page code generating means 200.
As shown in fig.2, being the Program modual graph of 200 1 embodiment of UI page code generating means of the present invention.
In the present embodiment, the UI page code generating means 200 include a series of meter being stored on memory 11
UI pages of various embodiments of the present invention may be implemented when the computer program instructions are executed by processor 12 in calculation machine program instruction
Face code building function.In some embodiments, the specific operation realized based on the computer program instructions each section, UI
Page code generating means 200 can be divided into one or more modules.For example, the UI page code generates in Fig. 2
Device 200 can be divided into receiving module 201, obtain module 202, calling module 203 and generation module 204.Wherein:
The receiving module 201, the UI page code for receiving user generates request and the UI page code is raw
At the corresponding UI design drawing of request.
Specifically, in R&D process, when there is the task of UI Pages Design, research staff is then according to the UI Pages Design
Demand, Xiang Suoshu server 1 inputs corresponding UI page code and generates request.The receiving module 201 of the server 1
The UI page code for then receiving user generates request and the UI page code generates and requests corresponding UI design drawing.It is described to connect
Module 201 is received after receiving the UI page code and generating request, the UI page code is obtained and generates the demand in requesting
Information.The demand information includes the peace of terminal type applied by the UI design drawing and the UI page of the UI page
Platform type, the terminal type are embodied in the system classification for running the terminal of the UI page, the Platform Type performance
The classifications such as carrier such as APP or browser frames for the operation UI page.
In the present embodiment, the UI design drawing is that UI element template is carried out position by preset image editing tools
On the mode editor orderly spliced form, wherein the UI element configures corresponding call parameter by UI element template and forms.
The UI design drawing is preset fixed format picture, and it is default that the server 1 needs the user to pass through
Image editing tools editor form.Described image edit tool, by the way that each UI element combinations for constituting picture are formed, and
Each UI element sets corresponding UI element template, and the process that user establishes UI element includes selection UI element mould
Plate, and configure corresponding call parameter；Then further according to the location information of the UI element of the UI page in described image editor
The position of each UI element is regulated in tool, to form UI design drawing.Scheme specifically, user defines according to UI page-size
As the frame size of editing interface, then, then successively UI element template is believed according to the position of the UI element layout in the UI page
Breath is added within the scope of window frame, and sets the call parameter of each UI element, to generate UI design drawing.Wherein, often
The UI element of a classification all includes corresponding call parameter, such as: window elements include window size, the window's position；Text member
Element includes text, font, font size and color；Background element includes picture.Picture size, Pictures location；And other
UI element has corresponding call parameter.It therefore, then include the UI page by the UI design drawing of described image edit tool editor
Element and the corresponding call parameter information of element.That is, each UI element is respectively as an object, then
All UI element combinations together, i.e., are combined each object；Certainly, each object includes the necessary ginseng of itself
Number, characteristic value of these parameters as object.
The acquisition module 202, for obtaining UI element and each UI element included in the UI design drawing
Location information and call parameter information.
Specifically, the acquisition module 202 is designed the UI by the corresponding resolution unit of described image edit tool
Figure is parsed, and all UI elements for including in the UI design drawing are parsed, and obtains each UI element in the UI design drawing
Location information and the corresponding call parameter of each UI element.
In the present embodiment, the receiving module 201 generates request and the UI in the UI page code for receiving user
After page code generates the corresponding UI design drawing of request, the acquisition module 202 then calls preset picture recognition unit pair
UI design drawing in code building request identified, to obtain UI element included in the UI design drawing, each
The location information of the corresponding call parameter information of UI element and UI element in the UI design drawing.Wherein, the picture recognition
Unit is arranged to identify the window elements in the UI design drawing established by picture editor's tool, text member
Element, Background element, the corresponding call parameter information of the UI element；And the UI element is in the position of the UI design drawing
Information.In the present embodiment, the picture recognition unit is the corresponding resolution unit of described image edit tool.The picture is known
Other unit first identifies the UI element in the UI design drawing；Then by the way that the UI design drawing is carried out standard coordinate, thus
Confirm location information of each UI element in the UI design drawing, for example, regard the UI design drawing as two-dimensional surface,
The location information of the so described UI element can be indicated with coordinate information of the UI element in the UI design drawing.
The calling module 203, for according to preset UI element -- source code contingency table calls and the UI design drawing
In the corresponding original source code program of each UI element.
The generation module 204, for the original source code program of all UI elements is corresponding in conjunction with each UI element
Location information and call parameter information, the program code of UI design drawing described in combination producing.
In the present embodiment, the server 1 is in advance by the UI elements correlation of each classification to corresponding initial source journey
Sequence code forms UI element -- source code contingency table.Then when the acquisition module 202 is identified by the picture recognition unit
Out after all UI elements of the UI design drawing, the calling module 203 then according to the UI element identified and is preset
UI element -- source code incidence relation table inquires the corresponding original source code of each UI element identified, it is then described
Each UI element is corresponded to the source code program that call parameter is updated to corresponding UI element respectively by generation module 204, is obtained each
The program code of UI element；Then recall preset logical function template, by the program code of each UI element and
Corresponding location information is updated in the logical function template, obtains the program code of the UI design drawing.Wherein, institute
The logical function for the location information that logical function template is default UI element code and UI element is stated, the execution is patrolled
Collect the corresponding position that function is used to UI element is shown to according to location information UI design drawing.
Specifically, the generation module 204 will be described according to location information of the UI element in the UI design drawing
The corresponding program code of UI element is arranged in an orderly manner according to preset positional relationship function, so that composition corresponds to the UI
The program code of design drawing.In the present embodiment, the server 1 be provided with a logical function for pair
All UI elements of building UI design drawing are arranged, and the logical function obtains each UI element in the UI page
Dimension information or location information in the call parameter of location information and each UI element close to generate an arrangement
Therefore system forms quoting the corresponding whole program code of each UI element respectively according to Rankine-Hugoniot relations and corresponds to the UI
The program code of design drawing.
Certainly, since the calling module 203 is according to the UI element -- the UI member that source code contingency table is inquired and called
Element original source program code be include initial call parameter UI element first program code, therefore, if the UI design
When figure does not input the call parameter of UI element in editor, then the acquisition module 202 passes through the picture recognition unit piece
When edit tool identifies the UI design drawing, the corresponding call parameter of UI element will not be recognized, therefore, according to
The UI element -- source code contingency table is inquired and the original source program code of UI element that calls then is considered as end of the UI element
Source program code.
It will be recalled from above that the server 1 can receive user UI page code generate request and it is UI pages described
After face code building requests corresponding UI design drawing, UI element and each UI member included in the UI design drawing are obtained
The location information and call parameter information of element, then according to preset UI element -- source code contingency table is called to be designed with the UI
The corresponding original source code program of each UI element in figure, then the original source code program of all UI elements is combined into each UI
The program code of UI design drawing described in the corresponding location information of element and call parameter information combination producing.It therefore, can basis
UI Pages Design demand intelligently generates the program code of the corresponding UI page, so as to avoid the work of overprogram, improves
Efficiency.
In addition, the present invention also proposes that a kind of UI page code generation method, the method are applied to server.
As shown in fig.3, being the flow diagram of UI page code generation method first embodiment of the present invention.In this implementation
In example, the execution sequence of the step in flow chart shown in Fig. 3 be can change according to different requirements, and certain steps can save
Slightly.
Step S500, the UI page code for receiving user generates request and UI page code generation request is corresponding
UI design drawing.
Specifically, in R&D process, when there is the task of UI Pages Design, research staff is then according to the UI Pages Design
Demand, Xiang Suoshu server inputs corresponding UI page code and generates request.The server then receives the UI page of user
Code building request and the UI page code, which generate, requests corresponding UI design drawing.The server is receiving the UI
After page code generates request, obtains the UI page code and generate the demand information in requesting.The demand information includes institute
Terminal type and Platform Type applied by the UI design drawing and the UI page of the UI page are stated, the terminal type is specific
Show as running the system classification of the terminal of the UI page, the Platform Type shows as running the carrier of the UI page such as
The classifications such as APP or browser frames.
In the present embodiment, the UI design drawing is that UI element template is carried out position by preset image editing tools
On the mode editor orderly spliced form, wherein the UI element configures corresponding call parameter by UI element template and forms.
The UI design drawing is preset fixed format picture, and it is preset that the server needs the user to pass through
Image editing tools editor forms.Described image edit tool, by the way that each UI element combinations for constituting picture are formed, and institute
It states each UI element and sets corresponding UI element template, the process that user establishes UI element includes selection UI element template,
And configure corresponding call parameter；Then further according to the location information of the UI element of the UI page in described image edit tool
In regulate the position of each UI element, to form UI design drawing.It is compiled specifically, user defines image according to UI page-size
The frame size of editing interface then, then successively adds UI element template according to the location information of the UI element layout in the UI page
It is added within the scope of window frame, and sets the call parameter of each UI element, to generate UI design drawing.Wherein, each class
Other UI element all includes corresponding call parameter, such as: window elements include window size, the window's position；Text element packet
Include text, font, font size and color；Background element includes picture.Picture size, Pictures location；And other UI member
Element has corresponding call parameter.It therefore, then include the member of the UI page by the UI design drawing of described image edit tool editor
Element and the corresponding call parameter information of element.That is, then each UI element owns respectively as an object
UI element combinations together, i.e., each object is combined；Certainly, each object includes the call parameter of itself,
Characteristic value of these parameters as object.
Step S502, obtain in the UI design drawing included UI element and each UI element location information and
Call parameter information.
Specifically, the server is carried out the UI design drawing by the corresponding resolution unit of described image edit tool
Parsing, parses all UI elements for including in the UI design drawing, obtains each UI element in the position of the UI design drawing
Information and the corresponding call parameter of each UI element.
In the present embodiment, when the UI page code that the server receives user generates request and the UI page generation
Code, which generates, requests corresponding UI design drawing then to call preset picture recognition unit to the UI in code building request later
Design drawing identified, to obtain UI element included in the UI design drawing, the corresponding call parameter letter of each UI element
Breath and UI element the UI design drawing location information.Wherein, the picture recognition unit is arranged to identify
The window elements in UI design drawing established by picture editor's tool, text element, Background element, the UI element
Corresponding call parameter information；And the UI element is in the location information of the UI design drawing.In the present embodiment, the figure
Piece recognition unit is the corresponding resolution unit of described image edit tool.The picture recognition unit first identifies the UI design drawing
In UI element；Then by the way that the UI design drawing is carried out standard coordinate, to confirm each UI element described
Location information in UI design drawing, for example, the UI design drawing is regarded as two-dimensional surface, then the location information of the UI element
It can be indicated with coordinate information of the UI element in the UI design drawing.
Step S504, according to preset UI element -- source code contingency table calls and each UI element in the UI design drawing
Corresponding original source code program.
Step S506, by the original source code program of all UI elements combine the corresponding location information of each UI element and
Call parameter information, the program code of UI design drawing described in combination producing.
In the present embodiment, the server is in advance by the UI elements correlation of each classification to corresponding original source program
Code forms UI element -- source code contingency table.Then it is identified when the server by the picture recognition unit described
After all UI elements of UI design drawing, then further according to the UI element and preset UI element -- source code identified
Incidence relation table inquires the corresponding original source code of each UI element identified, and then the server respectively will be each
UI element corresponds to the source code program that call parameter is updated to corresponding UI element, obtains the program code of each UI element；Then
Preset logical function template is recalled, the program code of each UI element and corresponding location information are updated to institute
It states in logical function template, obtains the program code of the UI design drawing.Wherein, the logical function template is scarce
The logical function of the location information of UI element code and UI element is saved, the logical function is used for according to location information
UI element is shown to the corresponding position of UI design drawing.
Specifically, the server is according to location information of the UI element in the UI design drawing by the UI element
Corresponding program code is arranged in an orderly manner according to preset positional relationship function, so that composition corresponds to the UI design drawing
Program code.In the present embodiment, the server is provided with a logical function for building UI
All UI elements of design drawing are arranged, and the logical function obtains each UI element and believes in the position of the UI page
Dimension information or location information in the call parameter of breath and each UI element, so that a Rankine-Hugoniot relations is generated, in root
The corresponding whole program code of each UI element is quoted respectively according to Rankine-Hugoniot relations therefore to be formed and correspond to the UI design drawing
Program code.
Certainly, since the server is according to the UI element -- source code contingency table inquire and the UI element that calls just
Stock program code be include initial call parameter UI element first program code, therefore, if the UI design drawing is being compiled
When not inputting the call parameter of UI element when collecting, then the server is by the picture recognition unit to the UI design drawing
When being identified, the corresponding call parameter of UI element will not be recognized, therefore, according to the UI element -- source code association
Table is inquired and the original source program code of UI element that calls then is considered as the whole source program code of the UI element.
The UI page code generation method that the present embodiment is proposed can generate request in the UI page code for receiving user
And the UI page code generates after requesting corresponding UI design drawing, obtains UI element included in the UI design drawing
And the location information and call parameter information of each UI element, then according to preset UI element -- source code contingency table calls
Original source code program corresponding with UI element each in the UI design drawing, then by the original source code journey of all UI elements
The program code of sequence UI design drawing in conjunction with described in the corresponding location information of each UI element and call parameter information combination producing.Cause
This, can intelligently generate the program code of the corresponding UI page, according to UI Pages Design demand so as to avoid overprogram
Work, improve efficiency.
The serial number of the above embodiments of the invention is only for description, does not represent the advantages or disadvantages of the embodiments.
Through the above description of the embodiments, those skilled in the art can be understood that above-described embodiment side
Method can be realized by means of software and necessary general hardware platform, naturally it is also possible to by hardware, but in many cases
The former is more preferably embodiment.Based on this understanding, technical solution of the present invention substantially in other words does the prior art
The part contributed out can be embodied in the form of software products, which is stored in a storage medium
In (such as ROM/RAM, magnetic disk, CD), including some instructions are used so that a terminal device (can be mobile phone, computer, clothes
Business device, air conditioner or the network equipment etc.) execute method described in each embodiment of the present invention.
The above is only a preferred embodiment of the present invention, is not intended to limit the scope of the invention, all to utilize this hair
Equivalent structure or equivalent flow shift made by bright specification and accompanying drawing content is applied directly or indirectly in other relevant skills
Art field, is included within the scope of the present invention.
Claims (10)
1. a kind of UI page code generation method, which is characterized in that the method includes the steps:
The UI page code for receiving user generates request and the UI page code generates and requests corresponding UI design drawing；
Obtain the location information and call parameter information of UI element and each UI element included in the UI design drawing；
According to preset UI element -- source code contingency table calls initial source corresponding with UI element each in the UI design drawing
Program in machine code；
The original source code program of all UI elements is combined into the corresponding location information of each UI element and call parameter information,
The program code of UI design drawing described in combination producing.
2. UI page code generation method as described in claim 1, which is characterized in that the UI design drawing is by preset
Image editing tools by UI element template carry out position on the mode editor orderly spliced form, wherein the UI element by
UI element template configures corresponding call parameter composition.
3. UI page code generation method as claimed in claim 2, which is characterized in that described " to obtain in the UI design drawing
The location information and call parameter information of included UI element and each UI element " step includes:
The UI design drawing is parsed by described image edit tool corresponding resolution unit, parses the UI design
It is corresponding in the location information of the UI design drawing and each UI element to obtain each UI element for all UI elements for including in figure
Call parameter.
4. UI page code generation method as described in any one of claims 1-3, which is characterized in that described " by all UI
The original source code program of element combines the corresponding location information of each UI element and call parameter information, UI described in combination producing
The step of program code of design drawing " includes:
Each UI element is corresponded into the source code program that call parameter is updated to corresponding UI element respectively, obtains each UI element
Program code；
Preset logical function template is called, the program code of each UI element and corresponding location information are updated to
In the logical function template, the program code of the UI design drawing is obtained；Wherein, the logical function template is
The logical function of the location information of default UI element code and UI element, the logical function according to position for believing
UI element is shown to the corresponding position of UI design drawing by breath.
5. a kind of UI page code generating means, which is characterized in that described device includes:
Receiving module, the UI page code for receiving user generates request and UI page code generation request is corresponding
UI design drawing；
Obtain module, for obtain in the UI design drawing included UI element and each UI element location information and
Call parameter information；
Calling module, for according to preset UI element -- source code contingency table calls and each UI element in the UI design drawing
Corresponding original source code program；
Generation module, for by the original source code program of all UI elements combine the corresponding location information of each UI element and
Call parameter information, the program code of UI design drawing described in combination producing.
6. UI page code generating means as claimed in claim 5, which is characterized in that the UI design drawing is by preset
Image editing tools by UI element template carry out position on the mode editor orderly spliced form, wherein the UI element by
UI element template configures corresponding call parameter composition.
7. UI page code generating means as claimed in claim 6, it is characterised in that:
The acquisition module is also used to solve the UI design drawing by the corresponding resolution unit of described image edit tool
Analysis, parses all UI elements for including in the UI design drawing, obtains each UI element and believes in the position of the UI design drawing
Breath and the corresponding call parameter of each UI element.
8. such as the described in any item UI page code generating means of claim 5-7, which is characterized in that the generation module is also used
In:
Each UI element is corresponded into the source code program that call parameter is updated to corresponding UI element respectively, obtains each UI element
Program code；
Preset logical function template is called, the program code of each UI element and corresponding location information are updated to
In the logical function template, the program code of the UI design drawing is obtained；Wherein, the logical function template is
The logical function of the location information of default UI element code and UI element, the logical function according to position for believing
UI element is shown to the corresponding position of UI design drawing by breath.
9. a kind of server, which is characterized in that the server includes memory, processor, and being stored on the memory can
The computer program run on the processor realizes such as claim when the computer program is executed by the processor
The step of 1-4 described in any item UI page code generation methods.
10. a kind of computer readable storage medium, which is characterized in that the computer-readable recording medium storage has computer journey
Sequence, the computer program can be executed by least one processor, so that at least one described processor executes such as claim
Described in any one of 1-4 the step of UI page code generation method.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910522313.6A CN110333862A (en) | 2019-06-17 | 2019-06-17 | UI page code generation method, device and server |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910522313.6A CN110333862A (en) | 2019-06-17 | 2019-06-17 | UI page code generation method, device and server |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110333862A true CN110333862A (en) | 2019-10-15 |
Family
ID=68142061
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910522313.6A Pending CN110333862A (en) | 2019-06-17 | 2019-06-17 | UI page code generation method, device and server |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110333862A (en) |
Cited By (17)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110990014A (en) * | 2019-12-12 | 2020-04-10 | 深圳市卡牛科技有限公司 | Method and device for generating page code of skeleton screen, server and storage medium |
| CN111367507A (en) * | 2020-03-11 | 2020-07-03 | 上海东普信息科技有限公司 | Page code generation method, device, equipment and storage medium |
| CN111475156A (en) * | 2020-04-13 | 2020-07-31 | 北京金堤科技有限公司 | Page code generation method and device, electronic equipment and storage medium |
| CN111679827A (en) * | 2020-04-28 | 2020-09-18 | 平安国际智慧城市科技股份有限公司 | H5 page generation method, device, equipment and storage medium |
| CN111708528A (en) * | 2020-06-15 | 2020-09-25 | 中国建设银行股份有限公司 | Method, device and equipment for generating small program and storage medium |
| CN111813409A (en) * | 2020-07-02 | 2020-10-23 | 上海米哈游天命科技有限公司 | Code generation method, device, equipment and storage medium of interactive interface |
| CN112181417A (en) * | 2020-10-19 | 2021-01-05 | 中国工商银行股份有限公司 | Front-end research and development configuration device and method |
| CN112558973A (en) * | 2020-12-25 | 2021-03-26 | 青岛海尔科技有限公司 | Front-end page generation method and device, storage medium and electronic device |
| CN112631588A (en) * | 2020-12-28 | 2021-04-09 | 北京五八信息技术有限公司 | File generation method and device, electronic equipment and computer readable medium |
| CN112650483A (en) * | 2020-12-28 | 2021-04-13 | 京东数字科技控股股份有限公司 | Method and device for restoring design draft, computer equipment and storage medium |
| CN113010169A (en) * | 2021-03-08 | 2021-06-22 | 北京房江湖科技有限公司 | Method and apparatus for converting UI diagram into code file |
| CN113391805A (en) * | 2021-06-24 | 2021-09-14 | 上海中通吉网络技术有限公司 | Automatic generation method of front-end code |
| CN113961180A (en) * | 2021-12-22 | 2022-01-21 | 上海豪承信息技术有限公司 | Method and device for creating intelligent dial plate of wearable device and wearable device |
| CN114089985A (en) * | 2021-11-17 | 2022-02-25 | 南斗六星系统集成有限公司 | Automatic code generation graphical method and system for intelligent cockpit |
| CN114416083A (en) * | 2021-12-30 | 2022-04-29 | 北京五八信息技术有限公司 | Data processing method and device, electronic equipment and storage medium |
| WO2022121723A1 (en) * | 2020-12-08 | 2022-06-16 | 中兴通讯股份有限公司 | Identification method for software interface design drawing component information |
| CN114780091A (en) * | 2022-04-08 | 2022-07-22 | 安天科技集团股份有限公司 | Page code generation method and device, computing equipment and storage medium |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2006293436A (en) * | 2005-04-05 | 2006-10-26 | Canon Inc | Program code generation device and generation method |
| CN107291476A (en) * | 2017-06-27 | 2017-10-24 | 北京微影时代科技有限公司 | Canvas code generating methods, device, electronic equipment and storage medium |
| US20180210864A1 (en) * | 2017-01-25 | 2018-07-26 | International Business Machines Corporation | Web page design snapshot generator |
| CN108345456A (en) * | 2018-03-07 | 2018-07-31 | 平安普惠企业管理有限公司 | Page code generation method, device, computer equipment and storage medium |
| CN108446116A (en) * | 2018-02-26 | 2018-08-24 | 平安普惠企业管理有限公司 | Generation method, device, computer equipment and the storage medium of the application program page |
| CN109783094A (en) * | 2018-12-15 | 2019-05-21 | 深圳壹账通智能科技有限公司 | Front end page generation method, device, computer equipment and storage medium |
-
2019
- 2019-06-17 CN CN201910522313.6A patent/CN110333862A/en active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2006293436A (en) * | 2005-04-05 | 2006-10-26 | Canon Inc | Program code generation device and generation method |
| US20180210864A1 (en) * | 2017-01-25 | 2018-07-26 | International Business Machines Corporation | Web page design snapshot generator |
| CN107291476A (en) * | 2017-06-27 | 2017-10-24 | 北京微影时代科技有限公司 | Canvas code generating methods, device, electronic equipment and storage medium |
| CN108446116A (en) * | 2018-02-26 | 2018-08-24 | 平安普惠企业管理有限公司 | Generation method, device, computer equipment and the storage medium of the application program page |
| CN108345456A (en) * | 2018-03-07 | 2018-07-31 | 平安普惠企业管理有限公司 | Page code generation method, device, computer equipment and storage medium |
| CN109783094A (en) * | 2018-12-15 | 2019-05-21 | 深圳壹账通智能科技有限公司 | Front end page generation method, device, computer equipment and storage medium |
Cited By (21)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110990014A (en) * | 2019-12-12 | 2020-04-10 | 深圳市卡牛科技有限公司 | Method and device for generating page code of skeleton screen, server and storage medium |
| CN110990014B (en) * | 2019-12-12 | 2023-10-20 | 深圳市卡牛科技有限公司 | Method and device for generating skeleton screen page codes, server and storage medium |
| CN111367507A (en) * | 2020-03-11 | 2020-07-03 | 上海东普信息科技有限公司 | Page code generation method, device, equipment and storage medium |
| CN111475156A (en) * | 2020-04-13 | 2020-07-31 | 北京金堤科技有限公司 | Page code generation method and device, electronic equipment and storage medium |
| CN111475156B (en) * | 2020-04-13 | 2024-04-02 | 北京金堤科技有限公司 | Page code generation method and device, electronic equipment and storage medium |
| CN111679827A (en) * | 2020-04-28 | 2020-09-18 | 平安国际智慧城市科技股份有限公司 | H5 page generation method, device, equipment and storage medium |
| CN111679827B (en) * | 2020-04-28 | 2024-04-26 | 深圳赛安特技术服务有限公司 | H5 page generation method, device, equipment and storage medium |
| CN111708528A (en) * | 2020-06-15 | 2020-09-25 | 中国建设银行股份有限公司 | Method, device and equipment for generating small program and storage medium |
| CN111813409A (en) * | 2020-07-02 | 2020-10-23 | 上海米哈游天命科技有限公司 | Code generation method, device, equipment and storage medium of interactive interface |
| CN112181417A (en) * | 2020-10-19 | 2021-01-05 | 中国工商银行股份有限公司 | Front-end research and development configuration device and method |
| CN112181417B (en) * | 2020-10-19 | 2023-09-22 | 中国工商银行股份有限公司 | Front-end research and development configuration device and method |
| WO2022121723A1 (en) * | 2020-12-08 | 2022-06-16 | 中兴通讯股份有限公司 | Identification method for software interface design drawing component information |
| CN112558973A (en) * | 2020-12-25 | 2021-03-26 | 青岛海尔科技有限公司 | Front-end page generation method and device, storage medium and electronic device |
| CN112650483A (en) * | 2020-12-28 | 2021-04-13 | 京东数字科技控股股份有限公司 | Method and device for restoring design draft, computer equipment and storage medium |
| CN112631588A (en) * | 2020-12-28 | 2021-04-09 | 北京五八信息技术有限公司 | File generation method and device, electronic equipment and computer readable medium |
| CN113010169A (en) * | 2021-03-08 | 2021-06-22 | 北京房江湖科技有限公司 | Method and apparatus for converting UI diagram into code file |
| CN113391805A (en) * | 2021-06-24 | 2021-09-14 | 上海中通吉网络技术有限公司 | Automatic generation method of front-end code |
| CN114089985A (en) * | 2021-11-17 | 2022-02-25 | 南斗六星系统集成有限公司 | Automatic code generation graphical method and system for intelligent cockpit |
| CN113961180A (en) * | 2021-12-22 | 2022-01-21 | 上海豪承信息技术有限公司 | Method and device for creating intelligent dial plate of wearable device and wearable device |
| CN114416083A (en) * | 2021-12-30 | 2022-04-29 | 北京五八信息技术有限公司 | Data processing method and device, electronic equipment and storage medium |
| CN114780091A (en) * | 2022-04-08 | 2022-07-22 | 安天科技集团股份有限公司 | Page code generation method and device, computing equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110333862A (en) | UI page code generation method, device and server | |
| CN109117138B (en) | Configuration method and device and computer readable storage medium | |
| CN109240688A (en) | Interface development method, electronic device and readable storage medium storing program for executing | |
| CN110362307A (en) | Forms pages configuration method and server | |
| DE102012223496A1 (en) | ONLINE AND DISTRIBUTED OPTIMIZATION FRAMEWORK FOR MOBILE RADIO ANALYSIS | |
| CN107844468A (en) | The cross-page recognition methods of form data, electronic equipment and computer-readable recording medium | |
| CN109874048A (en) | The translucent display methods of video window component, device and computer equipment | |
| CN111208998A (en) | Method and device for automatically laying out data visualization large screen and storage medium | |
| CN115794437A (en) | Calling method and device of microservice, computer equipment and storage medium | |
| CN110308880A (en) | Log Method of printing, system, computer equipment and computer readable storage medium | |
| CN110363222A (en) | Picture mask method, device, computer equipment and storage medium for model training | |
| CN104731606A (en) | System and method based on identification grasping technology to achieve enterprise application integration management | |
| CN112416267A (en) | Configurable printing data processing method and device | |
| CN111222517A (en) | Test sample generation method, system, computer device and storage medium | |
| CN110019916A (en) | Event-handling method, device, equipment and storage medium based on user's portrait | |
| CN117931188A (en) | Front-end layout code automatic generation method and device, electronic equipment and medium | |
| CN111159226A (en) | Index query method and system | |
| CN113220434B (en) | Task scheduling method based on dependency model and dependency model configuration method | |
| CN105590241B (en) | Self-adaptive electronic bill implementation method and system | |
| CN113887442A (en) | OCR training data generation method, device, equipment and medium | |
| CN109783782A (en) | Generation method, equipment, storage medium and the device of electronic contract template | |
| CN113253951A (en) | Paper contract information printing method, system, device and readable storage medium | |
| CN112818270A (en) | Data cross-domain transfer method and device and computer equipment | |
| CN115935909A (en) | File generation method and device and electronic equipment | |
| WO2021146895A1 (en) | Optimization method and apparatus for vehicle-mounted image display, computer device and storage medium |
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 |