KR102150536B1 - System and method for dynamically generating web UI component according to server preference - Google Patents

Abstract

Disclosed is a system and method for dynamically generating a web UI component such as HTML, which is not specified in the W3C standard, according to a setting value set in a server. According to an aspect of the present invention, as a web UI component generation system for dynamically generating a web UI component according to a server setting, a web document request module for requesting a target web document from a predetermined server-the target web document is W3C Parsed into standard Document Object Model (DOM) elements and non-standard document object model elements-, a web document receiving module that receives the target web document from the server, and renders a standard document object model element of the target web document A default browser rendering engine, a setting information module for requesting setting information on a non-standard document object model element of the target document to the server, and receiving the setting information from the server, and a non-standard of the target web document according to the setting information There is provided a web UI component generation system including a dynamic web UI component generation module that dynamically renders a document object model element to generate a web UI component corresponding to the non-standard document object model element and the setting information.

Description

System and method for dynamically generating web UI component according to server preference}

The present invention relates to a system and method for dynamically generating a web UI component according to a server setting. In more detail, it relates to a system and method for dynamically generating a web UI component such as HTML, which is not specified in the W3C standard, according to a setting value set in a server.

A typical web page is composed of various HTML markup elements and style sheet elements, and the web browser interprets the elements and performs rendering. The main function of a web browser is to request a user-selected resource (for example, a web page) from the server, and render and display it. The resource is usually an HTML document, but it could be a PDF, an image, or some other form. The address of a resource is determined by a Uniform Resource Identifier (URI). The browser interprets and displays HTML files according to the HTML and CSS specifications, which are set by the World Wide Web Consortium (W3C), a web standardization organization. In the past, browsers only partially implemented according to this specification and expanded in their own way, causing serious compatibility problems for web authors, but in recent years most browsers follow the standard specification. The rendering engine parses the HTML document and converts the tags into Document Object Model (DOM) nodes inside the content tree. It then parses the included style elements along with the external CSS file. Thus, the rendering of a web page on the computing device is influenced by the page's DOM tree. The DOM tree defines one or more nodes in a child-parent relationship, including each DOM node and its corresponding style attribute.

On the other hand, with the recent development of computer technology, there is a growing trend of companies introducing enterprise resource planning solution software, which is a computer system for business management and management. Using this ERP solution software, companies handle a lot of data necessary for the company's management and management, such as finance, production, and inventory. ERP is a computer system for business management and management of a company, or package software installed on such a system. Representative companies handling ERP include SAP and Oracle, and representatively in Korea, Duzon. Meanwhile, in order for a company to be provided with an ERP service, not only the ERP software must be installed on the user terminal in the company, but also a database that stores various information of the company must be established. Companies can efficiently manage accounting, personnel, salaries, sales, trade, purchasing, materials, production, outsourcing, services, and management information through the ERP system. In addition, by introducing the ERP system, companies can maximize productivity by reducing inefficiencies that occur when information systems differ between management departments and leading to smooth company resource management. In addition, ERP can provide the advantage of being able to systematically grasp and manage a variety of corporate information. Since each company has its own business process and different business strategy, ERP software needs to be customized to suit the characteristics of the company to be applied, business process, and workflow unlike general package software.

However, when software having slightly different functional or visual requirements for each applied company, such as ERP, is implemented through the web, a number of changes or customizations to the various components constituting the web UI inevitably occur. One of the countermeasures is to manage the settings of various components constituting the web UI in a centralized server. In other words, instead of directly modifying the web page or the resource constituting the web page for customizing or changing the output location, output method, localization processing, data output format application, user help, etc. There is a technical idea that allows these server-side settings to be reflected in web pages or UI components included in web pages by managing setting values that affect the entire web page or web site in a centralized server and changing server-side settings. Required.

The problem to be solved by the present invention is to solve the problems of the conventional method, by managing the setting values for each component or setting values that affect the entire web page or web site in a centralized server and changing the server-side settings. It is to provide a system and method that allows setting items to be reflected in a web page or a UI component included in a web page.

In addition, a system and a method capable of providing a non-standard web UI component capable of performing aesthetically improved and complex functions in addition to a standard web UI component rendered in a typical web browser is provided.

