Component processing method and device, component development tool and storage medium

Abstract

The invention relates to the technical field of electronics, in particular to a component processing method and device, a component development tool and a storage medium, and the component processing method is applied to the component development tool. The component development tool provides a component library and a form display interface; a form generation control is arranged in the form display interface; a plurality of atomic components, basic components and custom components are stored in the component library; the method comprises the step of responding to dragging operation for a plurality of first target components in the component library to the form display interface. According to the component processing method and device, the component development tool and the storage medium provided by the invention, the attribute editing operation is performed on the plurality of first target components dragged to the display interface, then the plurality of first target components are analyzed and rendered to generate the form, and the editing operation is performed according to the demand adaptability in the attribute editing operation process, so that the user experience is improved. And the flexibility of form generation is improved.

Description

Technical Field

[0001] The present invention relates to the field of electronic technology, and in particular to a component processing method, device, component development tool, and storage medium. Background Art

[0002] With the rapid development of informatization in today's society, forms, as a widely used information collection medium, have more and more diversified and personalized needs. The flexibility and convenience of form design are also increasingly valued by people.

[0003] However, existing form designers only provide basic components for users to use. The components that can be selected vary depending on the business requirements in each scenario, resulting in too many components to be developed, too long a development cycle, and too much investment in adjusting the original components or developing new components after the requirements change. Therefore, the method of editing and combining fixed basic components in the component library to generate forms cannot meet users' customization needs for forms, resulting in poor flexibility in form generation. Summary of the invention

[0004] In view of this, an object of the present invention is to provide a component processing method, device, component development tool, and storage medium to improve the flexibility of component development.

[0005] In a first aspect, an embodiment of the present invention provides a component processing method, which is applied to a component development tool; the component development tool provides a component library and a form display interface; a form generation control is provided in the form display interface; the component library stores a variety of atomic components, basic components and custom components; the method comprises:

[0006] In response to a dragging operation on a plurality of first target components in the component library to the form display interface, displaying the plurality of first target components in the form display interface; wherein the first target component is one of an atomic component, a basic component, and a custom component;

[0007] In response to a property editing operation on each of the first target components, adjusting display content of each of the first target components according to the property editing operation;

[0008] In response to a first touch operation on the form generation control, the plurality of first target components are parsed, and the obtained parsed data is rendered to generate a form.

[0009] In combination with the first aspect, the component development tool further provides a form preview interface, a preview control, and a form publishing control; the method further includes:

[0010] In response to a second touch operation on the preview control, displaying the form on the form preview interface;

[0011] When there is no problem in the preset check on the form, in response to the third touch operation on the form publishing control, the form is saved and published; the preset check includes at least one of the following: table style, table content.

[0012] In combination with the first aspect, the generation process of the custom component in the component library is as follows:

[0013] In response to a drag operation on a container component in a component library, display the container component in a component display interface;

[0014] In response to a drag operation on a plurality of second target components into the container component, determining the belonging relationship between the plurality of second target components and the container component; the second target components are atomic components or basic components;

[0015] In response to the property editing operation for each of the second target components, the properties corresponding to each of the second target components are adjusted to obtain a custom component; the properties include: style properties, state properties, and event properties.

[0016] In combination with the first aspect, in response to the property editing operation on each of the second target components, the step of adjusting the property corresponding to each of the second target components includes:

[0017] For each of the second target components, in response to the property triggering operation on the second target component, a property editing interface corresponding to the second target component is displayed; the property editing interface is provided with a style editing option, a state editing option, and an event editing option;

[0018] In response to an editing operation or a selection operation on the style editing option, the state editing option, or the event editing option, a property corresponding to the second target component is adjusted.

[0019] In combination with the first aspect, the method further includes:

[0020] In response to a preview operation on the custom component, displaying a presentation form of the custom component in a form;

[0021] In response to the function detection operation for the custom component, a corresponding function is executed according to the event attribute corresponding to the custom component, so that the user can judge whether the requirement is met;

