KR101438198B1 - Method of providing user interface of multi-screen and apparatus performing the same - Google Patents

Abstract

A multi-screen user interface engine operates a multi-screen user interface engine implementation method. The multi-screen user interface engine includes: a data module loading a web document which is created without considering the resolution of a web document viewer; a style processing module which loads a static style according to a specific resolution included in the web document to primarily render the web document based on the static style loaded in advance; and a script processing module which loads the scripts included in the web document and secondarily renders the web document based on the loaded script.

Description

[0001] METHOD OF PROVIDING USER INTERFACE OF MULTI-SCREEN AND APPARATUS PERFORMING THE SAME [0002]

BACKGROUND OF THE INVENTION 1. Field of the Invention The present invention relates to a multi-screen user interface, and more particularly, to a multi-screen user interface capable of providing a screen optimized for devices of various sizes and types using a single development source And a multi-screen user interface engine for performing the same.

With the rapid growth of the smart device market, terminals with various sizes and resolutions such as PC (personal computer), smartphone (SmartPhone), tablet PC or smart TV are emerging. With the advent of these new devices, a system environment that meets the resolution of the device must be newly developed to implement the complex business system used in the PC environment. The following prior arts provide a variety of related techniques.

Korean Patent Laid-Open No. 10-2008-0060690 relates to a technique for parsing CSS data by attribute, converting parsed CSS data into an object document that can be processed by a script to change the style of a web document, Ethan Marcotte's book is a technique that provides a screen that responds to user environments by a fluid grid, a flexible image, and a media query.

However, the prior art fails to provide a method of controlling screens of various devices having different resolutions using a single source.

More specifically, since the prior arts have to generate a suitable source for a corresponding device according to the appearance of a new device, the development cost increases and a user interface component having a large amount of data used in a PC environment is used in a mobile environment There is a problem that can not be expressed. In addition, since the above-described prior arts develop a user interface suitable for a mobile environment due to a development method (e.g., HTML5 or CSS3) specific to a mobile environment, the prior art needs to convert the user interface to a PC environment, It can not be used where you want to change your business system to a mobile environment.

In other words, there is a need for a technology capable of developing a large amount of data and a complicated layout structure required in an enterprise environment as a single source.

Korean Patent Publication No. 10-2008-0060690 (Non-Patent Document 1) Ethan marcotte's book - Responsive Web Design

The present invention provides a multi-screen user interface providing method capable of providing a single user interface source to a user terminal and providing a screen optimized for a plurality of devices having various resolutions, and a multi- - provide a user interface providing device for the screen.

The present invention provides a multi-screen user interface providing method and a multi-screen user interface providing apparatus that can reduce the development burden of a new system by adding only a style sheet or a script to the device even when a new device appears I want to.

The present invention provides a multi-screen user interface providing method capable of implementing a web document having a large amount of data in a mobile environment by providing a style sheet and a script according to resolution to a user terminal, and a multi-screen user interface Device.

Among the embodiments, the multi-screen user interface engine performs a multi-screen user interface implementation method. The multi-screen user interface engine may include a data module for loading the produced web document regardless of the resolution of the web document viewer. A style processing module that loads a static style according to a specific resolution included in the web document and primarily renders the web document based on the loaded static style; And a script processing module for loading a script included in the web document and secondarily rendering the web document based on the loaded script.

In one embodiment, the style processing module may load a common style commonly applied to all resolutions to render at least one of color, shape, and layout for a plurality of devices.

In one embodiment, the style processing module branches the static style according to the actual resolution of the web document viewer, and configures the user interface for each device previously defined based on the branched static style.

In one embodiment, the script processing module may load common scripts that are common to all resolutions and process common events for a plurality of devices.

In one embodiment, the script processing module branches the common script according to the actual resolution of the web document viewer, loads a predefined device-specific script, and performs an operation on a predefined device based on the device-specific script Can be processed.

In one embodiment, the script processing module may modify at least one of a path of a menu, a tab, and an image file for the web document through the common script.

In one embodiment, the script processing module may generate a dynamic style based on the static style via the common script.

In one embodiment, the script processing module may detect the resolution of the web document viewer and generate the dynamic style if the detected resolution is different from the specific resolution.

In one embodiment, the script processing module may generate the dynamic style if a predefined class name exists in the web document.

In one embodiment, the script processing module may generate the dynamic style through a screen linkage algorithm associated with translation of a user interface pattern between a plurality of devices.

In one embodiment, the screen linkage algorithm may define a transformation of a user interface pattern associated with at least one of a layout and a user interface component.