According to an aspect of the present invention, as a web UI component generation system for dynamically generating a web UI (User Interface) component according to a server setting, a web document request module for requesting a target web document from a predetermined server-the target web The document is parsed into a W3C standard document object model (DOM) element and a non-standard document object model element-, a web document receiving module that receives the target web document from the server, and the target web document A browser basic rendering engine that renders a standard document object model element, a setting information module for requesting setting information on a non-standard document object model element of the target document to the server, and receiving the setting information from the server, and the setting information A web UI component generation system including a dynamic web UI component generation module that dynamically renders a non-standard document object model element of the target web document accordingly to generate a web UI component corresponding to the non-standard document object model element and the setting information Is provided.

In an embodiment, the setting information may include information on whether to display each UI element included in a web UI component corresponding to the non-standard document object model element, a form, a layout, an output format, and a display language. .

In one embodiment, the setting information includes global setting information commonly applied to all web documents provided by the server, document level setting information commonly applied to all non-standard document object model elements included in the target web document, And element level setting information applied to each non-standard document object model element included in the target web document.

In one embodiment, the non-standard document object model element includes a multi-item selection element, and the multi-item selection UI component generated by dynamically rendering the multi-item selection element by the dynamic web UI component generation module includes the multi-item A text box that displays outline information of a plurality of items allocated to the selection UI component, a search icon located in the text box, and a pop-up when the search icon is selected, so that at least some of the plurality of selectable items can be selected. And a multi-item selection window for allowing a plurality of selected items to be assigned to the multi-item selection UI component, and a drop-down list for displaying a plurality of items selected through the multi-item selection window in a drop-down manner. have.

In one embodiment, the non-standard document object model element includes a mosaic imaging element, and the mosaic imaging UI component generated by dynamically rendering the mosaic imaging element by the dynamic web UI component generation module includes a predetermined value received from the server. A unit image corresponding to each character included in the text data of is generated, the unit image corresponding to each character is randomly affine converted, and then combined to generate a mosaic image corresponding to the text data, and the generated Mosaic images can be displayed.

According to another aspect of the present invention, there is provided a method for generating a web UI component for dynamically generating a web UI component according to a server setting, the step of requesting, by a web UI component generation system, a target web document from a predetermined server-the target The web document is parsed into a W3C standard document object model element and a non-standard document object model element -, the web UI component generating system receiving the target web document from the server, the web UI component generating system, the Requesting setting information on a non-standard document object model element of the target document to a server, and receiving the setting information from the server, the web UI component generation system rendering the standard document object model element of the target web document And the web UI component generating system dynamically renders a non-standard document object model element of the target web document according to the setting information, and generates the non-standard document object model element and a web UI component corresponding to the setting information A method of generating a web UI component including the step of:

In an embodiment, the setting information may include information on whether to display each UI element included in a web UI component corresponding to the non-standard document object model element, a form, a layout, an output format, and a display language. .

In one embodiment, the setting information includes global setting information commonly applied to all web documents provided by the server, document level setting information commonly applied to all non-standard document object model elements included in the target web document, And element level setting information applied to each non-standard document object model element included in the target web document.

In one embodiment, the non-standard document object model element includes a multi-item selection element, and the multi-item selection UI component generated by dynamically rendering the multi-item selection element by the web UI component generation system includes the multi-item selection A text box that displays outline information of a plurality of items allocated to a UI component, a search icon located in the text box, and a pop-up when the search icon is selected, and configured to select at least some of a plurality of selectable items And a multi-item selection window for allowing a plurality of selected items to be allocated to the multi-item selection UI component, and a drop-down list for displaying a plurality of items selected through the multi-item selection window in a drop-down manner. .

In one embodiment, the non-standard document object model element includes a mosaic imaging element, and the mosaic imaging UI component generated by dynamic rendering of the mosaic imaging element by the web UI component generation system includes a predetermined value received from the server. Generate a unit image corresponding to each character included in the text data, randomly affine transform the unit image corresponding to each character, and combine to generate a mosaic image corresponding to the text data, and the generated mosaic Images can be displayed.

According to another aspect of the present invention, there is provided a computer-readable recording medium installed in a data processing apparatus and recording a program for performing the above-described method.

According to another aspect of the present invention, a system for generating a web UI component, comprising a processor and a memory storing a program, wherein the program is executed by the processor, the method described above by the web UI component generating system A web UI component creation system is provided to perform this.

According to an embodiment of the present invention, a centralized server manages a setting value for each component or a setting value that affects the entire web page or web site, and changes the server-side setting so that these server-side settings are changed to the web page or web page. It is possible to provide a system and method to be reflected in the UI component included in the.

In addition, in addition to the standard web UI component rendered in a typical web browser, a non-standard web UI component that is aesthetically enhanced and capable of performing a complex function can be provided.

Brief description of each drawing is provided in order to more fully understand the drawings cited in the detailed description of the present invention.
1 is a diagram illustrating a driving environment of a system for generating a web UI component according to an embodiment of the present invention.
2 is a block diagram showing a detailed configuration of a web UI component generation system according to an embodiment of the present invention.
3 is a diagram illustrating an example of setting a field of a web UI component in a grid form.
4A to 4C are diagrams illustrating examples of date selection UIs having different display formats.
FIG. 5 is a diagram illustrating an example of setting a position or display order of an input field in a web UI component including a plurality of input fields.
6 is a flowchart illustrating a method of generating a web UI component according to an embodiment of the present invention.
74A to 7D are diagrams for describing a multi-item selection UI component according to an embodiment of the present invention.
8A to 8C are diagrams for describing a mosaic imaging UI component according to an embodiment of the present invention.

Since the present invention can apply various transformations and have various embodiments, specific embodiments are illustrated in the drawings and will be described in detail in the detailed description. However, this is not intended to limit the present invention to a specific embodiment, it is to be understood to include all conversions, equivalents, and substitutes included in the spirit and scope of the present invention. In describing the present invention, when it is determined that a detailed description of a related known technology may obscure the subject matter of the present invention, a detailed description thereof will be omitted.

Terms such as first and second may be used to describe various components, but the components should not be limited by the terms. These terms are used only for the purpose of distinguishing one component from another component.

The terms used in the present application are only used to describe specific embodiments, and are not intended to limit the present invention. Singular expressions include plural expressions unless the context clearly indicates otherwise.

In the present specification, terms such as "include" or "have" are intended to designate the existence of features, numbers, steps, actions, components, parts, or a combination thereof described in the specification, but one or more other It is to be understood that the presence or addition of features, numbers, steps, actions, components, parts, or combinations thereof, does not preclude in advance the possibility of being excluded.

In addition, in the present specification, when one component'transmits' data to another component, the component may directly transmit the data to the other component, or through at least one other component. This means that the data may be transmitted to the other component. Conversely, when one component'directly transmits' data to another component, it means that the data is transmitted from the component to the other component without passing through the other component.

Hereinafter, the present invention will be described in detail with reference to the accompanying drawings, focusing on embodiments of the present invention. The same reference numerals in each drawing indicate the same member.

1 is a diagram illustrating a driving environment of a system for generating a web UI component according to an embodiment of the present invention.

Referring to FIG. 1, in order to implement a method for generating a web UI component according to an embodiment of the present invention, a predetermined web UI component generating system 100 may be provided.

The web UI component generation system 100 may be implemented by being included in the user terminal 10. In this case, the web UI component generation system 100 may be implemented in a form in which hardware included in the user terminal 10 and software driven in the user terminal 10 are combined. For example, the web UI component generation system 100 may include a web browser for rendering a web document (eg, an HTML document, etc.) and displaying the rendered result.

Meanwhile, the user terminal 10 may be a computing device or a data processing device capable of storing various types of software and executing the stored software. For example, the user terminal 10 may be a smart phone, tablet PC, laptop, desktop, mobile terminal, PMP, PDA, or the like.

Meanwhile, depending on an implementation example, unlike FIG. 1, the web UI component generation system 100 may be implemented as a separate device from the user terminal 10, and in this case, the web UI component generation The system 100 may transmit and receive various data and/or signals required to implement the technical idea of the present invention with the user terminal 10 through a wired/wireless network.

The web UI component generating system 100 may be connected to a predetermined server 200 through a wired/wireless network to transmit and receive various data and/or signals required to implement the technical idea of the present invention.

The server 200 provides the web UI component generation system 100 and/or the web document (eg, HTML document, etc.) requested by the user terminal 10 and/or the resource required to implement the web document. It may include a web UI component generation system 100 and/or a web server 210 that transmits to the user terminal 10.

