TW201935278A - System and method for making widget based on template - Google Patents

Abstract

A system and method for making widget based on template. The method includes: providing raw data of data source, registering the data source to obtain an identification code, and marking the raw data with an identification code to convert the raw data to normalized data as simulation data; obtaining the simulation data according to the identification code, and setting widdget template configuration according to the simulation data by a widdget development device to enable and shelve a widdget template according to the widdget template configuration; selecting the data source by a user device, and obtaining the widge template and its configuration setting according to the data source by a widget template management unit, selecting the widget template by the user device, obtaining a data set from a data processing module by the widget management unit, and drawing the widget on a display according to the widget template configuration and the data set.

Description

System and method for making components based on template

The present invention relates to a technology for making a component, and particularly to a system and method for making a component based on a template.

In the existing technology, a new data source is added or when the user's needs change, new components need to be re-developed and released after the development of new components, which continuously adjusts and improves the development of the system. cost.

As mentioned in the previous technology, the entire web page layout is used as an application scope, and the components referred to are software components, such as menu code, drop-down menu code, email code, show code or drawing code, etc. , A tool that can be used in web design, but does not provide the function of dynamically customizable visual components (widget).

In addition, as mentioned in another previous technology, the user can select a data source to develop a widget template and draw the component directly on the display screen after completing the setting. However, it lacks a component developer to put a component template on the display and store components. Mechanism of template configuration.

Therefore, how to solve the shortcomings of the prior art has become a skill. One of the major issues for domain technicians.

The invention provides a system and method for making components based on a template, which can be used to make a widget based on a template, or to further achieve a dynamic custom component (visualization component).

The system for making components based on a template in the present invention includes: a data storage module that provides original data of a data source; a data processing module having a data conversion unit that registers the data source to obtain data Source identification code, where the data conversion unit marks the identification code on the original data, and converts the original data into normalized data, uses the normalized data as the simulated data of the data source, and stores the simulated data in the data storage module Medium; a component template setting acceptance module with a component template setting unit and a component template management unit, the component template setting unit obtains the simulation data of the data source from the data storage module according to the identification code of the data source for the component development device to The component template configuration is set by the simulation data, and the component template management unit enables the component template above the component template according to the component template configuration; and a component supply module with a component management unit, which is selected and registered by the user device Source for component template tubes The unit obtains the component template and its configuration settings according to the data source, and then selects the component template by the user device. Among them, the component management unit obtains the data set from the data processing module, and displays it based on the component template configuration and data set. The screen draws components.

The method for making a component based on a template in the present invention includes the following steps: (1) Registration procedure of a data source: a data source is provided by a data storage module The original data is registered by a data conversion unit to obtain the identification code of the data source. The data conversion unit marks the identification code on the original data and converts the original data into normalized data. The normalized data is used as the simulation data of the data source, and the simulation data is stored in the data storage module. (2) Component template racking procedure: The component template setting unit obtains the data source from the data storage module according to the data source identification code. Simulation data for the component development device to set the component template configuration based on the simulation data, and the component template management unit to enable the component template above the component template according to the component template configuration; and (3) Add component program: the user device through the component The management unit selects the registered data source for the component template management unit to obtain the component template and its configuration settings according to the data source, and then selects the component template by the user device. The component management unit obtains data from the data processing module. Set, according to the component template configuration and data set in the display Element drawn.

In order to make the above features and advantages of the present invention more comprehensible, embodiments are described below in detail with reference to the accompanying drawings. Additional features and advantages of the present invention will be partially explained in the following description, and these features and advantages will be partially obvious from the description, or may be learned through practice of the present invention. The features and advantages of the invention are realized and achieved by means of elements and combinations specifically pointed out in the scope of the patent application. It should be understood that both the foregoing general description and the following detailed description are merely exemplary and explanatory and are not intended to limit the scope of the invention as claimed.

1‧‧‧System for making components based on templates

10‧‧‧ Component template setting acceptance module