[0022] After meeting the requirements, in response to a save operation on the custom component, the json object corresponding to the custom component is stored in a backend database, and the custom component is displayed in a component library.

[0023] In combination with the first aspect, the step of displaying the custom component in the component library includes:

[0024] Get the style attribute corresponding to the custom component;

[0025] Determine a target component area in the component library according to the style attribute;

[0026] The custom component is displayed in the target component area.

[0027] In a second aspect, a component processing device is applied to a component development tool; the component development tool provides a component library and a form display interface; a form generation control is provided in the form display interface; the component library stores a variety of atomic components, basic components and custom components; the device comprises:

[0028] A component display module, configured to respond to a drag operation on a plurality of first target components in the component library to the form display interface, and display the plurality of first target components in the form display interface; wherein the first target component is one of an atomic component, a basic component, and a custom component;

[0029] A property editing module, used to respond to a property editing operation on each of the first target components and adjust the display content of each of the first target components according to the property editing operation;

[0030] The form generation module is used to respond to the first touch operation on the form generation control, parse the plurality of the first target components, and render the obtained parsed data to generate a form.

[0031] In conjunction with the second aspect, the component development tool further provides a form preview interface, a preview control, and a form publishing control, and the device further includes:

[0032] A form preview module, configured to respond to a second touch operation on the preview control and display the form on the form preview interface;

[0033] The form saving and publishing module is used to save and publish the form in response to a third touch operation on the form publishing control when there is no problem with the preset check on the form; the preset check includes at least one of the following: table style, table content.

[0034] In a third aspect, the present application provides a component development tool, the component development tool comprising a memory and a processor, the memory storing a computer program, and the processor executing the computer program to implement the above method.

[0035] In a fourth aspect, the present application provides a storage medium storing a computer program, wherein the computer program is executed by a processor to implement the above method.

[0036] The embodiments of the present invention bring the following beneficial effects: the present invention provides a component processing method, device, component development tool, and storage medium, wherein the component processing method is applied to the component development tool; the component development tool provides a component library and a form display interface; the form display interface is provided with a form generation control; the component library stores a variety of atomic components, basic components, and custom components; the method comprises:

[0037] In response to a dragging operation on a plurality of first target components in the component library to the form display interface, displaying the plurality of first target components in the form display interface; wherein the first target component is one of an atomic component, a basic component, and a custom component;

[0038] In response to a property editing operation on each of the first target components, adjusting display content of each of the first target components according to the property editing operation;

[0039] In response to a first touch operation on the form generation control, the plurality of first target components are parsed, and the obtained parsed data is rendered to generate a form.

[0040] The component processing method, device, component development tool, and storage medium provided in the present application perform property editing operations on multiple first target components dragged to the display interface, and then parse and render the multiple first target components to generate a form. During the property editing operation, the editing operation is adaptively performed according to the needs, thereby improving the flexibility of form generation.

[0041] Other features and advantages of the present invention will be described in the following description, and partly become apparent from the description, or understood by practicing the present invention. The purpose and other advantages of the present invention are realized and obtained by the structures particularly pointed out in the description, claims and drawings.

[0042] In order to make the above-mentioned objects, features and advantages of the present invention more obvious and easy to understand, preferred embodiments are given below and described in detail with reference to the accompanying drawings. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] In order to more clearly illustrate the specific implementation methods of the present invention or the technical solutions in the prior art, the drawings required for use in the specific implementation methods or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some implementation methods of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without paying any creative work.

[0044] Figure 1 A flow chart of a processing method of a component provided by an embodiment of the present invention;

[0045] Figure 2 A flow chart of a process for generating a custom component in a component processing method provided in an embodiment of the present invention;

[0046] Figure 3 A flowchart of displaying a custom component in a component library in a component processing method provided in an embodiment of the present invention;

[0047] Figure 4 A flow chart of a processing method for a component provided in Example 2 of the present invention;

