CN117130601A - Visual customization development system - Google Patents

Abstract

The application discloses a visual customization development system which comprises a platform design unit, a form design unit, a list unit, a toolbar design unit, a tree list design unit and a frame design unit, wherein the platform design unit is used for displaying a form; the form design unit comprises a registration logic design module, a registration web control design module, a permission setting module and a dynamic parameter setting module; the register logic design module carries out logic design registration according to the interface information in the interface file; the registration web control design module is used for compiling corresponding tld files under the META-INF folder, compiling the files into jar files and finishing control registration; the permission setting module is used for setting the invoked permission range through permission parameters; and the dynamic parameter setting module is used for uniquely displaying the page according to the URL parameter setting data. According to the application, an interface is provided through a form design unit, and the inheritance TsgSupport class and the TagShow interface ensure that a source code or a form design file of a user provides a writing interface in the design process; the visual self-design can be achieved by realizing the visual customization development process.

Description

Visual customization development system

Technical Field

The application belongs to the technical field of software design, and particularly relates to a visual customization development system.

Background

Enterprises often have the following problems in software development: 1. the software development period is short, and the stability requirement is high: with the urgent need of the current market environment, the method has higher expectations for the delivery cycle of the software and the stability of the software. 2. The technician level is high: based on the demands of rapid delivery, complex service, stable performance and the like, the requirements on the technical level capability of developers are continuously raised. 3. The development cost performance is low, and a large number of repeated codes are constructed to cause resource waste: in actual software development, there are a large number of similar pages at the page end, and the page layout and processing logic are relatively fixed. On the server side, based on the object-oriented development mode, the basic service code running mode of each object is consistent, so that a large number of repeated code development is brought.

In the chinese published patent application No. CN202111145979.8, a low-code front-end development framework based on visual drag and customizable is disclosed, comprising a component designer: the system is used for visually designing a custom component, uploading a component icon and a component code, and defining a component event basic attribute and a preview component; component library: the system is used for managing built-in components and custom components of the organization framework, and storing component information into a database; form designer: based on the component library, a form is designed in a visual dragging mode, and components and component attribute information contained in the form are stored in a database; list designer: the data column and layout information displayed by the data table corresponding to the design form are used for storing the design information into a database; a page renderer: the method is used for creating a renderer for the page and the components on the page, so that the page effect can be customized; page designer: the page designer comprises a single page designer and a multi-page designer; the single page designer is used for combining the form, the list and the page renderer designed in the previous step to form a visual page; the multi-page designer forms the skip of page operation through menus and buttons, assembles a single page to complete the design of the whole functional layout of the application system, and stores page design data into a database; a code generator: generating actual executable codes and related static resource files from page design data generated by a page designer and submitting the actual executable codes and the related static resource files to a code warehouse; the publishing server: receiving an issuing instruction, downloading codes from a code warehouse, constructing a compiling environment, and executing compiling and deployment; application execution environment: the publishing server deploys the compiled deployable packages to a running environment, wherein the running environment contains middleware required by the running of the application. The quick response to the service is realized, and meanwhile, customizable elements are added to the low-code development process, including component customization opening, page and component rendering design facing developers, and secondary development of generated codes.

The disadvantage of the existing patent is that although the low code development process adds customizable elements, the lack of a write interface to the user's source code or form design files in the custom development process results in the inability of the form design part of the user to achieve custom development.

Disclosure of Invention

Aiming at the problem that the existing visual customized development system lacks a writing interface for source codes or form design files of users in the customized development process, the application provides the visual customized development system.

In order to achieve the technical purpose, the application adopts the following technical scheme:

a visual customization development system comprises a platform design unit, a form design unit, a list unit, a toolbar design unit, a tree list design unit and a frame design unit;

the platform design unit is used for adding a platform menu and switchable platform tool items;

the form design unit comprises a registration logic design module, a registration web control design module, a permission setting module and a dynamic parameter setting module;

the register logic design module finds the corresponding relation between the interfaces and the implementation classes through configuration information, acquires a class file and an interface file from the jar packet according to the corresponding relation, and carries out logic design registration according to the interface information in the interface file;

registering a web control design module, writing a corresponding tld file under a META-INF folder, associating according to tagclass label content and class in the tld file, inheriting TsgSupport class and TagShow interface at the same time, compiling into a jar file, and finishing control registration;