11‧‧‧Component template setting unit

12‧‧‧component template management unit

20‧‧‧component supply module

21‧‧‧component management unit

30‧‧‧Data Storage Module

31‧‧‧ Source

32‧‧‧ Simulation data

33‧‧‧ Basic Object Configuration

34‧‧‧Component template configuration

35‧‧‧Data Model Specification

40‧‧‧Data Processing Module

41‧‧‧Data Conversion Unit

42‧‧‧Data binding unit

43‧‧‧Data Set

A‧‧‧component development device

B‧‧‧user device

S11 to S16, S21 to S27, S31 to S41 ‧‧‧ steps

FIG. 1 illustrates a system for making components based on a template in the present invention. Schematic architecture diagram; Figures 2A to 2C show a schematic flowchart of a method for making components based on a template in the present invention, where Figure 2A is the registration procedure of the data source, and Figure 2B is the component template mounting procedure FIG. 2C is a program of adding components; and FIG. 3 is a schematic diagram illustrating an example of setting real-time quality components of a virtual private network (VPN) circuit in the present invention.

The following describes the embodiments of the present invention with specific specific implementation forms. Those skilled in the art can easily understand other advantages and effects of the present invention from the content disclosed in this description, and can also be implemented by other different specific implementation forms. Or apply.

The invention provides a system and method for making a component (widget, also called a visualization component) based on a template. The component development device (component developer) can set and place the component template according to the characteristics of the data source or the component layout requirements proposed by the user device (user), and the user device (user) only needs to select the data source and component template. This component can be drawn to reduce the release time of new components and quickly respond to the needs of user devices (users). The component development device or the user device may be an electronic device, such as a desktop computer, a notebook computer, a tablet computer, a server, or a smartphone.

At the same time, compared with the previous components (visual components), which are mostly composed of text, pictures, graphics and other objects, the present invention provides a component development device (component developer) that can set multiple component templates for a single data source, and the component templates can be Text, icon, chart, hyperlink and other basic objects. In addition, the objects of the chart may include categories such as topology, tree list, digit, pie / donut, grid, and frame. The components can be composed of a variety of basic objects to greatly enhance the visual richness, and then select the appropriate diagram to display based on the characteristics of the data source.

FIG. 1 is a schematic architecture diagram of a system 1 for making components based on a template in the present invention. As shown in the figure, the system 1 for making components based on a template includes a component template setting acceptance module 10, a component supply module 20, a data storage module 30, and a data processing module 40.

The component template setting acceptance module 10 includes a component template setting unit 11 and a component template management unit 12. The component development device A (component developer) can use the component template setting unit 11 to configure the component template according to the characteristics of the data source and the needs of the user device B (user), and the content of the configuration settings can include the basic object layout ( layout) and the relationship between objects and data binding. The component template management unit 12 can provide necessary functions such as management of the upper and lower shelves of the component template, or the correspondence between the data source and the component template, but is not limited thereto.

The component supply module 20 has a component management unit 21, and the user device B (user) can add or delete components on the display screen through the component management unit 21. The newly added component is to obtain a data set 43 from the data processing module 40 through the identification code of the data source, and draw a component screen in combination with the component template configuration 34. In addition, deleting the component is the component management unit 21 removing the component from the display screen.

The data storage module 30 is used to store data required by the component template setting acceptance module 10, the component supply module 20, and the data processing module 40, such as raw data 31, simulation data 32, and basic object configuration 33 , Component template configuration 34, data model specification 35, etc., but not limited to this. The data storage module 30 may be a database, a hard disk, an optical disk, a flash drive, or a memory.

The data processing module 40 includes a data conversion unit 41 and a data binding unit 42. The data conversion unit 41 can analyze and convert the original data 31 of the data storage module 30 into normalized data in accordance with the data model specification 35, and use the normalized data as the simulated data 32 as the data source to store The simulation data 32 is stored in the data storage module 30. The data binding unit 42 may generate the data set 43 according to the data binding relationship described by the user device B (user) in the data source selected by the component management unit 21 and the component template configuration 34 to provide a component supply module. Group 20 draws the corresponding data needed for the component.

In an embodiment, taking a real-time quality component of a virtual private network circuit as an example, the external system writes the circuit data periodically (eg, every 5 minutes) as the original data 31, and the data conversion unit 41 will belong to The circuit data of the original data 31 is taken out to be converted into data conforming to the JASON format, and the data model specification 35 will define the composition of the JASON format to be converted into normalized data for use by the data binding unit 42.

The system and method for making components based on a template in the present invention may include the following three main procedures (but not limited thereto), please refer to FIG. 1 and FIG. 2A to FIG. 2C.

I. Data source registration procedure: The data conversion unit 41 registers the (new) data source with the data to obtain the (new) data source identification code, and converts the original data 31 into normalized data to normalize the data. The simulation data 32 is used as the data source, and the simulation data 32 is stored in the data storage module 30.

Second, the component template shelf program: Component development device A (component developer) through the component template setting unit 11 for different data source settings for component templates, such as the layout of basic objects and object-data binding relationship and save it It is a component template, and a data source can set multiple component templates according to different custom requirements.

3. Add or delete component programs: User device B (user) can add or delete components on the display screen through the component management unit 21. For example, the newly added component program may be: the user device B (user) selects a data source, and the component template management unit 12 obtains the set component template according to the data source. Next, the user device B (user) selects a component template, and the component management unit 21 draws components on the display screen according to the component template configuration 34 and the data set 43 to meet the component presentation requirements of different user devices B (users).

Figures 2A to 2C show a schematic flowchart of a method for making components based on a template in the present invention. Figure 2A is a registration procedure for a data source, Figure 2B is a component template mounting procedure, and Figure 2C is a new Add component program, please refer to Figure 1 above for explanation.

First, because the format of the original data 31 is different, the original data 31 of all data sources are stored in the data storage module 30 first. When the present invention is in a template When accessing the (new) data source based on the system 1 for making components, a registration process of the data source as described in steps S11 to S16 of FIG. 2A is required.

In step S11 of FIG. 1 and FIG. 2A, the original data 31 of the (new) data source is provided by the data storage module 30.

In step S12 of FIG. 1 and FIG. 2A, the (new) data source is registered by the data conversion unit 41 to obtain the (new) data source identification code.

In step S13 in FIG. 1 and FIG. 2A, the data conversion unit 41 marks the (new) identification code of the data source on the original data 31.

In step S14 of FIG. 1 and FIG. 2A, the data model specification 35 is provided by the data storage module 30.

In step S15 in FIG. 1 and FIG. 2A, the data conversion unit 41 analyzes and converts the original data 31 into normalized data in accordance with the specifications according to the data model specification 35. The normalized data can be in the format of JavaScript Object Notation (JSON), that is, a key corresponds to a value, but other formats that can achieve the same or similar purpose can be used.

In step S16 of FIG. 1 and FIG. 2A, the normalized data is used as the (new) data source of the simulation data 32, and the simulation data 32 is stored in the data storage module 30.

Secondly, when the system 1 for making components based on the template of the present invention interfaces (new) data sources or the existing component templates cannot meet the new requirements of the user device B (user), the component development device A (component developer) needs Set up and up New component templates.

The component template configuration 34 for setting a new component template includes the basic object layout and the object-data binding relationship. The basic object layout includes the attributes to be set for the basic objects and the arrangement of the objects, for example, all the objects are arranged in a row. The data binding relationship is the data content of the object when the component is drawn.

The new component template mounting procedure is as described in steps S21 to S27 of FIG. 1 and FIG. 2B.

In step S21 of FIG. 1 and FIG. 2B, the component development device A (component developer) first selects a registered data source in the component template setting unit 11.

In step S22 of FIGS. 1 and 2B, the basic object configuration 33 is provided by the data storage module 30. The basic object configuration 33 provides attributes that need to be set for basic objects, such as color, icon source, text content, data correspondence method, etc., but is not limited thereto. Taking the object of text as an example, the attributes to be set are the color and content of the text. Taking a digit object as an example, the attributes that need to be set are the color of the digit figure, the description text, and the data correspondence method.

In step S23 of FIG. 1 and FIG. 2B, the data storage module 30 provides the simulation data 32 of the data source according to the identification code of the data source.

In step S24 of FIG. 1 and FIG. 2B, the component template setting unit 11 obtains the basic object configuration 33 from the data storage module 30, and obtains a simulation of the data source from the data storage module 30 according to the identification code of the data source. Information 32.

In step S25 of FIG. 1 and FIG. 2B, the component template configuration 34 is set by the component development device A (component developer). The component template configuration 34 describes the settings required when the component is drawn, such as the basic object layout and the object-data binding relationship.

The basic object layout includes the attributes that need to be set for basic objects and the layout of the objects, such as all objects lined up in a row. At the same time, the object-data binding relationship describes the correspondence between the object and the normalized data. Each object can specify one or more key values of the data, or the content of multiple key values after the operation. The result is The content displayed when the object is drawn.

In step S26 in FIG. 1 and FIG. 2B, the component template configuration 34 is stored in the data storage module 30.

In step S27 of FIG. 1 and FIG. 2B, the component template management unit 12 enables the component template according to the component template configuration 34 to complete the component template shelf program. At the same time, one data source can set multiple component templates according to different custom requirements.

In addition, the user device B (user) can add components on the display screen through the component supply module 20, and the procedure for adding components is as described in steps S31 to S41 in FIG. 2C below.

In step S31 of FIG. 1 and FIG. 2C, a registered data source is selected by the user device B (user).

In step S32 of FIG. 1 and FIG. 2C, the component management unit 21 inquires the component template management unit 12 according to the identification code of the data source to select the component template selectable from the data source and its configuration settings. Meanwhile, in step S33, the enabled component template configuration 34 is provided by the data storage module 30 予 Component template management unit 12.

In step S34 in FIG. 1 and FIG. 2C, the user device B (user) selects a component template to be drawn.

In step S35 of FIG. 1 and FIG. 2C, the component management unit 21 provides a real-time screen function before drawing the component to generate a real-time preview screen according to the component template configuration 34 and the data set 43 provided by the data conversion unit 41. To help user device B (user) understand the look and feel of the interface after the component is drawn.

In steps S36 to S37 of FIG. 1 and FIG. 2C, the component management unit 21 provides the data source identification code to the data conversion unit 41, and the data conversion unit 41 obtains the data model specification 35 from the data storage module 30 And query the original data 31 according to the identification code of the data source.

In step S38 in FIG. 1 and FIG. 2C, the data conversion unit 41 converts the original data 31 into normalized data according to the data model specification 35.

In step S39 in FIG. 1 and FIG. 2C, the data binding unit 42 performs data binding on the normalized data according to the component template configuration 34 to generate a data set 43.

Also, as described in step S35 of FIG. 2C above, the component management unit 21 generates an instant preview screen according to the component template configuration 34 and the data set 43 for the user device B (user) to select a different component template to preview the template. Plot the results.

In step S40 of FIG. 1 and FIG. 2C, the selected component template is confirmed by the user device B (user).

In step S41 in FIG. 1 and FIG. 2C, the component is drawn by the component management unit 21 according to the component template configuration 34 and the data set 43.

In addition, the component deletion program is: the user device B (user) selects the component to be removed through the component supply module 20, and the component management unit 21 removes the component from the display screen.

FIG. 3 is a schematic diagram illustrating the instant quality component of a virtual private network (VPN) circuit in the present invention as an example, and referring to FIG. 1, FIG. 2A to FIG. 2C above for explanation. .

