CN113590103A - Method, computer device and storage medium for realizing graphical code-free development user interface - Google Patents
Method, computer device and storage medium for realizing graphical code-free development user interface Download PDFInfo
- Publication number
- CN113590103A CN113590103A CN202010368258.2A CN202010368258A CN113590103A CN 113590103 A CN113590103 A CN 113590103A CN 202010368258 A CN202010368258 A CN 202010368258A CN 113590103 A CN113590103 A CN 113590103A
- Authority
- CN
- China
- Prior art keywords
- page
- event stream
- preset
- user interface
- user
- 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
- 238000000034 method Methods 0.000 title claims abstract description 70
- 238000011161 development Methods 0.000 title claims abstract description 35
- 238000010586 diagram Methods 0.000 claims abstract description 36
- 238000012545 processing Methods 0.000 claims abstract description 29
- 230000003068 static effect Effects 0.000 claims description 14
- 238000013500 data storage Methods 0.000 claims description 12
- 230000000007 visual effect Effects 0.000 claims description 10
- 230000004044 response Effects 0.000 claims description 9
- 238000001514 detection method Methods 0.000 claims description 4
- 230000008569 process Effects 0.000 description 17
- 238000004891 communication Methods 0.000 description 9
- 238000004590 computer program Methods 0.000 description 7
- 238000013461 design Methods 0.000 description 4
- 230000003993 interaction Effects 0.000 description 4
- 230000008859 change Effects 0.000 description 3
- 238000010276 construction Methods 0.000 description 3
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 238000000354 decomposition reaction Methods 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 230000006399 behavior Effects 0.000 description 1
- 230000008094 contradictory effect Effects 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 238000013468 resource allocation Methods 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
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/34—Graphical or visual programming
-
- 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
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Abstract
The invention provides a method for realizing a graphical code-free development user interface. The method comprises the following steps: generating an event stream component graph and a page component graph required by constructing a user interface according to a preset processing logic programming statement frame adopted by user interface software development and page elements required by the preset processing logic programming statement frame; responding to the operation of the user on the page component graph and the event stream component graph, and correspondingly configuring an event stream schematic diagram according to a preset configuration rule; analyzing the event flow schematic diagram according to a preset analysis rule to obtain corresponding configuration information, wherein the configuration information comprises information of each node, page elements configured by each node and a sequence relation of each node; and generating computer executable codes according to the configuration information and the preset processing logic programming statement framework. In addition, the invention also provides computer equipment and a storage medium.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a method, computer equipment and a storage medium for realizing a graphical code-free development user interface.
Background
When a computer program development team (e.g., one or more design architects, developers, programmers, coders, etc.) begins to perform computer program development, such as Application (App), the development team communicates with the demanders, then creates schematics of the computer program (e.g., business flow diagrams, architecture diagrams, etc.) using charting software, and passes the diagrams to the corresponding developers (e.g., coders, programmers). Developers then need to spend considerable time reviewing these schematics to identify aspects of the design architecture (e.g., components, structure of components, interaction of components, and/or behavior of components). After reviewing the design architecture, developers began creating code structures for computer programs (e.g., writing code from scratch).
However, while creating the code structure, developers are unaware and/or unfamiliar with the business scenario of the demander, cannot deeply and comprehensively understand the business needs of the enterprise, and often cannot develop application software suitable for the demander.
Disclosure of Invention
The invention provides a method, computer equipment and storage medium for realizing a graphical code-free development user interface, a developer can generate the user interface of required software only by creating a presentation intention without creating codes, and the requirements are more easily met.
In a first aspect, the present invention provides a method for implementing a graphical code-free development user interface, the method comprising:
generating an event stream component graph and a page component graph required by constructing a user interface according to a preset processing logic programming statement frame adopted by user interface software development and page elements required by the preset processing logic programming statement frame;
responding to the operation of a user on the page component graph and the preset event stream component graph, and correspondingly configuring an event stream schematic diagram according to a preset configuration rule, wherein the event stream schematic diagram comprises interconnected nodes and page elements required by the nodes, the event stream component is associated with the nodes, the nodes are associated with the event stream programming statement frame, and the page elements are stored by adopting a tree-shaped storage structure;
analyzing the event flow schematic diagram according to a preset analysis rule to obtain corresponding configuration information, wherein the configuration information comprises information of each node, page elements configured by each node and a sequence relation of each node; and
and generating computer executable codes according to the configuration information and the preset processing logic programming statement framework.
In a second aspect, the present invention also provides a computer device, comprising:
a memory for storing a computer executable program; and
a processor for executing the executable program to implement the method of graphical code-free development user interface described above.
In a third aspect, the present invention provides a storage medium for storing a computer-executable program for execution by a processor to implement the method of graphical code-free development user interface described above.
The method, the computer equipment and the storage medium for realizing the graphical code-free development user interface can be used for an event flow schematic diagram configured by a user, and can generate an executable code corresponding to the user interface according to the event flow schematic diagram, do not need to create the code and can meet the requirement more easily.
Drawings
Fig. 1 is a system architecture diagram of a graphical code-free development user interface according to a first embodiment of the present invention.
Fig. 2 is a flowchart illustrating a method for implementing a graphical code-free development user interface according to a first embodiment of the present invention.
Fig. 3 is a schematic diagram of a configuration interface according to a first embodiment of the present invention.
Fig. 4 is a schematic diagram of a tree storage structure according to an embodiment of the present invention.
Fig. 5 is a schematic sub-flow diagram of a method for implementing a graphical code-free development user interface according to a first embodiment of the present invention.
Fig. 6 is a schematic diagram of a visualization graph of front-end software development according to the first embodiment of the present invention.
Fig. 7 is a schematic diagram of a configuration interface according to a second embodiment of the present invention.
Fig. 8 is a schematic illustration of a sub-flow of a method for implementing a graphical code-free development user interface according to a second embodiment of the present invention.
Fig. 9 is a flowchart illustrating a method for implementing a graphical code-free development user interface according to a second embodiment of the present invention.
Fig. 10 is a partial flowchart of a method for implementing a graphical code-free development user interface according to a third embodiment of the present invention.
Fig. 11 is a schematic diagram of a configuration interface according to a third embodiment of the present invention.
Fig. 12 is a schematic structural diagram of a computer device according to an embodiment of the present invention.
The implementation, functional features and advantages of the objects of the present invention will be further explained with reference to the accompanying drawings.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention is described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
The terms "first," "second," "third," "fourth," and the like in the description and in the claims of the present application and in the drawings described above, if any, are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It will be appreciated that the data so used may be interchanged under appropriate circumstances such that the embodiments described herein may be practiced otherwise than as specifically illustrated or described herein. Furthermore, the terms "comprises," "comprising," and "having," and any variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed, but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.
It should be noted that the description relating to "first", "second", etc. in the present invention is for descriptive purposes only and is not to be construed as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one such feature. In addition, technical solutions between various embodiments may be combined with each other, but must be realized by a person skilled in the art, and when the technical solutions are contradictory or cannot be realized, such a combination should not be considered to exist, and is not within the protection scope of the present invention.
Please refer to fig. 1, which is a system architecture diagram of a graphical code-free development user interface provided by a first embodiment. The system 1000 for graphical code-free development user interface includes a client 1001 and a backend server 1002. The backend server 1002 communicates with the client 1001 via a network. In this embodiment, the backend server 1002 displays a corresponding user interface on the client 1001 according to the start request of the client 1001, so that the user can configure a corresponding schematic diagram. The client 1001 is configured to generate a corresponding operation instruction in response to a user operation and transmit the operation instruction to the backend server 1002. The backend server 1002 executes a program for implementing the graphical code-free development user interface in response to the operation instruction to implement the graphical code-free development user interface, thereby generating a user interface desired by the user. In some possible embodiments, a program implementing the graphical code-free development user interface may also be executed in the client 1001 to implement the graphical code-free development user interface. In this embodiment, the client 1001 and the server 1002 are computer devices executing a graphical code-free software development program, respectively. The computer device may be a tablet computer, a desktop computer, a notebook computer. The computer device may be loaded with
Or
And the like.
Please refer to fig. 2, which is a flowchart illustrating a method for implementing a graphical code-free development user interface according to a first embodiment. The method for implementing the graphical code-free development user interface comprises the following steps.
In step S201, the server 1002 generates an event stream component graph and a page component graph required for constructing a user interface according to a preset processing logic programming statement frame and a page element required for processing the logic programming statement frame used in the development of the user interface software. It will be appreciated that the user interface design primarily includes static pages and the processing logic (event stream) for the static pages. And the man-machine interaction effect can be realized by combining the static pages and the processing logics of the static pages. Each static page includes a displayed page element, and the page element may be a container, an input box, a button, a picture, a text box, a switch, or the like. The event stream is used for processing each page element at each node and processing the sequence relation among the nodes, thereby realizing the dynamic change process of the static page during human-computer interaction.
As shown in fig. 3, the event stream component graphic 31 and the page component graphic 32 are displayed on the client 1001. In this embodiment, the specific processing of the page elements is converted into corresponding event stream component graphics 31. The page elements are converted into corresponding page component graphics 32. It will be further appreciated that in developing user interface software, the logical process of expressing page elements using a certain programming statement framework is converted to be expressed using corresponding event stream component graphics 31. The use of some programming statement framework to express page elements translates to the use of the page component graphic 32 to express. The sequential relationship between the nodes is represented by interconnecting the nodes. Each node is used for representing a certain event, namely, the input page element (page information) is specifically processed at the node to form a corresponding output page element (page information), and the output page element can be used as an input page element of a node next to the node.
In step S203, the server 1002 responds to the user' S operation on the page component graph 32 and the event stream component graph 31, and correspondingly configures the event stream schematic diagram 12 according to a preset configuration rule. The event flow diagram 12 includes interconnected nodes 121, and page elements 123 required by each node 121. The event stream component graph 31 is associated with a node 121, the node 121 is associated with an event stream programming statement frame, and the page element 123 is stored in a tree-shaped storage structure. It is to be understood that the event flow diagram 12 is a diagram consisting of one or more interconnected nodes. In this embodiment, the interconnected node diagram is also shown by a flow chart showing a certain order relationship. In this embodiment, the page element 123 is stored in a tree memory structure T.
For one object, the tree structure is used for decomposition, and the decomposition can be performed in an infinite manner, namely, the information elements of the object information required in the service scene can be covered. As shown in fig. 4 by the tree diagram T. For example, when describing a government of a certain country, the division can be performed according to a tree structure, and then the division can be performed into a certain specific group, such as a family.
The flow chart may reflect the process of changing an object from one node to the next, as shown in fig. 5, the flow chart comprises graphs 301, configuration lines 302 between the graphs, and contents 303 on the graphs or the configuration lines. Where each graph 301 corresponds to a node in the page event stream, and the configuration lines 302 may exhibit page associations from one node to the next, with the content 303 being the desired page element. It can also be said that the graphs 301, configuration lines 302 between graphs, page elements in the flow chart may exhibit a process of changing a page from one node to the next.
In the context of an application development user interface, the objects processed are pages. The logical processing of the pages is to use a programming language to describe the process change process of one or more pages from one node to the next node, namely to describe the page intelligence required by the next node after one node is processed according to the required page intelligence. The page information required by each node can be represented by the page elements, and the page elements adopt a tree structure, so that the pages required by each node can be completely depicted. And the page logic processing is represented by a flow chart, so that the dynamic change process of the page can be reflected. Therefore, the programming statements of the user interface and the pages required by the programming statements can be expressed by combining the page elements of the tree-shaped storage structure and the variation process represented by the flow chart.
Step S205, analyzing the event flow diagram according to a preset analysis rule to obtain corresponding configuration information, where the configuration information includes information of each node, page elements configured by each node, and a sequential relationship between each node. Specifically, the preset parsing rules include how to determine the sequence between nodes in the event flow diagram, how to determine a programming statement framework to be called, and how to determine page intelligence in the nodes. The configuration information is used for representing a programming statement frame required to be called by each node, the sequence among the nodes and page information of each node. Wherein the event stream node further comprises background data processing logic. The configuration information includes how to determine the background data processing logic of the call. It is understood that the preset parsing rule corresponds to the preset configuration rule. The preset analysis rules of the nodes of different functions are different.
And step S207, generating a computer executable code according to the configuration information and a preset processing logic programming statement frame. The server 1002 calls the programming statement frames corresponding to the nodes according to the configuration information, loads the corresponding page information elements into the programming statement frames corresponding to the nodes according to the configuration information to form programming statements, and sorts the programming statements according to the sequence in the configuration information to form computer executable codes. In this embodiment, the executable code is an executable file, such as a class file.
Referring to fig. 6 and fig. 7 in combination, fig. 6 is a sub-flowchart of step S203. The preset configuration rules comprise graphical rules and nested rules. Responding to the operation of the user on the page component graph and the event stream component graph, and correspondingly configuring an event stream schematic diagram, which specifically comprises the following steps:
in step S601, the server 1002 provides an event stream configuration area. The page configuration area is output when the server 1002 receives an instruction of a user to develop a software user interface. In some possible embodiments, the program implementing the graphical code-free development user interface is an independent application, and when the program implementing the graphical code-free development user interface is started, the page configuration area is displayed in the user interface 1003 of the client 1001. In some possible embodiments, the program implementing the graphical code-free development user interface is only one program block in a certain application program, and when the user selects to start the program of the graphical code-free development user interface, the event stream configuration area is displayed in the user interface 1003 of the client 1001.
In step S603, the server 1002 detects a first position of the event stream configuration area corresponding to the event stream component graph 32 operated by the user. Wherein the user operation includes dragging the event stream component graphic 32, moving the event stream component graphic 32, and the like. As shown in fig. 7, for example, when the user drags a certain event stream component graphic 32 to the a area of the event stream configuration area 61, the server 1002 detects the a area.
In step S605, the server 1002 generates a visualized event stream node at the first location according to the graphical rule and the first location. As shown in fig. 7, the server 1002 generates the event stream node 62 corresponding to the event stream component graph 32 in the a area.
In step S607, the server 1002 responds to the connection operation of the user to the event stream node, and correspondingly connects the event stream node. As shown in fig. 7, when a user performs a connection operation on the event stream nodes 62a and 62b, a configuration line 64 connecting the event stream nodes 62a and 62b is generated to connect the event stream nodes 62a and 62 b. In some possible embodiments, the configuration line 64 is a straight line. In some possible embodiments, the configuration line 64 may be replaced by other illustrations, such as a circle, an arrow, etc., and is not limited herein.
In some possible embodiments, the page elements of the tree may be pre-constructed. In some possible embodiments, the page elements of the tree can be constructed by the construction method provided by the present invention. It is understood that the method further comprises: and responding to the operation of the user on the page graph, and configuring a storage data structure of the page element.
Referring to FIG. 8, in particular, configuring the stored data structure of a page element in response to a user operating on the page graph includes the following steps.
Step S801, a page configuration area is provided. Referring to fig. 7 again, in the present embodiment, the event stream configuration area 61 and the page configuration area 63 are arranged in the user interface in a vertical direction.
Step S803, detecting a second position of the operated page assembly graph corresponding to the page configuration area. The user operation includes dragging the page component graph 31, moving the event stream component graph 32, and the like. As shown in fig. 7, for example, when the user drags a certain dragged page component graphic 31 to the B area of the page configuration area 63, the server 1002 detects the B area.
Step S805, generating visual page elements at the corresponding second positions according to the graphical rules and the second positions, wherein the visual page elements form a static page. In this embodiment, the page elements are displayed in the page configuration area 63, so that the user can view the overall effect of the static page, and the human-computer interaction is more friendly.
Step S807, configuring a data storage structure of each static page according to the corresponding second position and a preset nesting rule. Specifically, the nesting rule is used to indicate the storage structure of each page element, for example, which page elements belong to the same page; whether the pages (containing one or more page elements) are in a master-slave relationship or a parallel relationship; in a page, the storage relationships between page elements. The data storage structure of each static page is a data storage relationship between pages and a data storage relationship between page elements of each static page. In the present embodiment, the preset configuration rule includes dividing the page configuration area 63 into different areas according to the tree-shaped storage structure. When the user drags different page component graphics 31 to corresponding regions, the nesting relationship between the page elements, such as parent-child relationship, parallel relationship, etc., can be determined, so as to form the data storage relationship between the page elements of each static page and the page elements. For pages and data storage relationships between pages, a corresponding mechanism may be provided when creating each page to implement a tree storage relationship for the pages, such as the page layout 33 shown in fig. 7. When each page is created, the user is guided to establish whether the page and the existing page are in a parent-child relationship or a parallel relationship.
In some possible embodiments, the data storage structure of the tree of page elements may be arranged in a defined manner. For example, a tree-like data storage structure of page elements is defined by means of one or more tables.
In some possible embodiments, when creating the attribute data storage structure of the page element, the page element may not be displayed graphically, that is, the page element required by the page is not displayed, but displayed by some symbols or icons.
Referring to fig. 9, in some possible embodiments, the user interface software implemented by the method may be executed in different terminals for implementation. The method also provides a plurality of preset programming statement frameworks. For example, according to the environment in which the terminal operates, for example, the terminal operates in the IOS environment, a programming statement framework that can operate in the IOS environment is set. For another example, the terminal is set to be a programming statement frame that can run in the Android environment when running in the Android environment. Specifically, the method further includes step S901, where the server 1002 receives the running environment configuration information input by the user. In this embodiment, a corresponding configuration interface (not shown) is provided for a user to input the operating environment configuration information.
Wherein, step S207 includes:
step S903, the server 1002 selects a corresponding preset programming statement frame according to the operating environment configuration information input by the user;
in step S905, the server 1002 generates a computer executable code according to the configuration information and the selected preset programming statement frame.
Referring to fig. 10, in some possible embodiments, in order to provide configuration guidance to the user for the user to quickly configure the desired user interface, the method further includes the following steps.
In step S1001, the server 1002 detects whether the configuration operation of the user is accurate. For example, according to a preset programming statement framework, the required page elements, processing logic and the like have certain rules. For example, when configuring the event stream diagram, how many lines the event stream node may configure, or which page elements receive the input, all need to satisfy the preset configuration rule.
In step S1003, the server 1002 determines whether to configure an event flow diagram in response to the operation of the user according to the detection result. In this embodiment, if the detection result is that the configuration operation of the user is not accurate, the configuration is not performed in response to the user operation, and otherwise, the corresponding configuration is implemented in response to the user operation. In this embodiment, if the detection result is that the configuration operation of the user is not accurate, the corresponding prompt information is also output to the user.
In some possible embodiments, the method further comprises the steps of: receiving a configuration instruction of each visual page element input by a user, and providing a corresponding graphical control for the user to configure the attribute of the visual page element so as to configure the style of the visual page element. As shown in fig. 11, a page element 203 displayed in the page configuration area 61 can be operated by a user to configure the attribute. For example, if the user clicks on the page element style of the desired configuration, a corresponding configuration control may be displayed on one side of the page configuration area 63 for the user to operate. Configuration controls may be, but are not limited to, input box 630, slider 631, switch 632, etc.
Please refer to fig. 12, which is a schematic diagram illustrating an internal structure of a computer apparatus 800 according to an embodiment. The computer device 800 includes a memory 801, a processor 802, and a bus 803.
The memory 801 includes at least one type of readable storage medium, which includes flash memory, hard disk, multi-media card, card type memory (e.g., SD or DX memory, etc.), magnetic memory, magnetic disk, optical disk, and the like. The memory 801 may in some embodiments be an internal storage unit of the computer device 800, such as a hard disk of the computer device 800. The memory 801 may in other embodiments be an external computer device 800 memory device, such as a plug-in hard drive, Smart Media Card (SMC), Secure Digital (SD) Card, Flash memory Card (Flash Card), etc. provided on the computer device 800. Further, the memory 801 may also include both internal and external storage units of the computer device 800. The memory 801 may be used not only to store application software installed in the computer apparatus 800 and various kinds of data such as codes implementing a method of a graphical code-free development user interface, etc., but also to temporarily store data that has been output or will be output.
The bus 803 may be a Peripheral Component Interconnect (PCI) bus, an Extended Industry Standard Architecture (EISA) bus, or the like. The bus may be divided into an address bus, a data bus, a control bus, etc. For ease of illustration, only one thick line is shown in FIG. 12, but this is not intended to represent only one bus or type of bus.
Further, computer device 800 can also include a display component 804. The display module 804 can be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, an OLED (Organic Light-Emitting Diode) touch device, and the like. The display component 804 may also be referred to as a display device or display unit, as appropriate, for displaying information processed in the computer apparatus 800 and for displaying a visualized user interface, among other things.
Further, the computer device 800 may also include a communication component 805, and the communication component 805 may optionally include a wired communication component and/or a wireless communication component (e.g., a WI-FI communication component, a bluetooth communication component, etc.), which are generally used to establish a communication connection between the computer device 800 and other computer devices.
The processor 802 may be, in some embodiments, a Central Processing Unit (CPU), controller, microcontroller, microprocessor or other data Processing chip that executes program codes stored in the memory 801 or processes data. Specifically, the processor 802 executes a graphical code-free programming program to implement the above-described method of implementing graphical code-free software development.
While FIG. 12 shows only a computer device 800 having components 801 and 805 and implementing a method for a graphical code-free development user interface, those skilled in the art will appreciate that the architecture shown in FIG. 12 is not intended to be limiting of computer device 800, and may include fewer or more components than those shown, or some components in combination, or a different arrangement of components.
According to the graphical codeless software development method, the computer equipment and the storage medium, the combination of the information elements and the flow chart stored by the tree-shaped data storage structure is utilized to realize codeless programming, so that an enterprise does not need to write a programming language to complete required application software during autonomous information construction, the enterprise can rapidly and low-cost own autonomous information construction capability, and the resource allocation efficiency and rationality of the enterprise in the whole market economic activity are improved.
In the above embodiments, the implementation may be wholly or partially realized by software, hardware, firmware, or any combination thereof. When implemented in software, may be implemented in whole or in part in the form of a computer program product.
The computer program product includes one or more computer instructions. The procedures or functions according to the embodiments of the invention are brought about in whole or in part when the computer program instructions are loaded and executed on a computer. The computer apparatus may be a general purpose computer, a special purpose computer, a network of computers, or other programmable device. The computer instructions may be stored in a computer readable storage medium or transmitted from one computer readable storage medium to another, for example, from one website site, computer, server, or data center to another website site, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, Digital Subscriber Line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.). The computer-readable storage medium can be any available medium that a computer can store or a data storage device, such as a server, a data center, etc., that is integrated with one or more available media. The usable medium may be a magnetic medium (e.g., floppy Disk, hard Disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., Solid State Disk (SSD)), among others.
It is clear to those skilled in the art that, for convenience and brevity of description, the specific working processes of the above-described systems, apparatuses and units may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again.
In the several embodiments provided in the present application, it should be understood that the disclosed system, apparatus and method may be implemented in other manners. For example, the above-described apparatus embodiments are merely illustrative, and for example, the division of the unit is only one logical functional division, and other divisions may be realized in practice, for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection through some interfaces, devices or units, and may be in an electrical, mechanical or other form.
Units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.
In addition, functional units in the embodiments of the present application may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit. The integrated unit can be realized in a form of hardware, and can also be realized in a form of a software functional unit.
The integrated unit, if implemented in the form of a software functional unit and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present application may be substantially implemented or contributed to by the prior art, or all or part of the technical solution may be embodied in a software product, which is stored in a storage medium and includes instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method of the embodiments of the present application. And the aforementioned storage medium includes: a U disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk, and other various media capable of storing program codes.
It should be noted that the above-mentioned numbers of the embodiments of the present invention are merely for description, and do not represent the merits of the embodiments. And the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, apparatus, article, or method that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, apparatus, article, or method. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, apparatus, article, or method that includes the element.
The above description is only a preferred embodiment of the present invention, and not intended to limit the scope of the present invention, and all modifications of equivalent structures and equivalent processes, which are made by using the contents of the present specification and the accompanying drawings, or directly or indirectly applied to other related technical fields, are included in the scope of the present invention.
Claims (10)
1. A method of implementing a graphical code-free development user interface, the method comprising:
generating an event stream component graph and a page component graph required by constructing a user interface according to a preset processing logic programming statement frame adopted by user interface software development and page elements required by the preset processing logic programming statement frame;
responding to the operation of a user on the page component graph and the event stream component graph, and correspondingly configuring an event stream schematic diagram according to a preset configuration rule, wherein the event stream schematic diagram comprises interconnected nodes and page elements required by the nodes, the event stream component graph is associated with the nodes, the nodes are associated with an event stream programming statement frame, and the page elements are stored by adopting a tree storage structure;
analyzing the event flow schematic diagram according to a preset analysis rule to obtain corresponding configuration information, wherein the configuration information comprises information of each node, page elements configured by each node and a sequence relation of each node; and
and generating computer executable codes according to the configuration information and the preset processing logic programming statement framework.
2. The method of claim 1, wherein the executable code is an executable file.
3. The method of claim 2, wherein the preset processing logic program statement frameworks include a plurality of preset program statement frameworks; the method further comprises the following steps: receiving operating environment configuration information input by a user, wherein generating a computer executable code according to the node information, the page elements required by the node configuration information and a preset user interface processing logic programming statement specifically comprises:
selecting a corresponding preset programming statement frame according to the operating environment configuration information input by a user;
and generating the computer executable code according to the configuration information and the selected preset programming statement frame.
4. The method of claim 1, wherein the preset configuration rules comprise graphical rules, the method further comprising:
providing an event stream configuration area;
detecting a first position of the event stream component graph of the operation corresponding to the event stream configuration area;
generating a visualized event stream node at the first position according to the graphical rule and the first position; and
responding to the connection operation of the user to the event stream nodes, and correspondingly connecting the event stream nodes.
5. The method of claim 1, wherein the preset configuration rules include graphical rules and nested rules, the method further comprising:
providing a page configuration area;
detecting a second position of the operated page assembly graph corresponding to the page configuration area;
generating visual page elements at the corresponding second positions according to the graphical rules and the second positions, wherein the visual page elements form a static page;
and configuring the data storage structure of each static page according to the corresponding second position and a preset nesting rule.
6. The method of claim 5, wherein the method further comprises:
receiving a configuration instruction of each visual page element input by a user, and providing a corresponding graphical control for the user to configure the attribute of the visual page element so as to configure the style of the visual page element.
7. The method of claim 1, wherein the event stream component graph comprises a logical volume component graph that invokes background processing logic, the logical component graph corresponding to the background data processing logic.
8. The method of claim 1, wherein prior to configuring an event stream graph in response to user manipulation of the page component graph and the event stream component graph in response to the event stream graph, the method further comprises:
detecting whether the operation of the user on the page component graph and the event stream component graph is accurate or not;
and determining whether the event flow schematic diagram is configured in response to the operation of the user according to the detection result.
9. A computer device, characterized in that the computer device comprises:
a memory for storing a computer executable program; and
a processor for executing the executable program to implement the method of implementing a graphical code-free development user interface as claimed in claims 1-8.
10. A storage medium for storing a computer-executable program for execution by a processor to implement a method of implementing a graphical code-free development user interface as claimed in claims 1 to 8.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010368258.2A CN113590103B (en) | 2020-04-30 | 2020-04-30 | Method, computer device and storage medium for realizing graphical code-free development user interface |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010368258.2A CN113590103B (en) | 2020-04-30 | 2020-04-30 | Method, computer device and storage medium for realizing graphical code-free development user interface |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113590103A true CN113590103A (en) | 2021-11-02 |
| CN113590103B CN113590103B (en) | 2024-02-02 |
Family
ID=78237696
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010368258.2A Active CN113590103B (en) | 2020-04-30 | 2020-04-30 | Method, computer device and storage medium for realizing graphical code-free development user interface |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113590103B (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114185523A (en) * | 2022-02-11 | 2022-03-15 | 北京金堤科技有限公司 | Page tree structure processing method and device based on components |
| CN115048095A (en) * | 2022-08-12 | 2022-09-13 | 广东粤港澳大湾区硬科技创新研究院 | Expert system fault diagnosis program generation method |
| CN115543290A (en) * | 2022-10-12 | 2022-12-30 | 睿珀智能科技有限公司 | Visual programming method and system |
| CN117406990A (en) * | 2023-12-14 | 2024-01-16 | 南京研利科技有限公司 | Page generation method, page generation device, electronic equipment and computer readable storage medium |
Citations (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20040148586A1 (en) * | 2002-11-14 | 2004-07-29 | Sap Ag | Modeling system for graphic user interface |
| US20050283758A1 (en) * | 2002-07-29 | 2005-12-22 | Interad Technology Limited | Bi-directional programming system/method for program development |
| CN103246515A (en) * | 2013-05-13 | 2013-08-14 | 珠海飞企软件有限公司 | Visual model view controller (MVC) function modeling control method |
| US20150012905A1 (en) * | 2013-07-02 | 2015-01-08 | Andrew T. Emmons | System and method for streamlining user interface development |
| CN104484189A (en) * | 2014-12-31 | 2015-04-01 | 北京拼图科技有限公司 | Construction and design method of application interface |
| CN104484171A (en) * | 2014-12-11 | 2015-04-01 | 深圳市路通网络技术有限公司 | System, method and associated equipment for designing terminal interface |
| US20150339107A1 (en) * | 2014-05-22 | 2015-11-26 | Oracle International Corporation | Generating runtime components |
| CN105229617A (en) * | 2013-05-21 | 2016-01-06 | 肯赛里克斯公司 | For the chart of navigation application code |
| CN107577459A (en) * | 2017-08-21 | 2018-01-12 | 杰为软件系统(深圳)有限公司 | A kind of towed cross-platform development system and method based on modularization |
| CN108228180A (en) * | 2017-12-27 | 2018-06-29 | 顺丰科技有限公司 | Real time workshop method and system based on visual interface design |
| CN108958736A (en) * | 2018-07-20 | 2018-12-07 | 北京三快在线科技有限公司 | Page generation method, device, electronic equipment and computer-readable medium |
| CN109324791A (en) * | 2017-08-18 | 2019-02-12 | 深圳怡化电脑股份有限公司 | Finance self-help terminal traffic process development approach, device and terminal device |
| CN109471626A (en) * | 2018-10-11 | 2019-03-15 | 深圳市金证科技股份有限公司 | Page logic structure, page generation method, page data processing method and device |
| CN109614097A (en) * | 2018-12-07 | 2019-04-12 | 北京金山云网络技术有限公司 | Generation method, device and the server of platform code |
-
2020
- 2020-04-30 CN CN202010368258.2A patent/CN113590103B/en active Active
Patent Citations (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20050283758A1 (en) * | 2002-07-29 | 2005-12-22 | Interad Technology Limited | Bi-directional programming system/method for program development |
| US20040148586A1 (en) * | 2002-11-14 | 2004-07-29 | Sap Ag | Modeling system for graphic user interface |
| CN103246515A (en) * | 2013-05-13 | 2013-08-14 | 珠海飞企软件有限公司 | Visual model view controller (MVC) function modeling control method |
| CN105229617A (en) * | 2013-05-21 | 2016-01-06 | 肯赛里克斯公司 | For the chart of navigation application code |
| US20150012905A1 (en) * | 2013-07-02 | 2015-01-08 | Andrew T. Emmons | System and method for streamlining user interface development |
| US20150339107A1 (en) * | 2014-05-22 | 2015-11-26 | Oracle International Corporation | Generating runtime components |
| CN104484171A (en) * | 2014-12-11 | 2015-04-01 | 深圳市路通网络技术有限公司 | System, method and associated equipment for designing terminal interface |
| CN104484189A (en) * | 2014-12-31 | 2015-04-01 | 北京拼图科技有限公司 | Construction and design method of application interface |
| CN109324791A (en) * | 2017-08-18 | 2019-02-12 | 深圳怡化电脑股份有限公司 | Finance self-help terminal traffic process development approach, device and terminal device |
| CN107577459A (en) * | 2017-08-21 | 2018-01-12 | 杰为软件系统(深圳)有限公司 | A kind of towed cross-platform development system and method based on modularization |
| CN108228180A (en) * | 2017-12-27 | 2018-06-29 | 顺丰科技有限公司 | Real time workshop method and system based on visual interface design |
| CN108958736A (en) * | 2018-07-20 | 2018-12-07 | 北京三快在线科技有限公司 | Page generation method, device, electronic equipment and computer-readable medium |
| CN109471626A (en) * | 2018-10-11 | 2019-03-15 | 深圳市金证科技股份有限公司 | Page logic structure, page generation method, page data processing method and device |
| CN109614097A (en) * | 2018-12-07 | 2019-04-12 | 北京金山云网络技术有限公司 | Generation method, device and the server of platform code |
Non-Patent Citations (5)
| Title |
|---|
| I.BANERJEE: "Chapter Two - Advances in Model-Based Testing of GUI-Based Software", ADVANCES IN COMPUTERS, vol. 105, pages 45 - 78 * |
| R. PÉREZ-CASTILLO等: "Process mining through dynamic analysis for modernising legacy systems", IET SOFTWARE, vol. 5, no. 3, pages 304, XP006037944, DOI: 10.1049/IET-SEN:20100103 * |
| 吕敏 等: "可视化编程数字图像处理平台的界面设计与实现", 计算机系统应用, vol. 19, no. 9, pages 211 - 213 * |
| 宋奕爽 等: "WEB端可视化表单生成引擎的设计与实现", 软件, vol. 38, no. 12, pages 153 - 159 * |
| 李琳: "Web服务组合的形式化验证与可视化方法研究", 中国博士学位论文全文数据库 信息科技辑, no. 1, pages 139 - 20 * |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114185523A (en) * | 2022-02-11 | 2022-03-15 | 北京金堤科技有限公司 | Page tree structure processing method and device based on components |
| CN115048095A (en) * | 2022-08-12 | 2022-09-13 | 广东粤港澳大湾区硬科技创新研究院 | Expert system fault diagnosis program generation method |
| CN115543290A (en) * | 2022-10-12 | 2022-12-30 | 睿珀智能科技有限公司 | Visual programming method and system |
| CN115543290B (en) * | 2022-10-12 | 2024-04-19 | 睿珀智能科技有限公司 | Visual programming method and system |
| CN117406990A (en) * | 2023-12-14 | 2024-01-16 | 南京研利科技有限公司 | Page generation method, page generation device, electronic equipment and computer readable storage medium |
| CN117406990B (en) * | 2023-12-14 | 2024-02-27 | 南京研利科技有限公司 | Page generation method, page generation device, electronic equipment and computer readable storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113590103B (en) | 2024-02-02 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| WO2021217660A1 (en) | Method for realizing graphical code-free development of user interface, and computer device and storage medium | |
| CN113590103B (en) | Method, computer device and storage medium for realizing graphical code-free development user interface | |
| WO2021217661A1 (en) | Method and platform for implementing graphical code-free software development, computer device and storage medium | |
| US20150319198A1 (en) | Crowdsourcing for documents and forms | |
| US9317257B2 (en) | Folded views in development environment | |
| US7624349B2 (en) | Declarative definition enabling graphical designer reuse | |
| US9665348B1 (en) | Customizable, dual-format presentation of information about an object in an interactive programming enviornment | |
| US20100180230A1 (en) | Assembly and output of user-defined groupings | |
| CN107608747B (en) | Form system construction method and device, electronic equipment and storage medium | |
| US20120124492A1 (en) | Display and Resolution of Incompatible Layout Constraints | |
| CN113590104B (en) | Platform and method for realizing graphical code-free software development | |
| US10831331B2 (en) | Window control for simultaneously running applications | |
| JP2013528860A (en) | Temporary formatting and graphing of selected data | |
| CN108920342B (en) | Method and device for realizing data acquisition of application | |
| CN111736836B (en) | Component configuration method and device based on relational graph and computer readable storage medium | |
| EP2992420A1 (en) | Content-based directional placement application launch | |
| WO2021217659A1 (en) | Multi-source heterogeneous data processing method, computer device, and storage medium | |
| CN114036443A (en) | Page generation method and device | |
| CN109739856A (en) | Method and system for the relationship established between tables of data | |
| CN113966502A (en) | Graphical code-free programming method, computer equipment and storage medium | |
| US10866831B2 (en) | Distributed execution of data processing pipelines | |
| US10203939B2 (en) | Method and system for parameter model framework | |
| CN114090002A (en) | Front-end interface construction method and device, electronic equipment and storage medium | |
| CN115390720A (en) | Robotic Process Automation (RPA) including automatic document scrolling | |
| US8296731B2 (en) | Dynamic method selection based on declarative requirements of interaction scope |
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 | ||
| CB02 | Change of applicant information | ||
| CB02 | Change of applicant information |
Address after: Room 1102, Unit 2, Building 3, Tian'an Digital City, No. 1, Huangjin Road, Nancheng Street, Dongguan City, Guangdong Province, 523000 Applicant after: Guangdong Zhongtong Internet of Things Technology Co.,Ltd. Address before: 518000 Room 201, building A, 1 front Bay Road, Shenzhen Qianhai cooperation zone, Shenzhen, Guangdong Applicant before: SHENZHEN ZHONGTONG INTERNET OF THINGS TECHNOLOGY Co.,Ltd. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |