KR101866033B1 - Method for Rendering a Grid in a Web Browser and Computing System applying the same - Google Patents

Abstract

A grid rendering method in a web browser and a computing system applying the method are provided. A grid rendering method according to an embodiment of the present invention selects cells to be rendered on a screen through a web browser among cells constituting the grid, and renders cell independent rendering. This enables high-speed grid rendering and enables the use of a grid on a web browser even when handling a large amount of data such as finance, production / inventory management, accounting management, process management, and ERP.

Description

METHOD FOR RENDERING A GRID IN A WEB BROWSER AND METHOD FOR RENDERING A GRID IN A WEB BROWSER AND COMPUTING SYSTEM

The present invention relates to a rendering technique in a web browser, and more particularly, to a method of rendering a large amount of data stored in a database (DB) in a web browser.

The table tag of Hypertext Markup Language (HTML) is one of web standard technologies and is a technology for rendering tabular data in a web browser.

Table tags in HTML are very slow to render on the screen when there is a lot of data to be stored in the table (grid), and even at scrolling up and down the data in the restricted area.

This is because, in the HTML table tag, every time a web browser renders or deletes a small cell on the screen, it re-calculates the location of other rows and columns associated with the cell location.

Therefore, when handling a large amount of data such as finance, production / inventory management, accounting management, process management, and ERP (Enterprise Resource Planning), rendering by HTML table tags is practically impossible.

SUMMARY OF THE INVENTION The present invention has been made to overcome the above problems, and it is an object of the present invention to provide a method for solving low-speed rendering by HTML table tags in a web browser, And a grid rendering method for selectively rendering the grid independently.

According to an aspect of the present invention, there is provided a grid rendering method including: selecting cells to be rendered on a screen through a web browser among cells constituting a grid; And rendering the cells selected in the selection step on the screen in a cell-independent manner.

The grid rendering method according to an embodiment of the present invention may further include calculating cells to which the selected cells are to be rendered, in a cell-independent manner, and the rendering step may include: , And render the selected cells.

Further, the grid rendering method according to an embodiment of the present invention may further include calculating a size of an area where a part of the grid is to be rendered on the web browser, and the selecting step may include: , The cells can be selected.

The calculating step may calculate positions where the selected cells are rendered so that the left side of the cells located at the leftmost of the selected cells is located at the left side of the area.

According to another aspect of the present invention, there is provided a grid rendering method including: determining a size and a position of a scroll bar based on a size of the grid and a size of cells rendered in the rendering step; And generating and displaying the scroll bar according to the size and position determined in the determining step.

The grid rendering method according to an embodiment of the present invention may further include intermittently changing cells constituting the grid according to an operation of the scroll bar.

In addition, the changing step may cause a part of the cells constituting the grid to disappear in units of rows or columns.

The changing step may be performed at a period longer than the time required for the selecting step and the rendering step.

According to another aspect of the present invention, there is provided a computer-readable recording medium including: a step of selecting cells to be rendered on a screen through a web browser among cells constituting a grid; And rendering the cells selected in the selecting step on the screen in a cell independent manner.

Meanwhile, according to another embodiment of the present invention, a computing system includes: a display; And a processor for selecting cells to be rendered on the display through a web browser among the cells constituting the grid and for rendering the selected cells on the display in a cell independent manner.

As described above, according to the embodiments of the present invention, cells to be rendered on the screen are selected and rendered independently through a web browser, thereby enabling high-speed grid rendering.

Thus, according to the embodiments of the present invention, it becomes possible to use a grid on a web browser even when handling a large amount of data such as finance, production / inventory management, accounting management, process management, ERP,

In addition, the embodiments of the present invention have advantages in that various grids can be used through a web service in a mobile environment as well as a desktop PC since the existing standard web technology is used.

BRIEF DESCRIPTION OF THE DRAWINGS FIG. 1 is a block diagram illustrating a method of rendering a grid according to an embodiment of the present invention;
FIGS. 2 to 4 are views for explaining a process of intermittently changing grid cells according to the operation of a scroll bar,
5 is a diagram illustrating a computing system according to another embodiment of the present invention.