In one embodiment, if a predefined class name associated with a table exists in the web document, a dynamic style associated with the user interface of the table is generated, and the web document is classified into 3 classes based on the generated dynamic style. And may further include a table processing module that renders the data.

Of the embodiments, a method for implementing a multi-screen user interface is performed in a multi-screen user interface engine. The method for implementing a multi-screen user interface includes loading a created web document regardless of a resolution of the web document viewer; Loading a static style according to a specific resolution included in the web document and rendering the web document primarily based on the loaded static style; And loading the script included in the web document and rendering the web document secondarily based on the loaded script.

In one embodiment, the step of primarily rendering the web document further includes the step of rendering at least one of color, shape and layout for a plurality of devices by loading a common style commonly applied to all resolutions can do.

In one embodiment, the step of primarily rendering the web document may include branching the static style according to the actual resolution of the web document viewer and displaying the user interface for each device previously defined on the basis of the branched static style The method comprising the steps of:

In one embodiment, the rendering of the web document may further include loading common scripts that are common to all resolutions and processing common events for a plurality of devices.

In one embodiment, the step of rendering the web document secondarily includes loading the defined device-specific script by branching the common script according to the actual resolution of the web document viewer, And processing the operation for the < RTI ID = 0.0 > device < / RTI >

In one embodiment, the rendering of the web document may further include modifying at least one of the path of the menu, tab and image file for the web document via the common script.

In one embodiment, the rendering of the web document may further include generating a dynamic style based on the static style via the common script.

In one embodiment, the step of generating the dynamic style may further include detecting a resolution of the web document viewer and generating the dynamic style if the detected resolution is different from the specific resolution.

In one embodiment, the step of generating the dynamic style may further include the step of generating the dynamic style if a predefined class name exists in the web document.

In one embodiment, the step of generating the dynamic style may further comprise generating the dynamic style through a screen linkage algorithm associated with a transformation of a user interface pattern between the plurality of devices.

In one embodiment, the screen linkage algorithm may define a transformation of a user interface pattern associated with at least one of a layout and a user interface component.

In one embodiment, if a predefined class name associated with a table exists in the web document, a dynamic style associated with the user interface of the table is generated, and the web document is classified into 3 classes based on the generated dynamic style. And may further comprise a step of secondary rendering.

Among the embodiments, a recording medium on which a computer program related to a method for implementing a multi-screen user interface performed in a multi-screen user interface engine includes loading a produced web document regardless of resolution of the web document viewer; Loading a static style according to a specific resolution included in the web document and rendering the web document primarily based on the loaded static style; And loading the script included in the web document and rendering the web document secondarily based on the loaded script. A computer program for a method for implementing a multi-screen user interface is recorded.

The method for providing a multi-screen user interface according to an exemplary embodiment of the present invention and related arts provide a single user interface source to a user terminal so that a screen optimized for a plurality of devices having various resolutions Can be provided.

The method for providing a multi-screen user interface according to an embodiment of the present invention and the related arts can reduce the development burden of a new system by adding only a style sheet or a script suitable for the device even when a new device appears.

According to an embodiment of the present invention, a multi-screen user interface providing method and related technologies can provide a style sheet and a script according to resolution to a user terminal, thereby realizing a web document having a large amount of data in a mobile environment.

1 is a view for explaining a multi-screen user interface implementation system according to an embodiment of the present invention.
2 is a block diagram illustrating the multi-screen user interface engine of FIG.
FIG. 3 is a flowchart illustrating a multi-screen user interface implementation process performed by the multi-screen user interface engine.
4 is a flowchart illustrating a multi-screen user interface implementation process performed by the multi-screen user interface engine according to an exemplary embodiment of the present invention.
5 is a diagram illustrating a device-specific screen for rendering a web document based on a static style in the process of implementing a multi-screen user interface according to the present embodiment.
FIG. 6 is a diagram illustrating a device-specific screen in which a web document is rendered based on a script in the process of implementing a multi-screen user interface according to the present embodiment.

The description of the present invention is merely an example for structural or functional explanation, and the scope of the present invention should not be construed as being limited by the embodiments described in the text. That is, the embodiments are to be construed as being variously embodied and having various forms, so that the scope of the present invention should be understood to include equivalents capable of realizing technical ideas. Also, the purpose or effect of the present invention should not be construed as limiting the scope of the present invention, since it does not mean that a specific embodiment should include all or only such effect.

Meanwhile, the meaning of the terms described in the present application should be understood as follows.

The terms "first "," second ", and the like are intended to distinguish one element from another, and the scope of the right should not be limited by these terms. For example, the first component may be referred to as a second component, and similarly, the second component may also be referred to as a first component.

