CN111104116A - Method for dynamically generating operation interface based on configuration - Google Patents
Method for dynamically generating operation interface based on configuration Download PDFInfo
- Publication number
- CN111104116A CN111104116A CN201911285470.6A CN201911285470A CN111104116A CN 111104116 A CN111104116 A CN 111104116A CN 201911285470 A CN201911285470 A CN 201911285470A CN 111104116 A CN111104116 A CN 111104116A
- Authority
- CN
- China
- Prior art keywords
- configuration
- component
- operation interface
- dynamically generating
- interface based
- 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
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
-
- 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/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
- G06F9/45504—Abstract machines for programme code execution, e.g. Java virtual machine [JVM], interpreters, emulators
- G06F9/45529—Embedded in an application, e.g. JavaScript in a Web browser
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a method for dynamically generating an operation interface based on configuration, which comprises the following steps: s1, defining configuration: defining a configuration object of the component according to the component configuration requirement in the data visualization operation interface, determining the default configuration and the configurable items of the component, and determining the structure of the configuration object according to the configurable items of the component; s2, analysis configuration: determining a rendering function according to the control type and the configuration object of the component defined in the step S1; s3, rendering an interface: a visualization page is opened in the browser and the rendered configuration interface is checked for compliance with expectations. According to the invention, the configuration interface in the data visualization tool page is abstracted into the literal object quantity in the javascript, so that a developer can simply and quickly develop the configuration interface of the new component according to the requirement when adding the new component to the visualization tool.
Description
Technical Field
The invention relates to the technical field of data visualization, in particular to a method for dynamically generating an operation interface based on configuration.
Background
The operation interface is a component configuration interface in a visual design page and comprises an input box, a radio box, a check box, a color selector, a time selector and a custom control. The operation interface is mainly used for providing page configuration elements for the visual design.
When implementing the configuration function of the data visualization tool, a large number of user configuration items need to be generated. And, as the component richness increases, the configuration items are also more and more complex. At this point, the code will become increasingly unwieldy and difficult to maintain by continuing to use the method of encoding in order of need.
Disclosure of Invention
The purpose of the invention is as follows: aiming at the defects, the invention provides a method for completing a data visualization page configuration interface, which has the characteristics of simple and clear code structure, easy maintenance and strong reusability, can effectively support various component configurations in visualization design, and solves the problem of visualization data tool page configuration.
The technical scheme is as follows:
a method for dynamically generating an operation interface based on configuration comprises the following steps:
s1, defining configuration: defining a configuration object of the component according to the component configuration requirement in the data visualization operation interface, determining default configuration and configurable items of the component, and determining the structure of the configuration object according to the configurable items of the component, wherein the structure is a tree structure and comprises correspondingly modified component configuration fields, configuration modes and sub-configurations;
s2, analysis configuration: determining a rendering function according to the control type and the configuration object of the component defined in the step S1, wherein the control type and the rendering function are in a one-to-one relationship, and each type must have a corresponding rendering function;
s3, rendering an interface: a visualization page is opened in the browser and the rendered configuration interface is checked for compliance with expectations.
Operating an interface in the browser, and observing whether the corresponding component is updated in real time according to the change of the user configuration; and modifying the configuration and the configuration analysis function defined in the step S1 according to the service requirement and the ui design draft until the requirement is met.
In step S2, the control type is used as a function parameter of the rendering function, and other configurations required by the corresponding control are transmitted.
The browser used to access the page is a modern browser.
When the configuration is analyzed, the rendered control is selected to pass through a UI library packaging assembly, and the UI library is a library widely used in the industry.
Has the advantages that: according to the invention, the configuration interface in the data visualization tool page is abstracted into the literal object quantity in the javascript, so that a developer can simply and quickly develop the configuration interface of the new component according to the requirement when adding the new component to the visualization tool.
Drawings
FIG. 1 is a flow chart of the system of the present invention.
Detailed Description
The invention is further elucidated with reference to the drawings and the embodiments.
FIG. 1 is a flow chart of the system of the present invention. Referring to fig. 1, the method for dynamically generating an operation interface based on configuration according to the present invention includes the following steps:
s1, defining configuration: defining a configuration object of the component according to the component configuration requirement in the data visualization operation interface, determining default configuration and configurable items of the component, and determining the structure of the configuration object according to the configurable items of the component, wherein the structure is a tree structure and comprises correspondingly modified component configuration fields, configuration modes and sub-configurations;
s2, analysis configuration: determining rendering functions according to the control types and the configuration objects of the components defined in the step S1, wherein the control types and the rendering functions are in a one-to-one relationship, each type is required to have a corresponding rendering function, the rendering functions define the display form of the controls in the page, and the rendering functions are pure functions, wherein codes containing side effects should not appear, so that the configuration is ensured to be input, the virtual DOM objects are output, and the same configuration page display is ensured;
in the invention, the control type is used as a function parameter of a rendering function, and other configurations required by the corresponding control are transmitted, such as options of a pull-down control are used as other parameters;
s3, rendering an interface: opening a visual page in a browser, checking whether a rendered configuration interface is in accordance with expectation or not, operating the interface, observing whether a corresponding component is updated in real time according to the change of user configuration or not, observing the page, and modifying a defined configuration and configuration analysis function according to business requirements and ui design draft until the requirements are met, namely completing the compiling of component configuration related codes.
In the present invention, the language used for the design is javascript, which is widely used in the prior art, and is not described in detail in this application.
Specifically, the client, the service provider, and the data access are all data connections provided by the web network.
In this embodiment, the browser used for accessing the page is a modern browser, such as Chrome, IE, Safari, and the like.
In this embodiment, during configuration analysis, the rendered control may be selectively packaged via a UI library, which is a library widely used in the industry and is not described in detail herein.
In particular, the rendered controls are used for a user to visually modify the component configuration.
According to the invention, the configuration interface in the data visualization tool page is abstracted into the literal object quantity in the javascript, so that a developer can simply and quickly develop the configuration interface of the new component according to the requirement when adding the new component to the visualization tool.
Although the preferred embodiments of the present invention have been described in detail, the present invention is not limited to the details of the foregoing embodiments, and various equivalent changes (such as number, shape, position, etc.) may be made to the technical solution of the present invention within the technical spirit of the present invention, and the equivalents are protected by the present invention.
Claims (5)
1. A method for dynamically generating an operation interface based on configuration is characterized in that: the method comprises the following steps:
s1, defining configuration: defining a configuration object of the component according to the component configuration requirement in the data visualization operation interface, determining default configuration and configurable items of the component, and determining the structure of the configuration object according to the configurable items of the component, wherein the structure is a tree structure and comprises correspondingly modified component configuration fields, configuration modes and sub-configurations;
s2, analysis configuration: determining a rendering function according to the control type and the configuration object of the component defined in the step S1, wherein the control type and the rendering function are in a one-to-one relationship, and each type must have a corresponding rendering function;
s3, rendering an interface: a visualization page is opened in the browser and the rendered configuration interface is checked for compliance with expectations.
2. The method for dynamically generating an operation interface based on configuration according to claim 1, wherein: operating an interface in the browser, and observing whether the corresponding component is updated in real time according to the change of the user configuration; and modifying the configuration and the configuration analysis function defined in the step S1 according to the service requirement and the ui design draft until the requirement is met.
3. The method for dynamically generating an operation interface based on configuration according to claim 1, wherein: in step S2, the control type is used as a function parameter of the rendering function, and other configurations required by the corresponding control are transmitted.
4. The method for dynamically generating an operation interface based on configuration according to claim 1, wherein: the browser used to access the page is a modern browser.
5. The method for dynamically generating an operation interface based on configuration according to claim 1, wherein: when the configuration is analyzed, the rendered control is selected to pass through a UI library packaging assembly, and the UI library is a library widely used in the industry.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911285470.6A CN111104116A (en) | 2019-12-13 | 2019-12-13 | Method for dynamically generating operation interface based on configuration |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911285470.6A CN111104116A (en) | 2019-12-13 | 2019-12-13 | Method for dynamically generating operation interface based on configuration |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111104116A true CN111104116A (en) | 2020-05-05 |
Family
ID=70422751
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911285470.6A Pending CN111104116A (en) | 2019-12-13 | 2019-12-13 | Method for dynamically generating operation interface based on configuration |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111104116A (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106330669A (en) * | 2015-06-30 | 2017-01-11 | 南京爱特思信息技术有限公司 | iOS platform instant messaging system based on XMPP |
| CN106648635A (en) * | 2016-12-08 | 2017-05-10 | 福建天泉教育科技有限公司 | Cross-platform equation editing and rendering method and system |
| CN107729005A (en) * | 2017-10-12 | 2018-02-23 | 福建富士通信息软件有限公司 | A kind of visualization business interface Dynamic Configuration based on H5 |
| CN108664245A (en) * | 2018-04-27 | 2018-10-16 | 厦门南讯软件科技有限公司 | A kind of web interface generation method and device based on JSON self-described structures |
| CN109284103A (en) * | 2018-08-30 | 2019-01-29 | 长春玖佰软件技术有限公司 | A kind of Web application and development and update method based on control development mode |
-
2019
- 2019-12-13 CN CN201911285470.6A patent/CN111104116A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106330669A (en) * | 2015-06-30 | 2017-01-11 | 南京爱特思信息技术有限公司 | iOS platform instant messaging system based on XMPP |
| CN106648635A (en) * | 2016-12-08 | 2017-05-10 | 福建天泉教育科技有限公司 | Cross-platform equation editing and rendering method and system |
| CN107729005A (en) * | 2017-10-12 | 2018-02-23 | 福建富士通信息软件有限公司 | A kind of visualization business interface Dynamic Configuration based on H5 |
| CN108664245A (en) * | 2018-04-27 | 2018-10-16 | 厦门南讯软件科技有限公司 | A kind of web interface generation method and device based on JSON self-described structures |
| CN109284103A (en) * | 2018-08-30 | 2019-01-29 | 长春玖佰软件技术有限公司 | A kind of Web application and development and update method based on control development mode |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11868231B2 (en) | System and method for evaluating code by a hybrid of local and cloud-based computers | |
| US10942922B2 (en) | Generation of data flow from syntax tree | |
| US6996801B2 (en) | System and method for automatically generating program | |
| KR20180061280A (en) | Engineering tools, systems and modules | |
| CN106293664A (en) | Code generating method and device | |
| US7849394B2 (en) | Linked code generation report | |
| JP2017138978A (en) | System and method for coverage-based automated test case augmentation for design models | |
| US20200226232A1 (en) | Method of selecting software files | |
| US11422783B2 (en) | Auto-deployment of applications | |
| CN110580174A (en) | application component generation method, server and terminal | |
| CN104081347A (en) | Graphical representation of an order of operations | |
| US9996238B2 (en) | Device and method for generating at least one computer file for producing a graphic interface of an electronic equipment, and related computer program product | |
| US8700374B1 (en) | System and method of using an active link in a state programming environment to locate an element in a graphical programming environment | |
| Sarray et al. | Safe composition in middleware for the internet of things | |
| CN105930166A (en) | Method based on WEB interface pop-up layers | |
| KR101449201B1 (en) | Automatic software test system for steel processing | |
| US10606569B2 (en) | Declarative configuration elements | |
| CN110275923B (en) | Management method and equipment of plug-in graphics | |
| CN111104116A (en) | Method for dynamically generating operation interface based on configuration | |
| JP4836412B2 (en) | Method and apparatus for generating a graphical user interface | |
| CN113050935A (en) | Method and device for generating mixed object, computing equipment and computer readable storage medium | |
| US20190196945A1 (en) | Entity performance and usability analysis framework | |
| CN111736828A (en) | System configuration interface generation method and system applied to detection software | |
| US20160132427A1 (en) | User interface conformance | |
| Fischereder | Development of a Next Generation SFC Viewer Based on Web Technologies/submitted by Stefan Fischereder |
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 | ||
| WD01 | Invention patent application deemed withdrawn after publication | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20200505 |