[0048] Figure 5 A schematic diagram of the structure of a processing device of a component provided in an embodiment of the present invention;

[0049] Figure 6 A schematic diagram of the structure of a component development tool provided in an embodiment of the present invention.

[0050] Reference numerals:

[0051] 10-component display module, 20-property editing module, 30-form generation module, 40-form preview module, 50-form saving and publishing module. DETAILED DESCRIPTION

[0052] In order to make the purpose, technical solution and advantages of the embodiments of the present invention clearer, the technical solution of the present invention will be clearly and completely described below in conjunction with the accompanying drawings. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of the present invention.

[0053] In order to facilitate the understanding of this embodiment, the application scenarios and design concepts of the embodiments of the present application are briefly introduced below.

[0054] With the rapid development of informatization in today's society, forms, as a widely used medium for information collection, have also had more and more diversified and personalized demands. The flexibility and convenience of form design are also increasingly valued by people. However, the existing form designers only provide basic components for users to use. The selectable components in the form designer have different business requirements in various scenarios, resulting in too many components to be developed and a long development cycle. The investment in adjusting the original components or developing new components after the demand changes is too large, which makes the component development flexibility poor and cannot meet the diverse and personalized needs of users.

[0055] Based on this, the embodiments of the present application provide a component processing method, device, system, component development tool and storage medium to improve the flexibility of component development.

[0056] The component processing method provided in the embodiment of the present application is applied to component development tools, such as Figure 6 As shown, the component development tool includes a memory and a processor, the memory stores a computer program, and the processor executes the computer program to implement the component processing method as described above.

[0057] Example 1

[0058] This embodiment provides a component processing method, which is applied to a component development tool; the component development tool provides a component library and a form display interface; a form generation control is provided in the form display interface; and a component library stores a variety of atomic components, basic components, and custom components.

[0059] Combination Figure 1 As shown, the method provided in this embodiment specifically includes the following steps:

[0060] S110, the processor responds to the dragging operation of multiple first target components in the component library to the form display interface, and displays the multiple first target components in the form display interface; wherein the first target component is one of an atomic component, a basic component and a custom component.

[0061] S120: The processor responds to the property editing operation for each first target component and adjusts the display content of each first target component according to the property editing operation.

[0062] S130: In response to a first touch operation on a form generation control, the processor parses a plurality of first target components and renders the obtained parsed data to generate a form.

[0063] The component processing method provided in this embodiment displays multiple first target components in the form display interface, then performs property editing operations to adjust the display content of the first target components, and finally generates a form by parsing and rendering the first target components. Since the first target components include at least one of atomic components, basic components and custom components, different first target components can be selected according to the form generation requirements to generate a form that meets personalized or customized requirements, thereby improving the flexibility of form generation and meeting different user needs.

[0064] Combined with the first aspect, the generation process of custom components in the component library is as follows Figure 2 As shown, specifically:

[0065] S210: The processor responds to a drag operation on a container component in a component library and displays the container component in a component display interface.

[0066] S220, the processor determines the belonging relationship between the plurality of second target components and the container component in response to the dragging operation on the plurality of second target components into the container component; the second target components are atomic components or basic components.

[0067] S230, the processor responds to the property editing operation for each second target component, adjusts the properties corresponding to each second target component, and obtains a custom component; the properties include: style properties, state properties, and event properties.

[0068] In this embodiment, the container component in the component library is displayed in the component display interface by dragging the container component, and then multiple second target components are dragged into the container component to establish a subordinate relationship between the multiple second target components and the container component, and then the properties of each second target component are edited to obtain a custom component that meets the custom requirements.

[0069] Among them, the attributes include: style attributes, state attributes, and event attributes. For example, style attributes may include the button's width, height, color, background image, text content, border style, rounded corner style, shadow style, etc.; state attributes include the target address, size, quantity, format, etc. of the file upload.

[0070] Step S230 responds to the property editing operation for each second target component and adjusts the property corresponding to each second target component, specifically including:

