Method and system for customizing object attribute display interface

Abstract

The invention discloses a method and a system for customizing an object attribute display interface, and relates to computer and webpage technologies, and the method comprises the following steps: under the condition that a module instance is created, a parent module instance of the module instance is cited to construct a module structure tree, and any module instance can obtain a parent control or a child control; providing a navigation bar, and configuring navigation information of each navigation item and content to be displayed in the navigation route control content area based on the navigation bar; and providing a frame page control based on a navigation route control content area corresponding to the navigation item of the configured navigation bar, so as to organize a page structure by using the frame page control to divide a page into a plurality of sub-areas, and configuring a corresponding display control based on each sub-area. The method provided by the embodiment of the invention is helpful for improving the implementation efficiency, reducing the personnel time cost and quickly meeting the personalized requirements of more customers.

Description

Technical Field

[0001] The present application relates to the field of computer and web page technology, and in particular to a method and system for customizing an object attribute display interface. Background Art

[0002] The current framework for Web front-end development is based on modular development. Modules are included to form a module structure tree to build a fully functional Web application. Modularization improves the development clarity of Web applications and thus improves development efficiency. However, the interaction between modules in most Web front-end frameworks is achieved by referencing each other and writing interactive codes during coding. Usually, a single module can only be applied to a specific module environment and cannot be extracted and used alone.

[0003] By using the module rendering function of this framework, a single module can be embedded in a specific content area of ​​the website to become part of the main website, or it can be extracted and used separately. By writing any single module name directly in the web address URL, it can be rendered in the web page window and used independently in a specific business.

[0004] When deploying and implementing current software products, program users usually make fine-tuning or modifications to module selection, interaction methods, page effects, etc. The usual practice is that no matter fine-tuning or modification, it is necessary to re-code, re-package, and re-deploy, which involves many people and is very time-consuming. Summary of the invention

[0005] The embodiments of the present application provide a method and system for customizing an object attribute display interface, providing front-end configurable functions without the need for re-coding and packaging, and quickly implementing function fine-tuning and module reorganization, thereby solving customers' functional concerns on site in real time, helping to improve implementation efficiency, reduce personnel time costs, and quickly respond to more customers' personalized needs.

[0006] The present application provides a method for customizing an object attribute display interface, including:

[0007] When creating a module instance, reference the parent module instance of the module instance to build the module structure tree. Any module instance can obtain the parent control or child control.

[0008] Provide a navigation bar, configure the navigation information of each navigation item based on the navigation bar, and control the content to be displayed in the content area of ​​the navigation route. The control pointed to by the navigation route and its parameters are configured to control the rendering of the control in the content area of ​​the navigation route.

[0009] Based on the navigation route control content area corresponding to the navigation item of the configured navigation bar, a frame page control is provided to organize the page structure and divide the page into multiple sub-areas using the frame page control, and corresponding display controls are configured based on each sub-area.

[0010] Optionally, when creating a module instance, referencing the module instance's parent module instance to build the module structure tree includes:

[0011] When developing a new extensible module instance according to the set rules, after the new module instance is completed, add the Javascript file to the specified folder, and store the style files and template files that the new module instance depends on to the corresponding location;

[0012] When developing a new module instance through native Javascript, the DOM element to be rendered by the module, the module configuration, and the parent module instance are obtained when building the module instance.

[0013] Optionally, when creating a module instance, referencing the module instance's parent module instance to construct the module structure tree also includes:

[0014] Provides an interface page and uses lazy loading to load module instances so that relevant scripts, styles, and templates can be loaded when the corresponding module instances need to be displayed.

[0015] Optionally, provide a navigation bar. Based on the navigation bar, configure the navigation information of each navigation item and the navigation route to control the content area to display the following content:

[0016] Configure the corresponding management button according to the type of the object managed by the current page. If a management button is configured for a certain type, the button configuration of its parent class will be inherited; and,

[0017] Configure different types of objects to specify the editor name of the object, and derive after configuration. If the editor is not configured for the current type, the editor corresponding to the nearest type in the derivation tree of the object type is used as its editor;

[0018] Stores the results of the object editor in the property field.

[0019] Optionally, a navigation bar is provided. Based on the navigation bar, the navigation information of each navigation item is configured, and the content to be displayed in the navigation route control content area also includes:

[0020] For different objects, a detail page is provided, wherein the detail page is configured with a plurality of different detail panes according to the current object or the relationship between the objects; and,

[0021] Provides a container layout control for arranging and accommodating detail panes.

[0022] Optionally, a navigation bar is provided. Based on the navigation bar, the navigation information of each navigation item is configured, and the content to be displayed in the navigation route control content area also includes:

[0023] Providing a statistical display module, and constructing a statistical layout by dragging a window based on the statistical display module;

[0024] A file structure tree editing control is provided for editing and adjusting the hierarchy of folders, editing files in the file structure tree, and configuring corresponding file editors for different file types.

[0025] Optionally, it also includes providing a basic module based on the navigation route control content area corresponding to the navigation item of the configured navigation bar, and the basic module includes the frame page control, object list table, operation button, file system module, and instance tree.

[0026] The embodiment of the present application further provides a system for customizing an object attribute display interface, including a processor and a memory, wherein a computer program is stored in the memory, and when the computer program is executed by the processor, the steps of the method for customizing an object attribute display interface as described above are implemented.

[0027] The embodiments of the present application provide front-end configurable functions, which do not require re-coding and packaging, and can quickly implement function fine-tuning and module reorganization, thereby solving customers' functional concerns in real time on site, improving implementation efficiency, reducing personnel time costs, and quickly responding to more customers' personalized needs.

[0028] The above description is only an overview of the technical solution of the present application. In order to more clearly understand the technical means of the present application, it can be implemented in accordance with the contents of the specification. In order to make the above and other purposes, features and advantages of the present application more obvious and easy to understand, the specific implementation methods of the present application are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0029] Various other advantages and benefits will become apparent to those of ordinary skill in the art by reading the detailed description of the preferred embodiments below. The accompanying drawings are only for the purpose of illustrating the preferred embodiments and are not to be considered as limiting the present application. Also, the same reference symbols are used throughout the accompanying drawings to represent the same components. In the accompanying drawings:

[0030] Figure 1 A basic flow diagram of a method for customizing an object attribute display interface according to an embodiment of the present application;

[0031] Figure 2 The module structure tree of the method of the embodiment of the present application is shown as follows;

[0032] Figure 3 This is a schematic diagram of the navigation routing configuration of the method of the embodiment of the present application;

[0033] Figure 4 This is a schematic diagram of button configuration reloading in the embodiment of the present application;

[0034] Figure 5 This is a schematic diagram of an object editor of the method of an embodiment of the present application;

[0035] Figure 6-Figure 11 This is a schematic diagram of a commonly used field editor in the method of the embodiment of the present application;

[0036] Fig.12 This is a schematic diagram of a detail pane showing all attribute fields of an object according to an embodiment of the present application;

[0037] Fig.13 This is a schematic diagram of the association table of the method of the embodiment of the present application;

[0038] Fig.14 This is a schematic diagram of the version of the method of the embodiment of the present application;

[0039] Fig.15 It is a diagram layout configuration diagram of the method of the embodiment of the present application;

[0040] Fig.16 This is a schematic diagram of the configuration of the file editor of the embodiment of the present application;

[0041] Fig.17 This is a schematic diagram of reloading the configuration by creating a SettingXXX configuration file according to the method of the embodiment of the present application;

[0042] Figure 18-Figure 20 A schematic diagram of a welding robot CAM software integration verification system is provided as an application example of the method according to an embodiment of the present application. DETAILED DESCRIPTION

[0043] The exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided to enable a more thorough understanding of the present disclosure and to fully convey the scope of the present disclosure to those skilled in the art.

[0044] The present application embodiment provides a method for customizing an object attribute display interface, such as Figure 1 As shown, including:

[0045] In step S101, when creating a module instance, the module instance's parent module instance is referenced to construct a module structure tree, and any module instance can obtain a parent control or a child control. Figure 2As shown, any module instance can obtain the parent control through Parent, and can also obtain the child control list through Children.

[0046] In step S102, if Figure 3 As shown, a navigation bar is provided, and navigation information of each navigation item and the content to be displayed in the content area are controlled based on the navigation bar configuration, wherein the control pointed to by the navigation route and its parameters are configured to control the control rendering of the navigation route content area.

[0047] In step S103, based on the navigation route control content area corresponding to the navigation item of the configured navigation bar, a frame page control is provided to organize the page structure and divide the page into multiple sub-areas using the frame page control, and corresponding display controls are configured based on each sub-area.