It is to be understood that when an element is referred to as being "connected" to another element, it may be directly connected to the other element, but there may be other elements in between. On the other hand, when an element is referred to as being "directly connected" to another element, it should be understood that there are no other elements in between. On the other hand, other expressions that describe the relationship between components, such as "between" and "between" or "neighboring to" and "directly adjacent to" should be interpreted as well.

It should be understood that the singular " include "or" have "are to be construed as including a stated feature, number, step, operation, component, It is to be understood that the combination is intended to specify that it does not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, or combinations thereof.

In each step, the identification code (e.g., a, b, c, etc.) is used for convenience of explanation, the identification code does not describe the order of each step, Unless otherwise stated, it may occur differently from the stated order. That is, each step may occur in the same order as described, may be performed substantially concurrently, or may be performed in reverse order.

The present invention can be embodied as computer-readable code on a computer-readable recording medium, and the computer-readable recording medium includes all kinds of recording devices for storing data that can be read by a computer system . Examples of the computer-readable recording medium include a ROM, a RAM, a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, and the like, and also implemented in the form of a carrier wave (for example, transmission over the Internet) . In addition, the computer-readable recording medium may be distributed over network-connected computer systems so that computer readable codes can be stored and executed in a distributed manner.

All terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this invention belongs, unless otherwise defined. Commonly used predefined terms should be interpreted to be consistent with the meanings in the context of the related art and can not be interpreted as having ideal or overly formal meaning unless explicitly defined in the present application.

1 is a view for explaining a multi-screen user interface implementation system according to an embodiment of the present invention.

1, a multi-screen user interface implementation system 100 includes a plurality of devices 110, a web document 120 provided to a plurality of devices 110, and a multi-screen user interface engine 130).

The plurality of devices 110 are each a computing device including a display device such as a personal computer 111, a tablet PC 112 and a smart phone 112 . Here, each of the plurality of devices 110 may include a display device having a different resolution, or may be connected to a web document 120 (e.g., a web browser) via a web document viewer (e.g., Internet Explorer, Google Chrome, Safari, etc.) ). ≪ / RTI >

The web document 120 is provided to a plurality of devices 110 by a multi-screen user interface engine 130 and may in one embodiment be a HyperText Markup Language (HTML), an Extensible Markup Language (XML) Java Server Page). Here, the web document 120 generated according to the multi-screen user interface implementation process according to the present invention may be one source for a plurality of devices. That is, the present invention provides a large amount of data and a complicated layout structure required in an enterprise environment as one source, thereby controlling device screens of various sizes and types, and is capable of controlling a complicated business system optimized for a PC It is possible to provide a system development method that can be utilized in the process of changing to the system.

The multi-screen user interface engine 130 corresponds to a computing device (e.g., a multi-screen user interface implementation device) capable of implementing a multi-screen user interface that can be provided to a plurality of devices 110 . Here, the multi-screen user interface engine 130 may be embedded in a specific computing device (e.g., a PC, a tablet PC, a smart phone, etc.) or provided in the form of software. The user interface engine 130 for a multi-screen according to the present invention uses a user interface (hereinafter referred to as UI) having a large amount of data and a complicated layout structure in a plurality of devices (110) can be automatically implemented. Hereinafter, the multi-screen user interface engine 130 will be described in detail with reference to FIG.

2 is a block diagram illustrating the multi-screen user interface engine of FIG.

2, the multi-screen user interface engine 130 includes a data module 210, a style processing module 220, a script processing module 230, a table processing module 240, and a controller 250 do.

The data module 210 loads the web document 120. Here, the web document 120 can be produced irrespective of the resolution of the web document viewer.

In one embodiment, the resolution can correspond to the horizontal and vertical size (e.g., pixels) of the screen on which a web document can be displayed on the web document viewer. On the other hand, in the case of a smartphone or a tablet PC, the resolution of the web document viewer 115 may be the same as that of the smartphone or the tablet PC. This is because the screen size of the web document viewer is not adjusted, This is because the size of the tablet PC is substantially the same.

That is, the user can create one web document (One Source) that can be provided to the plurality of devices 110 in the process of implementing the multi-screen user interface according to the present invention.

In one embodiment, the web document 120 may be implemented as HyperText Markup Language (HTML), Extensible Markup Language (XML), or Java Server Pages (JSP).

In one embodiment, the web document 120 may be associated with a style sheet (e.g., a CSS: Cascading Style Sheet) and a script (e.g., JavaScript) for style definition. That is, the web document 120 may include a style sheet and a script through an embedded method or a link method.