In addition, the server 200 may further include a DB 220.

In this specification, the term DB (DataBase) may be implemented as at least one table, and is used as a meaning to further include a separate DBMS (Database Management System) for searching, storing, and managing information stored in the DB. May be. In addition, it can be implemented in various ways such as a linked-list, a tree, a relational DB, and includes all data storage media and data structures capable of storing information to be stored in the DB 130. It can be used as a meaning.

The DB 200 may further store setting information, and the setting information may be a web document provided by the web server 210 or information indicating a setting regarding a resource included in the web document.

The web server 210 may provide setting information stored in the DB 200 together with a web document to the user terminal 10 and/or the web UI component generation system 100. Then, the web UI component generation system 100 can render a web document by reflecting the setting information, which will be described later.

Meanwhile, according to an embodiment, the web UI component generation system 100 may operate in conjunction with a predetermined ERP system. The ERP system may be included in the server 200. The ERP system is a computer system for business management and management of a company, and may be an integrated system integrating management resources of various management systems that have been independently operated across all sectors of the company, such as personnel, finance, and production. In addition, the ERP system monitors the flow and use of various resources in the enterprise, collects and interprets data related to business such as accounting, sales, and inventory management in order to efficiently manage management resources to make better management decisions. It can be formed to do. In the ERP system, various data for business processing related to business management and management may be stored in advance.

In one embodiment, the web server 210 may provide various functions provided by the ERP system to the user terminal 10 and/or the web UI component generation system 100 through a web UI.

2 is a block diagram showing a detailed configuration of a web UI component generating system 100 according to an embodiment of the present invention.