[0071] The processor responds to the property triggering operation on the second target component for each second target component and displays a property editing interface corresponding to the second target component; the property editing interface is provided with a style editing option, a state editing option, and an event editing option;

[0072] The processor adjusts the corresponding property of the second target component in response to an editing operation or a selection operation on a style editing option, a state editing option, or an event editing option.

[0073] By editing the properties of the second target component and changing the corresponding property parameters or types according to the custom requirements, a custom component that meets the custom requirements is generated.

[0074] For example: The custom requirement is to generate a custom component for a single-select image.

[0075] According to the above custom requirements, select Atomic Component-Text, Atomic Component-Image and Atomic Component-Single Selection;

[0076] Drag a container component from the component library to the component display interface, and give the container component the name: Picture Radio Component; then drag the above three atomic components (Atomic Component-Text, Atomic Component-Picture and Atomic Component-Radio) to the container component named Picture Radio Component, and modify the properties of the above three atomic components, such as editing and modifying the parameters of position, size, shadow, border, and rounded corners in the style properties of Atomic Component-Picture and Atomic Component-Radio; then edit and modify the state properties of the three atomic components, such as editing component state properties such as text content, image content, and default values ​​of radio; then, modify the event properties of the above three atomic components, such as editing the event properties for obtaining image and text data when the radio component is touched. Among them, the order of editing each property is obtained according to the user operation and is not restricted here.

[0077] In combination with the first aspect, in response to a preview operation on the custom component, a presentation form of the custom component in the form is displayed;

[0078] In response to the function detection operation for the custom component, the corresponding function is executed according to the event attribute corresponding to the custom component, so that the user can judge whether it meets the requirements;

[0079] After meeting the requirements, in response to the save operation on the custom component, the json object corresponding to the custom component is stored in the backend database, and the custom component is displayed in the component library.

[0080] The presentation form and function of the custom component in the form are tested through the preview operation. If it meets the requirements, the json object corresponding to the custom component is stored in the backend database, and the custom component is saved and displayed in the component library.

[0081] Specific, combined Figure 3 As shown in the figure, the steps to display a custom component in the component library include:

[0082] S310, obtaining style attributes corresponding to the custom component.

[0083] S320: Determine a target component area in the component library according to the style attribute.

[0084] S330, displaying the custom component in the target component area.

[0085] The json object corresponding to the custom component includes the style attributes such as size and position of the custom component, state attributes and event attributes containing data execution methods. The json object is classified into types according to one or more style attributes in the json data, thereby classifying the custom component. The target component area of ​​the custom component in the component library is determined according to the type of the json object, and then the custom component is displayed in the target component area. In this way, the classification operation of the custom component is realized.

[0086] Among them, the style attributes include type attributes and parentID attributes. The type of the json object corresponding to the custom component is determined according to the type attribute; the target component area to which the custom component belongs and the methods that the json object should have are determined according to the parentID attribute.

[0087] Example 2

[0088] The difference between this embodiment and Embodiment 1 is that the component development tool also provides a form preview interface, a preview control, and a form publishing control.

[0089] Combination Figure 4 As shown, the method provided in this embodiment specifically includes the following steps:

[0090] S410, the processor responds to the dragging operation of multiple first target components in the component library to the form display interface, and displays the multiple first target components in the form display interface; wherein the first target component is one of an atomic component, a basic component and a custom component.

[0091] S420: The processor responds to the property editing operation for each first target component and adjusts the display content of each first target component according to the property editing operation.

[0092] S430: In response to the first touch operation on the form generation control, the processor parses the multiple first target components and renders the obtained parsed data to generate a form.

[0093] S440: The processor displays the form on the form preview interface in response to the second touch operation on the preview control.

[0094] S450, when the processor performs preset check on the form and there is no problem, responds to the third touch operation on the form publishing control, saves and publishes the form; the preset check includes at least one of the following: table style, table content.