In one embodiment, the web document 120 may include a static style according to a particular resolution. Here, a static style means that a style according to a specific resolution is defined. For example, a static style may be implemented as a style sheet (particularly, a CSS: Cascading Style Sheet), and a web document 120 may include a static style as an embedding style or a link style style.

In one embodiment, the static style may include a style for at least one of a menu, a layout, and a table.

In one embodiment, the web document 120 may further include a common style commonly used for all resolutions, and the common style may include at least one of the common styles and layouts of the web page, regardless of the actual resolution of the web document viewer. You can define one. Here, the common style may be implemented as a style sheet (e.g., CSS) and may include at least one of margin, padding, background, text, color, Can be defined.

The style processing module 220 loads a static style according to a specific resolution included in the web document 120 and primarily renders a web document based on the loaded static style.

In one embodiment, the style processing module 220 loads a common style (e.g., Common CSS) contained in the web document 120 to render at least one of the color, shape, and layout for the plurality of devices 110 can do.

In one embodiment, the style processing module 220 branches the static style loaded according to the actual resolution of the web document viewer and constructs a user interface for each predefined device based on the branched static style, Rendering can be performed. In one embodiment, the style processing module 220 may include a screen identification module capable of detecting the resolution of the web document viewer through a media query.

For example, the style processing module 220 may load a common CSS to render colors, shapes, and layouts that are commonly applied to all device screens. In the case where 700px or less is defined as a phone based on 700px or 1280px, a tablet is defined as a tablet with less than 1280px and 1280px or more is defined as a PC, the style processing module 220 branches the CSS according to the actual resolution, The UI layout can be changed optimally.

For example, referring to FIG. 5, the style processing module 220 may use a media query statement to render one HTML from three devices (smartphone, tablet PC, and Desktop) to different types of screens have. That is, the style processing module 220 can change the UI layout for each device and change the color of the UI elements optimized for each device through the static CSS branched through the common CSS and media query statements.

In one embodiment, the style processing module 220 may manage a UI pattern associated with at least one of a static style and a common style in the repository. That is, the style processing module 220 can manage a UI pattern that can be applied to each of commonly used devices (e.g., a PC, a tablet PC, and a smart phone). For example, in the case of a smart phone, it may be configured as a linear screen configuration UI centering on a device size, a list of multi-item data, a pop-up menu area, and a single-level menu. As another example, in the case of a tablet PC, the UI of a composite screen configuration may be composed of a hidden menu area configuration, a table-type multi-item data listing, and a two-level menu. As another example, in the case of a PC, the UI of the content-oriented screen configuration may be composed of an upper and left fixed menu areas, a plurality of data lists in a table form, and a three-level menu. Here, the user can select a screen to be created from the stored UI pattern.

The script processing module 230 loads a script included in the web document 120 and secondarily renders the web document 120 based on the loaded script. Here, the script refers to a programming language that can be executed in the web document viewer, and may include, for example, JavaScript (JavaScript).

In one embodiment, the script processing module 230 may load common scripts (e.g., Common CSS) that are common to a plurality of devices 110 to handle common events for a plurality of devices 110 have.

In one embodiment, the script processing module 230 may change at least one of the path of the menu, tab, and image file to the web document 120 via a common script. That is, the script processing module 230 may load the common script and change at least one of the role of the menu and tab represented on the HTML markup and the path of the image to be suitable for the device.

In one embodiment, the script processing module 230 branches the common script according to the actual resolution of the web document viewer, and branches the script according to predefined devices. Here, when the predefined device-specific script is loaded, the script processing module 230 can process the operation on the predefined device based on the device-specific script.

For example, the script processing module 230 detects an actual resolution through a media query statement, and when the PC corresponds to the PC, the PC.js suitable for the PC screen is loaded and can process an operation optimized for the PC. Here, the device-specific script can be created by the user or selected in the UI pattern pre-stored in the repository.

That is, after the first rendering process, the script processing module 230 changes the roles of the menus and tabs displayed on the markup of the web document through the script, processes the common event, processes the device- And can optimize the operation of the device.

In one embodiment, the script processing module 230 may generate a dynamic style based on a static style via a common script.

In one embodiment, the script processing module 230 may detect the resolution of the web document viewer and generate a dynamic style if the detected resolution is different from a particular resolution. Hereinafter, an example of a script for a process of generating a dynamic style will be described, and these examples are not intended to limit the scope of the present invention.

[Script Example]