the permission setting module is used for setting the invoked permission range through permission parameters;

the dynamic parameter setting module is used for setting the unique display page according to the URL parameter;

the list unit comprises a data column design module, a primary key design module, a button setting module and a function display setting module;

the data column design module generates column field information data according to the dynamic SQL statement;

the main key setting module determines a main key according to the column field information and provides a main key selectable key;

the button setting module dynamically adds buttons and sets js events triggered by the buttons;

the function display setting module is used for setting whether to display a sequence number field and whether to export an Excel form;

the toolbar design unit is used for hanging controls of the form design unit, the list unit, the tree list unit and the frame design unit;

the tree list design unit generates a tree list according to configuration, and triggers js method by selecting leaf nodes;

and the frame design unit provides various structures for control display.

Further, the detailed steps of the register logic design module processing flow include:

writing interface interfaces and class inherited from the interfaces, compiling into jar files, logically registering, finding out corresponding association through reflection technology, and importing the association into a system; and generating a server-side method corresponding to the button in the form design unit.

Further, the detailed steps of registering the web control design module process flow include:

writing a corresponding tld file under the META-INF folder, and inheriting the TsgSupport class and the TagShow interface at the same time; compiling into jar files; and registering the control, reading out control related information by reading a tld file in the jar package, and adding the control related information into a system to generate a secondary development control in the form design unit.

Further, the overall configuration flow of the form design unit includes:

basic information configuration: the form control source information master library,

the data information includes: acquiring data through a table and binding the form control, acquiring data through calling class and binding the form control, needing to be inherited from an interface com.

The data types include: relobj: determining to acquire data for class, and table: determining to acquire data for the data table, and enabling the client script to: js of page call is bound from client script;

control related configuration: configuring html codes and controls in control registration, wherein hidden controls are hidden attribute controls in a page, and button controls are related configurations of buttons in the page;

and (3) authority configuration: the form design unit is provided with a plurality of authority codes, each authority code corresponds to 1 group of authorities, and each group of authority codes corresponds to a control id and control reading setting information;

dynamic parameter configuration: the dynamic parameters are effective when the data type in the basic information configuration is a table, the dynamic parameters comprise a plurality of groups of keys and values, the values are parameters transmitted by pages, the keys are fields in a data table, and when the values are transmitted, a form unit searches data in the data table and binds page controls;

form design element links are saved and generated.

Further, the overall configuration flow of the list unit includes:

basic configuration: reading SQL from a basic database, and list a js method set called by a unit;

list configuration: writing SQL, completing list configuration, and expressing parameters by using EL expression;

primary key related settings: primary key field: for determining the column name of the selected column unique primary key,

setting a selection frame: a single selection frame or multiple selection frames are used in the selection column, and a selection frame of data in the dynamic SQL is determined according to the data in the initialized SQL;

function display setting: setting a time period: displaying time periods in the list, and inquiring data according to the time periods;

column information settings include basic settings, searches, quick queries, titles, merging and expanding column information designs;

button information setting: setting a button name, an icon, a button display sequence and a click event; the filled JS method can call a JS page configured by a client script;

and a list saving unit for generating list URL information.

Further, a tree item is set in the tree list design unit, and the tree item includes:

grade: the tree-shaped item ordering 0 is the top level;

name: tree item names;

type (2): non-recursive and recursive;

node data ID: binding a corresponding column value in the Sql information;

node data name: binding names of corresponding columns in the Sql information;

style information: the pattern used by the corresponding node;

target frame: when clicking a node, triggering a link opening operation on which frame;

icon: icons of corresponding nodes;

whether or not to asynchrony: whether data is asynchronously loaded;

opening an icon: triggering js method when clicking the node;

closing the icon: a js method triggered when the node is closed;

linking: URL links corresponding to the nodes support EL expression replacement;

the method for selecting and executing comprises the following steps: a js method triggered when a node is selected;

a database to which data information belongs: a data source database;

data information Sql information: SQL statements of the data are obtained, supporting EL expression substitution, special variables for recursion.

Further, the toolbar items of the toolbar design unit include toolbar names: toolbar definition name, link: the tool bars are correspondingly linked and sequenced, and the tool bars are correspondingly sequenced; parameters received by the toolbar are forwarded to a URL corresponding to the toolbar item, and EL expression replacement is supported.

