CN112241263A - Visual page processing method and equipment - Google Patents
Visual page processing method and equipment Download PDFInfo
- Publication number
- CN112241263A CN112241263A CN201910643669.5A CN201910643669A CN112241263A CN 112241263 A CN112241263 A CN 112241263A CN 201910643669 A CN201910643669 A CN 201910643669A CN 112241263 A CN112241263 A CN 112241263A
- Authority
- CN
- China
- Prior art keywords
- page
- configuration
- graphical element
- component
- area
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 230000000007 visual effect Effects 0.000 title abstract description 5
- 238000003672 processing method Methods 0.000 title description 4
- 238000000034 method Methods 0.000 claims abstract description 48
- 230000009471 action Effects 0.000 claims description 20
- 238000004590 computer program Methods 0.000 claims description 7
- 230000004044 response Effects 0.000 claims description 4
- 238000012800 visualization Methods 0.000 abstract 1
- 230000008569 process Effects 0.000 description 5
- 230000000712 assembly Effects 0.000 description 4
- 238000000429 assembly Methods 0.000 description 4
- 238000010586 diagram Methods 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 238000004364 calculation method Methods 0.000 description 1
- 230000004069 differentiation Effects 0.000 description 1
- 230000014509 gene expression Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 230000000717 retained effect Effects 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/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0486—Drag-and-drop
-
- 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
Abstract
The invention provides a visual page configuration method, which comprises the following steps: in a page editing state, displaying a user interface, wherein a first area of the user interface displays a page component, and a second area of the user interface displays a page to be edited; receiving dragging of a first component in a page component area by a user; and responding to the fact that the first assembly is dragged to a preset position of the second area, generating a first graphical element corresponding to the first assembly at the preset position in the page to be edited, displaying the first graphical element on the page to be edited to generate a first editing page, determining a JSON file corresponding to the first editing page, and storing the JSON file in a database. According to the invention, page editing and generation can be realized by dragging the assembly tool, operations such as code compiling and testing are not required, page editing and generation visualization is realized, and the technical requirements of page development on technical personnel are reduced.
Description
Technical Field
The present invention relates to the field of computers, and in particular, to a visualized page processing method and apparatus.
Background
The demand for web page configuration is more and more diversified, especially in the processing fields of insurance policy and the like. Different policy products need corresponding web pages to complete. In the traditional policy webpage, for different policy items, namely, webpage pages with different configuration items in the webpage, separate development items are required to be developed, which brings about the problems that the required software development cost is high, the code amount required to be developed is also high, and the technical requirements on developers are high; different development projects are usually carried out by different software development technicians, and the code reuse degree of similar functional modules is smaller; in addition, in the conventional web page development, after all functional modules of a web page are developed by different technicians, the display of the web page can be realized, and if the display of the web page is unsatisfactory, the work of codes needing to be adjusted is high, so that the efficiency is low. Therefore, a page generation scheme with page configuration visible to users, low requirement on developers and high function module reuse degree is needed.
Disclosure of Invention
The invention provides a visual page processing method, which can realize the assembly and the configuration of a page by dragging a page tool component of a user interface, the configuration process of the page is visible to a user, non-professional technicians can realize the assembly and the configuration of the page, and the technical requirements on developers are reduced; each component can be repeatedly used in different page configurations, and the reuse degree of the components is high.
In a first aspect of an embodiment of the present invention, a method for configuring a page component is provided, where the method includes: displaying a user interface, wherein a first area of the user interface displays a page component, and a second area of the user interface displays a page to be edited; receiving a drag of a first component in the page components by a user in the first area; in response to the first component being dragged to a preset position of the second area, generating a first graphical element corresponding to the first component at the preset position in the page to be edited; receiving a configuration request for the first graphical element; superposing a configuration page for displaying the first graphical element on a first editing page of the graphical user interface, wherein the configuration page is positioned in a first view and is in an editable state, and the first editing page is positioned in a second view below the first view and is in a non-editable state; receiving user selection of a configuration item of the first graphical element shown in the configuration page, wherein the configuration item comprises one or more of attribute configuration, field configuration, model configuration and event configuration; and displaying a candidate item of the selected configuration item in a preset area of the configuration page according to the selection of the configuration item, receiving the input of the user to the candidate item, and updating the JSON data file related to the first graphical element in the first editing page according to the input.
In some embodiments of the present invention, when the configuration item is an event configuration, the displaying the candidate item of the selected configuration item in the predetermined area of the configuration page includes:
and displaying a trigger option and an event action of the event configuration in a preset area of the configuration page, wherein the trigger option comprises a preset trigger point, and the event action comprises a preset action selection.
In some embodiments of the invention, the method further comprises: and further displaying an editable source code corresponding to the event action in the preset area, receiving the editing operation of the user on the editable source code, updating the editable source code, and storing the updated editable source code to the event action.
In some embodiments of the invention, the first editing page further comprises a second graphical element.
In some embodiments of the invention, the updated editable source code is associated with the second graphical element, the method further comprising: updating the configuration project in the first editing page about the second graphical element according to the updated editable source code.
In some embodiments of the present invention, the first graphical element is a graphical element corresponding to a container component, and the second graphical element is a basic component, and the basic component is one or more of an input box component, a data component, and a button component.
In some embodiments of the invention, the first graphical element comprises a property configuration item, a model configuration item, and an event configuration item; the basic components include property configuration items, field configuration items, and event configuration items.
In some embodiments of the invention, the method further comprises: and updating the model configuration item of the first graphical element according to the field configuration item of the second graphical element.
In a second aspect of embodiments of the present invention, there is provided a computer apparatus comprising a memory and a processor, wherein the memory is configured to store a computer program; a processor configured to execute the computer program to implement the method described above.
In a third aspect of embodiments of the present invention, there is provided a computer-readable storage medium having stored thereon computer instructions which, when executed by a processor, implement the method described above.
Drawings
Fig. 1 is a flowchart illustrating a page configuration method according to an embodiment of the present invention.
FIG. 2 illustrates a tool presentation screenshot of a user interface according to an embodiment of the present invention.
FIG. 3 illustrates a tool presentation screenshot of a user interface according to an embodiment of the present invention.
FIG. 4 illustrates a screenshot of a configuration page of a user interface according to an embodiment of the present invention.
FIG. 5 shows a flow diagram of a page component configuration according to an embodiment of the invention.
FIG. 6 illustrates a page screen shot of a page component configuration according to an embodiment of the present invention.
FIG. 7 illustrates a page screen shot of a page component configuration according to an embodiment of the present invention.
FIG. 8 illustrates a page screen shot of a page component configuration according to an embodiment of the present invention.
FIG. 9 illustrates a page screen shot of a page component configuration according to an embodiment of the present invention.
FIG. 10 illustrates a page screen shot of a page component configuration according to an embodiment of the present invention.
FIG. 11 illustrates a page screen shot of a page component configuration according to an embodiment of the present invention.
Fig. 12 is a flow chart illustrating a configuration method of a dialog box according to an embodiment of the present invention.
FIG. 13 illustrates a screenshot of a dialog component configuration according to an embodiment of the present invention.
Fig. 14 shows a schematic configuration diagram of a computer apparatus according to an embodiment of the present invention.
Detailed Description
The invention will now be described in detail with reference to exemplary embodiments thereof, some of which are illustrated in the accompanying drawings. The following description refers to the accompanying drawings, in which like numerals refer to the same or similar elements throughout the different views unless otherwise specified. The aspects described in the following exemplary embodiments do not represent all aspects of the present invention. Rather, these aspects are merely examples of systems and methods according to various aspects of the present invention as recited in the appended claims.
Referring to fig. 1, a flow chart of a visualized page configuration method according to an embodiment of the present invention is shown. The method comprises the following steps: step S110, step S120, and step S130. The above steps will be described with reference to specific examples.
S110, in a page editing state, displaying a user interface, wherein a first area of the user interface displays a page component, and a second area of the user interface displays a page to be edited, wherein the page component comprises one or more of the following components: a container component, an input box component, a button component and a data component.
In an embodiment of the invention, the configuration of the page is visualized. The configuration of the page may be encapsulated in software, such as the UI studio shown in FIG. 2. The software may be run on a personal computer or a mobile device or the like. In the page edit state, the user interface as shown in fig. 2 and 3 is presented. In the user interface shown in FIG. 2, the first area, i.e., the area to the left of the user interface, exposes various configuration components of the page, which may include, for example, one or more of the following tool-like components: a container component, an input box component, a button component and a data component. In still other embodiments, the components may also include a dialog component. In some specific embodiments, the page to be edited is a policy product page.
Among the components illustrated in the first region, the input box component, the button component, and the data component may be considered as basic components in the page configuration component, and no other components may be included in the basic components. Other container components may be arranged among the container components, unlike the basic components such as the input box, for example, an input box component and a data component or a button component may be provided in the container component. The container assemblies may comprise different types, as shown in FIG. 2, and the assembly containers may comprise update panel, cell, smart, card, card group, tab, button. Wherein, the update pancel container component can be configured with basic components required for refresh. A Cell container component in which components related to table entry may be configured. The smart container component may configure parameters therein, and perform intelligent layout on multiple input boxes, for example, 2 rows and 3 columns of parameters are introduced into the smart container, and the layout of 6 input boxes, which is 1 row and 1 input box, may be converted into the layout of 2 rows of input boxes and 3 input boxes per row. The car and car group container parameters can configure basic components such as input box components and data components therein. tab container component, which can be used as a basic component of the tab configuration of a page. A button box container assembly in which a button assembly and the like can be arranged.
The input box components may include UI search, search CT, english characters, arabic numerals, asterisks, email addresses, decimal places, dates, percentages, clocks, attribute selection boxes (including circles plus dots, pairs within rectangular boxes, and half-black within rectangular boxes), text entry areas, and labels label. The button assemblies may include button-form assemblies and link-form button assemblies. The data components may include: arabic numerals, asterisks, mailboxes, decimal numbers, dates, percentages, clocks, selections, text entry fields, and label types. The data component may also include data in tabular form as shown in FIG. 3.
And S120, receiving the dragging of the first component in the page components by the user in the first area.
In an embodiment of the invention, the page component presented in the first region of the user interface is selectable. For example, one type of container component, input box component, button component, and data component among the tool components may be selected, and then a specific tool component among the types of components may be selected. In some embodiments, the selection and dragging may be performed by mouse clicking and dragging. In other specific embodiments, for the touch screen device, the selection and the dragging can be performed by clicking and dragging with a hand of a user.
The selected tool component may be dragged to the second area of the user interface, or may be dragged to other locations of the first area, e.g., may be dragged to other locations of the tool component. The tool components in the input box component area can be dragged according to the use habits or the use frequency of each user to change the placing positions of the tool components.
S130, responding to the fact that the first assembly is dragged to the preset position of the second area, generating a first graphical element corresponding to the first assembly at the preset position in the page to be edited, displaying the first graphical element on the page to be edited to generate a first editing page, determining a JSON file corresponding to the first editing page, and storing the JSON file in a database.
In the embodiment of the invention, in response to the first component being dragged to the predetermined position of the second area, the first graphical element corresponding to the first component is generated at the predetermined position in the page to be edited, and the first graphical element can be regarded as an instance of the first component. The first graphical element embedded in the page to be edited has corresponding functions and configuration options.
And displaying the first graphical element on the page to be edited, updating the page to be edited to generate a first editing page, then determining a JSON file corresponding to the first editing page, and storing the JSON file in a database. For example, dragging an input component of an arabic number to a page to be edited in the second region, after dragging to a predetermined position, generating an input item corresponding to the arabic number at the predetermined position, that is, displaying the arabic number input item in the page to be edited, generating a JSON file corresponding to the first edited page for the updated page to be edited, and storing the JSON file in the database.
In some specific embodiments, the method provided by the embodiments of the present invention further comprises: receiving dragging of a second component in the page components by a user; responding to the fact that the second assembly is dragged to the second area, generating a second graphical element corresponding to the second assembly at the end position of dragging of the second assembly in the first editing page, displaying the second graphical element in the first editing page to form a second editing page, configuring the element relation of the first graphical element and the second graphical element in the second editing page, determining a JSON file corresponding to the second editing page, and storing the JSON file to a database with a preset name. It should be noted that the second component may be any one of the page components, may be a tool component identical to the first component, or may be a tool component different from the first component, which is not limited in this embodiment of the present invention.
According to the embodiment of the invention, each configuration component of the page is displayed in real time in the editing state of the page, and in the component configuration of the page, the configuration of the page can be realized without the processes of code development, test and the like, so that the user can see and obtain the configuration information, the page development efficiency is improved, the technical requirements on developers in the page configuration are also reduced, and particularly, the page development efficiency can be greatly improved in the scene of more types of pages needing to be developed; the page components displayed in the tool area can be repeatedly utilized, the reuse efficiency of the components in the page configuration is improved, and therefore the development efficiency of the page configuration is improved.
In some embodiments of the present invention, configuring the element relationship of the first graphical element and the second graphical element in the second editing page comprises: and configuring the first graphical element and the second graphical element in the second editing page into a parallel node relationship. And the display positions of the first graphical element and the second graphical element on the page can be determined according to the element relationship between the first graphical element and the second graphical element. For example, in the case that the first graphical element is an input box and the second graphical element is also an input box, the first graphical element and the second graphical element may be configured in a parallel node relationship, that is, the first graphical element and the second graphical element are parallel nodes in the JSON file corresponding to the second edit page, and accordingly, on the second edit page, the first graphical element and the second graphical element are displayed as two parallel input boxes. In a specific embodiment, there may be a parallel input box as shown in FIG. 4.
In some further embodiments of the present invention, configuring the element relationship of the first graphical element and the second graphical element in the second editing page comprises: configuring the first graphical element and the second graphical element in a second edit page as parent and child node relationships. After the element relationship between the first graphical element and the second graphical element is determined, the display positions of the first graphical element and the second graphical element on the page and the relative position relationship between the first graphical element and the second graphical element can be determined according to the element relationship between the first graphical element and the second graphical element. For example, where a first graphical element corresponds to a Card container component (which may include a plurality of base components, e.g., a plurality of input boxes) and a second graphical element corresponds to an input box component, the input box component may be treated as one of the Card container components if desired, i.e., the first and second graphical components may be configured in parent and child node relationships such that the second graphical element is presented in the area circumscribed by the first graphical element.
In some embodiments of the present invention, the first component in step S110 may be an input box, and the type of the input box includes one or more of the following: characters, numbers, email, date, clock and percentages, the second component including data components matching the type of the first component. For example, if the type of the input box of the first component is a date component, then the corresponding data component is a date type component.
In some embodiments of the present invention, in addition to the page edit status described above, a method of running a page may be included. Specifically, the method further comprises the following steps: reading a JSON file corresponding to a second editing page from the database, operating the JSON file to generate a graphical user interface of the second editing page, receiving an input request of a second user for the first graphical element, displaying a plurality of alternative data provided by the second graphical element on the second editing page, receiving selection of the second user for first alternative data in the plurality of alternative data, and displaying the first alternative data in a specified area of the first graphical element. The second user may be a different user from the first user, or may be the same user as the first user. For example, by using the page assembly method provided by the invention, a common insurance agency can freely combine tool components to generate a corresponding policy product within a preset authority range. As another example, the first user may be a user assembling the page and the second user may be another user using the assembled page. In the case where the configured page is a policy product, the first user may be a user authorized to configure the policy product, and the second user may use an insurance agent or the like for the already configured policy product.
The embodiment of the invention also provides a configuration method of the page component. As shown in fig. 5, a flowchart of a configuration method of a page component according to an embodiment of the present invention is shown. The method can comprise the following steps: step S510 to step S560, the above steps will be described with reference to specific embodiments.
S510, displaying a user interface, wherein a first area of the user interface displays a page component, and a second area of the user interface displays a page to be edited.
In the embodiment of the present invention, the user interface is the user interface shown in fig. 2 and 3, the first area on the left side shows the page component tool, and the second area on the right side shows the page to be edited. The first component may be any one of the page components exposed by the first area. In some specific embodiments, the page to be edited is a policy product page. With regard to the description of the first area and the second area of the user page, reference may be made to the related description of S110 described above.
S520, receiving the dragging of the first component in the page components by the user in the first area.
In the embodiment of the present invention, the page component displayed in the first area may receive a drag of a user, for example, the drag may be a drag of a mouse, and the like. With regard to the description of step S520, reference may be made to the above description of step S120.
S530, in response to the first component being dragged to a preset position of the second area, generating a first graphical element corresponding to the first component at the preset position in the page to be edited.
In the embodiment of the invention, after the first component is dragged to the predetermined position of the second region, the first graphical element corresponding to the first component is generated at the predetermined position, and accordingly, the JSON file corresponding to the corresponding editing page is updated, and the layout information of the first graphical element in the JSON file is updated.
S540, receiving a configuration request for the first graphical element.
In an embodiment of the invention, a first graphical element is presented on an editing page of the second area, the first graphical element being editable. In some embodiments, the user may use a mouse click on the first graphical element as a configuration request for the graphical element. In other embodiments, the configuration request for the first graphical element is generated in other manners, such as a double click or other selected manner.
S550, a configuration page of the first graphical element is displayed on the first editing page of the user interface in an overlapped mode, the configuration page is located in a first view and is in an editable state, and the first editing page is located in a second view below the first view and is in a non-editable state.
In the embodiment of the invention, after receiving a configuration request of a user for a graphical element of an editing page, a configuration page showing the graphical element is superposed on the editing page, wherein the configuration page can comprise a configuration item, and the configuration page covers a part of the editing page. The configuration items may include: one or more of an attribute configuration, a field configuration, a model configuration, and an event configuration. In some embodiments, configuration items may include property configurations, field configurations, and model configurations, such as those shown in fig. 6-10. In still other embodiments, configuration items may include property configurations, model configurations, and event configurations, as shown in FIG. 11.
As shown in fig. 6. In the user interface shown in fig. 6, what is shown is a configuration page for a graphic element with a SELECT _ CODE _151392603676 identifier, where configuration items include attribute configuration, field configuration, and event configuration, what is shown is a configuration page for attributes of the element component, and what is mainly shown is its basic attributes, which may include CODE, default value, disabled, input class, input/output, isinitichal, key, label, required, style class, value, and visible, for example. It should be noted that, for a graphic element corresponding to a tool component, the basic attributes have default attributes, that is, the attributes do not need to be manually configured by a user of the configuration page. In a specific application scenario, some of these basic attributes may be configured accordingly as needed.
In still other embodiments, in addition to presenting the basic attribute configuration shown in FIG. 6, the basic attributes and the advanced attributes shown in FIG. 7 may be presented simultaneously. The high-level properties shown in FIG. 7 may include: custom creation Field, Auto school First, Auto Complete, codeable, Collsan, Condition Map, custom Object relationship, Event target code, Format, Help text, Ingorepargerodly, layout, max length message, max length, min length message, min length, place holder, process option, mask, required message, window option, show value tooltip, style, value group, value to string, width, and width allocation. These high-level attributes all have default attributes, which can be configured according to specific application requirements. These attribute configurations may also be associated with event configurations. For example, when configuring an event of a component as a refresh event, the refresh event can involve a refresh of an associated attribute.
In fig. 6 and 7, the first view of the configuration page is shown on the second view of the editing page, the configuration page covers a part of the editing page, and when the focus frame is located in the first view, the items of the configuration page are in an editable state, and the editing page is not in the node frame and is in a non-editable state. The configuration page in the editable state may receive an editing operation by the user.
In some embodiments, selecting a field configuration may present an interface as shown in FIG. 8. Under the field configuration, many candidates are shown, from which the fields of the graphical element can be configured. In the example shown in FIG. 8, a Category Type field is selected for the graphical element. After the field attribute is determined, the JSON data file corresponding to the edit page is updated accordingly.
In some embodiments, selecting an event configuration may present a configuration page as shown in fig. 9 and 10. In the page shown in fig. 9, in the right display area, the configuration option of the trigger point of the event and the trigger option of the event are displayed, and when the button circled by the box of the event is clicked, the source code corresponding to the event can be displayed in the right area. Furthermore, the source code exposed in the right area is editable, that is, the user can modify, save and run the source code to change the relevant operations and results of the event. In some embodiments, the event configuration may include click, double click, left click, and right click events for the component, and may also include configurations of the corresponding events before and after rendering. In some embodiments, the component may be configured with events as shown in the code on the right side of FIG. 9. In other embodiments, the component may also be set up with events as shown in the right code of FIG. 10. That is, after an event is configured for the graphical element corresponding to the component, after the operation corresponding to the trigger point is received, the operation corresponding to the event is executed. In some embodiments, the action events shown in fig. 9 and 10 may also be configured for the component simultaneously. Upon receiving the trigger operation, the actions shown in fig. 9 and 10 are performed in order.
And S560, receiving a selection of a user on a configuration item of the first graphical element displayed in the configuration page, displaying a candidate item of the selected configuration item in a preset area of the configuration page according to the selection of the configuration item, receiving an input of the user on the candidate item, and updating the JSON data file related to the first graphical element in the first editing page according to the input.
In the embodiment of the present invention, the configuration items displayed on the configuration page are editable, and during the configuration process, the configuration items may be selected, for example, the attribute configuration shown in fig. 6 is selected, and after the selection, candidates of the attribute configuration are displayed on a part of the configuration page, for example, candidates of the basic attribute shown in fig. 6 or candidates of the high-level attribute shown in fig. 7. The user may enter corresponding configuration information for these candidates. Then, according to the input of the candidate item by the user, the JSON data file of the first graphical element in the first editing page is updated.
In some embodiments, for example, in the example shown in FIG. 8, a Category Type field is selected for the graphical element. After the field attribute is determined, the JSON data file corresponding to the edit page is updated accordingly.
In some embodiments, in the examples shown in fig. 9 and 10, input configuration may be performed on the candidates of the configuration items shown in the configuration page, such as trigger points and defined events. After the input configuration is completed, the JSON data file corresponding to the editing page is updated accordingly.
In some embodiments, when the configuration item is an event configuration, the presenting the candidate item of the selected configuration item in a predetermined area of the configuration page includes: and displaying a trigger option and an event action of the event configuration in a preset area of the configuration page, wherein the trigger option comprises a preset trigger point, and the event action comprises a preset action selection. For example, as shown in the interface of fig. 9, the trigger point is onchange, and the event is defined as custom Action.
In some embodiments, the methods of the invention further comprise: and further displaying an editable source code corresponding to the event action in the preset area, receiving the editing operation of the user on the editable source code, updating the editable source code, and storing the updated editable source code to the event action. For example, as shown in FIG. 9, by clicking on the box button that defines an event, the source code for the event can be viewed, revealing the source code within the right rectangular box. The right source code is in an editable state, and a user can manually modify the code in the right source code and store the modified code. According to the event configuration mode provided by the embodiment of the invention, a user can flexibly modify the event action code after selecting the preset code, and the configuration mode improves the flexibility of the event action configuration.
In an embodiment of the present invention, the first editing page may include a second graphical element in addition to the first graphical element. In the event configuration of the first graphical element, a second graphical element associated with the first graphical element may also be involved. The updated source code of the first graphical element is associated with the second graphical element, the method of the present invention may further comprise: updating the configuration project in the first editing page about the second graphical element according to the updated editable source code.
In some embodiments, the container assembly may also include a mold configuration, as shown in fig. 11. It has been mentioned above that a plurality of basic components may be provided in the container component, and these basic components may include property configuration items, field configuration items, event configuration items, and the like. And the model configuration item of the graphic element corresponding to the container component is a field configuration item of the basic component item in the container component. For example, if the container card is a policy, in which the fields of the input box are configured as a policy number, then the model of the container card is configured as the policy number.
The embodiment of the invention also provides a method for configuring the dialog box in the page, and as shown in fig. 12, a flow diagram of the method for configuring the dialog box in the page is shown. The method can comprise the following steps: step S1210, step S1220, and step S1230, which are described below with reference to specific embodiments.
S1210, displaying a tool component configured on a page in a first area of a user interface, and displaying a page to be edited in a second area of the user interface, wherein the tool component comprises a dialog box, and the page to be edited occupies the whole area of the second area.
In the embodiment of the invention, a first area of the user interface shows a tool component of page configuration, and a second area shows a page to be edited, as shown in fig. 2 and 3. The tool component may include a dialog box. As shown in fig. 2 and fig. 3, the page to be edited occupies the entire area of the second area, that is, the page to be edited is tiled to cover the second area completely.
And S1220, receiving the dragging of the first dialog box component in the dialog box components by the user in the first area.
In an embodiment of the present invention, the dialog box displayed in the first area may be selected and dragged, for example, by clicking and dragging with a mouse. With regard to the description of step 1220, reference may be made to the above description of S520 and S120.
S1230, when the first dialog box component is dragged to the second area, zooming out a first view in which a page to be edited in the second area is located, and displaying a first graphical element corresponding to the first dialog box component in a second view below the first view in the second area.
In the embodiment of the invention, the dragged dialog box component is invisible on the page to be edited, that is, the dialog box dragged to the page to be edited is not displayed on the page to be edited, but appears on the page only when the page to be edited is operated and a preset trigger condition is met. In the configuration process of the dialog box, after the dragged dialog box is dragged to the second area, the dragged dialog box is not presented on a view of a page to be edited like tool components such as an input box component and a data component, but a first view where the page to be edited is located in the second area is zoomed out, and a first graphical element corresponding to the first dialog box component is displayed in a second view below the first view in the second area. For example, a DIALOG DIALOG box shown in the view below the property risk rate calculation page shown in FIG. 13. The page view and the dialog box are displayed in an overlapping mode in the second area, the page view and the dialog box are sequentially arranged, the front view partially covers the rear view, and the content of the dialog box is partially displayed.
In some embodiments of the invention, the method further comprises: receiving a user's drag on a second dialog box in the dialog box component in a first region; when the second dialog box is dragged to the second area, a second graphic element corresponding to the second dialog box is displayed in a third view below the second view. As shown in fig. 13, after dragging the first dialog box to the second region, the graphical element of the first dialog box is displayed under the page, and after dragging the second dialog box to the second region, the second graphical element corresponding to the second dialog box is displayed under the graphical element of the first dialog box. It should be noted that, in addition to dragging the second dialog box to the second region, a third dialog box may be dragged to the second region. In fig. 13, three dialog interfaces are presented below the page. The first view of the page to be edited, the second view of the first graphical element and the third view of the second graphical element can be switched, that is, the first view, the second view or the third view can be selected through the input device, and one of the first view, the second view or the third view is taken as a focus to be edited. That is, by switching views, the configuration of the dialog and the page is realized. The visual mode of switching the view is used for configuring the dialog box which is not directly displayed on the page, the invisible elements of the page can still be visually configured, the user can see and obtain the elements, and the configuration experience of the user is improved.
In some embodiments of the invention, the method further comprises: receiving selection of a first graphical element in the second view by the user, displaying the second view corresponding to the first graphical element as a focus view, configuring a trigger condition of the first graphical element on the focus view, and displaying the first view and a third view as background views of the second view. As described above, the second view in which the first graphical element in the second area is located and the first view in which the page is located may be switched, the switched view being the focus view, and the other view being the background view. The trigger condition of the graphic element corresponding to the dialog box can be configured on the focus view.
In some embodiments, the second view corresponding to the first graphical element is displayed in a form of partially covering a third view corresponding to the second graphical element, and a partial text identifier of the second graphical element corresponding to the third view is reserved. For example, as shown in fig. 13, the DIALOG text typeface in the second graphical element is retained.
In some embodiments, where multiple dialog boxes are configured simultaneously, there are multiple dialog box graphical elements in the second region, with a first graphical element in the second view and a second graphical element in the third view being presented in a color distinction. For example, as shown in FIG. 13, the color of the rectangular bar in the upper left corner of the dialog graphical element beneath the page is different. In other embodiments, other ways of color differentiation may also be employed, such as presenting the entire dialog box edge differently colored.
As indicated above, the tools component of the first region presentation, in addition to comprising a dialog box component, comprises: the tool component is configured with corresponding models and events, and can also be configured with attributes, fields and the like.
As described above, embodiments of the present invention relate not only to the configuration of dialog components, but also to the configuration of other components. The method of the present invention further comprises: receiving a drag by the user on a first one of a container component, an input box component, a button component, and a data component of the tool components in a first area; generating a third graphical element corresponding to the first component in the page to be edited in the second area; and receiving the selection of the user on the third graphical element, and displaying a configuration item corresponding to the third graphical element, wherein the configuration item comprises a model and an event.
In some embodiments, configuring the trigger condition of the first graphical element on the focus view comprises: setting a trigger condition of the first graphical element to be associated with a model or event of the third graphical element. That is, the trigger condition for the dialog graphical element may be set to be associated with a model or event of another tool component. For example, it may be arranged that when the model of the input box is a predetermined model, a dialog box pops up to prompt the user. For another example, when the event of a certain tool component is a predetermined event, a dialog box pops up to prompt the user.
In some embodiments, the 3 dialog elements shown in fig. 13 may be three parallel dialog elements of the same page. In other embodiments, the 3 dialog elements shown in fig. 13 may be three dialog elements that are progressive, e.g., the second dialog box pops up when the selection of the first dialog box is a predetermined selection, and the third dialog box pops up when the selection of the second dialog box is a predetermined selection.
The embodiment of the invention also provides computer equipment. As shown in fig. 14, the computer device 1400 may comprise a memory 1401 and a processor 1402, wherein the memory 1401 stores computer programs and the processor 1402 is configured to execute the computer programs to implement the above-mentioned method. The computer device may be a personal computer, laptop computer or other portable computer device.
Embodiments of the present invention also provide a computer-readable storage medium having a computer program stored thereon, which when executed, performs the above-described method.
Through the above description of the embodiments, those skilled in the art will clearly understand that the present invention can be implemented by combining software and a hardware platform. With this understanding in mind, all or part of the technical solutions of the present invention that contribute to the background art may be embodied in the form of a software product, which can be stored in a storage medium, such as a ROM/RAM, a magnetic disk, an optical disk, etc., and includes instructions for causing a computer device (which may be a personal computer, a server, a smart phone, or a network device, etc.) to execute the methods according to the embodiments or some parts of the embodiments.
The terms and expressions used in the specification of the present invention have been set forth for illustrative purposes only and are not meant to be limiting. It will be appreciated by those skilled in the art that changes could be made to the details of the above-described embodiments without departing from the underlying principles thereof. The scope of the invention is, therefore, indicated by the appended claims, in which all terms are intended to be interpreted in their broadest reasonable sense unless otherwise indicated.
Claims (10)
1. A method for configuring a page component, the method comprising:
displaying a user interface, wherein a first area of the user interface displays a page component, and a second area of the user interface displays a page to be edited;
receiving a drag of a first component in the page components by a user in the first area;
in response to the first component being dragged to a preset position of the second area, generating a first graphical element corresponding to the first component at the preset position in the page to be edited;
receiving a configuration request for the first graphical element;
superposing a configuration page for displaying the first graphical element on a first editing page of the graphical user interface, wherein the configuration page is positioned in a first view and is in an editable state, and the first editing page is positioned in a second view below the first view and is in a non-editable state;
receiving user selection of a configuration item of the first graphical element shown in the configuration page, wherein the configuration item comprises one or more of attribute configuration, field configuration, model configuration and event configuration;
and displaying a candidate item of the selected configuration item in a preset area of the configuration page according to the selection of the configuration item, receiving the input of the user to the candidate item, and updating the JSON data file related to the first graphical element in the first editing page according to the input.
2. The method of claim 1, wherein when the configuration item is an event configuration, the presenting the candidate item of the selected configuration item in the predetermined area of the configuration page comprises:
and displaying a trigger option and an event action of the event configuration in a preset area of the configuration page, wherein the trigger option comprises a preset trigger point, and the event action comprises a preset action selection.
3. The method of claim 2, further comprising:
and further displaying an editable source code corresponding to the event action in the preset area, receiving the editing operation of the user on the editable source code, updating the editable source code, and storing the updated editable source code to the event action.
4. The method of claim 3, wherein the first editing page further comprises a second graphical element.
5. The method of claim 4, wherein the updated editable source code is associated with the second graphical element, the method further comprising:
updating the configuration project in the first editing page about the second graphical element according to the updated editable source code.
6. The method of claim 4, wherein the first graphical element is a graphical element corresponding to a container component, and the second graphical element is a base component, the base component being one or more of an input box component, a data component, and a button component.
7. The method of claim 6, wherein the first graphical element comprises a property configuration item, a model configuration item, and an event configuration item; the basic components include property configuration items, field configuration items, and event configuration items.
8. The method of claim 7, further comprising:
and updating the model configuration item of the first graphical element according to the field configuration item of the second graphical element.
9. A computer device comprising a memory and a processor, wherein,
a memory configured to store a computer program;
a processor configured to execute the computer program to implement the method of claims 1 to 8.
10. A computer-readable storage medium having stored thereon computer instructions which, when executed by a processor, implement the method of claims 1 to 8.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910643669.5A CN112241263A (en) | 2019-07-17 | 2019-07-17 | Visual page processing method and equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910643669.5A CN112241263A (en) | 2019-07-17 | 2019-07-17 | Visual page processing method and equipment |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112241263A true CN112241263A (en) | 2021-01-19 |
Family
ID=74167426
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910643669.5A Pending CN112241263A (en) | 2019-07-17 | 2019-07-17 | Visual page processing method and equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112241263A (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113407078A (en) * | 2021-06-07 | 2021-09-17 | 远光软件股份有限公司 | Method and device for editing character icon, storage medium and terminal |
| CN113657079A (en) * | 2021-07-26 | 2021-11-16 | 浙江中控技术股份有限公司 | Industrial process editing system for tank field management |
| CN114371889A (en) * | 2022-01-19 | 2022-04-19 | 苏州峰之鼎信息科技有限公司 | Event configuration method and device, electronic equipment and storage medium |
| CN115543290A (en) * | 2022-10-12 | 2022-12-30 | 睿珀智能科技有限公司 | Visual programming method and system |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| AU3562699A (en) * | 1998-04-15 | 1999-11-16 | Adc Telecommunications, Incorporated | Visual data integration system and method |
| CN102360296A (en) * | 2011-10-20 | 2012-02-22 | 北京金和软件股份有限公司 | WEB-based online form development tool |
| CN104636139A (en) * | 2015-01-26 | 2015-05-20 | 北京邮电大学 | Visualized cross-platform mobile application development and generation system |
| US20160070813A1 (en) * | 2014-09-10 | 2016-03-10 | Telefonaktiebolaget L M Ericsson (Publ) | Interactive web application editor |
| CN106201489A (en) * | 2016-06-30 | 2016-12-07 | 乐视控股（北京）有限公司 | A kind of page editing method and apparatus |
| CN106843846A (en) * | 2016-12-26 | 2017-06-13 | 国网信息通信产业集团有限公司 | A kind of MX frame pages designer and method for designing |
| CN107291462A (en) * | 2017-06-13 | 2017-10-24 | 成都四方伟业软件股份有限公司 | The self-defined method of combination of interactive data system, system and compiling, operation method |
| CN107783762A (en) * | 2017-11-24 | 2018-03-09 | 重庆金融资产交易所有限责任公司 | Interface creating method, device, storage medium and computer equipment |
| CN108021310A (en) * | 2016-10-28 | 2018-05-11 | 中国电信股份有限公司 | Mobile phone page makeup method and apparatus |
| CN108762760A (en) * | 2018-05-25 | 2018-11-06 | 中国平安人寿保险股份有限公司 | Software interface customizing method, device, computer equipment and storage medium |
-
2019
- 2019-07-17 CN CN201910643669.5A patent/CN112241263A/en active Pending
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| AU3562699A (en) * | 1998-04-15 | 1999-11-16 | Adc Telecommunications, Incorporated | Visual data integration system and method |
| CN102360296A (en) * | 2011-10-20 | 2012-02-22 | 北京金和软件股份有限公司 | WEB-based online form development tool |
| US20160070813A1 (en) * | 2014-09-10 | 2016-03-10 | Telefonaktiebolaget L M Ericsson (Publ) | Interactive web application editor |
| CN104636139A (en) * | 2015-01-26 | 2015-05-20 | 北京邮电大学 | Visualized cross-platform mobile application development and generation system |
| CN106201489A (en) * | 2016-06-30 | 2016-12-07 | 乐视控股（北京）有限公司 | A kind of page editing method and apparatus |
| CN108021310A (en) * | 2016-10-28 | 2018-05-11 | 中国电信股份有限公司 | Mobile phone page makeup method and apparatus |
| CN106843846A (en) * | 2016-12-26 | 2017-06-13 | 国网信息通信产业集团有限公司 | A kind of MX frame pages designer and method for designing |
| CN107291462A (en) * | 2017-06-13 | 2017-10-24 | 成都四方伟业软件股份有限公司 | The self-defined method of combination of interactive data system, system and compiling, operation method |
| CN107783762A (en) * | 2017-11-24 | 2018-03-09 | 重庆金融资产交易所有限责任公司 | Interface creating method, device, storage medium and computer equipment |
| CN108762760A (en) * | 2018-05-25 | 2018-11-06 | 中国平安人寿保险股份有限公司 | Software interface customizing method, device, computer equipment and storage medium |
Non-Patent Citations (1)
| Title |
|---|
| MIKECRM: "表单内容编辑页面功能介绍", Retrieved from the Internet <URL:https://wiki.de.mikecrm.com/form-edit> * |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113407078A (en) * | 2021-06-07 | 2021-09-17 | 远光软件股份有限公司 | Method and device for editing character icon, storage medium and terminal |
| CN113657079A (en) * | 2021-07-26 | 2021-11-16 | 浙江中控技术股份有限公司 | Industrial process editing system for tank field management |
| CN113657079B (en) * | 2021-07-26 | 2024-02-02 | 浙江中控技术股份有限公司 | Industrial flow editing system for tank farm management |
| CN114371889A (en) * | 2022-01-19 | 2022-04-19 | 苏州峰之鼎信息科技有限公司 | Event configuration method and device, electronic equipment and storage medium |
| CN114371889B (en) * | 2022-01-19 | 2023-10-13 | 苏州峰之鼎信息科技有限公司 | Event configuration method, device, electronic equipment and storage medium |
| 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 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112241263A (en) | Visual page processing method and equipment | |
| CN112241265A (en) | Visual page processing method and equipment | |
| US7522176B2 (en) | Dynamically generating mini-graphs to represent style and template icons | |
| Alexander et al. | Excel dashboards and reports | |
| Glinz et al. | Object-oriented modeling with ADORA | |
| US7603632B1 (en) | System and method for creating customizable nodes in a network diagram | |
| US8015550B2 (en) | Systems and methods for hazards analysis | |
| US8418070B2 (en) | Developing user interface element settings | |
| US20150007085A1 (en) | Data visualizations including interactive time line representations | |
| CN111125560B (en) | Data visualization processing method, device and computer system | |
| US8386919B2 (en) | System for displaying an annotated programming file | |
| US9710938B2 (en) | Graph expansion mini-view | |
| Pauwels et al. | Building an interaction design pattern language: A case study | |
| CN103677802B (en) | The system and method for improved consumption model for analysis | |
| CN111881662A (en) | Form generation method, device, processing equipment and storage medium | |
| WO2020151446A1 (en) | Method and device for setting mode of monitoring system | |
| US20060225091A1 (en) | Customizing and personalizing views in content aggregation frameworks | |
| US20140075411A1 (en) | Meta-Languages For Creating Integrated Business Applications | |
| US8768743B2 (en) | Product space browser | |
| US10467782B2 (en) | Interactive hierarchical bar chart | |
| CN112558967A (en) | Page automatic generation method and device, electronic equipment and storage medium | |
| US10289388B2 (en) | Process visualization toolkit | |
| US20190212904A1 (en) | Interactive time range selector | |
| CN116956847A (en) | Report management method and device | |
| CN112241264A (en) | Visual page processing method and equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20210119 |
|
| WD01 | Invention patent application deemed withdrawn after publication |