* $ (document) .ready (function () {

        $ (window) .bind ("resize", resizeWindow);

        function resizeWindow (e) {

            var newWindowWidth = $ (window) .width ();

            if (newWindowWidth <760) {

            } else {

            }

        }

        var cssStr = "@media only screen and (max-width: 599px) {";

        $ ("table.rsp"). each (function (index) {

        var id = $ (this) .get (0) .id;

id = (id)? "#" + id: "";

        var tr = $ (this) .find ("thead tr");

        var colIdx = 1;

var colIdx2 = 0;

* tr.eq (0) .find ("th"). each (function (index) {

        var colSpan = this.colSpan;

        var colName = this.innerHTML;

        if (colSpan> 1) {

        (var i = 0; i <colSpan; i ++) {

        colName = tr.eq (1) .find ("th"). eq (colIdx2) .text ();

        cssStr + = "table" + id + ". rsp td: nth-of-type (" + (colIdx) + "): before {content: '" + colName + "';

        colIdx ++;

        colIdx2 ++;

        }

        } else {

        cssStr + = "table" + id + ". rsp td: nth-of-type (" + (colIdx) + "): before {content: '" + colName + "';

        colIdx ++;

        }

});

        });

$ ("style"). get (0) .innerHTML = cssStr + "}";

        $ ("table.rsp-fold"). each (function (index) {

        $ ("tbody td.rsp-head", this) .bind ("click", function () {

        var parent = $ (this) .parent ();

        if (parent.hasClass ("rsp-open")) {

        parent.removeClass ("rsp-open")

        } else {

        parent.addClass ("rsp-open");

        }

        });

        });

        $ ("table.rsp-fold-btn"). each (function (index) {

        $ ("tbody tr", this) .bind ("click", function () {

        if ($ (this) .hasClass ("rsp-open")) {

        $ (this) .removeClass ("rsp-open")

        } else {

        $ (this) .addClass ("rsp-open");

        }

        });

        $ ("tbody td.rsp-btn span", this) .bind ("click", function (event) {

        event.stopPropagation ();

        });

        });

});

The above script is a process for generating a dynamic style by referring to a static style. In particular, the script dynamically forms a media query statement suitable for a different resolution (for example, the actual resolution of the web document viewer) The coding process was coded. Here, the variable "cssStr " may correspond to a string storing a media query statement referring to a static style (e.g., a label portion), and when the" cssStr " . For example, the additional part of a web document is $ ("style"). Get (0) .innerHTML = cssStr + "}"; Lt; / RTI &gt;

For example, if the web document 120 includes a static style with a horizontal resolution of 1024 pixels and a static style defines a table with a layout of three rows and five columns, A dynamic style sheet that can change at least one of the rows, columns, or margins of the table according to the resolution change of the table. That is, the dynamic style can be defined to be changed to a table having a layout of 5 rows and 3 columns when the resolution of the Web document viewer is changed to 760 pixels or less.

In one embodiment, the script processing module 230 may detect the resolution of the web document viewer and generate a dynamic style if the detected resolution is different from the particular resolution. For example, if the web document includes a static style with a horizontal resolution of 1024 pixels, the style processing module 220 may render primarily suitable for 1024 pixels based on a static style. Here, when the device corresponds to a smartphone and the script detects a resolution other than 1024 pixels defined in the static style, the script processing module 230 sets a dynamic style that allows the script to change the static style Can be generated.

In another embodiment, the script processing module 230 may generate a dynamic style independent of the resolution of the web document viewer 115. For example, if the resolution of the Web document viewer can be changed, such as changing the size of the Internet Explorer window on a PC, the script can create a dynamic style unconditionally.

In yet another embodiment, the script processing module 230 may generate a dynamic style if a predefined class name exists in the web document. For example, if a web document contains a specific class name (eg LblockTableList, LblockTab, LblockSearch), the script can generate a dynamic style to apply the optimized UI type for each device. That is, when the user wishes to create a screen with a menu, text, search and table, the script processing module 230 describes the class name corresponding to each of the predefined LblockTopMenu, LblockContent, LblockSearch and LblockTable, You can dynamically generate CSS.

More specifically, the present invention provides an automatic conversion function for automatically creating a dynamic style when a class name exists in a web document in order to solve the problem of CSS that must be manually created. The automatic conversion function explains the tab or inquiry result area as an example.

For example, in FIG. 6A, if the class name corresponding to the LblockTab is defined in the HTML, the script processing module 230 generates a dynamic CSS associated with the tab optimized for each device through the script, Lt; / RTI &gt;

6B, if the class name corresponding to LblockSearch is predefined in the HTML, the script processing module 230 generates a dynamic CSS associated with the inquiry result area optimized for each device through a script, The appropriate query result area can be rendered.

