CN111597484A - UI dynamic generation method - Google Patents

UI dynamic generation method Download PDF

Info

Publication number
CN111597484A
CN111597484A CN202010708906.4A CN202010708906A CN111597484A CN 111597484 A CN111597484 A CN 111597484A CN 202010708906 A CN202010708906 A CN 202010708906A CN 111597484 A CN111597484 A CN 111597484A
Authority
CN
China
Prior art keywords
json
layout
template
component
rendering
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202010708906.4A
Other languages
Chinese (zh)
Other versions
CN111597484B (en
Inventor
高斌
丁立聪
王发修
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Chengdu New Hope Finance Information Co Ltd
Original Assignee
Chengdu New Hope Finance Information Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Chengdu New Hope Finance Information Co Ltd filed Critical Chengdu New Hope Finance Information Co Ltd
Priority to CN202010708906.4A priority Critical patent/CN111597484B/en
Publication of CN111597484A publication Critical patent/CN111597484A/en
Application granted granted Critical
Publication of CN111597484B publication Critical patent/CN111597484B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577Optimising the visualization of content, e.g. distillation of HTML documents
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986Document structures and storage, e.g. HTML extensions

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Document Processing Apparatus (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The invention discloses a UI dynamic generation method which comprises the steps of configuring a layout json at the rear end of a UI, configuring a component json at the rear end of the UI, configuring a template according to the layout and the component to generate the template json, and rendering data of the template json at the front end of the UI. According to the invention, the UI page is modularized in a layout and component mode, so that high multiplexing of layout and components can be realized, flexible collocation is facilitated, and the UI generation efficiency is improved; and a tree json data structure is adopted, templates generated by layout and component configuration are converted into corresponding json data to be stored, front-end configuration and back-end configuration separation is realized, rendering adjustment can be carried out according to the current environment, and the method is adaptive to multiple platforms.

Description

UI dynamic generation method
Technical Field
The invention belongs to the technical field of UI generation, and particularly relates to a UI dynamic generation method suitable for various environments.
Background
With the high popularization of intelligent terminals, H5 and wechat applets become the most common welcome homepage, activity exhibition and marketing promotion tools in people's life, however, it is difficult for enterprises to repeatedly utilize these highly customized pages, change themes and change contents, and they may need to be re-developed, and it is also difficult to make dynamic adjustment according to practical application scenarios such as promotion of customer groups in the promotion process, so that the development cost is huge, and a lot of resources, time and manpower are consumed.
The existing mainstream UI generation technologies are divided into two types, one is that a corresponding H5 page is dynamically generated in a mode of setting component parameters through a dragging component, and the other is that an H5 page of a specific use scene is generated through background configuration of specified parameters; the former one can solve the problem of dynamic and rapid configuration generation of H5 content, but cannot solve the problem of dynamic generation of H5 pages; the latter solution, although dynamically generated by H5, is more logically dependent on the business scenario and has poor expansibility.
Both the above two technologies mainly aim at H5, but the problem of applet end UI generation cannot be solved; in addition, the method cannot adapt to the increasing use scenes, and the generated UI cannot dynamically monitor response events and cannot generate dynamic forms, so that the flexibility and the expansibility are insufficient.
Disclosure of Invention
In view of the above-mentioned deficiencies in the prior art, the present invention provides a highly flexible, highly extensible, and highly maintainable UI dynamic generation method suitable for various environments, especially compatible with H5 and applets.
In order to achieve the purpose of the invention, the invention adopts the technical scheme that:
a UI dynamic generation method comprises the following steps:
s1, configuring a layout json of a multi-branch tree structure at the rear end of the UI;
s2, configuring a component json of a multi-branch tree structure at the rear end of the UI;
s3, creating a template and selecting layout, and selecting and configuring the expected components according to the layout slots;
s4, generating a template json of the current template configured by the layout and the components;
and S5, obtaining a template json at the front end of the UI, and rendering the data of the template json according to a set rendering rule.
Further, the layout json tree structure comprises a node label field, a field whether a current node can be edited, an editing content field, an event monitoring field and a request interface field, and takes children as a lower node container.
Further, the component json rule is consistent with the layout json, and an identification field of a component type is set in a component json root node.
Further, the step S3 specifically includes:
recursively traversing all slots of the selected layout, generating a component container form according to the layout slots, and generating a corresponding editing form according to the editing content field; and then selecting and adding the desired components in the component containers, and simultaneously configuring the partial editable information of each component container and configuring the desired components.
Further, the step S3 further includes:
and submitting the slot form, copying the edited slot data and the added component data to a child tree of the slot node of the layout json to form the json of the tree structure.
Further, the step S4 specifically includes:
and submitting a template form, taking the selected layout json as basic data, and generating a complete json tree generated by the current template configuration after the submitted component container and the added component storage template.
Further, the step S5 includes the following sub-steps:
s51, acquiring a template json at the front end of the UI;
s52, judging the template type, and recursively traversing the json of the tree structure according to the current environment to generate a tree structure object;
s53, judging whether to initialize the interface request according to the rendering rule; if yes, requesting to initialize an interface; otherwise, directly carrying out the next step;
and S54, rendering the current UI page according to the set rendering rule.
Further, the step S54 specifically includes:
generating a designated label according to the node label field in the text, and analyzing the designated label into a corresponding html label, a text, a link and a picture; and combining the style of the current node and the style rendering label style set in the style object, and rendering the current UI page.
Further, the step S5 further includes:
judging whether a monitoring event is set in an event monitoring field of the current node; if yes, monitoring a set event; otherwise, ending the flow.
Further, after the monitoring event is triggered, the method further comprises requesting a specified interface in a specified request mode according to the configured request interface field.
The invention has the following beneficial effects:
according to the invention, the UI page is modularized in a layout and component mode, so that high multiplexing of layout and components can be realized, flexible collocation is facilitated, and the UI generation efficiency is improved; and a tree json data structure is adopted, templates generated by layout and component configuration are converted into corresponding json data to be stored, front-end configuration and back-end configuration separation is realized, rendering adjustment can be carried out according to the current environment, and the method is adaptive to multiple platforms.
Drawings
FIG. 1 is a flow chart of a UI dynamic generation method of the present invention;
FIG. 2 is a diagram of layout and component relationships in the present invention;
FIG. 3 is a flow chart of template configuration according to the present invention;
FIG. 4 is a front-end rendering flow diagram in the present invention.
Detailed Description
The following description of the embodiments of the present invention is provided to facilitate the understanding of the present invention by those skilled in the art, but it should be understood that the present invention is not limited to the scope of the embodiments, and it will be apparent to those skilled in the art that various changes may be made without departing from the spirit and scope of the invention as defined and defined in the appended claims, and all matters produced by the invention using the inventive concept are protected.
In order to realize UI dynamic generation, high multiplexing, high configurability and high expandability, the UI generation is divided into two parts of back-end configuration and front-end rendering. The rear end configuration comprises three modules of layout, assembly and template; the front-end rendering includes H5 rendering rules and applet rendering rules.
As shown in fig. 1, an embodiment of the present invention provides a UI dynamic generation method, including the following steps S1 to S5:
s1, configuring a layout json of a multi-branch tree structure at the rear end of the UI;
in this embodiment, the layout json of the multi-branch tree structure is configured at the back end of the UI, so as to facilitate layout logic expansion.
Laying out a json tree structure including, but not limited to, a node Tag field Tag to represent a current Tag type; whether the current node can edit the field isEdit (Boolean type), edit the content field editAttr (object type), and the style object editStyle (object type) can set the node style (such as CSS style of width, height, inner and outer margins, background color, and the like); event monitoring field event (object type) identifies whether the current tag has event monitoring and the event monitoring type; a request interface field apiObject (object type) for identifying information such as a corresponding request address and a request mode; and clidren (array type) is used as a lower node container.
Based on the layout json tree structure, the present invention can obtain the current layout slot position in a recursive traversal mode.
S2, configuring a component json of a multi-branch tree structure at the rear end of the UI;
in this embodiment, the multiple component json are configured at the back end of the UI, the rule of the component json is consistent with the rule of the layout json, the component json is also stored in a tree structure, and the difference between the component json and the layout json is that a component json root node is provided with an identification field of a component type.
S3, creating a template and selecting layout, and selecting and configuring the expected components according to the layout slots;
in this embodiment, the present invention creates a template and selects a layout according to the usage scenario/business/activity theme. After the layout is selected, recursively traversing all slots of the selected layout, namely labels with the isendit being true in all the layouts, generating a component container form according to the slots of the layout, and generating a corresponding editing form according to the editing content field; then, a desired component is selected to be added to the component container, as shown in fig. 2, and at the same time, part of editable information, such as a style, a response event, a request interface, and the like of each component container is configured, and the style, text information, a response event, a request interface, and the like of the desired component are configured.
The step S3 further includes:
and submitting the slot form, copying the edited slot data and the added component data to a child tree of the slot node of the layout json to form the json of the tree structure.
S4, generating a template json of the current template configured by the layout and the components;
in this embodiment, the template form is submitted first, then the selected layout json is used as basic data, a complete json tree generated by current template configuration is generated after the submitted component container and the added component save template, and the template effect is viewed in a background preview, as shown in fig. 3.
And S5, obtaining a template json at the front end of the UI, and rendering the data of the template json according to a set rendering rule.
In this embodiment, as shown in fig. 4, step S5 specifically includes the following sub-steps:
s51, acquiring a template json at the front end of the UI;
the invention obtains the template json at the front end of the UI, such as the front end H5 or an applet according to the current service requirement.
S52, judging the template type, and recursively traversing the json of the tree structure according to the current environment to generate a tree structure object;
s53, judging whether to initialize the interface request according to the rendering rule; if yes, requesting to initialize an interface; otherwise, directly carrying out the next step;
and S54, rendering the current UI page according to the set rendering rule.
According to the node label field, the invention generates a designated label and analyzes the designated label into a corresponding html label, text, link, picture and the like, wherein the analyzing mode is analyzed according to the respective characteristics of H5 or an applet; and combining the style of the current node and the style rendering label style set in the style object, and rendering the current UI page.
After the current UI page is rendered, judging whether a monitoring event is set in an event monitoring field of the current node; if yes, monitoring a set event, and requesting a specified interface in a specified request mode according to a request interface field configured by user operation; otherwise, ending the flow.
The invention adopts the mode of splitting the UI page into layout and components to realize the splitting of the UI page, thereby achieving the effects of componentization and modularization, being capable of highly reusing the developed layout and components, being convenient for flexible collocation and realizing the effect of generating the UI by high-efficiency and rapid configuration.
According to the method, a tree json data structure is adopted, a template generated by layout and component configuration is finally converted into corresponding json data to be stored, the json data is not directly involved in front-end rendering, front-end and back-end configuration separation is achieved, the front end renders the configured template json data through a pre-agreed standard rule, and the back end does not directly participate in rendering, so that the front end acquires the template json, can make rendering adjustment according to the current environment (such as H5 and small programs) and is adaptive to multiple platforms.
According to the method, the configuration fields responding to the events and the configuration fields requesting the interface url are added in the layout and the components, the UI page generated after front-end rendering can feed back the user behavior according to the configured response mode, and even the interface is requested to dynamically acquire data to generate a form and the like.
It will be appreciated by those of ordinary skill in the art that the embodiments described herein are intended to assist the reader in understanding the principles of the invention and are to be construed as being without limitation to such specifically recited embodiments and examples. Those skilled in the art can make various other specific changes and combinations based on the teachings of the present invention without departing from the spirit of the invention, and these changes and combinations are within the scope of the invention.

Claims (10)

1. A UI dynamic generation method is characterized by comprising the following steps:
s1, configuring a layout json of a multi-branch tree structure at the rear end of the UI;
s2, configuring a component json of a multi-branch tree structure at the rear end of the UI;
s3, creating a template and selecting layout, and selecting and configuring the expected components according to the layout slots;
s4, generating a template json of the current template configured by the layout and the components;
and S5, obtaining a template json at the front end of the UI, and rendering the data of the template json according to a set rendering rule.
2. The method according to claim 1, wherein the layout json tree structure includes a node tag field, a field whether a current node can be edited, an editing content field, an event listening field, and a request interface field, and has children as a lower level node container.
3. The method according to claim 2, wherein the component json rule is consistent with the layout json, and an identification field of a component type is set in a component json root node.
4. The method for dynamically generating a UI according to claim 1, wherein the step S3 specifically comprises:
recursively traversing all slots of the selected layout, generating a component container form according to the layout slots, and generating a corresponding editing form according to the editing content field; and then selecting and adding the desired components in the component containers, and simultaneously configuring the partial editable information of each component container and configuring the desired components.
5. The UI dynamic generation method of claim 4, wherein the step S3 further comprises:
and submitting the slot form, copying the edited slot data and the added component data to a child tree of the slot node of the layout json to form the json of the tree structure.
6. The method for dynamically generating a UI according to claim 1, wherein the step S4 specifically comprises:
and submitting a template form, taking the selected layout json as basic data, and generating a complete json tree generated by the current template configuration after the submitted component container and the added component storage template.
7. The UI dynamic generation method according to claim 1, wherein the step S5 comprises the following substeps:
s51, acquiring a template json at the front end of the UI;
s52, judging the template type, and recursively traversing the json of the tree structure according to the current environment to generate a tree structure object;
s53, judging whether to initialize the interface request according to the rendering rule; if yes, requesting to initialize an interface; otherwise, directly carrying out the next step;
and S54, rendering the current UI page according to the set rendering rule.
8. The UI dynamic generation method according to claim 7, wherein the step S54 specifically comprises:
generating a designated label according to the node label field in the text, and analyzing the designated label into a corresponding html label, a text, a link and a picture; and combining the style of the current node and the style rendering label style set in the style object, and rendering the current UI page.
9. The UI dynamic generation method according to claim 1 or 7, wherein the step S5 further comprises:
judging whether a monitoring event is set in an event monitoring field of the current node; if yes, monitoring a set event; otherwise, ending the flow.
10. The method according to claim 9, wherein after the listening event is triggered, the method further comprises requesting a specific interface in a specific request manner according to the configured request interface field.
CN202010708906.4A 2020-07-22 2020-07-22 UI dynamic generation method Active CN111597484B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010708906.4A CN111597484B (en) 2020-07-22 2020-07-22 UI dynamic generation method

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010708906.4A CN111597484B (en) 2020-07-22 2020-07-22 UI dynamic generation method

Publications (2)

Publication Number Publication Date
CN111597484A true CN111597484A (en) 2020-08-28
CN111597484B CN111597484B (en) 2020-10-27

Family

ID=72186731

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010708906.4A Active CN111597484B (en) 2020-07-22 2020-07-22 UI dynamic generation method

Country Status (1)

Country Link
CN (1) CN111597484B (en)

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112130856A (en) * 2020-09-29 2020-12-25 重庆紫光华山智安科技有限公司 Method, system, medium and terminal for generating front-end visual interface with strong expansibility
CN112527260A (en) * 2020-12-21 2021-03-19 杭州趣链科技有限公司 Method and device for generating JSON data of form and storage medium
CN112559083A (en) * 2020-12-24 2021-03-26 成都新希望金融信息有限公司 Function plug-in execution method and device, electronic equipment and storage medium
CN112685025A (en) * 2020-12-23 2021-04-20 江苏苏宁云计算有限公司 Method and system for quickly building front-end page
CN113468460A (en) * 2021-09-02 2021-10-01 北京优锘科技有限公司 Method, device and equipment for rendering Web page based on YAML (Yaml language)
CN116627418A (en) * 2023-07-21 2023-08-22 之江实验室 Multi-level form interface visual generation method and device based on recursion algorithm

Citations (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20110302269A1 (en) * 2010-06-08 2011-12-08 Sony Network Entertainment International Llc Flexible data structures and protocols
CN106873965A (en) * 2016-12-25 2017-06-20 北京通途永久科技有限公司 A kind of method suitable for the monitoring service class application dynamic construction page
US20170185577A1 (en) * 2015-12-25 2017-06-29 Alibaba Group Holding Limited Method and device for extending a layout template of an application component
CN107408042A (en) * 2014-09-26 2017-11-28 甲骨文国际公司 For the efficient of Mobile solution and intuitively data are bound
CN108733443A (en) * 2018-05-09 2018-11-02 成都市极米科技有限公司 A kind of APP dynamic configuration systems and its implementation, Dynamic Configuration based on android system
CN109117119A (en) * 2018-07-02 2019-01-01 成都四方伟业软件股份有限公司 A kind of polymorphic component fusion method
CN109144506A (en) * 2018-07-05 2019-01-04 杭州涂鸦信息技术有限公司 A kind of configurable UI interface creating method
CN109408180A (en) * 2018-10-15 2019-03-01 四川长虹电器股份有限公司 The method that terminal applies dynamic imports customizing form
US10331422B1 (en) * 2019-02-10 2019-06-25 Julie Russell System and method for generating API devlopment code for integrating platforms
CN110727493A (en) * 2019-09-30 2020-01-24 科大国创软件股份有限公司 UGC mode-driven UI visualization system

Patent Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20110302269A1 (en) * 2010-06-08 2011-12-08 Sony Network Entertainment International Llc Flexible data structures and protocols
CN107408042A (en) * 2014-09-26 2017-11-28 甲骨文国际公司 For the efficient of Mobile solution and intuitively data are bound
US20170185577A1 (en) * 2015-12-25 2017-06-29 Alibaba Group Holding Limited Method and device for extending a layout template of an application component
CN106919410A (en) * 2015-12-25 2017-07-04 阿里巴巴集团控股有限公司 The extended method and device of the layout templates of component
CN106873965A (en) * 2016-12-25 2017-06-20 北京通途永久科技有限公司 A kind of method suitable for the monitoring service class application dynamic construction page
CN108733443A (en) * 2018-05-09 2018-11-02 成都市极米科技有限公司 A kind of APP dynamic configuration systems and its implementation, Dynamic Configuration based on android system
CN109117119A (en) * 2018-07-02 2019-01-01 成都四方伟业软件股份有限公司 A kind of polymorphic component fusion method
CN109144506A (en) * 2018-07-05 2019-01-04 杭州涂鸦信息技术有限公司 A kind of configurable UI interface creating method
CN109408180A (en) * 2018-10-15 2019-03-01 四川长虹电器股份有限公司 The method that terminal applies dynamic imports customizing form
US10331422B1 (en) * 2019-02-10 2019-06-25 Julie Russell System and method for generating API devlopment code for integrating platforms
CN110727493A (en) * 2019-09-30 2020-01-24 科大国创软件股份有限公司 UGC mode-driven UI visualization system

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
[已注销]: "Vue-Layout:可视化布局、自动生成代码工具", 《HTTPS://BLOG.CSDN.NET/SETSUNADOUDOU/ARTICLE/DETAILS/101384626》 *
鲍陈 等: "基于ExtJS和S2SH的Web开发框架研究与应用", 《宿州学院学报》 *

Cited By (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112130856A (en) * 2020-09-29 2020-12-25 重庆紫光华山智安科技有限公司 Method, system, medium and terminal for generating front-end visual interface with strong expansibility
CN112130856B (en) * 2020-09-29 2023-11-03 重庆紫光华山智安科技有限公司 Strong-expansibility front-end visual interface generation method, system, medium and terminal
CN112527260A (en) * 2020-12-21 2021-03-19 杭州趣链科技有限公司 Method and device for generating JSON data of form and storage medium
CN112685025A (en) * 2020-12-23 2021-04-20 江苏苏宁云计算有限公司 Method and system for quickly building front-end page
CN112559083A (en) * 2020-12-24 2021-03-26 成都新希望金融信息有限公司 Function plug-in execution method and device, electronic equipment and storage medium
CN112559083B (en) * 2020-12-24 2023-08-04 成都新希望金融信息有限公司 Function plug-in execution method, device, electronic equipment and storage medium
CN113468460A (en) * 2021-09-02 2021-10-01 北京优锘科技有限公司 Method, device and equipment for rendering Web page based on YAML (Yaml language)
CN116627418A (en) * 2023-07-21 2023-08-22 之江实验室 Multi-level form interface visual generation method and device based on recursion algorithm
CN116627418B (en) * 2023-07-21 2023-10-03 之江实验室 Multi-level form interface visual generation method and device based on recursion algorithm

Also Published As

Publication number Publication date
CN111597484B (en) 2020-10-27

Similar Documents

Publication Publication Date Title
CN111597484B (en) UI dynamic generation method
CN105786526B (en) A kind of efficient flow figure drawing system and method based on Web
US10437584B2 (en) Web client command infrastructure integration into a rich client application
CN108259620B (en) Advertisement editing and previewing method, intelligent terminal, system and storage device
CN111666526A (en) Page generation method, device, equipment and storage medium
CN115617327A (en) Low code page building system, method and computer readable storage medium
US20090037801A1 (en) Method and apparatus for automatic user manual generation
CN110705237B (en) Automatic document generation method, data processing device and storage medium
CN108563431B (en) Software development method and device, computer-readable storage medium and electronic equipment
CN103077185A (en) Object-based user-defined information-expanding method
GB2423387A (en) Application-Generic Sequence Diagram Generator Driven by a Non-Proprietary Language
CN108008944A (en) Regulation engine response method and system, regulation engine, service terminal, memory
CN109815242B (en) Data processing method and system
CN111158687B (en) Interface generation method and device of JAVA plugin, computer equipment and storage medium
CN111324390A (en) Device and method for realizing APP content configuration and real-time update
CN110941428B (en) Website creation method and device
CN110377892A (en) A kind of government intelligence form templat designing system
CN105404514A (en) JavaScript rendering method and apparatus
CN110347379B (en) Processing method, device and storage medium for combined crowdsourcing questions
CN111859886B (en) Document generation method and device based on product prototype interface
CN112785284A (en) Message storage method and device based on structured document
CN117075893A (en) Mobile terminal page generation method and system based on VUE
CN116562791A (en) Business node definition method and device based on BPMN standard
CN116301813A (en) Low-code platform development method and system
CN112306622A (en) VNF template construction method and 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