[0095] In this embodiment, after executing steps S410-S430 to generate a form, in response to a second touch operation on the preview control, the form is displayed on the form preview interface, and then a preset check is performed on the form, and the form is saved and published when no problem is found. The form is previewed and displayed through the preview operation, so that the user can check whether the presentation form and logic of each first target component in the form meet expectations.

[0096] Example 3

[0097] The second aspect of the present application provides a component processing device, which is applied to a component development tool; the component development tool provides a component library and a form display interface; a form generation control is provided in the form display interface; and the component library stores a variety of atomic components, basic components and custom components.

[0098] Combination Figure 5 As shown, the device includes: a component display module 10, a property editing module 20 and a form generating module 30.

[0099] The component display module 10 is used to respond to the dragging operation of multiple first target components in the component library to the form display interface, and display multiple first target components in the form display interface; wherein the first target component is one of an atomic component, a basic component and a custom component.

[0100] The property editing module 20 is used to respond to the property editing operation for each first target component and adjust the display content of each first target component according to the property editing operation.

[0101] The form generation module 30 is used to respond to a first touch operation on the form generation control, parse a plurality of first target components, and render the obtained parsed data to generate a form.

[0102] The component display module 10 displays multiple first target components dragged to the display interface, and then the properties of the multiple first target components are edited through the property editing module 20, and then the form generation module 30 generates a form that meets the user's needs to improve the flexibility and diversity of form generation.

[0103] In conjunction with the second aspect, the component development tool also provides a form preview interface, a preview control, and a form publishing control. The device also includes: a form preview module 40 and a form save and publish module 50 (such as Figure 5 shown).

[0104] The form preview module 40 is used to respond to the second touch operation on the preview control and display the form on the form preview interface.

[0105] The form saving and publishing module 50 is used to save and publish the form in response to a third touch operation on the form publishing control when the form is checked for problems; the preset check includes at least one of the following: form style, form content.

[0106] In a third aspect, the present application provides a component development tool, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the component processing method as described above.

[0107] In a third aspect, this embodiment provides a storage medium storing a computer program, wherein the computer program is executed by a processor to implement the processing method of the above-mentioned component.

[0108] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working process of the system and device described above can refer to the corresponding process in the aforementioned method embodiment, and will not be repeated here.

[0109] In addition, in the description of the embodiments of the present invention, unless otherwise clearly specified and limited, the terms "installed", "connected", and "connected" should be understood in a broad sense, for example, it can be a fixed connection, a detachable connection, or an integral connection; it can be a mechanical connection or an electrical connection; it can be a direct connection or an indirect connection through an intermediate medium, and it can be the internal communication of two components. For those skilled in the art, the specific meanings of the above terms in the present invention can be understood according to specific circumstances.

[0110] If the functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art or the part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium, including several instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the methods described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk, etc., which can store program codes.

[0111] In the description of the present invention, it should be noted that the terms "center", "upper", "lower", "left", "right", "vertical", "horizontal", "inner", "outer", etc., indicating the orientation or positional relationship, are based on the orientation or positional relationship shown in the drawings, and are only for the convenience of describing the present invention and simplifying the description, rather than indicating or implying that the device or element referred to must have a specific orientation, be constructed and operated in a specific orientation, and therefore cannot be understood as limiting the present invention. In addition, the terms "first", "second", and "third" are used for descriptive purposes only, and cannot be understood as indicating or implying relative importance.

[0112] Finally, it should be noted that the above embodiments are only specific implementations of the present invention, which are used to illustrate the technical solutions of the present invention, rather than to limit them. The protection scope of the present invention is not limited thereto. Although the present invention is described in detail with reference to the above embodiments, those skilled in the art should understand that any person skilled in the art can still modify the technical solutions recorded in the above embodiments within the technical scope disclosed by the present invention, or can easily think of changes, or make equivalent replacements for some of the technical features therein; and these modifications, changes or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention shall be based on the protection scope of the claims.