For example, a.toola= 1&b = 2&c =3 toolbar item corresponds to URL reception

a.forma＝1&b＝2&c＝3

b.querya＝1&b＝2&c＝3

Further, the frame configuration of the frame design unit includes a frame name, a frame unit-defined name;

the structure type, the up-down structure, the left-right structure and the mixed structure; a hybrid left (up and down) structure;

frame item type, frame structure portion;

frame item width, frame corresponding width or height;

the frame item links, frames correspond to types of URLs, supporting EL expression replacement.

Compared with the prior art, the application has the following beneficial effects:

the method comprises the steps that a form design unit is used for providing an interface, inheriting a TsgSupport class and a TagShow interface to ensure that a source code or a form design file of a user provides a writing interface in a customization development process; each node can achieve visual self-design in the visual custom development process.

And meanwhile, the list unit provides functions such as data column design, primary key and button design, function display setting and the like, so that the whole-course visual customized design of the list design is ensured.

Drawings

FIG. 1 is an overall frame diagram of a visual custom development system in accordance with an embodiment of the present application;

FIG. 2 is a detailed flow chart of a register logic design module according to an embodiment of the present application;

FIG. 3 is a detailed flow chart of a registration web control design module in an embodiment of the application;

FIG. 4 is an overall flow chart of a form design unit in an embodiment of the application;

FIG. 5 is an overall flowchart of a list unit in an embodiment of the present application.

Detailed Description

The application will be further described with reference to examples and drawings, to which reference is made, but which are not intended to limit the scope of the application.

As shown in fig. 1, the present embodiment provides a visual custom development system, which includes a platform design unit, a form design unit, a list unit, a toolbar design unit, a tree list design unit, and a framework design unit;

the platform design unit is used for adding a platform menu and switchable platform tool items; all links of the form design unit, the list unit, the toolbar design unit, the tree list design unit, and the frame design unit are provided on the platform design unit.

The form design unit comprises a registration logic design module, a registration web control design module, a permission setting module and a dynamic parameter setting module;

the register logic design module reflects class files according to the jar file package and sets the class files as interface interfaces;

registering a web control design module, reflecting class according to tld in the jar file package, and inheriting TsgSupport class and TagShow interface at the same time;

the permission setting module is used for setting the invoked permission range through permission parameters;

the dynamic parameter setting module is used for setting the unique display page according to the URL parameter;

the list unit comprises a data column design module, a primary key design module, a button setting module and a function display setting module;

the data column design module generates column field information data according to the dynamic SQL statement;

the main key setting module determines a main key according to the column field information and provides a main key selectable key;

the button setting module dynamically adds buttons and sets js events triggered by the buttons;

the function display setting module is used for setting whether to display a sequence number field and whether to export an Excel form;

the toolbar design unit is used for hanging controls of the form design unit, the list unit, the tree list unit and the frame design unit;

the tree list design unit generates a tree list according to configuration and triggers js page control;

and the frame design unit provides various structures for control display. The frame configuration of the frame design unit includes: frame name: names of frame element definitions

Type (2): an up-down structure, a left-right structure, and a left (up-down) structure;

frame item-type: a frame structure portion;

frame item-width: the frame corresponds to the width or the height;

frame item-link: the frame corresponds to the type of URL, supporting EL expression replacement.

As shown in fig. 2, the detailed steps of the register logic design module process flow include:

writing interface interfaces and class inherited from the interfaces, compiling into jar files, logically registering, finding out corresponding association through reflection technology, and importing the association into a system; and generating a server-side method corresponding to the button in the form design unit.

As shown in fig. 3, the detailed steps of the registration web control design module process flow include:

writing a corresponding tld file under the META-INF folder, and inheriting the TsgSupport class and the TagShow interface at the same time; compiling into jar files; and registering the control, reading out control related information by reading a tld file in the jar package, and adding the control related information into a system to generate a secondary development control in the form design unit.

As shown in fig. 4, the overall configuration flow of the form design unit includes:

basic information configuration: the form control source information master library,

the data information includes two types: acquiring data through a table and binding the form control, acquiring data through calling class and binding the form control, needing to be inherited from an interface com.