Hereinafter, the present invention will be described in detail with reference to the drawings.

1. Independent cell-based grid rendering

BRIEF DESCRIPTION OF THE DRAWINGS Fig. 1 is a diagram provided in the description of a grid rendering method according to an embodiment of the present invention. The grid rendering method according to an embodiment of the present invention provides a technique for rendering a grid containing a large amount of data to a web browser at high speed.

To this end, in the grid rendering method according to the embodiment of the present invention, the grid rendering is performed by a separate web client library named 'grid renderer' rather than a web browser. Here, a grid refers to a grid or grid scale, and refers to a tool that divides a plane vertically and horizontally to maintain visual order and consistency as a means of layout. The term grid is used for descriptive convenience And the present invention can be applied to any tool that provides such a function.

Specifically, as shown in FIG. 1, first, the grid renderer calculates the size of the grid area on the web browser (S110).

In the embodiment of the present invention, since an environment in which a large amount of data is stored in the grid is assumed, only a part of the grid is rendered in the grid area. In other words, it is a general situation that in the grid area, only a part of the user's entire grid can be seen.

On the other hand, the grid area may be all of the content display area except for the menu / tab display area in the web browser, or may be a part of the content display area. It depends on the configuration / layout of the web page.

Next, the grid renderer selects cells to be rendered in the grid area of the cells constituting the grid (S120).

Since the grid is first rendered, the cells selected in step S120 are the cells located on the left and top of the grid, and cell selection is performed according to the size of the grid area calculated in step S110 and the size of the cells constituting the grid .

When the selection is completed, the grid renderer calculates positions where the selected cells are rendered in step S120 (S130).

In step S130, cell position calculation is performed cell-independent. Here, the cell position calculation is performed in a cell independent manner. In calculating the position where a particular cell is to be rendered, only the position of the specific cell is calculated in consideration of the size of the selected cells in the grid, .

In addition, for the cells to be rendered in the leftmost cell among the cells selected in step S120, the cell positions are determined such that the left sides of the cells are positioned at the left side of the grid area.

Next, the grid renderer renders the cells selected in step S120 to the cell positions calculated in step S130 (S140).

As the cell position calculation is cell independent in step S130, the cell rendering in step S140 is also performed cell independent. Here, the fact that the cell rendering is performed cell-independent means that the calculated cells are rendered on a cell-by-cell basis, not on a row-by-cell basis. That is, in step S140, the cells are independently rendered without being dependent on the row to which they belong.

Then, the grid renderer generates and displays a scroll bar for the grid (S150). The size and position of the scroll bar are calculated based on the horizontal / vertical size of the grid and the horizontal / vertical size of the rendered cells.

The cell layout of the table (grid) by HTML table tags is hierarchical as follows.

table -> tablebody -> tablerow -> tabledata (cell)

This hierarchical structure affects the table cell rendering by the web browser and requires the first row to calculate the rendered area for rendering the second row. The rendering position of the second row is one row below the area where the first row is rendered.

Furthermore, in order to render the second cell of the first row, the first cell necessarily requires to calculate the rendered area. The rendering position of the second cell is one line to the right of the area where the first cell is rendered.

This is called reflow, and it is necessary to render all the cells by the cascading effect. Thus, the location of all the cells is known, which causes the table rendering speed of HTML table tags to be lowered.

Accordingly, in the embodiment of the present invention, the position calculation and the rendering are performed in a cell-independent manner by moving away from the hierarchical structure of the cell arrangement of the grid assumed in the HTML table tag and arranging all the cells at the same depth.

In addition, the cell-independent position calculation and rendering presented in the embodiments of the present invention do not require rendering completion of other cells for cell position calculation and rendering.

In addition, unlike the HTML table tags, which require location calculation for all cells including cells that are not rendered on the screen, the cell independent location calculation and rendering presented in the embodiment of the present invention is only for cells to be rendered on the screen Calculation is performed.

2. Scroll cells on the grid

In the grid rendering method according to the embodiment of the present invention, when only a part of the grid is displayed, a scroll bar is generated / displayed together with the scroll bar.

Cells to be rendered in the grid area are changed by cell scrolling. In the grid rendering method according to the embodiment of the present invention, cells are intermittently changed according to the operation of the scroll bar.

As a matter of fact, the grid change by the operation of the scroll bar is performed on a row / column basis, not on a pixel-by-pixel basis. That is, even if the scroll bar is manipulated, the existing rendering state is maintained if the manipulated variable is not such that the entire row / column disappears. On the other hand, when the amount of manipulation is such that the entire row / column disappears, only the row / column disappears.

For example, if there is a scroll bar operation such that the "name" column does not disappear from the grid rendering state as shown in FIG. 2, the grid rendering state is maintained. However, if there is a scroll bar operation such that the "name" column disappears as shown in Fig. 4, the "name"

This is a method for minimizing the time required for location calculation and rendering of cells. It differs from HTML table tags in that the rendering is performed in units of lines (horizontal or vertical one pixel) by manipulation of the scroll bar.

Meanwhile, in the embodiment of the present invention, the rendering function call period for refreshing (changing) the cells constituting the grid while the scroll bar is operated is operated at a specific time. This call period is determined by the performance of the web browser. It is determined as long as the re-calling of the rendering function for the next rendering operation does not occur before the end of the existing rendering operation (calculation of the position of cells and rendering).

This is to prevent the occurrence of a rendering delay or a screen stop in which rendering is performed even after the scroll bar operation is completed by the rendering queue.

3. Layer options

The grid provided by the grid rendering method according to the embodiment of the present invention manages the option storage applied to the generation rule in a hierarchical structure. This is to make it easy to change options for many grids that are required for a large scale project. The amount of coding is reduced by reuse that can be easily accomplished with common options. The option storage structure is as follows.

a) defaultOption: default value of option

b) Common options that can be set

b1) commonOption: common options for each project

b2) commonOptionPreset: key-valueObject, which is a list of options that are not actually applied but which can be retrieved by a specific key.

c) Grid individual options: individual settings with detailed code for the actual implementation

The grid options are merged through the following steps and used for grid generation.

1) duplicate the defaultOption object (or data) to create a new object (or data)

2) Overwrite commonOption in the new defaultOption we created

3) Overwrite the commonOption in the defaultOption, overwrite the object to be overwritten additionally from the commonOptionPreset specified by option.extend

4) Override grid individual options in "3)"

Here, option.extend is an attribute indicating an option that can be reused. Depending on the type of option being reused, it is stored in commonOptionPreset, and option.extend is used to indicate the saved reusable option.

4. Grid loading status representation

In the grid rendering method according to the embodiment of the present invention, when a long time is required for loading the grid, a progressive user interface (UI) for guiding the user to the user is displayed first, and then a grid rendering operation is performed, To visually indicate that the grid rendering operation is in progress.

5. Trial Version Constraint Encryption Mechanism

For the trial version, obfuscation of the basic form is performed so that the constraint is not directly exposed. Specifically, encoding-decoding of the following format is performed so that information on the constraint domain or constraint period is not directly retrieved from the source code exposed from the outside.

5.1 encoding

At the time of encoding, multiply each character code of the requested string by 2, convert it to hexadecimal number, and randomly select a string that does not correspond to hexadecimal number between each number.

5.2 Decoding

The digits are decomposed based on non-hexadecimal digits, and the digits of each hexadecimal digits are divided by 2 to extract the individual character codes and reassemble the strings.

On the other hand, when the constraint is applied, the event handler of the grid is checked by binding or checking the query when the grid instance is generated.

Also, when reading it for domain restrictions, it reads the corresponding property in a different path. And, for the date constraint, when reading it, it extracts the value corresponding to the constraint reference date which is replaced with the obfuscation string in another path.

6. Applicable Systems

5 is a diagram illustrating a computing system according to another embodiment of the present invention. The illustrated computing system is a system for performing the grid rendering method shown in Fig.

5, a computing system according to an embodiment of the present invention includes a communication unit 210, a display unit 220, a processor 230, an input unit 260, and a storage unit 270, 230 run the web browser 240 and the grid renderer 250.

The communication unit 210 is a means for performing data communication by connecting to an external device or an external network, and the display unit 220 is a display on which the processing result of the processor 230 is displayed.

The input unit 260 is an input means for transmitting a user input to the processor 230 and the storage unit 270 is a storage medium in which data processed / processed by the processor 230 is temporarily / permanently stored.

When the computing system is implemented as a mobile system (tablet PC, smart phone, etc.), the display unit 220 and the input unit 260 may be integrated into one, such as a touch screen. Furthermore, it is possible to implement such a non-mobile system (such as a desktop PC).

The web browser 240 is a web client connected to the web server through the communication unit 210 to provide a service, and generates a web page provided by the web server and displays the generated web page on the display unit 220.

The grid renderer 250 is a web client library that performs the grid rendering method shown in FIG. 1 described above to render a grid at high speed on a web page generated by the web browser 240. [

It goes without saying that the technical idea of the present invention can also be applied to a computer-readable recording medium having a computer program for performing the functions of the apparatus and method according to the present embodiment. In addition, the technical idea according to various embodiments of the present invention may be embodied in computer-readable code form recorded on a computer-readable recording medium. The computer-readable recording medium is any data storage device that can be read by a computer and can store data. For example, the computer-readable recording medium may be a ROM, a RAM, a CD-ROM, a magnetic tape, a floppy disk, an optical disk, a hard disk drive, or the like. In addition, the computer readable code or program stored in the computer readable recording medium may be transmitted through a network connected between the computers.

While the present invention has been particularly shown and described with reference to exemplary embodiments thereof, it is to be understood that the invention is not limited to the disclosed exemplary embodiments, but, on the contrary, It will be understood by those skilled in the art that various changes in form and detail may be made therein without departing from the spirit and scope of the present invention.

210: communication unit 220:
230: Processor 240: Web browser
250: Grid Renderer 260: Input
270:

Claims (10)

Selecting cells to be rendered on a screen through a web browser among cells constituting a grid;
Calculating positions where the selected cells are to be rendered, taking into consideration sizes of the selected cells; And
And rendering cells selected in the selection step cell-independent on the screen by using the positions calculated in the calculating step.
delete The method according to claim 1,
Calculating a size of an area in which the part of the grid is to be rendered on the web browser,
In the selecting step,
Wherein the cells are selected based on the size calculated in the calculating step.
The method of claim 3,
Wherein,
Wherein the positions of the selected cells are calculated so that the left side of the cells located at the leftmost of the selected cells is located at a left side of the area.
The method according to claim 1,
Determining a size and position of the scroll bar based on the size of the grid and the size of the cells rendered in the rendering step; And
And generating and displaying the scroll bar according to the size and position determined in the determining step.
The method of claim 5,
And intermittently changing cells constituting the grid according to an operation of the scroll bar.
The method of claim 6,
In the changing step,
Wherein a part of the cells constituting the grid disappear in units of rows or columns.
The method of claim 6,
In the changing step,
Wherein the rendering step is performed at a period longer than a time required for the selecting step and the rendering step.
Selecting cells to be rendered on a screen through a web browser among cells constituting a grid;
Calculating positions where the selected cells are to be rendered, taking into consideration sizes of the selected cells; And
And rendering the selected cells on the screen in a cell-independent manner using the positions calculated in the calculating step. The computer-readable recording medium according to claim 1, Readable recording medium.
display; And
Among the cells constituting the grid, cells to be rendered on the display are selected through a web browser, positions of the selected cells are calculated in consideration of sizes of the selected cells, And rendering the cells in a cell-independent manner on the display.

Images