In one embodiment, the script processing module 230 may generate a dynamic style through a screen linkage algorithm associated with the translation of a user interface pattern between the plurality of devices 110. Here, the screen linkage algorithm may define a transformation of a user interface pattern associated with at least one of a layout and a user interface component.

More specifically, the screen linkage algorithm can define rules when UI-specific UI patterns are converted into different devices. For example, each of the plurality of devices 110 has a unique characteristic, and an inner UI area may also have unique characteristics. Here, the screen UI pattern may include a layout and a UI component. For example, the layout may mean the entire screen configuration (e.g., menu, logo, top area, etc.), and the UI component may be a UI area unit (e.g., Table, multi-table).

Here, the screen linkage algorithm can define a rule when the UI pattern of a specific device is converted into a UI pattern of another device. For example, in the case of a two-dimensional table, a screen-linking algorithm is generated as a UI of a two-dimensional table on the screen of a PC and a tablet PC, but a rule that can be generated by a list UI can be defined in a smartphone.

In one embodiment, the script processing module 230 may include a screen interaction algorithm (e.g., device-specific translation rules such as top region) for changing the layout and a screen interaction algorithm (e.g., A device-specific conversion rule for a UI component such as a list area).

In one embodiment, the script processing module 230 may add a dynamic style to a static style through a script once the dynamic style is created. More specifically, the script processing module 230 may perform a dynamic style insert operation on a style object associated with a static style. For example, if a script generates a dynamic style sheet that can change the style object for at least one of the rows, columns, and margins of a table defined in a static style, the script adds a dynamic style to the static style can do.

In one embodiment, the script processing module 230 may render the web document 120 primarily based on static and dynamic styles. For example, if the web document 120 includes a static style with a horizontal resolution of 1024 pixels and a static style defines a table with a 3-row and 5-column layout, the script processing module 230 ) Can create a dynamic style that is defined to be changed to a table with a layout of 5 rows and 3 columns when the resolution of the web document viewer is changed to 760 pixels or less and add it to a static style. Here, if the resolution is changed to 760 pixels or less, the script processing module 230 may display the table of 5 rows and 3 columns on the screen to render the images in a secondary order.

The table processing module 240 generates a dynamic style associated with the UI of the table if the predefined class name associated with the table exists in the web document 120 and generates the web document 120 based on the generated dynamic style Can be rendered secondary. More specifically, a table UI in a PC environment that can be expressed in an enterprise environment can be changed into various forms such as a list UI, a tab UI, a detailed UI, and a folding UI when being expressed in various devices. Here, since such a conversion has a certain pattern according to the business purpose, the user merely inserts the predetermined class name in the HTML, and the table UI of the PC screen is dynamically inserted into the UI form of the indicator shape or the folding The shape of the UI, and the like.

For example, in FIG. 6C, if the class name corresponding to the LblockTableList is defined in the HTML, the table processing module 240 generates a dynamic CSS associated with the table optimized for each device through a script, The region can be rendered to be rendered.

The control unit 250 controls operations of the data module 210, the style processing module 220, the script processing module 230, and the table processing module 240 and the flow of data.

FIG. 3 is a flowchart illustrating a multi-screen user interface implementation process performed by the multi-screen user interface engine.

The data module 210 loads the web document 120 (step S310). Here, the web document 120 can be produced irrespective of the resolution of the web document viewer. The user can create one web document that can be provided to the plurality of devices 110 in the process of implementing the multi-screen user interface according to the present invention. In one embodiment, the web document 120 may be implemented as HyperText Markup Language (HTML), Extensible Markup Language (XML), or Java Server Pages (JSP).

The style processing module 220 loads a static style according to the specific resolution included in the web document 120 (step S320).

Here, the style processing module 220 primarily renders a web document based on the loaded static style (step S330).

In one embodiment, the style processing module 220 loads a common style (e.g., Common CSS) contained in the web document 120 to render at least one of the color, shape, and layout for the plurality of devices 110 can do.

In one embodiment, the style processing module 220 branches the static style loaded according to the actual resolution of the web document viewer and constructs a user interface for each predefined device based on the branched static style, Rendering can be performed.

In one embodiment, the style processing module 220 may manage a UI pattern associated with at least one of a static style and a common style in the repository.

The script processing module 230 loads the script included in the web document 120 (step S340).

Here, the script processing module 230 secondarily renders the web document 120 based on the loaded script (step S350).

In one embodiment, the script processing module 230 may load common scripts (e.g., Common CSS) that are common to a plurality of devices 110 to handle common events for a plurality of devices 110 have.