[0048] In some embodiments, it also includes providing a basic module based on the navigation route control content area corresponding to the navigation item of the configured navigation bar, and the basic module includes the frame page control, object list table, operation button, file system module, and instance tree.

[0049] In a specific example, the object list table is used to list multiple objects, and there are generally two types of tables.

[0050] Type table, you only need to configure the object type to be displayed in the table to automatically obtain a list of objects of the corresponding type, and support paging, sorting and other functions.

[0051] For a relational table, you only need to configure the "source" object ID and relationship name to be displayed in the table to automatically obtain a list of objects that have a compound corresponding relationship with the source object, and support paging, sorting and other functions.

[0052] Operation buttons can be configured according to different types of configured objects, and the button configuration of the parent class can be integrated through inheritance relationships, thereby reducing configuration items and lowering configuration difficulty.

[0053] The file system module is used to upload files in a file tree structure, adjust the folder structure, and support modifying file content through different file editors. Before uploading a file, you can use the MD5 value of the file to determine whether the file has been uploaded in advance, so that you can directly reference the uploaded file to avoid time-consuming repeated uploads.

[0054] Instance tree: Instance tree is used to display the relationship between objects in the form of a tree. The tree structure is formed by configuring the relationship names of different types of object nodes and the subordinate objects to be displayed.

[0055] In some embodiments, when creating a module instance, referencing the parent module instance of the module instance to construct a module structure tree includes:

[0056] When developing an extensible new module instance according to the set rules, after the new module instance is completed, add the Javascript file to the specified folder, and store the style files and template files that the new module instance depends on to the corresponding location, so that the extensible module can be introduced without recompiling the entire framework code.

[0057] When developing a new module instance through native Javascript, the DOM element to be rendered by the module, the module configuration, and the parent module instance are obtained when building the module instance.

[0058] Other development frameworks can also be introduced

[0059] The framework can also introduce existing front-end frameworks for developing modules, such as using the Vue framework to write modules.

[0060] In some embodiments, when creating a module instance, referencing the parent module instance of the module instance to construct a module structure tree further includes:

[0061] Provide an interface page, such as a web page, and use a lazy loading method to load the module instance after entering the web page, so as to load the relevant scripts, styles, and templates when the corresponding module instance needs to be displayed.

[0062] In some embodiments, a navigation bar is provided, and the navigation information of each navigation item configured in the navigation bar and the content to be displayed in the navigation route control content area include:

[0063] Configure the corresponding management button according to the type of object managed by the current page. If a management button is configured for a certain type, it will inherit the button configuration of its parent class.

[0064] In a specific example, the navigation bar can be configured to configure the name, icon and navigation route of each navigation item to control the content to be displayed in the content area. According to the type of object managed by the current page, the corresponding management button can be configured.

[0065] If a management button is not configured for a certain type, its button configuration will inherit the button configuration of its parent class. If its parent class is also not configured, it will continue to search for configuration upwards along the inheritance relationship, and so on, until the default button configuration for the base class is found.

[0066] Button configuration also supports overloading: button configuration can be inherited from the parent class. If the Title, Icon, Script, Action, Arg and other parameters of a button are not configured, the parent class or the default corresponding configuration will be searched based on the inheritance relationship. The basis for configuration inheritance is the same Name. Figure 4As shown, if the Title, Icon, Script, Action, Arg and other parameters of a button have been configured, the current configuration will be used.

[0067] Configure different types of objects to specify the editor name of the object, and derive after configuration. If the editor is not configured for the current type, the editor corresponding to the nearest type in the derivation tree of the object type is used as its editor. In a specific example, the object editor of the embodiment of the present application is configurable, and the object can appear in the edit box, object details page, table row, etc. The performance of the object editor can be configured at two levels.

[0068] Specifically, Figure 5 As shown in the figure, for different types of objects, their editor names can be specified by configuration. This configuration supports derivation. If a specific editor is not configured for the current type, the editor corresponding to the nearest type will be searched according to the derivation tree of the object type.

[0069] The result of the object editor is stored in the attribute field. In the specific example of this application, the editor used can be configured according to the name and type of the field, and the field editor is preferably specified by name to provide the most suitable editing method for different attribute fields.

[0070] like Figure 6-Figure 11 As shown, commonly used field editors include: string, personnel selection, confidentiality level, time, progress, table, etc.