Claims

1. A component processing method, It is characterized in that The method is applied to a component development tool; the component development tool provides a component library and a form display interface; The form display interface is provided with a form generation control; The component library stores a variety of atomic components, basic components and custom components; the method includes: In response to a dragging operation on a plurality of first target components in the component library to the form display interface, displaying the plurality of first target components in the form display interface; wherein the first target component is one of an atomic component, a basic component, and a custom component; In response to a property editing operation on each of the first target components, adjusting display content of each of the first target components according to the property editing operation; In response to a first touch operation on the form generation control, the plurality of first target components are parsed, and the obtained parsed data is rendered to generate a form.

2. The method according to claim 1, It is characterized in that The component development tool also provides a form preview interface, a preview control, and a form publishing control; the method further includes: In response to a second touch operation on the preview control, displaying the form on the form preview interface; When there is no problem in the preset check on the form, in response to the third touch operation on the form publishing control, the form is saved and published; the preset check includes at least one of the following: table style, table content.

3. The method according to claim 1, It is characterized in that The generation process of the custom components in the component library is as follows: In response to a drag operation on a container component in a component library, display the container component in a component display interface; In response to a drag operation on a plurality of second target components into the container component, determining the belonging relationship between the plurality of second target components and the container component; the second target components are atomic components or basic components; In response to the property editing operation for each of the second target components, the properties corresponding to each of the second target components are adjusted to obtain a custom component; the properties include: style properties, state properties, and event properties.

4. The method according to claim 3, It is characterized in that In response to the property editing operation for each of the second target components, the step of adjusting the property corresponding to each of the second target components comprises: For each of the second target components, in response to the property triggering operation on the second target component, a property editing interface corresponding to the second target component is displayed; the property editing interface is provided with a style editing option, a state editing option, and an event editing option; In response to an editing operation or a selection operation on the style editing option, the state editing option, or the event editing option, a property corresponding to the second target component is adjusted.

5. The method according to claim 3, It is characterized in that The method further comprises: In response to a preview operation on the custom component, displaying a presentation form of the custom component in a form; In response to the function detection operation for the custom component, a corresponding function is executed according to the event attribute corresponding to the custom component, so that the user can judge whether the requirement is met; After meeting the requirements, in response to a save operation on the custom component, the json object corresponding to the custom component is stored in a backend database, and the custom component is displayed in a component library.

6. The method according to claim 5, It is characterized in that The step of displaying the custom component in the component library includes: Get the style attribute corresponding to the custom component; Determine a target component area in the component library according to the style attribute; The custom component is displayed in the target component area.

7. A component processing device, It is characterized in that The device is applied to a component development tool; the component development tool provides a component library and a form display interface; The form display interface is provided with a form generation control; The component library stores a variety of atomic components, basic components and custom components; the device includes: A component display module, configured to respond to a drag operation on a plurality of first target components in the component library to the form display interface, and display the plurality of first target components in the form display interface; wherein the first target component is one of an atomic component, a basic component, and a custom component; A property editing module, used to respond to a property editing operation on each of the first target components and adjust the display content of each of the first target components according to the property editing operation; The form generation module is used to respond to the first touch operation on the form generation control, parse the plurality of the first target components, and render the obtained parsed data to generate a form.

8. The device according to claim 7, It is characterized in that The component development tool also provides a form preview interface, a preview control, and a form publishing control. The device also includes: A form preview module, configured to respond to a second touch operation on the preview control and display the form on the form preview interface; The form saving and publishing module is used to save and publish the form in response to a third touch operation on the form publishing control when there is no problem with the preset check on the form; the preset check includes at least one of the following: table style, table content.

9. A component development tool, It is characterized in that The component development tool comprises a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the method according to any one of claims 1 to 6.

10. A storage medium, It is characterized in that The storage medium stores a computer program, and the computer program is executed by a processor to implement the method according to any one of claims 1 to 6.

Images