The data types include two types: relobj is determined to acquire data for class, table is determined to acquire data for data table, client script is bound with js called by page from client script;

control related configuration: configuring html codes and controls in control registration, wherein the hidden controls are hidden attribute controls in a page, the button controls are related configurations of buttons in the page, and the related configurations of the buttons comprise 3 configurations:

basic information: a main key, a name and an icon,

client configuration: the button calls the client method first, the methods can be multiple, the methods are called sequentially, the true is returned to continue to call downwards, if the last method returns true, the server method is triggered,

server configuration: the method in the logic registration is mainly configured, and the method is sequentially called until the method is finished;

and (3) authority configuration: the form design unit is provided with a plurality of authority codes, each authority code corresponds to 1 group of authorities, each group of authority codes corresponds to a control id and control reading setting information,

the control reading setting information includes 3 kinds corresponding to control registration: 0 is not displayed, 1 is read-only, 2 is read-write, and simultaneously reading and setting support EL expression logic judgment; for example, when $ { param. Inid-! = "& null-! Control invokes current read-write permission when =param.init } returns true.

Dynamic parameter configuration: the dynamic parameters are effective when the data type in the basic information configuration is a table, the dynamic parameters comprise a plurality of groups of keys and values, the values are parameters transmitted by pages, the keys are fields in a data table, and when the values are transmitted, a form unit searches data in the data table and binds page controls;

form design element links are saved and generated.

As shown in fig. 5, the list unit overall configuration flow includes:

basic configuration: reading SQL from a basic database, and list a js method set called by a unit;

list configuration: handwriting SQL, completing list configuration, and expressing parameters by adopting an EL expression;

default parameters: when no relevant parameters in the url address can be replaced with default parameters,

ordering field: the dynamic SQL is assembled twice, for example, select from () as t order by ordering field values.

Primary key related settings: primary key field: for determining the column name of the selected column unique primary key,

setting a selection frame: whether a single box or multiple box setting is used in the selection column,

initializing SQL: determining a selection box of data in the dynamic SQL according to the data in the initialized SQL; the default is selected or not available.

Function display setting: setting a time period: the time periods are displayed in a list, data can be queried for time periods,

display setting: whether the column button functional area is displayed or not comprises (navigation, button, toolbar, query bar, title, serial number, quick query, common query, query toolbar, excel is derived, and loading is initialized)

Column information setting: the method comprises the following steps: column field column name in dynamic SQL,

column name: the name to which the column field corresponds,

data summary contains Group function (AVG, SUM, DISCOUNT, COUNT, MIN, MAX)

Data type: the character string, number, date,

searching: type (2): an input frame, a drop-down frame, a date frame,

sequencing: the order in which the search boxes are ordered,

and (3) displaying: whether or not it is to be set to display,

data type: SQL (configured by SQL)

SQL information: the column values in the dynamic SQL are converted into display values through SQL information in the search, such as dynamic SQL: select '111' as code, SQL information: select '111' as code, 'am' as value

The final dynamic SQL column code row '111' will be displayed as 'morning'

Quick query: quick query is whether a column in dynamic SQL uses quick query, user name

And (3) displaying: yes, no

Display name: yes, no

The expression is displayed: yes, no

Title: width: setting the display column width

Sequencing: setting display column ordering

The alignment mode is as follows: left, middle and right

And (3) displaying: whether or not to display the current column

Secondary header: the newly built header above the column is combined with the same two-level header

Editing: whether the current column is editable

Combining: whether to combine: whether or not the current column information can be column-merged

Whether or not to rely on: yes, no

Rely on column information: and dividing lines, combining and expanding column information according to the dependent columns except other column information of the current column in the dynamic SQL: principle of: by column data graphs in "dynamic SQL" (11)

Dynamic SQL data such as:

1as id,1|2|3as kuozhanid

2as id,2|1|1as kuozhanid

expansion data such as:

1|2|3as kuozhanid,1as titid,Aas name2|1|1as kuozhanid,2as titid,B as name1|2|3as kuozhanid,3as titid,C as name

extension header data such as:

1as tid, week 1as value

2as tid, week 2as value

3as tid, week 3as value

Finally, the data are combined in the program

Final display effect

Id, week 1, week 2, week 3

1， A, , C

2,, B,

Button information setting: name: the button displays a name icon: button display icon

Click event: the filled JS method will call JS configured by "client script

Sequencing: a button display sequence;

and a list saving unit for generating list URL information.

Further, a tree item is set in the tree list design unit, and the tree item includes:

grade: the tree items are ordered 0 as the top level

Name: tree item name type: non-recursive (result set is obtained only from Sql statement loop 1 time in Sql information)

Recursion (recursion of Sql statement dynamic will in Sql information based on node data ID

Replacement of tree parent with node data ID

Examples: SELECT cc_idas id, cc_ nameAS name FROM sc _common code

WHERE CC_ParentID＝'${tree.parent}'orderby CC_index

Options: unfolding, not unfolding (default unfolding child node or not unfolding child node)

Node data ID binding corresponding column value in Sql information

Node data name: binding names of corresponding columns in Sql information

Style information: style for corresponding node

Target frame: which frame triggers the open link operation when clicking on a node

Icon: icon of corresponding node

Whether or not to asynchrony: whether or not to asynchronously load data

Opening an icon: js method triggered when clicking node

Closing the icon: js method triggered when closing node

Linking: URL links corresponding to nodes supporting EL expression replacement

The method for selecting and executing comprises the following steps: js method triggered when node is selected

Data information-belonging database: data source database

Data information-type: SQL (SQL sentence)

Data information-Sql information: SQL statements of the data are obtained, EL expression substitution is supported, and $ { tree. Parent } is a special variable for recursion.

The toolbar items of the toolbar design unit include toolbar names: toolbar definition name, link: the tool bars are correspondingly linked and sequenced, and the tool bars are correspondingly sequenced; parameters received by the toolbar are forwarded to a URL corresponding to the toolbar item, and EL expression replacement is supported.

For example, a.toola= 1&b = 2&c =3 toolbar item corresponds to URL reception

a.forma＝1&b＝2&c＝3

b.querya＝1&b＝2&c＝3

The frame configuration of the frame design unit includes a frame name, a frame unit defined name;

the structure type, the up-down structure, the left-right structure and the mixed structure; a hybrid left (up and down) structure;

frame item type, frame structure portion;

frame item width, frame corresponding width or height;

the frame item links, frames correspond to types of URLs, supporting EL expression replacement.

Compared with the prior art, the application has the following beneficial effects:

the method comprises the steps that a form design unit is used for providing an interface, inheriting a TsgSupport class and a TagShow interface to ensure that a source code or a form design file of a user provides a writing interface in a customization development process; each node can achieve visual self-design in the visual custom development process.

And meanwhile, the list unit provides functions such as data column design, primary key and button design, function display setting and the like, so that the whole-course visual customized design of the list design is ensured.

The visual customization development system provided by the application is described in detail above. The description of the specific embodiments is only intended to aid in understanding the method of the present application and its core ideas. It should be noted that it will be apparent to those skilled in the art that various modifications and adaptations of the application can be made without departing from the principles of the application and these modifications and adaptations are intended to be within the scope of the application as defined in the following claims.

Claims (8)

1. The visual customization development system is characterized by comprising a platform design unit, a form design unit, a list unit, a toolbar design unit, a tree list design unit and a frame design unit;

the platform design unit is used for adding a platform menu and switchable platform tool items;

the form design unit comprises a registration logic design module, a registration web control design module, a permission setting module and a dynamic parameter setting module;

the register logic design module finds the corresponding relation between the interface and the implementation class through the configuration information, the system acquires a class file and an interface file from the jar packet according to the corresponding relation, and the system carries out logic design registration according to the interface information in the interface file;

registering a web control design module, writing a corresponding tld file under a META-INF folder, associating according to tagclass label content and class in the tld file, inheriting TsgSupport class and TagShow interface at the same time, compiling into a jar file, and finishing control registration;

the permission setting module is used for setting the invoked permission range through permission parameters;

the dynamic parameter setting module is used for setting the unique display page according to the URL parameter;

the list unit comprises a data column design module, a primary key design module, a button setting module and a function display setting module;

the data column design module generates column field information data according to the dynamic SQL statement;

the main key setting module determines a main key according to the column field information and provides a main key selectable key;

the button setting module dynamically adds buttons and sets js events triggered by the buttons;

the function display setting module is used for setting whether to display a sequence number field and whether to export an Excel form;

the toolbar design unit is used for hanging controls of the form design unit, the list unit, the tree list unit and the frame design unit;

the tree list design unit generates a tree list according to configuration and triggers js page control;

and the frame design unit provides various structures for control display.

2. The visualization customization development system of claim 1, wherein the detailed steps of the registration logic design module process flow include:

writing interface interfaces and class inherited from the interfaces, compiling into jar files, logically registering, finding out corresponding association through reflection technology, and importing the association into a system; and generating a server-side method corresponding to the button in the form design unit.

3. The visualization customization development system of claim 2, wherein registering detailed steps of the web control design module process flow includes:

writing a corresponding tld file under a META-INF folder, associating according to tagclass label content and class in the tld file, inheriting TsgSupport class and tagShow interface at the same time, compiling into a jar file, and finishing control registration; and reading the control related information by reading the tld file in the jar package and adding the control related information into a system to generate a secondary development control in the form design unit.

4. A visual customization development system in accordance with claim 3, wherein the form design unit overall configuration flow includes:

basic information configuration: the form control source information master library comprises the following data information: the data is acquired through the table and the form control is bound, the data is acquired through calling the class and the form control is bound, and the data needs to be inherited from an interface com. relobj: determining to acquire data for class, and table: determining to acquire data for the data table, and enabling the client script to: js of page call is bound from client script;

control related configuration: configuring html codes and controls in control registration;

and (3) authority configuration: the form design unit is provided with a plurality of authority codes, each authority code corresponds to 1 group of authorities, and each group of authority codes corresponds to a control id and control reading setting information;

dynamic parameter configuration: the dynamic parameters are effective when the data type in the basic information configuration is a table, the dynamic parameters comprise a plurality of groups of keys and values, the values are parameters transmitted by pages, the keys are fields in a data table, and when the values are transmitted, a form unit searches data in the data table and binds page controls;

form design element links are saved and generated.

5. The visualization customization development system of claim 4, wherein the list element overall configuration process includes:

basic configuration: reading SQL from a basic database, and calling js method set by a list unit;

list configuration: writing SQL, completing list configuration, and expressing parameters by using EL expression;

primary key related settings: primary key field: column name for determining the unique primary key of the selection column, selection box setting: a single selection frame or multiple selection frames are used in the selection column, and a selection frame of data in the dynamic SQL is determined according to the data in the initialized SQL;

function display setting: setting a time period: displaying time periods in the list, and inquiring data according to the time periods;

column information setting: the method comprises basic setting, searching, quick inquiring, title, merging and expanding column information design;

button information setting: setting a button name, an icon, a button display sequence and a clicking event, and calling a JS page configured by a client script by a filled JS method;

and a list saving unit for generating list URL information.

6. The visual customization development system according to claim 5, wherein a tree item is provided in the tree list design unit, the tree item including:

ranking, namely ranking tree items;

name, tree item name;

type, non-recursive and recursive;

node data ID, binding corresponding column value in Sql information;

node data names, names of corresponding columns in the Sql information are bound;

style information corresponding to a style used by the node;

the target frame is used for triggering the link opening operation when clicking the node;

icons corresponding to icons of nodes;

whether the data is asynchronously loaded or not;

opening an icon, and clicking a js method triggered when a node is clicked;

closing the icon, and triggering js method when closing the node;

links, URL links corresponding to the nodes, supporting EL expression replacement;

selecting an executing method, and selecting a js method triggered when a node is selected;

a database to which the data information belongs, a data source database;

data information Sql information, SQL sentences of data are acquired, EL expression replacement is supported, and special variables are used for recursion.

7. The visual customization development system of claim 6, wherein the toolbar items of the toolbar design element include toolbar names: the toolbar defines names, the toolbar is correspondingly linked, and the toolbar is correspondingly ordered; parameters received by the toolbar are forwarded to a URL corresponding to the toolbar item, and EL expression replacement is supported.

8. The visual customization development system of claim 7, wherein the frame configuration of the frame design unit includes a frame name, the frame unit defining the name;

the structure type, the up-down structure, the left-right structure and the mixed structure;

frame item type, frame structure portion;

frame item width, frame corresponding width or height;

the frame item links, frames correspond to types of URLs, supporting EL expression replacement.