[0071] Different types of objects need to display their detailed information in a certain way, which usually includes the characteristics of the object itself and other objects with various relationships with the object. In some embodiments, a navigation bar is provided, and the navigation information of each navigation item configured in the navigation bar and the content to be displayed in the navigation route control content area also include:

[0072] For different objects, a detail page is provided, and the detail page is configured with multiple different detail panes according to the current object or the relationship between the objects. Specifically,

[0073] Provides a container layout control for arranging and accommodating detail panes. The detail panes can be used to develop new functional modules based on business needs.

[0074] like Fig.12 As shown, the basic information of the commonly used details pane: directly display all attribute fields of the object.

[0075] like Fig.13 As shown, the association table: a list of objects that have a specific relationship with the current object.

[0076] like Fig.14 As shown, Version: The version history of the current object.

[0077] In the specific example, it also includes layout containers that can be nested and assembled. Specifically, the following containers and their mutual nesting can be used to build arbitrarily complex nested object detail layouts:

[0078] TabHorizontal, you can configure the titles of multiple tabs and the content controls to be displayed. The tabs are arranged horizontally.

[0079] Vertical tab TabVertical, you can configure the titles of multiple tabs and the content controls to be displayed, and the tabs are arranged vertically.

[0080] The horizontal split box SplitHorizontal can be configured to display content controls in the left and right split resizable areas.

[0081] The vertical split box SplitVertical can be configured to display content controls in the upper and lower split resizable areas.

[0082] Card, you can configure the card title and the content controls to be displayed.

[0083] In some embodiments, a navigation bar is provided, and the navigation information of each navigation item configured in the navigation bar and the content to be displayed in the navigation route control content area further include:

[0084] Provide a statistical display module, and build a statistical layout by dragging a window based on the statistical display module, such as Fig.15 As shown, you can bind the chart and data source to the window by dragging the data source.

[0085] A file structure tree editing control is provided for editing and adjusting the hierarchy of folders, editing files in the file structure tree, and configuring corresponding file editors for different file types.

[0086] like Fig.16 As shown, the file editor can be configured to use different file types. Supported file editors include XML editor, JSON editor, text editor, image editor, etc.

[0087] In some specific applications, the technical framework of the embodiment of the present application adopts a set of codes and multiple configurations to meet the personalized Web application requirements of different businesses, for example, including default configuration and overloaded configuration, where:

[0088] Default configuration, in order to ensure that the framework can read the configuration correctly when it runs, a default configuration file is stored in the Setting directory for any primary key that needs to read the configuration.

[0089] Overload configuration, such as Fig.17 As shown, by creating a SettingXXX configuration folder, create an overloaded configuration named XXX, and use this configuration through cfg=XXX in the URL. It should be noted that SettingXXX does not need to include all configuration files under Setting, but only needs to include configuration files with the same name but different configurations as the files in the Setting folder. The way to read the configuration in the embodiment of the present application is to try to read the corresponding configuration under SettingXXX. If there is no such file, try to read the corresponding default configuration file under the default configuration folder Setting.

[0090] The module developed based on the embodiment of the present application can be used for the content of a single area under the site page, or it can occupy the entire page for the required scenario. Fig.18 Welding robot CAM software integrated verification system.

[0091] The method of the embodiment of the present application can control the front-end framework of the page content through the configuration file, and set the overall or each module's behavior and performance in the form of a configuration file. Figure 18-Figure 20 As shown, a virtual prototype design platform is shown, which applies the method of the present application to business model modeling and front-end Web application construction, realizes the construction of the business interaction interface by controlling the content of the front-end framework of the Web application through the configuration file, and utilizes the secondary development function of the Web framework of this embodiment to expand and integrate the design software required by its business.

[0092] The method of the embodiment of the present application can quickly form a corresponding business Web application. Through configuration, the reorganization of functional modules or fine-tuning of functional details can be achieved. Through simple configuration, the basic object management module can be implemented for different objects in different industries; one set of code supports multiple sets of configurations to meet the different business directions of the same user; the unified business object format can easily meet the data interconnection and business integration between users or different businesses of the same user, and the method of the embodiment of the present application has basic functions and basic configurations that can be used out of the box.

[0093] The embodiments of the present application provide front-end configurable functions, which do not require re-coding and packaging, and can quickly implement function fine-tuning and module reorganization, thereby solving customers' functional concerns on site in real time, helping to improve implementation efficiency, reduce personnel time costs, and quickly respond to more customers' personalized needs.