As shown in Figure 2, the web UI component generation system 100 is a web document request module 110, a web document receiving module 120, a browser existing rendering engine 130, a setting information module 140, dynamic A web UI component generating module 150 may be included. Depending on the embodiment of the present invention, some of the above-described components may not necessarily correspond to components essential to the implementation of the present invention, and the web UI component generation system 100 according to the embodiment Of course,) may include more components than this. For example, the web UI component generating system 100 includes other components included in the web UI component generating system 100 (e.g., a web document request module 110, a web document receiving module 120, a browser It may further include a control module (not shown) capable of controlling functions and/or resources of the existing rendering engine 130, the setting information module 140, the dynamic web UI component generation module 150, etc.

The web UI component generation system 100 may include hardware resources and/or software necessary to implement the technical idea of the present invention, and necessarily means one physical component or one device. Is not. That is, the web UI component generation system 100 may mean a logical combination of hardware and/or software provided to implement the technical idea of the present invention, and if necessary, the web UI component generation system 100 It may be implemented as a set of logical configurations for implementing the technical idea of the present invention by performing a function. In addition, the web UI component generation system 100 may refer to a set of components implemented separately for each function or role for implementing the technical idea of the present invention. For example, the web document request module 110, the web document receiving module 120, the browser existing rendering engine 130, the setting information module 140, and the dynamic web UI component generation module 150 are used in different physical devices. It can be located on the same physical device. In addition, depending on the implementation example, the web document request module 110, the web document receiving module 120, the browser existing rendering engine 130, the setting information module 140, and the dynamic web UI component generation module 150 A combination of software and/or hardware to configure may also be located in different physical devices, and components located in different physical devices may be organically combined with each other to implement the respective modules.

In addition, in this specification, a module may mean a functional and structural combination of hardware for performing the technical idea of the present invention and software for driving the hardware. For example, the module may mean a predetermined code and a logical unit of hardware resources for executing the predetermined code, but does not necessarily mean a physically connected code or a single type of hardware. It can be easily inferred by an average expert in the technical field of the present invention.

According to an embodiment, the web document request module 110, the web document receiving module 120, and the browser existing rendering engine 130 may be included in the web browser 101 installed in the user terminal 10. A web browser is an application software that interactively communicates with the web server 210 to interwork with and outputs HTML documents or files. The web browser is one of the representative HTTP user agents, and major web browsers include Mozilla Firefox, Google Chrome, and Internet Explorer. , Microsoft Edge, Opera, Safari, etc.

Meanwhile, the web document request module 110 may request a target web document from the server 200, and the web document receiving module 120 may receive the target web document from the server 200. In addition, the web document receiving module 120 may further receive a resource of the target web document from the server 200.

The target web document may include a plurality of HTML elements (HTML elements, HTML elements), and may be parsed into a W3C standard document object model (DOM) element and a non-standard document object model element.

HTML elements refer to individual elements that make up an HTML document or web page, and are parsed into a document object model. HTML consists of a tree or HTML nodes (text nodes, etc.). Each node can specify HTML attributes. Nodes can also own other nodes and content, including text. Numerous HTML nodes express semantics or meaning. For example, the title node represents the title of the document.

The document object model is an object-oriented model that represents a structured document.

The W3C standard document object model can mean the W3C's official standard for expressing a document structured in a platform/language neutral way, and is the basis for several APIs standardized by the W3C. The document object model is for controlling the elements of an HTML document, and is a means to dynamically access and change the content, structure, and style of the document. Due to the incompatibility of DOM implementation between browsers, the W3C developed a standard document object model, which will be referred to as the W3C standard document object model in this specification.

The W3C standard document object model element or the standard document object model element may mean a document object model element defined by the W3C standard document object model. The non-standard document object model element may mean other document object model elements excluding elements according to the W3C standard document object model. The non-standard document object model element is an element previously promised or defined between the server 200 and the web UI component generation system 100, and may not be rendered in a typical web browser conforming to the HTML standard.

Meanwhile, the browser basic rendering engine 130 may render a standard document object model element of the target web document.

The setting information module 140 may receive setting information on a non-standard document object model element of the target document from the server 200.

The dynamic web UI component generation module 150 dynamically renders a non-standard document object model element of the target web document according to the setting information, and generates the non-standard document object model element and a web UI component corresponding to the setting information. can do.

The setting information may include information on whether to display each UI element included in a web UI component corresponding to the non-standard document object model element, a form, a layout, an output format, and a display language, but is not limited thereto. For example, the setting information may be information about localization processing of each UI element included in the web UI component, and whether user help is displayed.

For example, a web UI component corresponding to a non-standard document object model element generated by the dynamic web UI component generation module 150 may be configured to provide an input method optimized for a data type of data to be input by a user. Alternatively, the format of the input/output data (eg, money format, date format, mask processing of a specific portion, etc.) may be specified according to the setting information, or whether to provide help (eg, guideline) for input/output data may be determined differently. . Alternatively, the label and message can be localized according to the setting information, and whether or not to activate/deactivate or the initial value can be customized. In addition, the display order of various fields included in the web UI component can be customized. Alternatively, a web component that performs a variety of complex functions that a standard web component cannot perform can be created.

Meanwhile, the setting information includes global setting information commonly applied to all web documents provided by the server, document level setting information commonly applied to all non-standard document object model elements included in the target web document, and the target web document. Element level setting information applied to each non-standard document object model element included in may be included.

If at least some of global setting information, document level setting information, and element level setting information collide, a predetermined priority may be applied. For example, when global setting information, document level setting information, and element level setting information collide, the element level setting information may be applied with the highest priority.

The setting information may be preset by an administrator of the server 200 or a user of the user terminal 10.

3 is a diagram illustrating an example of setting a field of a web UI component in a grid form. A user or administrator can access the server 200 to receive a UI for setting a web UI component in a predetermined grid form, and add, delete, and edit the column 71 on the UI, and change the column name 72. It can be specified, the control method (74), the number of digits (75) can be set, or whether or not to use (75) can be specified.

When the setting for the grid-shaped web UI component is completed, setting information corresponding to the setting may be stored in the DB 220 of the server 200, and the setting information is then used to refer to the grid-shaped web UI component. It may be provided to the web UI component generation system 100 together with the included web page. Then, the web UI component generation system 100 may render the grid-shaped web UI component by reflecting the setting information.

4A to 4C are diagrams illustrating examples of date selection UIs having different display formats. 4A shows an example in which the output format of the date display text 81 is set to yyyy-MM-dd, and FIG. 4B shows an example in which the output format of the date display text 81 is set to MM-dd-yyyy. 4C illustrates an example in which the output format of the date display text 81 is set to yy-MM-dd.

Information on the output format of the date display text 81 may be stored in the DB 220 of the server 200. The web UI component generation system 100 may render the date selection UI of FIGS. 4A to 4C according to the setting information on the server 220.

FIG. 5 is a diagram illustrating an example of setting a position or display order of an input field in a web UI component including a plurality of input fields.

In the state where the input field is located on the web UI component as shown in FIG. 5A, the user or the administrator moves the location of the input field called'Detailed Inquiry Condition Title 6'in a drag-and-drop method to see FIG. 5B. It can be positioned as shown. In a similar way, the user or administrator can remove or disable each input field and modify the field name assigned to each input field.

Setting information reflecting the detailed settings of the web UI component changed by a user or an administrator may be stored in the DB 220 of the server 200, and the web UI component generating system 100 is the setting information on the server 220 Accordingly, a web UI component corresponding to FIG. 5B may be generated instead of FIG. 5A.

6 is a flowchart illustrating a method of generating a web UI component according to an embodiment of the present invention.

Referring to FIG. 6, the web UI component generation system 100 may request a target web document from the server 200 (S100). In this case, as described above, the target web document can be parsed into a W3C standard document object model element and a non-standard document object model element.

Thereafter, the web UI component generation system 100 may receive the target web document from the server 200 (S110).

In addition, the web UI component generation system 100 may request and receive setting information on a non-standard document object model element of the target document from the server 200 (S120 and S130).

Meanwhile, the web UI component generation system 100 may extract a standard document object model element and a non-standard document object model element by parsing the target web document (S140).

The web UI component generation system 100 may render a standard document object model element of the target web document (S150), which may be performed by a basic rendering engine of a web browser.

The web UI component generation system 100 may further include an additional rendering engine capable of rendering non-standard document object model elements that cannot be rendered by a standard web browser, and renders non-standard document object model elements through this. Web UI components can be created. In addition, the web UI component generation system 100 may generate a web UI component that is functionally/visually customized according to the setting information by reflecting the setting information when rendering a non-standard document object model element (S160).

The web UI component generated by the web UI component generation system 100 rendering a non-standard document object model element may be composed of an element in a form that can be interpreted by a standard web browser.

Meanwhile, an example of the non-standard document object model element may be a multi-item selection element. Hereinafter, a multi-item selection UI component generated by rendering the multi-item selection element by the dynamic web UI component generation module 150 is illustrated. It will be described with reference to 7a to 7d.

The target web page may include a tag as shown in FIG. 7A that is parsed as a multi-item selection element. The corresponding HTML tag may be parsed as a multi-item selection element, and the dynamic web UI component generation module 150 may generate a multi-item selection UI component by rendering the multi-item selection element.

7B illustrates a form before the multi-item selection UI component 20 is expanded in the form of a drop-down list box. As shown in FIG. 7B, the multi-item selection UI component 20 includes a text box 21 displaying outline information of a plurality of items allocated to the multi-item selection UI component 20, and the multi-item selection An extension button 22 for extending the UI component 20 and a search icon 23 positioned in the text box may be included.

If the search icon 23 is selected, a multi-item selection window 27 as shown in FIG. 7C may be popped up. Referring to FIG. 7C, the multi-item selection window 27 includes a selectable item list 25 in which a plurality of selectable items are listed, and a search condition input UI 26 for inputting a search condition for the selectable item. It may include. When a search condition is input to the search condition input UI 26, only items that satisfy the input search condition may be displayed in the selectable item list 25.

Meanwhile, the user can select some or all items through the selectable item list 25. In the example of FIG. 7C, four items (codes: 201010, 992300, 995100, and 300000) are selected through a combo box. Meanwhile, at least one item selected by the user (code: 201010, code: 992300, code: 995100, code: 300000 in the example of FIG. 4B) may be allocated to the multi-item selection UI component 20.

On the other hand, when at least one item is selected through the multi-item selection window 27 as shown in FIG. 7C and assigned to the multi-item selection UI component 20, and then the expand button 22 of FIG. 7B is selected, A UI as shown may be displayed. As shown in FIG. 7D, the multi-item selection UI component 20 may include a drop-down list 27 that displays a plurality of items selected through the multi-item selection window 24 in a drop-down manner. . In addition, it may further include a delete button 28 for deleting each assigned item, and a delete all button 29 for deleting all items.

On the other hand, the format of the data displayed in the text box 21 or the form of the search icon 23, whether each field of the selectable item list 25 included in the multiple item selection window 24 is activated (displayed), Functions or visual effects of the multi-item selection UI component 20, such as whether or not the search condition input UI 26 is activated or format, may be customized by setting information received from the server 200.

Meanwhile, another example of the non-standard document object model element may be a mosaic imaging element. Hereinafter, a mosaic imaging UI component generated by rendering the mosaic imaging element by the dynamic web UI component generation module 150 is illustrated in FIGS. It will be described with reference to FIG. 8C.

The mosaic-imaging UI component may be a web UI component that performs a function of making it difficult to copy corresponding data by displaying an object in which the mosaic image is obtained instead of text data. To this end, the mosaic imaging UI component may generate a unit image corresponding to each character included in predetermined text data received from the server 200. For example, the mosaic imaging UI component converts the text'abcd' into a unit image for each character, as shown in FIG. 8A, so that a unit image 41 corresponding to'a' and a unit image corresponding to'b' ( 42), a unit image 43 corresponding to'c' and a unit image 44 corresponding to'd' may be generated.

Thereafter, the mosaic imaging UI component may randomly affine transform a unit image corresponding to each character. The affine transformation is a transformation between two affine spaces that preserve collinear points, and may include equidistant transformations such as rotation, translation, reflection, etc., resemblance transformation, scaling, shear transformation, or a combination thereof. For example, the mosaic imaging UI component may affine-transform each unit image of FIG. 8A to generate converted images 51 to 54 corresponding to each unit image, as shown in FIG. 8B. Thereafter, the mosaic imaging UI component may combine them to generate a mosaic image 60 corresponding to the text data'abcd' as shown in FIG. 8C.

Meanwhile, according to an embodiment, a UI component in which the multi-item selection UI component and the mosaic imaging UI component are combined may also exist. For example, information appearing in the text box 21 of the multi-item selection UI component may be displayed as a mosaic image.

Meanwhile, according to an implementation example, the web UI component generating system 100 may include a processor and a memory storing a program executed by the processor. The processor may include a single-core CPU or a multi-core CPU. The memory may include high-speed random access memory and may include nonvolatile memory such as one or more magnetic disk storage devices, flash memory devices, or other nonvolatile solid state memory devices. Access to memory by processors and other components can be controlled by a memory controller. Here, when the program is executed by a processor, the web UI component generating system 100 according to the present embodiment may cause the web UI component generating method described above to be performed.

Meanwhile, the method for generating a web UI component according to an embodiment of the present invention may be implemented in the form of a computer-readable program command and stored in a computer-readable recording medium, and a control program according to an embodiment of the present invention And the target program may also be stored in a computer-readable recording medium. The computer-readable recording medium includes all types of recording devices storing data that can be read by a computer system.

The program instructions recorded on the recording medium may be specially designed and constructed for the present invention, or may be known and usable to those skilled in the software field.

Examples of computer-readable recording media include magnetic media such as hard disks, floppy disks, and magnetic tapes, optical media such as CD-ROMs and DVDs, and floptical disks. Hardware devices specially configured to store and execute program instructions such as magneto-optical media and ROM, RAM, flash memory, etc. are included. In addition, the computer-readable recording medium is distributed over a computer system connected through a network, so that computer-readable codes can be stored and executed in a distributed manner.

Examples of the program instructions include not only machine language codes such as those produced by a compiler, but also a device that processes information electronically using an interpreter, for example, high-level language codes that can be executed by a computer.

The above-described hardware device may be configured to operate as one or more software modules to perform the operation of the present invention, and vice versa.

The above description of the present invention is for illustrative purposes only, and those of ordinary skill in the art to which the present invention pertains can understand that it is possible to easily transform it into other specific forms without changing the technical spirit or essential features of the present invention. will be. Therefore, it should be understood that the embodiments described above are illustrative and non-limiting in all respects. For example, each component described as a single type may be implemented in a distributed manner, and similarly, components described as being distributed may also be implemented in a combined form.

The scope of the present invention is indicated by the claims to be described later rather than the detailed description, and all changes or modified forms derived from the meaning and scope of the claims and their equivalent concepts should be construed as being included in the scope of the present invention. .

Claims (12)

As a web UI component generation system for dynamically generating web UI components according to server settings,
A web document request module for requesting a target web document to a predetermined server-the target web document is parsed into a W3C standard document object model element and a non-standard document object model element;
A web document receiving module for receiving the target web document from the server;
A browser default rendering engine that renders a standard document object model element of the target web document;
A setting information module for receiving setting information on a non-standard document object model element of the target web document from the server; And
Comprising a dynamic web UI component generation module for dynamically rendering a non-standard document object model element of the target web document according to the setting information, and generating a web UI component corresponding to the non-standard document object model element and the setting information,
The setting information is,
A web UI component creation system including information on whether to display each UI element included in a web UI component corresponding to the non-standard document object model element, a form, a layout, an output format, and a display language.
delete The method of claim 1,
The setting information is,
Global setting information commonly applied to all web documents provided by the server,
Document level setting information commonly applied to all non-standard document object model elements included in the target web document, and
A web UI component creation system including element level setting information applied to each non-standard document object model element included in the target web document.
The method of claim 1,
The non-standard document object model element includes a multi-item selection element,
The multi-item selection UI component generated by the dynamic web UI component generation module dynamically rendering the multi-item selection element,
A text box displaying outline information of a plurality of items allocated to the multi-item selection UI component,
A search icon located in the text box,
A multi-item selection window for popping up when the search icon is selected and configured to select at least some of a plurality of selectable items, and allowing the selected plurality of items to be allocated to the multi-item selection UI component, and
A web UI component generation system including a drop-down list displaying a plurality of items selected through the multi-item selection window in a drop-down manner.
The method of claim 1,
The non-standard document object model element includes a mosaic imaging element,
The mosaic imaging UI component generated by the dynamic web UI component generation module dynamically rendering the mosaic imaging element,
A unit image corresponding to each character included in the predetermined text data received from the server is generated, and a unit image corresponding to each character is randomly affine transformed and combined to correspond to the text data. A web UI component generation system that generates a mosaic image to be generated and displays the generated mosaic image.
As a method of creating web UI components to dynamically generate web UI components according to server settings,
Requesting, by a web UI component generation system, a target web document from a predetermined server-the target web document is parsed into a W3C standard document object model element and a non-standard document object model element;
Receiving, by the web UI component generation system, the target web document from the server;
Receiving, by the web UI component generation system, setting information on a non-standard document object model element of the target web document from the server;
Rendering, by the web UI component generation system, a standard document object model element of the target web document; And
The web UI component generating system dynamically renders a non-standard document object model element of the target web document according to the setting information to generate the non-standard document object model element and a web UI component corresponding to the setting information. Include,
The setting information is,
A method of generating a web UI component including information on whether to display each UI element included in a web UI component corresponding to the non-standard document object model element, a form, a layout, an output format, and a display language.
delete The method of claim 6,
The setting information is,
Global setting information commonly applied to all web documents provided by the server,
Document level setting information commonly applied to all non-standard document object model elements included in the target web document, and
A method of creating a web UI component including element level setting information applied to each non-standard document object model element included in the target web document.
The method of claim 6,
The non-standard document object model element includes a multi-item selection element,
The multi-item selection UI component generated by the web UI component generation system dynamically rendering the multi-item selection element,
A text box displaying outline information of a plurality of items allocated to the multi-item selection UI component,
A search icon located in the text box,
A multi-item selection window for popping up when the search icon is selected and configured to select at least some of a plurality of selectable items, and allowing the selected plurality of items to be allocated to the multi-item selection UI component, and
A method of creating a web UI component including a drop-down list displaying a plurality of items selected through the multi-item selection window in a drop-down manner.
The method of claim 6,
The non-standard document object model element includes a mosaic imaging element,
The mosaic imaging UI component generated by the web UI component generation system dynamically rendering the mosaic imaging element,
A unit image corresponding to each character included in the predetermined text data received from the server is generated, and the unit image corresponding to each character is randomly affine-converted and combined to form a mosaic image corresponding to the text data. A method of creating a web UI component that creates and displays the generated mosaic image.
A computer-readable recording medium installed in a data processing device and recording a program for performing the method according to any one of claims 6 and 8 to 10.
As a web UI component creation system,
Processor;
Includes memory that stores programs,
When the program is executed by the processor, the web UI component generating system causes the web UI component generating system to perform the method according to any one of claims 6 and 8 to 10.

Images