In one embodiment, the script processing module 230 may change at least one of the path of the menu, tab, and image file to the web document 120 via a common script. In one embodiment, the script processing module 230 branches the common script according to the actual resolution of the web document viewer, and branches the script according to predefined devices.

In one embodiment, the script processing module 230 may generate a dynamic style based on a static style via a common script.

In one embodiment, the script processing module 230 may detect the resolution of the web document viewer and generate a dynamic style if the detected resolution is different from the particular resolution.

In another embodiment, the script processing module 230 may generate a dynamic style independent of the resolution of the web document viewer 115.

In yet another embodiment, the script processing module 230 may generate a dynamic style if a predefined class name exists in the web document. For example, if a web document contains a specific class name (eg LblockTableList, LblockTab, LblockSearch), the script can generate a dynamic style to apply the optimized UI type for each device.

In one embodiment, the script processing module 230 may generate a dynamic style through a screen linkage algorithm associated with the translation of a user interface pattern between the plurality of devices 110.

In one embodiment, the script processing module 230 may add a dynamic style to a static style through a script once the dynamic style is created.

The script processing module 230 may render the web document 120 secondarily based on the static style and the dynamic style (step S350).

4 is a flowchart illustrating a multi-screen user interface implementation process performed by the multi-screen user interface engine according to an exemplary embodiment of the present invention.

The data module 210 loads the web document 120 (step S410).

In one embodiment, the style processing module 220 may load a common style (e.g., Common CSS) contained in the web document 120 (step S420). Here, the style processing module 220 may load the CSS associated with the script (step S421).

The style processing module 220 may branch the static style loaded according to the actual resolution of the web document viewer (step S422) and load the branched static CSS (step S430).

Here, the style processing module 220 branches (step S431) for each device through a media query statement, constructs a UI for each device previously defined on the basis of the common CSS and the branched static CSS (step S432) Screen rendering can be performed (step S433).

The script processing module 230 may load a common script (e.g., common js) commonly applied to the plurality of devices 110 (step S440).

In one embodiment, the script processing module 230 may branch the common script according to the actual resolution of the web document viewer and branch for each predefined device (step S441).

In one embodiment, the script processing module 230 may load predefined device-specific scripts (e.g., pc.js, tablet.js, or phone.js) via common js (step S442). Here, the script processing module 230 may process an operation for a device that has been previously defined based on a device-specific script.

In one embodiment, the script processing module 230 may process a common event for a plurality of devices 110 via a common CSS (step S443).

In one embodiment, the script processing module 230 may modify at least one of the paths of the menu, tab, and image file to the web document 120 via a common script (step S444).

In one embodiment, the script processing module 230 may generate a dynamic style based on a static style via a common script (step S445).

In one embodiment, the script processing module 230 may generate a dynamic style if a predefined class name exists in the web document. For example, if a web document contains a specific class name (eg LblockTableList, LblockTab, LblockSearch), the script can generate a dynamic style to apply the optimized UI type for each device. That is, when the user wishes to create a screen with a menu, text, search and table, the script processing module 230 describes the class name corresponding to each of the predefined LblockTopMenu, LblockContent, LblockSearch and LblockTable, You can dynamically generate CSS.

In one embodiment, the script processing module 230 may generate a dynamic style through a screen association algorithm associated with the transformation of a user interface pattern between the plurality of devices 110 (step S446). Here, the screen linkage algorithm may define a transformation of a user interface pattern associated with at least one of a layout and a user interface component.

In one embodiment, the script processing module 230 may include a screen interaction algorithm (e.g., device-specific translation rules such as top region) for changing the layout and a screen interaction algorithm (e.g., A device-specific conversion rule for a UI component such as a list area).

In one embodiment, the script processing module 230 may add a dynamic style to a static style through a script once the dynamic style is created.

In one embodiment, the script processing module 230 may render the web document 120 secondarily based on the static style and the dynamic style (step S447).

The table processing module 240 generates a dynamic style associated with the UI of the table if the predefined class name associated with the table exists in the web document 120 (step S450) 120) (step S451).

It will be apparent to those skilled in the art that various modifications and variations can be made in the present invention without departing from the spirit or scope of the present invention as defined by the following claims It can be understood that

110: a plurality of devices
111: PC 112: Tablet PC
112: Smartphone 120: Web document
130: Multi-screen user interface engine
210: data module 220: style processing module
230: Script processing module 240: Table processing module
250:

Claims (25)

A multi-screen user interface engine for implementing a method for implementing a multi-screen user interface, the multi-screen user interface engine comprising:
A data module for loading the produced web document regardless of the resolution of the web document viewer;
A style processing module that loads a static style according to a specific resolution included in the web document and primarily renders the web document based on the loaded static style;
A script processing module for loading a script included in the web document and secondarily rendering the web document based on the loaded script; And
If a predefined class name associated with the table exists in the web document, a dynamic style associated with the user interface of the table is generated, and a table that tertiarily renders the web document based on the generated dynamic style Screen user interface engine including a processing module.
The method of claim 1, wherein the style processing module
Wherein at least one of color, shape, and layout for a plurality of devices is rendered by loading a common style commonly applied to all resolutions.
3. The method of claim 2, wherein the style processing module
Wherein the static style is branched according to the actual resolution of the web document viewer and a user interface is configured for each device defined on the basis of the branched static style.
The method of claim 1, wherein the script processing module
Wherein a common script applied to all resolutions is loaded to process a common event for a plurality of devices.
5. The apparatus of claim 4, wherein the script processing module
Wherein the common script is branched according to an actual resolution of the web document viewer to load a predefined device-specific script, and an operation for a predefined device is processed based on the device-specific script. User interface engine.
5. The apparatus of claim 4, wherein the script processing module
Wherein at least one of a menu, a tab, and an image file path for the web document is changed through the common script.
5. The apparatus of claim 4, wherein the script processing module
Wherein the dynamic style is generated based on the static style through the common script.
8. The apparatus of claim 7, wherein the script processing module
Wherein the resolution of the web document viewer is detected and the dynamic style is generated if the detected resolution is different from the specific resolution.
8. The apparatus of claim 7, wherein the script processing module
And generates the dynamic style if a predefined class name exists in the web document.
8. The apparatus of claim 7, wherein the script processing module
Wherein the dynamic style is generated through a screen linkage algorithm associated with a conversion of a user interface pattern between a plurality of devices.
11. The method of claim 10,
Layout, and a user interface pattern associated with at least one of a user interface component, a layout, and a user interface component.
delete A method for implementing a multi-screen user interface in a multi-screen user interface engine, the method comprising:
Loading the created web document regardless of the resolution of the web document viewer;
Loading a static style according to a specific resolution included in the web document and rendering the web document primarily based on the loaded static style;
Loading a script included in the web document and rendering the web document secondarily based on the loaded script; And
Generating a dynamic style associated with the user interface of the table if the predefined class name associated with the table exists in the web document and rendering the web document tertiary based on the generated dynamic style Screen user interface.
14. The method of claim 13, wherein the step of primarily rendering the web document
Further comprising: loading a common style commonly applied to all resolutions to render at least one of color, shape, and layout for a plurality of devices.
15. The method of claim 14, wherein the step of primarily rendering the web document comprises:
Further comprising branching the static style according to an actual resolution of the web document viewer and configuring a user interface for each device previously defined based on the branched static style, How to implement the interface.
14. The method of claim 13, wherein rendering the web document
Further comprising: loading a common script commonly applied to all resolutions to process a common event for a plurality of devices.
17. The method of claim 16, wherein rendering the web document
Further comprising the step of branching the common script according to the actual resolution of the web document viewer to load a predefined device-specific script and processing an operation on a predefined device based on the device-specific script. A method for implementing a multi-screen user interface.
17. The method of claim 16, wherein rendering the web document
Further comprising changing at least one of a menu, a tab and an image file path for the web document through the common script.
17. The method of claim 16, wherein rendering the web document
Further comprising: generating a dynamic style based on the static style through the common script.
20. The method of claim 19, wherein generating the dynamic style comprises:
Detecting a resolution of the web document viewer and generating the dynamic style if the detected resolution is different from the specific resolution.
20. The method of claim 19, wherein generating the dynamic style comprises:
And generating the dynamic style if a predefined class name exists in the web document. &Lt; Desc / Clms Page number 22 &gt;
20. The method of claim 19, wherein generating the dynamic style comprises:
Further comprising generating the dynamic style through a screen linkage algorithm associated with the conversion of a user interface pattern between the plurality of devices.
23. The method of claim 22,
Layout, and a user interface pattern associated with at least one of a user interface component, a layout, and a user interface component.
delete A computer-readable recording medium on which a method for implementing a multi-screen user interface is performed in a multi-screen user interface engine,
Ability to load web documents produced independently of the resolution of the web document viewer;
Loading a static style according to a specific resolution included in the web document and rendering the web document primarily based on the loaded static style; And
Loading the script included in the web document and rendering the web document secondarily based on the loaded script; And
Generating a dynamic style associated with a user interface of the table if a predefined class name associated with the table exists in the web document and rendering the web document tertiary based on the generated dynamic style; Screen user interface, and a method for implementing the multi-screen user interface.

Images