[0094] The embodiment of the present application further provides a system for customizing an object attribute display interface, including a processor and a memory, wherein a computer program is stored in the memory, and when the computer program is executed by the processor, the steps of the method for customizing an object attribute display interface as described above are implemented.

[0095] It should be noted that in the various embodiments of the present application, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also includes other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "includes a ..." does not exclude the presence of other identical elements in the process, method, article or device including the element.

[0096] The serial numbers of the above-mentioned embodiments of the present application are for description only and do not represent the advantages or disadvantages of the embodiments.

[0097] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, a magnetic disk, or an optical disk), and includes a number of instructions for a terminal (which can be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to execute the methods described in each embodiment of the present application.

[0098] The embodiments of the present application are described above in conjunction with the accompanying drawings, but the present application is not limited to the above-mentioned specific implementation methods. The above-mentioned specific implementation methods are merely illustrative and not restrictive. Under the guidance of the present application, ordinary technicians in this field can also make many forms without departing from the purpose of the present application and the scope of protection of the claims, all of which are within the protection of the present application.

Claims

1. A method for customizing an object attribute display interface, characterized in that: include: When creating a module instance, reference the parent module instance of the module instance to build the module structure tree. Any module instance can obtain the parent control or child control. Provide a navigation bar, configure the navigation information of each navigation item based on the navigation bar, and control the content to be displayed in the content area of ​​the navigation route. The control pointed to by the navigation route and its parameters are configured to control the rendering of the control in the content area of ​​the navigation route. Based on the navigation route control content area corresponding to the navigation item of the configured navigation bar, a frame page control is provided to organize the page structure and divide the page into multiple sub-areas using the frame page control, and corresponding display controls are configured based on each sub-area.

2. The method for customizing an object attribute display interface according to claim 1, characterized in that: When creating a module instance, referencing the module instance's parent module instance to build the module structure tree includes: When developing a new extensible module instance according to the set rules, after the new module instance is completed, add the Javascript file to the specified folder, and store the style files and template files that the new module instance depends on to the corresponding location; When developing a new module instance through native Javascript, the DOM element to be rendered by the module, the module configuration, and the parent module instance are obtained when building the module instance.

3. The method for customizing an object attribute display interface according to claim 2, characterized in that: When creating a module instance, referencing the module instance's parent module instance to build the module structure tree also includes: Provides an interface page and uses lazy loading to load module instances so that relevant scripts, styles, and templates can be loaded when the corresponding module instances need to be displayed.

4. The method for customizing an object attribute display interface according to claim 1, characterized in that: Provide a navigation bar, configure the navigation information of each navigation item based on the navigation bar, and control the content area to display the following contents: Configure the corresponding management button according to the type of the object managed by the current page. If a management button is configured for a certain type, the button configuration of its parent class will be inherited; and, Configure different types of objects to specify the editor name of the object, and derive after configuration. If the editor is not configured for the current type, the editor corresponding to the nearest type in the derivation tree of the object type is used as its editor; Stores the results of the object editor in the property field.

5. The method for customizing an object attribute display interface according to claim 4, characterized in that: Provide a navigation bar, configure the navigation information of each navigation item based on the navigation bar, and control the content area to display the following content: For different objects, a detail page is provided, wherein the detail page is configured with a plurality of different detail panes according to the current object or the relationship between the objects; and, Provides a container layout control for arranging and accommodating detail panes.

6. The method for customizing an object attribute display interface according to claim 4, characterized in that: Provide a navigation bar, configure the navigation information of each navigation item based on the navigation bar, and control the content area to display the following content: Providing a statistical display module, and constructing a statistical layout by dragging a window based on the statistical display module; A file structure tree editing control is provided for editing and adjusting the hierarchy of folders, editing files in the file structure tree, and configuring corresponding file editors for different file types.

7. The method for customizing an object attribute display interface according to claim 4, characterized in that: It also includes providing a basic module based on the navigation route control content area corresponding to the navigation item of the configured navigation bar, and the basic module includes the frame page control, object list table, operation button, file system module, and instance tree.

8. A system for customizing an object attribute display interface, characterized in that: The method comprises a processor and a memory, wherein a computer program is stored in the memory, and when the computer program is executed by the processor, the steps of the method for customizing the object attribute display interface according to any one of claims 1 to 7 are implemented.

Images