First, the component development device A (component developer) of FIG. 1 sets a component template named VPN status-4 digits, and selects a virtual private network in step S21 of FIG. 2B Data source for the real-time quality of the VPN circuit, and set the component template configuration 34 (including setting the basic object layout and object-data binding relationship) in step S25 in FIG. 2B, and in step S26 in FIG. 2B The set component template configuration 34 is stored in the data storage module 30.

The above-mentioned basic object layout to be set may be, for example, that the component is composed of objects of a chart of four digital figures, and the four digital figures are arranged in a row. The first setting color is red, and the caption text is the obstacle circuit. The second setting color is yellow, and the descriptive text is a quality degradation circuit. The third setting color is green, and the caption text is a normal circuit. The fourth setting color is gray, and the caption text is no data / unmonitored circuit.

The above-mentioned object-data binding relationship to be set may be, for example: the first digital graph binding data key value is Number-of-VPN-Defect-Circuit, the first The two digital figure binding data key values are Number-of-VPN-Degraded-Circuit, the third digital figure binding data key values are Number-of-VPN-Normal-Circuit, and the fourth digital figure binding data key is The value is Number-of-Unknown-Circuit.

Furthermore, for example, the user device B (user) in FIG. 1 makes a request: the number of circuits in various states of the virtual private network (VPN) is displayed in digits on the components. For example, Figure 3 shows that the number of obstacle circuits, quality degradation circuits, normal circuits, and circuits with no data / unmonitored connections are three, two, 23, and six, respectively.

Taking the user device B (user) to draw the real-time quality component of the virtual private network (VPN) circuit as an example, the user device B (user) can select the real-time of the virtual private network (VPN) circuit in step S31 in FIG. 2C. Source of quality data. Select the component template of VPN Status-4 digits in step S34 in Figure 2C. Preview the component template drawing results in step S35 in Figure 2C. The selected component template is confirmed in step S40 of the drawing, and the real-time quality components of the virtual private network (VPN) circuit are drawn on the display screen in step S41 of FIG. 2C.

As can be seen from the above, in the system and method for making components based on a template in the present invention, components can be made based on a template and can achieve, for example, dynamic custom visualized components, easy-to-shelf component templates, and storage component template configurations.

In addition, in order to respond to different (heterogeneous) data sources and meet the diverse needs of user devices (users), component development devices (component developers) or component template management units can list (new) component templates for data sources, and according to users Device (user) needs customized settings component template (including basic objects Layout and object-data binding relationship), and a data source can set multiple component templates according to different needs, and the user device (user) can select the data source and component template to draw the component, thereby reducing ( New) component release time, and respond quickly to the needs of user devices (users).

At the same time, the present invention provides a component development device (component developer) that can set multiple component templates for a single data source, and a component template can be composed of a plurality of different basic objects (combination) to greatly improve the visual richness of the component template, and further Select the appropriate chart for presentation based on the characteristics of the data source. Furthermore, when the present invention adds a component, the drawing result of the component template can be previewed by the real-time screen function, which helps the user device (user) to select a preferred component template.

The above-mentioned embodiments merely exemplify the principles, features, and effects of the present invention, and are not intended to limit the implementable scope of the present invention. Anyone who is familiar with this technology can perform the above operations without departing from the spirit and scope of the present invention. Modifications and changes to the implementation form. Any equivalent changes and modifications made by using the disclosure of the present invention should still be covered by the scope of patent application. Therefore, the scope of protection of the rights of the present invention should be as listed in the scope of patent application.

Claims (18)

