CN107203595A - A kind of method of the dynamic generation web interface based on flexible form - Google Patents
A kind of method of the dynamic generation web interface based on flexible form Download PDFInfo
- Publication number
- CN107203595A CN107203595A CN201710305804.6A CN201710305804A CN107203595A CN 107203595 A CN107203595 A CN 107203595A CN 201710305804 A CN201710305804 A CN 201710305804A CN 107203595 A CN107203595 A CN 107203595A
- Authority
- CN
- China
- Prior art keywords
- list
- input
- page
- data
- interface
- 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
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/24—Querying
- G06F16/248—Presentation of query results
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/25—Integrating or interfacing systems involving database management systems
- G06F16/252—Integrating or interfacing systems involving database management systems between a Database Management System and a front-end application
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
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)
- Computational Linguistics (AREA)
- User Interface Of Digital Computer (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The present invention proposes a kind of method of the dynamic generation web interface based on flexible form, comprises the following steps：Define page-level information；Define field level information；According to page-level information, parsed according to rule constraint, the dynamic render list page, and load data；According to field level information, the card page is rendered automatically, and load data；According to input rule, whether verification input is correct；List interface and list interface after output loading.List is generated web interface by the present invention, and the web interface generated can be carried out self-defined, use it more flexible, meanwhile, parsed according to rule constraint, can the quick dynamic render list page, and data are loaded, the mode of the list based on web is generated compared to traditional technology with partial automation, web interface can be just automatically generated without manual intervention, operation can be easy to self-defined multiple function buttons.
Description
Technical field
The present invention relates to web interface technical field, more particularly to a kind of dynamic generation web interface based on flexible form
Method.
Background technology
In many network application programs, data access, data manipulation and data demonstrating pass through to such as data
The user interfaces of the bottom datas such as storehouse table promotes.For standard functions, user interface can be in the form based on web
Now to interact with bottom data with any user to the access of web browser.For example, data can be by permitting
Family allowable accesses and manipulates one or more lists based on web of data to present.In order to create the list based on web, table
Single usual manual designs data Layer of designer and presentation layer.Data Layer is interacted in response to the order from presentation layer with bottom data
(for example, sending inquiry to database) and provide data (for example, result of data base querying) for presentation layer.Form designer is also
By filtering, main details, the paging based on server and editor, deletion and other formation functions such as order can be inserted to number
According in layer.For example, data Layer can filter Query Result suitable data set is returned into presentation layer according to other criterions.
Some web form development platforms generate the list based on web using the technology of partial automation.For example, at least
One platform supports automatic display, editor, updates and delete function.However, these platforms still need manual activities to obtain
Other functions.Even if for example, filtering, paging and sequence are generally also required to manual intervention using these development platforms.Therefore, even if
In the technology using partial automation, it still can consume considerable resource to add additional function manually.
The content of the invention
The purpose of the present invention is intended at least solve one of described technological deficiency.
Therefore, object of the present invention is to provide a kind of method of the dynamic generation web interface based on flexible form, will
Flexible form dynamic generation web interface, makes its operation more flexible, additional work(can be just added without consuming considerable resource
Energy.
To achieve these goals, the present invention provides a kind of method of the dynamic generation web interface based on flexible form, bag
Include following steps：
Step S1, defines page-level information, at least metadata including association, original list data page rule, list
Page data default sort rule；
Step S2, defines field level information, at least including Chinese, element type, input type, input setting；
Step S3, according to page-level information, is parsed according to rule constraint, the dynamic render list page, and loads number
According to；
Wherein, original list load step is as follows：
Step S301, list configuration is read according to function numbering；
Step S302, according to list display field render list point row；
Step S303, according to inquiry table or attempt load business datum；
Step S304, paging processing is carried out according to every page of display number；
Step S305, row control is rendered according to the element type and input type of field；
Step S306, according to the data in input setting initialization control；
Step S307, button is initialized according to list list button；
Step S308, completes list interface loading；
Step S4, according to field level information, renders the card page, and load data automatically；
Step S5, according to input rule, whether verification input is correct；
Step S6, list interface and list interface after output loading.
Further, in step s3, Action interfaces can be realized, for complete according to the self-defined extension class of own service
Preservation, the particular service of deletion into business datum.
Further, the original list also sets up personalization button, inquiry button.
Further, in step s 4, it can also be set in card interface according to input type, input, automatically generate word
Section control, field control at least includes combobox, radio box, multiselect frame.
Further, in step s 5, if verification input is incorrect, point out to re-enter, if verification input is just
Really, then next operation is entered.
Further, in step s 4, card page load step is as follows：
Step S401, list configuration is read according to function numbering；
Step S402, detail page input field is rendered according to card display field；
Step S403, according to operation table query traffic data；
Step S404, the control of input frame is rendered according to the element type and input type of field；
Step S405, according to the data in input setting initialization control；
Step S406, according to whether read-only control input whether editable；
Whether step S407, be whether sky control input allows for sky according to card；
Step S408, button is initialized according to list card button；
Step S409, completes the loading of card interface.
Further, the card page loading is by after double-click table data.
List is generated web interface by the present invention, and the web interface that generated can be carried out self-defined, makes it using more
Plus flexibly, meanwhile, parsed according to rule constraint, can the quickly dynamic render list page, and load data, compared to tradition
The technology with partial automation generate the mode of the list based on web, without manual intervention can just automatically generate web circle
Face, can be easy to operation with self-defined multiple function buttons.
Brief description of the drawings
The above-mentioned and/or additional aspect and advantage of the present invention will become from description of the accompanying drawings below to embodiment is combined
Substantially and be readily appreciated that, wherein：
Fig. 1 is main process figure of the invention；
Fig. 2 loads flow chart for the original list of the present invention；
Fig. 3 loads flow chart for the card page of the present invention.
Embodiment
Embodiments of the invention are described below in detail, the example of the embodiment is shown in the drawings, wherein from beginning to end
Same or similar label represents same or similar element or the element with same or like function.Below with reference to attached
The embodiment of figure description is exemplary, it is intended to for explaining the present invention, and be not considered as limiting the invention.
The present invention is elaborated with reference to embodiment.
As Figure 1-3, the method for the dynamic generation web interface based on flexible form that the present invention is provided, including following
Step：
Step S1, defines page-level information, at least metadata including association, original list data page rule, list
Page data default sort rule；
Step S2, defines field level information, at least including Chinese, element type, input type, input setting；
Step S3, according to page-level information, is parsed according to rule constraint, the dynamic render list page, and loads number
According to；
Wherein, original list load step is as follows：
Step S301, list configuration is read according to function numbering；
Step S302, according to list display field render list point row；
Step S303, according to inquiry table or attempt load business datum；
Step S304, paging processing is carried out according to every page of display number；
Step S305, row control is rendered according to the element type and input type of field；
Step S306, according to the data in input setting initialization control；
Step S307, button is initialized according to list list button；
Step S308, completes list interface loading；
In addition, list interface can realize Action interfaces, for finishing service number according to the self-defined extension class of own service
According to preservation, delete particular service.Original list also sets up personalization button, inquiry button, and personalization button can be in extension
Realized in js.
Step S4, according to field level information, renders the card page, and load data automatically；The card page is loaded
By after double-click table data.
Wherein, card page load step is as follows：
Step S401, list configuration is read according to function numbering；
Step S402, detail page input field is rendered according to card display field；
Step S403, according to operation table query traffic data；
Step S404, the control of input frame is rendered according to the element type and input type of field；
Step S405, according to the data in input setting initialization control；
Step S406, according to whether read-only control input whether editable；
Whether step S407, be whether sky control input allows for sky according to card；
Step S408, button is initialized according to list card button；
Step S409, completes the loading of card interface.
In addition, can also be set in card interface according to input type, input, field control, field control are automatically generated
At least include combobox, radio box, multiselect frame.
Step S5, according to input rule, whether verification input is correct；If verification input is incorrect, point out again defeated
Enter, if verification input is correct, enter next operation.
Step S6, list interface and list interface after output loading.
List is generated web interface by the present invention, and the web interface that generated can be carried out self-defined, makes it using more
Plus flexibly, meanwhile, parsed according to rule constraint, can the quickly dynamic render list page, and load data, compared to tradition
The technology with partial automation generate the mode of the list based on web, without manual intervention can just automatically generate web circle
Face, can be easy to operation with self-defined multiple function buttons.
Although embodiments of the invention have been shown and described above, it is to be understood that above-described embodiment is example
Property, it is impossible to limitation of the present invention is interpreted as, one of ordinary skill in the art is not departing from the principle and objective of the present invention
In the case of above-described embodiment can be changed within the scope of the invention, change, replace and modification.The scope of the present invention
Extremely equally limited by appended claims.
Claims (7)
1. a kind of method of the dynamic generation web interface based on flexible form, it is characterised in that comprise the following steps：
Step S1, defines page-level information, at least metadata including association, original list data page rule, original list
Data default sort rule；
Step S2, defines field level information, at least including Chinese, element type, input type, input setting；
Step S3, according to page-level information, is parsed according to rule constraint, the dynamic render list page, and loads data；
Wherein, original list load step is as follows：
Step S301, list configuration is read according to function numbering；
Step S302, according to list display field render list point row；
Step S303, according to inquiry table or attempt load business datum；
Step S304, paging processing is carried out according to every page of display number；
Step S305, row control is rendered according to the element type and input type of field；
Step S306, according to the data in input setting initialization control；
Step S307, button is initialized according to list list button；
Step S308, completes list interface loading；
Step S4, according to field level information, renders the card page, and load data automatically；
Step S5, according to input rule, whether verification input is correct；
Step S6, list interface and list interface after output loading.
2. the method for the dynamic generation web interface as claimed in claim 1 based on flexible form, it is characterised in that in step
In S3, Action interfaces can be realized according to the self-defined extension class of own service, the preservation, deletion for finishing service data
Particular service.
3. the method for the dynamic generation web interface as claimed in claim 1 based on flexible form, it is characterised in that the row
The table page also sets up personalization button, inquiry button.
4. the method for the dynamic generation web interface as claimed in claim 1 based on flexible form, it is characterised in that in step
In S4, it can also be set in card interface according to input type, input, automatically generate field control, field control at least includes
Combobox, radio box, multiselect frame.
5. the method for the dynamic generation web interface as claimed in claim 1 based on flexible form, it is characterised in that in step
In S5, if verification input is incorrect, point out to re-enter, if verification input is correct, enter next operation.
6. the method for the dynamic generation web interface as claimed in claim 1 based on flexible form, it is characterised in that in step
In S4, card page load step is as follows：
Step S401, list configuration is read according to function numbering；
Step S402, detail page input field is rendered according to card display field；
Step S403, according to operation table query traffic data；
Step S404, the control of input frame is rendered according to the element type and input type of field；
Step S405, according to the data in input setting initialization control；
Step S406, according to whether read-only control input whether editable；
Whether step S407, be whether sky control input allows for sky according to card；
Step S408, button is initialized according to list card button；
Step S409, completes the loading of card interface.
7. the method for the dynamic generation web interface as claimed in claim 6 based on flexible form, it is characterised in that the card
The piece page is loaded by after double-click table data.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710305804.6A CN107203595B (en) | 2017-05-03 | 2017-05-03 | Method for dynamically generating web interface based on free form |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710305804.6A CN107203595B (en) | 2017-05-03 | 2017-05-03 | Method for dynamically generating web interface based on free form |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN107203595A true CN107203595A (en) | 2017-09-26 |
| CN107203595B CN107203595B (en) | 2021-11-30 |
Family
ID=59906330
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710305804.6A Active CN107203595B (en) | 2017-05-03 | 2017-05-03 | Method for dynamically generating web interface based on free form |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107203595B (en) |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107886280A (en) * | 2017-11-29 | 2018-04-06 | 深圳市易达云科技有限公司 | A kind of order operation item intelligently filters display methods |
| CN108170706A (en) * | 2017-11-22 | 2018-06-15 | 链家网（北京）科技有限公司 | A kind of information collection page generation method and device |
| CN109165266A (en) * | 2018-09-03 | 2019-01-08 | 中国平安人寿保险股份有限公司 | List generation method, device, computer equipment and storage medium |
| CN112004160A (en) * | 2020-07-15 | 2020-11-27 | 福建新大陆通信科技股份有限公司 | Interface interaction method, device and medium based on page list control |
| CN112465620A (en) * | 2020-12-30 | 2021-03-09 | 广东金赋科技股份有限公司 | Terminal form filling service linkage method and device based on dynamic form and rule engine |
| CN112711416A (en) * | 2020-12-31 | 2021-04-27 | 北方工业大学 | APP interface customization implementation method |
| CN113110315A (en) * | 2021-03-31 | 2021-07-13 | 深圳市法拉第电驱动有限公司 | Upper computer system for dynamically loading control based on WPF and control method thereof |
| CN114356472A (en) * | 2021-12-03 | 2022-04-15 | 浙江臻善科技股份有限公司 | System interface differential dynamic rendering method |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101241434A (en) * | 2008-03-04 | 2008-08-13 | 浪潮集团山东通用软件有限公司 | Form self-defining method |
| US20120047426A1 (en) * | 2009-05-05 | 2012-02-23 | Suboti, Llc | System, method and computer readable medium for recording authoring events with web page content |
| CN102737128A (en) * | 2012-06-20 | 2012-10-17 | 深圳市远行科技有限公司 | Dynamic webpage processing method and device based on browser |
| CN102789382A (en) * | 2012-06-28 | 2012-11-21 | 用友软件股份有限公司 | System and method for generating and running form |
| CN103631570A (en) * | 2012-08-21 | 2014-03-12 | 镇江雅迅软件有限责任公司 | Form self-definition method |
| US20140173405A1 (en) * | 2012-12-19 | 2014-06-19 | Google Inc. | Using custom functions to dynamically manipulate web forms |
| CN104732306A (en) * | 2013-12-19 | 2015-06-24 | 北京索为高科***技术有限公司 | Rapid development system for service application system and method |
| CN104881490A (en) * | 2015-06-10 | 2015-09-02 | 中科宇图天下科技有限公司 | WEB form data access method and system |
| CN105630502A (en) * | 2015-12-28 | 2016-06-01 | 武汉传神信息技术有限公司 | Method and system for generating dynamic form |
-
2017
- 2017-05-03 CN CN201710305804.6A patent/CN107203595B/en active Active
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101241434A (en) * | 2008-03-04 | 2008-08-13 | 浪潮集团山东通用软件有限公司 | Form self-defining method |
| US20120047426A1 (en) * | 2009-05-05 | 2012-02-23 | Suboti, Llc | System, method and computer readable medium for recording authoring events with web page content |
| CN102737128A (en) * | 2012-06-20 | 2012-10-17 | 深圳市远行科技有限公司 | Dynamic webpage processing method and device based on browser |
| CN102789382A (en) * | 2012-06-28 | 2012-11-21 | 用友软件股份有限公司 | System and method for generating and running form |
| CN103631570A (en) * | 2012-08-21 | 2014-03-12 | 镇江雅迅软件有限责任公司 | Form self-definition method |
| US20140173405A1 (en) * | 2012-12-19 | 2014-06-19 | Google Inc. | Using custom functions to dynamically manipulate web forms |
| CN104732306A (en) * | 2013-12-19 | 2015-06-24 | 北京索为高科***技术有限公司 | Rapid development system for service application system and method |
| CN104881490A (en) * | 2015-06-10 | 2015-09-02 | 中科宇图天下科技有限公司 | WEB form data access method and system |
| CN105630502A (en) * | 2015-12-28 | 2016-06-01 | 武汉传神信息技术有限公司 | Method and system for generating dynamic form |
Non-Patent Citations (4)
| Title |
|---|
| JOSÉ A. MACÍAS 等: "Customization of Web applications through an intelligent environment exploiting logical interface descriptions", 《IEEE》 * |
| 基于模型驱动的WEB表单开发工具的设计与实现: "李洪营", 《中国优秀硕士学位论文全文数据库 信息科技辑》 * |
| 王琛: "模板化的Web列表页面信息自动抽取方法的研究", 《现代计算机（普及版）》 * |
| 舒红平 等: "基于JAVA的WEB页面自动生成***", 《成都信息工程学院学报》 * |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108170706A (en) * | 2017-11-22 | 2018-06-15 | 链家网（北京）科技有限公司 | A kind of information collection page generation method and device |
| CN107886280A (en) * | 2017-11-29 | 2018-04-06 | 深圳市易达云科技有限公司 | A kind of order operation item intelligently filters display methods |
| CN109165266A (en) * | 2018-09-03 | 2019-01-08 | 中国平安人寿保险股份有限公司 | List generation method, device, computer equipment and storage medium |
| CN112004160A (en) * | 2020-07-15 | 2020-11-27 | 福建新大陆通信科技股份有限公司 | Interface interaction method, device and medium based on page list control |
| CN112004160B (en) * | 2020-07-15 | 2022-04-05 | 福建新大陆通信科技股份有限公司 | Interface interaction method, device and medium based on page list control |
| CN112465620A (en) * | 2020-12-30 | 2021-03-09 | 广东金赋科技股份有限公司 | Terminal form filling service linkage method and device based on dynamic form and rule engine |
| CN112465620B (en) * | 2020-12-30 | 2023-12-19 | 广东金赋科技股份有限公司 | Terminal form filling service linkage method and device based on dynamic form and rule engine |
| CN112711416A (en) * | 2020-12-31 | 2021-04-27 | 北方工业大学 | APP interface customization implementation method |
| CN113110315A (en) * | 2021-03-31 | 2021-07-13 | 深圳市法拉第电驱动有限公司 | Upper computer system for dynamically loading control based on WPF and control method thereof |
| CN114356472A (en) * | 2021-12-03 | 2022-04-15 | 浙江臻善科技股份有限公司 | System interface differential dynamic rendering method |
Also Published As
| Publication number | Publication date |
|---|---|
| CN107203595B (en) | 2021-11-30 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107203595A (en) | A kind of method of the dynamic generation web interface based on flexible form | |
| CN102779040B (en) | A kind of method and apparatus generating customizing form | |
| KR102007005B1 (en) | Device, system, and method of website building by utilizing data lists | |
| CN105511873B (en) | User interface control display method and device | |
| CN114035773B (en) | Configuration-based low-code form development method, system and device | |
| US7581169B2 (en) | Method and apparatus for form automatic layout | |
| US20050216834A1 (en) | Method, apparatus, and computer-readable medium for dynamically rendering a user interface menu | |
| CN101005681A (en) | Interface automatic forming method and interface automatic forming system | |
| CN104699681A (en) | Data processing method based on metadata base | |
| CN106021394A (en) | Website construction method and apparatus | |
| CN103777936B (en) | The implementation method and device of the user variable level view of ERP lists | |
| CN113535176A (en) | Page generation method and device | |
| CN109933311A (en) | A kind of information system creation method and relevant apparatus | |
| US9779077B2 (en) | Representation of data records in graphic tables | |
| CN114239524A (en) | Questionnaire generation method, questionnaire generation device, computer equipment and storage medium | |
| CN114741079B (en) | Software development method, platform, electronic device and computer readable storage medium | |
| CN115186643A (en) | Self-defined configuration method, device, equipment and storage medium of sign-up template | |
| CN106886435A (en) | The loading method and device of widget | |
| US9514249B2 (en) | Re-arrangeable, and customizable access controllable data tree hierarchies, and methods of use thereof | |
| US20160125001A1 (en) | Automatic screen generation device, automatic screen generation program, and automatic screen generation method | |
| TWI677822B (en) | System and method for managing web interface, readable storage medium | |
| CN116051061A (en) | Information processing method, information processing device, electronic equipment and readable storage medium | |
| CN111199138A (en) | Method, system, server and storage medium for stroking bullet screen containing Emoji expression by using QML (QML) | |
| CN110968311A (en) | Front-end page construction method and device and electronic equipment | |
| CN114692581A (en) | Electronic form sub-table display method, device, equipment 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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |