Plug-in page designer, computer device, readable storage medium and program product

Abstract

The invention relates to a plug-in page designer, computer equipment, a readable storage medium and a program product. The page designer comprises a visual canvas engine used for providing a basic function of canvas drawing; under the condition that a calling instruction is received, selecting a target type canvas conforming to a calling type indicated by the calling instruction; the supplementary canvas function module is used for providing supplementary canvas functions for canvas drawing, and different supplementary canvas functions are configured with different calling interface objects; the plug-in manager is used for configuring a target plug-in identifier and a target plug-in name for the plug-in when establishing communication connection with the target plug-in, and determining a target calling interface object matched with a target plug-in function of the target plug-in; and under the condition that a calling instruction matched with the target plug-in identifier and the plug-in name of the target plug-in identifier is received, performing plug-in calling on the target plug-in through the target calling interface object. By adopting the designer, flexible response processing can be performed according to different service scene requirements.

Description

Technical Field

[0001] The present application relates to the technical field of business system applications, and in particular to a plug-in page designer, a computer device, a readable storage medium and a program product. Background Art

[0002] With the advancement of science and technology and the development of production, people's demand for network intelligent software is gradually increasing. In order to meet the increasing business needs, customized software development can be carried out according to the business needs of different users. Therefore, designers are widely used in enterprise projects. Through low-code designers, workflows can be standardized and platform capabilities can be integrated to improve the progress and efficiency of project research and development. However, with the development of project business, there is a demand to build designers of various business types in a short period of time. Designers that lack business expansion capabilities can no longer meet the needs of rapid business iteration and release.

[0003] Currently, the popular designer products in the industry include grapes.js and X6 Flow, which respectively provide underlying drawing capabilities and provide simple initialization parameters and API interfaces for users to perform simple extensions. However, different designer products cannot provide different drawing capabilities at the same time, so maintaining different engines separately will have additional project costs, and complex and flexible business scenarios cannot be quickly applied, and the cost of direct involvement of business developers in development is too high. In other words, how to select the corresponding page drawing capabilities according to different business scenario requirements and support different scenarios under different business scenarios are issues that need to be solved urgently. Summary of the invention

[0004] Based on this, it is necessary to provide a plug-in page designer, computer equipment, readable storage medium and program product that can flexibly respond to different business scenario requirements in response to the above technical problems.

[0005] In a first aspect, the present application provides a plug-in page designer, characterized in that the page designer includes a visual canvas engine, a supplementary canvas function module, a plug-in manager, and a target plug-in;

[0006] A visual canvas engine is used to provide basic functions for canvas drawing; and upon receiving a call instruction, select a target type canvas that meets the call type indicated by the call instruction; wherein the basic functions include at least event interaction functions and menu functions;

[0007] The supplementary canvas function module is used to provide a supplementary canvas function for canvas drawing, and different supplementary canvas functions are configured with different calling interface objects; the supplementary canvas function at least includes a graphic element list function, a toolbar function, a property function, a style function and a shortcut key function;

[0008] The plug-in manager is used to configure the target plug-in identifier and the target plug-in name for the plug-in when establishing a communication connection with the target plug-in, and determine the target call interface object that matches the target plug-in function of the target plug-in; when receiving a call instruction that matches the target plug-in identifier and the target plug-in identifier plug-in name, the plug-in call is performed on the target plug-in through the target call interface object.

[0009] In one embodiment, the visualization canvas engine is specifically used to determine the document object model canvas as the target type canvas when receiving a call instruction for instructing to build a media information page;

[0010] The visualization canvas engine is specifically used to determine the scalable vector graphics canvas as the target type canvas when receiving a call instruction for instructing the construction of a chart analysis page.

[0011] In one embodiment, the plug-in manager includes a plug-in base class module and a plug-in management class module;

[0012] The plug-in base class module is used to configure the target plug-in identifier and the target plug-in name for the plug-in, and to determine the target call interface object that matches the target plug-in function of the target plug-in;

[0013] The plug-in management module is used to perform a plug-in call on the target plug-in through the target call interface object when receiving a call instruction that matches the target plug-in identifier and the target plug-in identifier plug-in name.

[0014] In one embodiment, the plug-in base class module is further used to provide a life cycle hook, a mounting completion hook and a destruction hook; so as to call the target calling interface object to perform function extension when receiving a calling instruction by inheriting the plug-in base class module;

[0015] The plug-in management module is also used to uniformly manage the steps of calling interface objects to expand functions.

[0016] In one embodiment, the plug-in manager also includes an event processor and a command processor;

[0017] The event processor is used to provide interactive communication between each plug-in when the target plug-in is multiple plug-ins;

[0018] The instruction processor is used to call the public function and implement the verification logic for the execution of the calling instruction when the common operations of multiple plug-ins are uniformly packaged and managed and the common operations obtained by the unified package management are determined as public functions.

[0019] In one embodiment, the target plug-in is an extended page structure tree;

[0020] Supplement the canvas function module, which is used to configure the metadata in the metadata list to be stored in the browser local cache, so as to achieve the caching of metadata and complete the configuration of the metadata list function; and configure the toolbar function, property function, style function and shortcut key function;

[0021] Visual canvas engine, used to set the target type canvas to document object model canvas.

[0022] In one of the embodiments, the page designer further includes a page structure tree plug-in;

[0023] The page structure tree plug-in is used to inherit the plug-in base class module in the plug-in manager; and pass the first parameter required for instantiation of the page structure tree plug-in during the initialization of the page designer; the first parameter is determined based on at least one of the following strategies: whether the page structure tree nodes can be dragged, whether the number of page structure tree nodes is displayed.

[0024] In one of the embodiments, the page structure tree plug-in is also used to perform logic extension in the life cycle hook inherited from the plug-in base class module, and to destroy the page structure tree in the destruction hook in the plug-in base class module to release memory.

[0025] In one embodiment, the supplementary canvas function module is further used to call the calling interface object configured for the toolbar function, insert the toolbar button and toolbar view of the page structure tree into the left area of ​​the page designer, and obtain the page structure tree plug-in;

[0026] The basic designer provides a plug-in installation method for the default binding installation plug-in, instantiates and installs the page structure tree plug-in, and executes each life cycle hook under the page structure tree plug-in to ensure that the business logic in the page structure tree plug-in is executed.

[0027] In one of the embodiments, the page designer extracts plug-in functions for each plug-in and determines the common operations between the plug-in functions of each plug-in; the common operations are uniformly packaged and managed, and the common operations obtained by the unified package management are determined as public functions; the plug-in functions of the plug-in are the functions corresponding to the best practice code of the plug-in.

[0028] In a second aspect, the present application further provides a computer device, including a memory and a processor, wherein the memory stores a computer program, and when the processor executes the computer program, the following steps are implemented:

[0029] Provides basic functions for canvas drawing; and upon receiving a call instruction, selects a target type canvas that conforms to the call type indicated by the call instruction; wherein the basic functions include at least event interaction functions and menu functions;

[0030] Provides a supplementary canvas function for canvas drawing, and different supplementary canvas functions are configured with different calling interface objects; the supplementary canvas function at least includes a primitive list function, a toolbar function, a property function, a style function, and a shortcut key function;

[0031] When establishing a communication connection with a target plug-in, a target plug-in identifier and a target plug-in name are configured for the plug-in, and a target call interface object that matches the target plug-in function of the target plug-in is determined; upon receiving a call instruction that matches the target plug-in identifier and the target plug-in identifier and plug-in name, a plug-in call is made to the target plug-in through the target call interface object.

[0032] In a third aspect, the present application further provides a computer-readable storage medium having a computer program stored thereon, wherein when the computer program is executed by a processor, the following steps are implemented:

[0033] Provides basic functions for canvas drawing; and upon receiving a call instruction, selects a target type canvas that conforms to the call type indicated by the call instruction; wherein the basic functions include at least event interaction functions and menu functions;

[0034] Provides a supplementary canvas function for canvas drawing, and different supplementary canvas functions are configured with different calling interface objects; the supplementary canvas function at least includes a primitive list function, a toolbar function, a property function, a style function, and a shortcut key function;

[0035] When establishing a communication connection with a target plug-in, a target plug-in identifier and a target plug-in name are configured for the plug-in, and a target call interface object that matches the target plug-in function of the target plug-in is determined; upon receiving a call instruction that matches the target plug-in identifier and the target plug-in identifier and plug-in name, a plug-in call is made to the target plug-in through the target call interface object.

[0036] In a fourth aspect, the present application further provides a computer program product, including a computer program, which implements the following steps when executed by a processor:

[0037] Provides basic functions for canvas drawing; and upon receiving a call instruction, selects a target type canvas that conforms to the call type indicated by the call instruction; wherein the basic functions include at least event interaction functions and menu functions;

[0038] Provides a supplementary canvas function for canvas drawing, and different supplementary canvas functions are configured with different calling interface objects; the supplementary canvas function at least includes a primitive list function, a toolbar function, a property function, a style function, and a shortcut key function;

[0039] When establishing a communication connection with a target plug-in, a target plug-in identifier and a target plug-in name are configured for the plug-in, and a target call interface object that matches the target plug-in function of the target plug-in is determined; upon receiving a call instruction that matches the target plug-in identifier and the target plug-in identifier and plug-in name, a plug-in call is made to the target plug-in through the target call interface object.

[0040] The above-mentioned plug-in page designer, computer device, readable storage medium and program product provide basic functions of canvas drawing including at least event interaction function and menu function through a visual canvas engine, and when receiving a call instruction, select a target type canvas that meets the call type indicated by the call instruction, that is, it can select between DOM type canvas and SVG type canvas according to the call type indicated by the call instruction, that is, the same page designer can support different types of canvas engines for canvas drawing. Based on this, a supplementary canvas function module is used to provide a supplementary canvas function for canvas drawing, and different supplementary canvas functions are configured with different calling interface objects. Therefore, when the plug-in manager establishes a communication connection with the target plug-in, the plug-in is configured with a target plug-in identifier and a target plug-in name, and a target calling interface object that matches the target plug-in function of the target plug-in is determined. Then, when it is necessary to call the target plug-in function of the target plug-in, when a calling instruction that matches the target plug-in identifier and the target plug-in identifier plug-in name is received, a plug-in call is made to the target plug-in through the target calling interface object, thereby ensuring that, on the basis of providing basic functions, a function call is made based on the calling interface object corresponding to the supplementary canvas function through plug-in management, further ensuring that the function of the calling instruction is satisfied. Therefore, the aforementioned plug-in-based page designer can flexibly respond to different business scenario requirements, thereby improving the flexibility of page design processing. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] In order to more clearly illustrate the technical solutions in the embodiments of the present application or related technologies, the drawings required for use in the embodiments of the present application or related technical descriptions will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other related drawings can be obtained based on these drawings without paying creative work.

[0042] FIG1 is an application environment diagram of a method for service design in one embodiment;

[0043] Figure 2 A flowchart of a method for executing business design by a plug-in page designer in one embodiment;

[0044] Figure 3A canvas interface diagram corresponding to a DOM canvas and an SVG canvas in an embodiment;

[0045] Figure 4 A designer overview of a page designer including supplemental canvas functionality and a visual canvas engine in one embodiment;

[0046] Figure 5 A schematic diagram of an object function for calling an interface object in one embodiment;

[0047] Figure 6 A schematic diagram of a pseudo code for encapsulating the best implementation of a service in an embodiment;

[0048] Figure 7 A schematic diagram of a pseudo code for importing a newly added common top toolbar in one embodiment;

[0049] Figure 8 A workflow diagram of a plug-in manager extending business logic through an API in an embodiment;

[0050] Fig. 9 A scene effect diagram of a page structure tree scene in an embodiment;

[0051] Fig.10 A schematic diagram of a process of expanding a page structure tree on a DOM canvas in one embodiment;

[0052] Fig.11 A schematic diagram of code for data initialization in one embodiment

[0053] Fig.12 A pseudo code diagram of a toolbar button and a view inserted into the left area of ​​a basic designer in one embodiment;

[0054] Fig.13 A schematic diagram of the overall process of obtaining an application platform based on a plug-in page designer in one embodiment;

[0055] FIG. 14 is a diagram showing the internal structure of a computer device in one embodiment. DETAILED DESCRIPTION

[0056] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0057] With the advancement of science and technology and the development of production, people's demand for network intelligent software is gradually increasing. In order to meet the increasing business needs, customized software development can be carried out according to the business needs of different users. Therefore, designers are widely used in enterprise projects. Through low-code designers, workflows can be standardized and platform capabilities can be integrated to improve the progress and efficiency of project research and development. However, with the development of project business, there is a demand to build designers of various business types in a short period of time. Designers that lack business expansion capabilities can no longer meet the needs of rapid business iteration and release.

[0058] At present, the popular designer products in the industry are grapes.js and X6 Flow, which respectively provide underlying drawing capabilities and provide simple initialization parameters and API interfaces for users to perform simple expansion. However, different designer products cannot provide different drawing capabilities at the same time, so maintaining different engines separately will have additional project costs, and complex and flexible business scenarios cannot be quickly applied, and the cost of direct involvement of business developers in development is too high. In addition, for the common requirements of different designer applications under a project, similar functions will be repeatedly coded. In other words, how to select the corresponding page drawing capabilities according to different business scenario requirements and support different scenarios under different business scenarios are issues that need to be solved urgently.

[0059] Based on this, the embodiment of the present application provides a plug-in page designer that can flexibly respond to different business scenario requirements, thereby improving the flexibility of page design processing, and the plug-in page designer is specifically deployed in the terminal. Therefore, the method of business design performed by the plug-in page designer provided in the embodiment of the present application can be applied to the application environment shown in Figure 1. Among them, the terminal 102 communicates with the server 104 via the network. The data storage system can store data that the server 104 needs to process. The data storage system can be integrated on the server 104, or it can be placed on the cloud or other network servers.

[0060] Specifically, the plug-in page designer in the embodiment of the present application is specifically deployed in the terminal 102, that is, through the visual canvas engine included in the page designer, the basic function of canvas drawing is provided; and when a call instruction is received, the target type canvas that meets the call type indicated by the call instruction is selected. And through the supplementary canvas function module included in the page designer, a supplementary canvas function of canvas drawing is provided, and different supplementary canvas functions are configured with different call interface objects. Based on this, when the plug-in manager establishes a communication connection with the target plug-in, the plug-in is configured with a target plug-in identifier and a target plug-in name, and the target call interface object that matches the target plug-in function of the target plug-in is determined; when a call instruction matching the target plug-in identifier and the target plug-in identifier plug-in name is received, the target plug-in is called through the target call interface object. Thus, different types of canvas engines can be supported in the same page designer for canvas drawing, and the target plug-in can be called through the target call interface object, so as to ensure that the plug-in management can ensure that the function call is made based on the call interface object corresponding to the supplementary canvas function on the basis of providing basic functions, and further ensure the function satisfaction of the call instruction. Therefore, the aforementioned plug-in page designer can flexibly respond to different business scenario requirements, thereby improving the flexibility of page design processing. Among them, the aforementioned terminal can be, but is not limited to, various personal computers, laptops, smart phones and tablet computers.

[0061] In an exemplary embodiment, Figure 2 As shown, a plug-in page designer is provided. This embodiment is described by applying the plug-in page designer to the terminal 102. In this embodiment, the plug-in page designer includes a visual canvas engine, a supplementary canvas function module, a plug-in manager, and a target plug-in; the functions of the plug-in page designer are specifically performed by following steps 202 to 206. Among them:

[0062] Step 202, a visual canvas engine is used to provide basic functions of canvas drawing; and when receiving a call instruction, select a target type canvas that meets the call type indicated by the call instruction; wherein the basic functions include at least event interaction functions and menu functions.

[0063] Among them, in many customized visualization scenarios, dragging, zooming and full-screen operations are necessary visualization operations, and the visualization canvas engine is an engine that can provide the basic functions of canvas drawing. The aforementioned basic functions at least include event interaction functions and menu functions, and the event interaction function is a function that supports multiple visualization operations such as the aforementioned dragging, zooming and full-screen operations.

[0064] Secondly, there are two types of canvases that can be called in the visualization canvas engine in this embodiment, that is, the visualization canvas engine in this embodiment supports the document object model (DOM) canvas and the scalable vector graphics (SVG) canvas. The document object model (DOM) is a programming interface for network documents. DOM represents pages so that programs can change the structure, style and content of documents. Therefore, DOM represents documents as nodes and objects, so that programming languages ​​can interact with pages. SVG images and their related behaviors are defined in Extensible Markup Language (XML) text files. SVG images are used to describe two-dimensional vector graphics. It can be seen that the call instruction indicates a specific call type, and different call types have matching type canvases.

[0065] Specifically, the visual canvas engine included in the plug-in page designer can provide basic functions for canvas drawing, such as event interaction functions and menu functions, when performing canvas generation processing, and can specifically provide DOM canvas and SVG canvas, and integrate basic functions in the DOM canvas and SVG canvas respectively. For ease of understanding, Figure 3 The canvas interface shown in the figure, Figure 3 The figure (A) shows the canvas interface of the DOM canvas. Figure 3 The figure (B) in the middle shows the canvas interface of the SVG canvas. Figure 3 The basic functions configured in the middle canvas are mouse event interaction and right-click menu functions.

[0066] Furthermore, although the visual canvas engine included in the plug-in page designer can provide DOM canvas and SVG canvas, in actual application, the matching canvas should be selected based on the call type required by the call instruction, that is, the visual canvas engine can also select a target type canvas that meets the call type indicated by the call instruction from the optional canvases when receiving the call instruction. The aforementioned optional canvases are the DOM canvas and the SVG canvas.

[0067] Specifically, the visualization canvas engine is specifically used to determine the document object model canvas as the target type canvas when receiving a call instruction for instructing the construction of a media information page; the visualization canvas engine is specifically used to determine the scalable vector graphics canvas as the target type canvas when receiving a call instruction for instructing the construction of a chart analysis page.

[0068] That is, in this embodiment, the DOM canvas is used to build the media information page, and the SVG canvas is used to build the chart analysis page. Therefore, after the visualization canvas engine receives the call instruction, it first extracts the call type indicated by the call instruction. When the call type is to build the media information page, the DOM canvas is selected from the DOM canvas and the SVG canvas as the target type canvas, and subsequent canvas drawing and generation are performed. Similarly, when the call type is to build a chart analysis page, the SVG canvas is selected from the DOM canvas and the SVG canvas as the target type canvas, and subsequent canvas drawing and generation are performed. It can be understood that in actual applications, different scenario services can select the matching type canvas for expansion and supplementation according to actual drawing requirements, and the above examples should not be understood as specific limitations of the present application.

[0069] Step 204, a supplementary canvas function module is used to provide a supplementary canvas function for canvas drawing, and different supplementary canvas functions are configured with different calling interface objects; the supplementary canvas function at least includes a primitive list function, a toolbar function, a property function, a style function and a shortcut key function.

[0070] Among them, the supplementary canvas function at least includes the function of the element list, the toolbar function, the property function, the style function and the shortcut key function. That is, only by combining the supplementary canvas function with the visual canvas engine can the page designer be formed, and the application programming interface (API) capability of the supplementary canvas function can constitute the complete page designer function. API is a set of predefined functions, the purpose of which is to provide applications and developers with the ability to access a set of routines based on certain software or hardware. Therefore, different calling interface objects are configured for different supplementary canvas functions, and the calling interface objects are used to ensure that different API method calls can be made for each plug-in.

[0071] Specifically, the supplementary canvas function module included in the plug-in page designer can provide supplementary canvas functions for canvas drawing, that is, provide event interaction functions and supplementary functions other than menu functions. The supplementary canvas functions at least include element list functions, toolbar functions, attribute functions, style functions and shortcut key functions. The following is a detailed introduction to this:

[0072] 1. Primitive list function: The primitive list function is used to provide primitives to be rendered in the canvas. Primitives can be dragged from the primitive list to display in the canvas.

[0073] 2. Toolbar function: The toolbar function may include the top toolbar function and the two side toolbar functions. The top toolbar function is used to perform common overall canvas operations at the top of the designer displayed on the terminal. Overall canvas operations may include but are not limited to the following operations: save canvas operation, clear canvas operation, undo and redo operation, etc. The two side toolbar functions can perform operations on the left and right sides of the designer. Operations on the elements may include but are not limited to the following operations: element list operation, attribute operation, style operation and shortcut key operation. Therefore, based on different business call instructions, the specific functions in the toolbar function can be expanded by calling different API methods to customize the required functions.

[0074] 3. Attribute function: The attribute function is used to configure the business attributes of the graphics elements in the canvas. The business attributes of the graphics elements include but are not limited to: title size, image address, etc.

[0075] 4. Style function: The style function is used to configure the display appearance of the graphics elements in the canvas. The display appearance of the graphics elements includes but is not limited to color, font size, font thickness, etc.

[0076] 5. Shortcut key function: The shortcut key function is used to operate the elements in the canvas through keyboard shortcuts. The operations of the elements in the canvas include but are not limited to: deleting the element through the shortcut key Delete, copying the element through Ctrl+C, etc.

[0077] In actual applications, the supplementary canvas function may also include a right-click menu function, which is used to operate the elements in the canvas. The operations of the elements in the canvas include but are not limited to: copy, paste, delete, etc. It can be understood that the supplementary canvas function can be configured accordingly based on the actual application scenario, and no specific limitation is made here. For ease of understanding, please refer to Figure 4 ,like Figure 4 A designer overview is shown including supplemental canvas functionality and a page designer displayed by a visual canvas engine.

[0078] Furthermore, to ensure that the plug-in can call different functions through different APIs, both the basic canvas function and the supplementary canvas function can be called by different plug-ins. Then different supplementary canvas functions in the page designer are configured with different calling interface objects, and the visual canvas engine is also configured with corresponding calling interface objects, and different calling interface objects are configured with different object functions.

[0079] For easier understanding, see Figure 5 ,like Figure 5The object functions of the calling interface object shown are as follows: the calling interface object configured for the visualization canvas engine is the canvas interface object, and the object functions matched by the canvas interface object include but are not limited to: adding primitives, deleting primitives, batch deleting, copying primitives, pasting primitives, adjusting primitive positions, primitive positioning, saving canvas, rendering canvas, taking a screenshot of canvas, setting canvas size, and exporting canvas data. Similarly, the calling interface object configured for the primitive list function is the primitive list interface object, and the object functions matched by the primitive list interface object include but are not limited to: adding categories, adding primitives, searching for primitives, and deleting primitives.

[0080] based on Figure 5 By analogy, the calling interface object configured for the toolbar function is the toolbar interface object, and the object functions matched by the toolbar interface object include but are not limited to: adding a new toolbar, adjusting the toolbar position, toolbar grouping, and customizing the toolbar click behavior. The calling interface object configured for the attribute function is the attribute interface object, and the object functions matched by the attribute interface object include but are not limited to: adding attribute names and updating primitive attributes. The calling interface object configured for the style function is the style interface object, and the object functions matched by the style interface object include but are not limited to: updating primitive styles and configuring primitive styles. The calling interface object configured for the right-click menu function is the right-click menu interface object, and the object functions matched by the right-click menu interface object include but are not limited to: adding a new right-click menu, disabling the right-click menu, deleting the right-click menu, and customizing the right-click menu behavior. The calling interface object configured for the shortcut key function is the shortcut key interface object, and the object functions matched by the shortcut key interface object include but are not limited to: adding shortcut keys and deleting shortcut keys.

[0081] Step 206, the plug-in manager is used to configure a target plug-in identifier and a target plug-in name for the plug-in when establishing a communication connection with the target plug-in, and determine a target call interface object that matches the target plug-in function of the target plug-in; upon receiving a call instruction that matches the target plug-in identifier and the target plug-in identifier and plug-in name, the plug-in call is performed on the target plug-in through the target call interface object.

[0082] Among them, since this solution needs to expand and adjust the functions of the existing designer, the plug-in is required to expand the logical functions based on the designer. Based on this, the target plug-in is the plug-in added based on the demand. The target plug-in can be one plug-in or composed of multiple plug-ins, which is not limited here.

[0083] Specifically, the plug-in manager can configure the target plug-in identifier and the target plug-in name for the plug-in when establishing a communication connection with the target plug-in, and determine the target call interface object that matches the target plug-in function of the target plug-in. Based on this, the plug-in manager specifically includes a plug-in base class module, and the plug-in manager specifically configures the target plug-in identifier and the target plug-in name for the plug-in through the plug-in base class module, and determines the target call interface object that matches the target plug-in function of the target plug-in. The aforementioned plug-in base class module is specifically a plug-in base class (Plugin), and the plug-in base class provides life cycle hooks, mounting completion hooks and destruction hooks, as well as basic plug-in information (i.e., plug-in identifier and plug-in name) to be used to call the target call interface object for functional expansion when receiving a call instruction by inheriting the plug-in base class module, that is, to facilitate functional expansion in actual applications through the plug-in base class in the specific function call process The corresponding API method (i.e., the call interface object) of the page designer is used.

[0084] Furthermore, the plug-in manager can also perform a plug-in call on the target plug-in through the target call interface object when receiving a call instruction that matches the target plug-in identifier and the target plug-in identifier plug-in name. Based on this, the plug-in manager specifically includes a plug-in management class module, that is, the plug-in manager specifically performs a plug-in call on the target plug-in through the target call interface object when receiving a call instruction that matches the target plug-in identifier and the target plug-in identifier plug-in name through the plug-in management class module. The aforementioned plug-in management class module is specifically a plug-in management class (PluginManager), and the plug-in management class contains a plug-in list, and the plug-in list includes installed plug-ins (i.e., plug-in instances). The designer function extension class of the business can be uniformly managed through the plug-in management class. Therefore, the plug-in management class module can also uniformly manage the steps of calling the interface object for function extension, that is, each plug-in calling the interface object for function extension is managed by the plug-in management class module.

[0085] In actual applications, each plug-in may need to communicate with each other, so the interactive communication between the plug-ins needs to be processed. Therefore, the plug-in manager also includes an event processor, and the event processor is used to provide interactive communication between each plug-in when the target plug-in is multiple plug-ins.

[0086] It is understandable that if there are multiple page designers with the same basic functions in the same page project, that is, there are common functions in the basic functions and supplementary canvas functions of multiple page designers, then it is necessary to extract the common functions of multiple page designers, and encapsulate and apply the common functions in each page designer to ensure the purpose of reusing common functions among multiple page designers in the same page project.

[0087] Based on this, we first use JavaScript es6 modularization technology to uniformly organize and encapsulate the common business codes in the page designer, and then export them to the page designer through the Export keyword. Figure 6 The pseudo code of the business best implementation encapsulation is shown. In addition, the best practice code can be imported as needed for different page designers, thereby achieving the purpose of unified maintenance of common code and avoiding repeated development workload. Figure 7 Pseudo code showing the import of a new common top toolbar.

[0088] It can be seen that in the same page designer, there may be common functions between different plug-ins, so it can also be handled in a similar way as mentioned above. Optionally, the page designer extracts plug-in functions for each plug-in, and determines the common operations between the plug-in functions of each plug-in, and then uniformly encapsulates and manages the common operations, and determines the common operations obtained by the unified encapsulation management as public functions. The plug-in functions of the aforementioned plug-ins are the functions corresponding to the best practice codes of the plug-ins. The functions corresponding to the aforementioned best practice codes are similar to the determination of business best practices in the aforementioned embodiments, and will not be repeated here. It can be seen that the plug-in manager also includes an instruction processor, which is used to call public functions and implement verification logic for the execution of call instructions when the common operations of multiple plug-ins are uniformly encapsulated and managed, and the common operations obtained by the unified encapsulation management are determined as public functions.

[0089] To facilitate understanding of the plug-in page designer introduced above, Figure 8 As shown, Figure 8 The figure shows a workflow diagram of the plug-in manager in the plug-in page designer extending the business logic through the API. The plug-in management class (PluginManager) includes multiple plug-in instances. The plug-in management class can be used to uniformly manage the designer function extension class of the business, and the plug-in base class (Plugin) provides life cycle hooks, mounting completion hooks and destruction hooks, as well as basic plug-in information, so that the plug-in management class can inherit instances. Based on this, the instruction processor is used to provide public methods to the plug-in management class, and the instruction processor is also used for instruction method verification, instruction method execution and instruction method execution hooks. The event processor is used to handle business communications between different plug-ins, and the event processor is also used for emit event throwing, on event listening and off event destruction. The plug-in management class is specifically implemented through the following Figure 5 The object function of the calling interface object shown performs calling processing of the calling interface object for different plug-ins.

[0090] It should be understood that the corresponding examples in the embodiments of the present application are used to understand the present solution, but should not be understood as specific limitations of the present solution.

[0091] In the above-mentioned plug-in page designer, the visual canvas engine provides basic functions of canvas drawing, including at least event interaction function and menu function, and when receiving a call instruction, selects a target type canvas that meets the call type indicated by the call instruction, that is, it can select between DOM type canvas and SVG type canvas according to the call type indicated by the call instruction, that is, the same page designer can support different types of canvas engines for canvas drawing. Based on this, a supplementary canvas function module is used to provide a supplementary canvas function for canvas drawing, and different supplementary canvas functions are configured with different calling interface objects. Therefore, when the plug-in manager establishes a communication connection with the target plug-in, the plug-in is configured with a target plug-in identifier and a target plug-in name, and a target calling interface object that matches the target plug-in function of the target plug-in is determined. Then, when it is necessary to call the target plug-in function of the target plug-in, when a calling instruction that matches the target plug-in identifier and the target plug-in identifier plug-in name is received, a plug-in call is made to the target plug-in through the target calling interface object, thereby ensuring that, on the basis of providing basic functions, a function call is made based on the calling interface object corresponding to the supplementary canvas function through plug-in management, further ensuring that the function of the calling instruction is satisfied. Therefore, the aforementioned plug-in-based page designer can flexibly respond to different business scenario requirements, thereby improving the flexibility of page design processing.

[0092] In an exemplary embodiment, the plug-in page designer obtained in the aforementioned embodiment supports plug-in extension and plug-in management, that is, business function extension can be performed on the basis of the page designer. To facilitate understanding of the actual application method, an example is taken in which the target type canvas is a DOM canvas and the target plug-in is an extended page structure tree, that is, a business scenario in which a page structure tree is extended on the DOM canvas. The specific page effect diagram that can be obtained is as follows: Fig. 9 The scene rendering of the page structure tree scene is shown.

[0093] The following is a detailed description of this, such as Fig.10 As shown, the target plug-in is the extended page structure tree, which is specifically introduced with steps 1002 and 1004. Among them:

[0094] Step 1002, supplementing the canvas function module, is used to configure the metadata in the metadata list to be stored in the browser local cache to implement the caching of metadata and complete the configuration of the metadata list function; and to configure the toolbar function, property function, style function and shortcut key function.

[0095] Specifically, when the call instruction indicates to expand the page structure tree, the document object model canvas is first determined as the target type canvas. Based on this, the canvas function module is used to configure the metadata in the metadata list to be stored in the browser local cache to achieve the caching of metadata, complete the configuration of the metadata list function, and then configure the toolbar function, property function, style function and shortcut key function. For ease of understanding, as Fig.11 The code diagram of data initialization shown is based on Fig.11 As shown, various personalized configurations of the supplementary canvas function module in the page designer can be configured through parameters during data initialization, such as configuring the metadata in the metadata list function in the supplementary canvas function module to be stored in the browser local cache (IndexDB) to achieve metadata caching, and setting the page designer to be a DOM canvas designer, etc. In addition, the toolbar function, property function, style function, right-click menu function, and shortcut key function in the supplementary canvas function module can also be configured accordingly, and the specific configuration method is not limited here.

[0096] Step 1004: The visualization canvas engine is used to set the target type canvas to be a document object model canvas.

[0097] Specifically, as described in the above embodiment, during the data initialization process, the visualization canvas engine is used to set the target type canvas to be a document object model canvas, so as to meet the business requirement of extending a page structure tree on the DOM canvas. The specific method of extending the page structure tree on the DOM canvas is described in detail below:

[0098] Optionally, the page designer also includes a page structure tree plug-in; the page structure tree plug-in is used to inherit the plug-in base class module in the plug-in manager; and the first parameter required for instantiation of the page structure tree plug-in is passed in during the initialization of the page designer; the first parameter is determined based on at least one of the following strategies: whether the page structure tree nodes can be dragged, whether the number of page structure tree nodes is displayed.

[0099] The aforementioned page structure tree plug-in is specifically a LayerDom plug-in class, which inherits the plug-in base class (Plugin) introduced in the aforementioned embodiment through the LayerDom plug-in class, and passes in the parameters required for instantiation of the LayerDom plug-in class (i.e., the first parameter) during initialization. The parameters required for instantiation of the LayerDom plug-in class are defined according to actual business needs, for example: whether the page structure tree nodes can be dragged, whether the number of page structure tree nodes is displayed, etc.

[0100] Optionally, the page structure tree plug-in is also used to perform logical extension in the life cycle hook inherited from the plug-in base class module, and to destroy the page structure tree in the destruction hook in the plug-in base class module to release memory. From the above introduction, it can be seen that since the LayerDom plug-in class inherits the plug-in base class introduced in the above embodiment, and the plug-in base class provides a life cycle hook, a mounting completion hook and a destruction hook, the LayerDom plug-in class can perform logical extension in the life cycle hook inherited from the plug-in base class module. The logical extension using the life cycle hook can be used to perform event monitoring in the initialization hook, and to change the user interface (UI) display of the page structure tree in the event monitoring logic. The above event monitoring can include but is not limited to: monitoring canvas node update events, monitoring canvas node deletion events, etc. In addition, the LayerDom plug-in class can also destroy the page structure tree in the destruction hook in the plug-in base class module to release memory.

[0101] Optionally, the supplementary canvas function module is also used to call the calling interface object configured for the toolbar function, insert the toolbar button and toolbar view of the page structure tree into the left area of ​​the page designer, and obtain the page structure tree plug-in; the basic designer provides a plug-in installation method for the default binding installation plug-in, instantiates and installs the page structure tree plug-in, and executes each life cycle hook under the page structure tree plug-in to ensure that the business logic in the page structure tree plug-in is executed.

[0102] That is to supplement the canvas function module, you can also configure the view to call the calling interface object configured for the toolbar function, insert the toolbar button and toolbar view of the page structure tree into the left area of ​​the page designer, in order to facilitate the understanding of the above functional steps, such as Fig.12 As shown, Fig.12 Shown is a pseudo-code diagram of toolbar buttons and views inserted into the left area of ​​the base designer.

[0103] Based on this, the basic designer provides a plug-in installation method for the default binding installation plug-in, instantiates and installs the page structure tree plug-in, and executes each life cycle hook under the page structure tree plug-in to ensure that the business logic in the page structure tree plug-in is executed. The basic designer is the basic designer of the plug-in-based page designer in the embodiment of the present application, that is, the obtained page structure tree plug-in is installed into the plug-in-based page designer, that is, the page structure tree plug-in can be obtained through the aforementioned steps. The basic designer will provide the installPlugin method to install the plug-in, instantiate and install the page structure tree plug-in, and execute each life cycle hook of the plug-in to ensure that the business logic in the page structure tree class is executed.

[0104] It should be understood that the corresponding examples in the embodiments of the present application are used to understand the present solution, but should not be understood as specific limitations of the present solution.

[0105] In this embodiment, the reliability of data caching and function configuration is ensured by initializing the basic designer function, and the calling interface capability in the plug-in page designer is used to expand various functions. Different functional requirements can be summarized into various plug-ins and installed accordingly based on application requirements, thereby ensuring application functions for different business scenario requirements, thereby improving the flexibility and reliability of page design processing.

[0106] Based on the detailed introduction of the aforementioned embodiment, it is possible to expand multiple low-code platforms based on a unified method flow in the same business field. The aforementioned method and plug-in page designer are suitable for project development with multiple business scenario designer requirements. Existing functional modules can be reused to the greatest extent, and the responsibilities are clear and easy to maintain. The following will introduce the method of obtaining the application platform based on the plug-in page designer in the embodiment of the present application, such as Fig.13 As shown, the overall flow chart is as follows:

[0107] Step 1301, build a basic designer. First, build a plug-in page designer, and the plug-in page designer includes a visual canvas engine, a supplementary canvas function module, and a plug-in manager. To ensure the implementation of the canvas module (i.e., the visual canvas engine), and the visual canvas engine is configured with a document object model canvas and a scalable vector graphics canvas. Secondly, implement the primitive module, style module, toolbar module, property module, right-click menu module, shortcut key module, and plug-in manager module.

[0108] Step 1302, business plug-in implementation and integration. The basic designer (i.e., plug-in page designer) obtained in the above steps is initialized. At this time, the configuration information of each functional module in the plug-in page designer can be customized. Secondly, the configuration of the page structure tree plug-in class is implemented, that is, the life cycle hook is implemented through class inheritance, and the view of the page structure diagram is drawn. Finally, the obtained page structure tree plug-in is installed, that is, the page structure tree is instantiated and installed in the plug-in page designer for maintenance and management. The aforementioned page structure tree plug-in is the target plug-in in the aforementioned embodiment.

[0109] Step 1303: encapsulate and reuse business best practices.

[0110] Step 1304, obtain a business-customized low-code application platform.

[0111] It should be understood that the specific implementations of step 1301 to step 1304 are similar to the above-mentioned embodiments and will not be described in detail here.

[0112] It should be understood that, although the various steps in the flowcharts involved in the above-mentioned embodiments are displayed in sequence according to the indication of the arrows, these steps are not necessarily executed in sequence according to the order indicated by the arrows. Unless there is a clear explanation in this article, the execution of these steps does not have a strict order restriction, and these steps can be executed in other orders. Moreover, at least a part of the steps in the flowcharts involved in the above-mentioned embodiments can include multiple steps or multiple stages, and these steps or stages are not necessarily executed at the same time, but can be executed at different times, and the execution order of these steps or stages is not necessarily to be carried out in sequence, but can be executed in turn or alternately with other steps or at least a part of the steps or stages in other steps.

[0113] Each module in the above plug-in page designer can be implemented in whole or in part by software, hardware, or a combination thereof. Each module can be embedded in or independent of a processor in a computer device in the form of hardware, or can be stored in a memory in a computer device in the form of software, so that the processor can call and execute operations corresponding to each module.

[0114] In an exemplary embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be shown in FIG14. The computer device includes a processor, a memory, an input / output interface, a communication interface, a display unit, and an input device. The processor, the memory, and the input / output interface are connected via a system bus, and the communication interface, the display unit, and the input device are connected to the system bus via the input / output interface. The processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The input / output interface of the computer device is used to exchange information between the processor and an external device. The communication interface of the computer device is used to communicate with an external terminal in a wired or wireless manner, and the wireless manner may be implemented through WIFI, a mobile cellular network, near field communication (NFC) or other technologies. When the computer program is executed by the processor, a method for calling instructions performed by a page designer when processing a calling instruction is implemented. The display unit of the computer device is used to form a visually visible picture, and can be a display screen, a projection device, or a virtual reality imaging device. The display screen can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer device can be a touch layer covered on the display screen, or a key, trackball, or touchpad provided on the computer device housing, or an external keyboard, touchpad, or mouse, etc.

[0115] Those skilled in the art will understand that the structure shown in FIG. 14 is merely a block diagram of a partial structure related to the scheme of the present application, and does not constitute a limitation on the computer device to which the scheme of the present application is applied. The specific computer device may include more or fewer components than shown in the figure, or combine certain components, or have a different arrangement of components.

[0116] In one embodiment, a computer device is also provided, including a memory and a processor, wherein a computer program is stored in the memory, and when the processor executes the computer program, each module in the above-mentioned plug-in page designer executes the steps in the corresponding method embodiment.

[0117] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, each module in the above-mentioned plug-in page designer executes the steps in the corresponding method embodiment.

[0118] In one embodiment, a computer program product is provided, including a computer program, which, when executed by a processor, enables each module in the above-mentioned plug-in page designer to execute the steps in the corresponding method embodiment.

[0119] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with relevant regulations.

[0120] A person of ordinary skill in the art can understand that all or part of the processes in the above-mentioned embodiment method can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to the memory, database or other medium used in the embodiments provided in the present application can include at least one of non-volatile memory and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. As an illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM). The database involved in each embodiment provided in this application may include at least one of a relational database and a non-relational database. Non-relational databases may include distributed databases based on blockchains, etc., but are not limited to this. The processor involved in each embodiment provided in this application may be a general-purpose processor, a central processing unit, a graphics processor, a digital signal processor, a programmable logic device, a data processing logic device based on quantum computing, an artificial intelligence (AI) processor, etc., but are not limited to this.

[0121] The technical features of the above embodiments may be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this application.

[0122] The above-described embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the present application. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the attached claims.

Claims

1. A plug-in page designer, characterized in that: The page designer includes a visual canvas engine, a supplementary canvas function module, a plug-in manager and a target plug-in; The visual canvas engine is used to provide basic functions of canvas drawing; and when receiving a call instruction, select a target type canvas that meets the call type indicated by the call instruction; wherein the basic functions include at least event interaction function and menu function; The supplementary canvas function module is used to provide a supplementary canvas function for canvas drawing, and different supplementary canvas functions are configured with different calling interface objects; the supplementary canvas function at least includes a primitive list function, a toolbar function, a property function, a style function and a shortcut key function; The plug-in manager is used to configure a target plug-in identifier and a target plug-in name for the plug-in when establishing a communication connection with the target plug-in, and determine a target call interface object that matches the target plug-in function of the target plug-in; upon receiving a call instruction that matches the target plug-in identifier and the target plug-in identifier plug-in name, perform a plug-in call on the target plug-in through the target call interface object.

2. The page designer according to claim 1, characterized in that: The visualization canvas engine is specifically used to determine the document object model canvas as the target type canvas when receiving a call instruction for instructing to build a media information page; The visualization canvas engine is specifically used to determine the scalable vector graphics canvas as the target type canvas when receiving a call instruction for instructing the construction of a chart analysis page.

3. The page designer according to claim 1, characterized in that: The plug-in manager includes a plug-in base class module and a plug-in management class module; The plug-in base class module is used to configure a target plug-in identifier and a target plug-in name for the plug-in, and determine a target call interface object that matches a target plug-in function of the target plug-in; The plug-in management class module is used to perform a plug-in call on the target plug-in through the target call interface object when receiving a call instruction that matches the target plug-in identifier and the target plug-in identifier plug-in name.

4. The page designer according to claim 3, characterized in that: The plug-in base class module is also used to provide a life cycle hook, a mounting completion hook and a destruction hook; so as to call the target calling interface object for function expansion when receiving a calling instruction by inheriting the plug-in base class module; The plug-in management module is also used to uniformly manage the steps of calling interface objects to perform function expansion.

5. The page designer according to claim 1, characterized in that: The plug-in manager also includes an event processor and a command processor; The event processor is used to provide interactive communication between each of the plug-ins when the target plug-in is a plurality of plug-ins; The instruction processor is used to call the common function and implement the verification logic for the execution of the calling instruction when the common operations of multiple plug-ins are uniformly packaged and managed and the common operations obtained by the unified package management are determined as common functions.

6. The page designer according to any one of claims 1 to 5, characterized in that: The target plug-in is the extended page structure tree; The supplementary canvas function module is used to configure the metadata in the metadata list to be stored in the local cache of the browser, so as to implement the caching of the metadata and complete the configuration of the metadata list function; and to configure the toolbar function, the property function, the style function and the shortcut key function; The visualization canvas engine is used to set the target type canvas to be a document object model canvas.

7. The page designer according to claim 6, characterized in that: The page designer also includes a page structure tree plug-in; The page structure tree plug-in is used to inherit the plug-in base class module in the plug-in manager; and passing in the first parameter required for instantiation of the page structure tree plug-in during the initialization of the page designer; The first parameter is determined based on at least one of the following strategies: whether the page structure tree nodes can be dragged, and whether the number of page structure tree nodes is displayed.

8. The page designer according to claim 7, characterized in that: The page structure tree plug-in is also used to perform logic extension in the life cycle hook inherited from the plug-in base class module, and to destroy the page structure tree in the destruction hook in the plug-in base class module to release memory.

9. The page designer according to claim 7, characterized in that: The supplementary canvas function module is further used to call the calling interface object configured for the toolbar function, insert the toolbar button and toolbar view of the page structure tree into the left area of ​​the page designer, and obtain the page structure tree plug-in; The basic designer provides a plug-in installation method for a default binding installation plug-in, instantiates and installs the page structure tree plug-in, and executes each life cycle hook under the page structure tree plug-in to ensure that the business logic in the page structure tree plug-in is executed.

10. The page designer according to claim 1, characterized in that: The page designer extracts plug-in functions for each plug-in and determines the common operations between the plug-in functions of each plug-in; performs unified packaging management on the common operations, and determines the common operations obtained by the unified packaging management as public functions; the plug-in functions of the plug-in are the functions corresponding to the best practice codes of the plug-in.

Images