A system for making widgets based on a template includes: a data storage module that provides original data of a data source; a data processing module with a data conversion unit that registers the data source To obtain the identification code of the data source, wherein the data conversion unit marks the identification code on the original data, and converts the original data into normalized data to use the normalized data as simulated data of the data source,俾 The simulation data is stored in the data storage module; a component template setting acceptance module having a component template setting unit and a component template management unit, and the component template setting unit provides the data storage module according to the identification code of the data source. Obtain the simulation data of the data source for the component development device to set the component template configuration according to the simulation data, and the component template management unit enables the component template to mount the component template according to the component template configuration; and a component management Component supply module of the unit, the component management unit is for the user device Determine the registered data source for the component template management unit to obtain the component template and its configuration settings that have been put on the shelf according to the data source, and then select the component template by the user device, wherein the component management unit reports to the The data processing module obtains the data set, and draws the component on the display screen according to the component template configuration and the data set. The system according to item 1 of the scope of patent application, wherein the component is a visual component, and the component template is composed of one or more including text, graphics It consists of basic objects of at least one of display, diagram and hyperlink. The system described in item 1 of the scope of the patent application, wherein the data storage module provides original data of a new data source for the data conversion unit to register the new data source and obtain the new data Source identification code. The system according to item 1 of the scope of patent application, wherein the data storage module is used to store the original data, the simulation data, the component template configuration, the basic object configuration and the data model specification. The system according to item 1 of the scope of patent application, wherein the data conversion unit analyzes and converts the original data into the normalized data according to the data model specification, and the normalized data is stored in the data storage module as Simulation of new data sources. The system described in item 1 of the scope of patent application, wherein the component template setting unit further obtains a basic object configuration from the data storage module, the basic object configuration includes attributes to be set for the basic object, and the attributes include color , At least one of the icon source, text content, and data correspondence. The system described in item 1 of the scope of patent application, wherein the content of the component template configuration includes the basic object layout and the object-data binding relationship. The system described in item 1 of the scope of patent application, wherein the component management unit provides a real-time screen function before drawing the component to generate a real-time preview screen according to the component template configuration and the data set. The system according to item 1 of the scope of patent application, wherein the information office The management module further has a data binding unit, which performs data binding on the normalized data according to the component template configuration to generate the data set. The system according to item 1 of the scope of patent application, wherein the user device further removes the specified component from the display screen through the component supply module to delete the component. A method for making a component based on a template includes the following steps: (1) A data storage module provides original data of the data source, and a data conversion unit registers the data source to obtain the data source. Identification code, wherein the data conversion unit marks the identification code on the original data, and converts the original data into normalized data to use the normalized data as simulated data of the data source, and stores the simulated data in In the data storage module; (2) the component template setting unit obtains the simulation data of the data source from the data storage module according to the identification code of the data source for the component development device to set the component template configuration according to the simulation data , The component template management unit enables the component template to mount the component template according to the component template configuration; and (3) the user device selects the registered data source through the component management unit for the component template management unit to rely on The data source obtains the component template and its configuration settings that have been put on the shelf, and then the user device selects the Template member, wherein the snap element to the data processing module to obtain data set, which serve element template data set depicts the configuration of the element based on the display screen. The method according to item 11 of the scope of patent application, wherein the element is A visual element, the element template is composed of one or more basic objects including at least one of text, icons, diagrams and hyperlinks. The method according to item 11 of the scope of patent application, wherein the data storage module is used to store original data of a new data source for the data conversion unit to register the new data source, and then obtain the new data source ID of the data source. The method according to item 11 of the scope of patent application, wherein in step (1), the data conversion unit analyzes and converts the original data into the normalized data according to the data model specification, and the normalized data is stored Use this data storage module as a new data source for simulation data. The method according to item 11 of the scope of patent application, wherein in step (2), the component template setting unit obtains a basic object configuration from the data storage module, and the basic object configuration includes the basic object to be set. Attributes, and the attributes include at least one of color, icon source, text content, and data correspondence. The method according to item 11 of the scope of patent application, wherein in step (3), the component management unit provides a real-time screen function before drawing the component, so as to generate real-time according to the component template configuration and the data set. Preview screen. The method according to item 11 of the scope of patent application, wherein, in step (3), the data binding unit performs data binding on the normalized data according to the component template configuration to generate the data set. The method described in item 11 of the scope of patent application, further includes the following steps: the user device sends the specified component from the component supply module through The display is removed to delete the component.