KR101916338B1 - Electronic device for constituting gui using virtual container component and operating method thereof - Google Patents

Abstract

The present invention relates to an electronic device constituting a graphical user interface using a virtual container and an operation method thereof. According to various embodiments disclosed in this document, an electronic device constituting a graphical user interface using a virtual container includes a display unit configured to display a window corresponding to a program being executed in the electronic device, a display unit configured to display, A component manager for creating one or more containers in the window and inserting at least one component into the created one or more containers, at least one border of the one or more containers from at least one border of the border of the window, Obtaining second distance information about a distance from at least one of the rims of the one or more containers to the at least one component, 2 A position information management unit that obtains third distance information on a distance from at least one of the edges of the window to the at least one component using the first information and the second information received from the outside, The method comprising: deleting the one or more containers created in the at least one container in the window using the obtained third distance information to calculate a position within the window of the at least one component; And a graphic user interface generation unit for generating the window including the component.

Description

TECHNICAL FIELD [0001] The present invention relates to an electronic device for configuring a graphical user interface using a virtual container and a method of operating the electronic device.

The present invention relates to an electronic device constituting a graphical user interface using a virtual container and an operation method thereof.

Recently, as electronic devices such as computers, smart phones or tablet PCs have become widespread, various methods of processing data using such electronic devices are being introduced. For example, an electronic device having various sensors can acquire information about the environment of the electronic device or information about the user using the electronic device, etc. through the sensors, and process the data based on the obtained information.

The data processed in the electronic device may be provided through various types of graphical user interfaces (GUIs) according to preset settings. A GUI that defines the manner in which data is provided may be generated in advance by a developer responsible for the creation of the GUI and stored in the storage of the electronic device and the electronic device may be capable of outputting data using a pre- have.

A program developer can use a component and a container in constructing various screens such as a GUI output through a display unit of an electronic device. A component refers to a UI (user interface) and a UX (user experience) component that defines various types of data output, and may have various forms according to a use such as a grid, a table, a radio button, and a list box. A container may be configured to include information that may be used to determine the location or size of one or more components included, such as a configuration unit or environment configured to include one or more components.

A container may be configured to include one or more components, and a component included in the container may be named a child component of the container. On the other hand, when the electronic device outputs the GUI corresponding to the running program through the display unit of the electronic device, the position and size of the container to which the component belongs is preferentially Can be confirmed. The electronic device may determine the location and size of the child component in the container based on the location and size of the container when the location and size of the container is identified. Finally, the electronic device may configure the GUI output through the display of the electronic device based on the location and size of the identified child component.

As such, the electronic device is subjected to a process of confirming the position of the container to which the component belongs in order to determine the location of various components when constructing the GUI output through the display unit. If the number of components and containers constituting the GUI is small or the number of overlapping containers is not large, the above process does not significantly affect the performance of the program. However, when there are a large number of components and containers or a large number of overlapping containers, Which is a main cause of deteriorating the performance of the apparatus. In particular, even though the container is not visually exposed to the GUI that is finally output through the display unit of the electronic device, the location and size of the child components are defined, , Which causes resource occupation.

Various embodiments disclosed in this document can be used to configure and output a GUI output through a display unit in an electronic device, and to propose a method of checking and determining the position of a child component without calling the data related to the container, . For example, when configuring the GUI, the electronic device according to one embodiment creates a virtual container instead of deleting all the containers to which the components included in the GUI belong, based on the top-level tag or form object, Can provide a way to identify and determine the location of a child component without invoking data associated with an existing container.

According to various embodiments disclosed in this document, an electronic device constituting a graphical user interface using a virtual container includes a display unit configured to display a window corresponding to a program being executed in the electronic device, a display unit configured to display, A component manager for creating one or more containers in the window and inserting at least one component into the created one or more containers, at least one border of the one or more containers from at least one border of the border of the window, Obtaining second distance information about a distance from at least one of the rims of the one or more containers to the at least one component, 2 A position information management unit that obtains third distance information on a distance from at least one of the edges of the window to the at least one component using the first information and the second information received from the outside, The method comprising: deleting the one or more containers created in the at least one container in the window using the obtained third distance information to calculate a position within the window of the at least one component; And a graphic user interface generation unit for generating the window including the component.

Further, an operating method of an electronic device constituting a graphical user interface using a virtual container according to various embodiments disclosed in this document includes the steps of: displaying a window corresponding to a program being executed in the electronic device; Creating one or more containers within the window and inserting at least one component within the created one or more containers based on the instructions, selecting at least one of the borders of the one or more containers from at least one of the borders of the window Obtaining first distance information for a distance to one border, obtaining second distance information about a distance from at least one of the rims of the one or more containers to the at least one component, Information and second street Using the beam to obtain third distance information on a distance from at least one of the edges of the window to the at least one component, based on a second instruction received from the outside, Deleting the above containers from the window, calculating a position within the window of the at least one component using the obtained third distance information, and determining the position of the at least one component And creating the window.

According to the various embodiments disclosed in this document, the electronic device can improve the performance degradation of the program by reducing the number of containers that are used indiscriminately to set the location of components constituting the GUI, and the like. Thus, the convenience of the user using the electronic device can be increased. In addition, a user of an electronic device can efficiently process and manage a large amount of data by using an electronic device.

1 is a diagram showing a configuration of an electronic device according to an embodiment of the present invention.
2 is a diagram illustrating a process of generating and outputting a graphical user interface in an electronic device according to an embodiment of the present invention.
3 is a flowchart illustrating a method of generating and outputting a graphical user interface in an electronic device according to an exemplary embodiment of the present invention.

It should be understood that the various embodiments disclosed herein are not intended to limit the invention to specific embodiments, and that the components introduced throughout the various embodiments are intended to cover all such alterations and equivalents that fall within the spirit and scope of the invention Those skilled in the art will readily appreciate that it is provided as an inclusion. Further, in describing each drawing, all terms used herein, including technical and scientific terms, unless otherwise defined, are to be understood as including those generally understood by one of ordinary skill in the art to which this invention belongs Can be interpreted as having the same meaning. Further, objects and advantages of the present invention, and technical constructions for achieving them will be clarified through embodiments which are explained in detail with reference to the accompanying drawings. In the following description of the present invention, a detailed description of known functions and configurations incorporated herein will be omitted when it may make the subject matter of the present invention rather unclear. , Roles, and functions, which may be interpreted differently from what was used previously depending on the intentions or customs of the user and the operator.

It is to be understood that the present invention may be embodied in many different forms and should not be construed as limited to the embodiments set forth herein. The various embodiments disclosed in this document are provided for completeness of disclosure of the present invention and to fully disclose the scope of invention to a person having ordinary skill in the art to which the present invention belongs. But only by the scope of the claims set forth in the scope.

In this document, when a component is referred to as "comprising ", it means that it can include other components as well, without excluding other components unless specifically stated otherwise. Further, in various embodiments of the present invention, each component, functional block or means may be comprised of one or more sub-components, and the electrical, electronic, , An integrated circuit, an application specific integrated circuit (ASIC), and the like, or may be implemented separately or two or more may be integrated into one.

In the meantime, the blocks in the accompanying block diagrams and the steps in the flowchart illustrate computer program instructions that are loaded into a processor or memory of a device capable of data processing, such as a general purpose computer, a special purpose computer, a portable notebook computer, Can be interpreted. Because these computer program instructions may be stored in a memory on a computer device or in a computer-readable memory, the functions described in the blocks or flowchart steps of the block diagram may be embodied as a product incorporating the instruction means . In addition, each block or each step may represent a module, segment, or portion of code that includes one or more executable instructions for executing the specified logical function (s). It should also be noted that in some alternative embodiments, the functions mentioned in the blocks or steps may be performed differently from the predetermined order. For example, two blocks or steps shown in succession may be performed substantially simultaneously, or in reverse order, and may be performed with some blocks or steps omitted as the case may be.

1 is a diagram showing a configuration of an electronic device according to an embodiment of the present invention. According to various embodiments, the electronic device 100 includes a component management unit 110, a location information management unit 120, a graphical user interface (GUI) generation unit 130, a display unit 140, a storage unit 150, (160). Here, the component management unit 110, the location information management unit 120, and the GUI generation unit 130 are used to designate a module that performs specific instructions, and the instructions executed through the modules are executed by a processor (not shown) ). ≪ / RTI >

The component management unit 110 of the electronic device 100 generates one or more containers in a window corresponding to a program running in the electronic device based on an instruction received from the outside, You can insert a component. For example, when a command for instructing generation of a window required for execution of a specific program is received from the outside, the component management unit 110 can execute a program necessary for creating a window. The component management unit 110 may create a window through the executed program and insert at least one container and at least one component into the created window. According to one embodiment, the component management unit 110 may insert at least one container and at least one component based on keyboard input or mouse input received via the input 160 of the electronic device 100, The position of the at least one container and the at least one component can be changed.

The location information management unit 120 of the electronic device 100 may obtain first distance information on a distance from at least one of the edges of the window to at least one of the edges of one or more containers. In addition, the location information management unit 120 may obtain second distance information on a distance from at least one of the edges of one or more containers to at least one component. In addition, the location information management unit 120 may obtain the third distance information about the distance from at least one of the edges of the window to at least one component using the first distance information and the second distance information.

For example, the location information management unit 120 may calculate the distance from the left-side border of the rectangle-shaped frames constituting the window to the left-side border of the rectangle-shaped frames constituting one or more containers. Likewise, the location information management unit 120 may calculate the distance from the right-side border of the rectangle-shaped frames constituting the window to the right-side border of the rectangle-shaped frames constituting one or more containers. In this manner, the location information manager 120 can determine the location of one or more containers within the window. As such, the location information management unit 120 may obtain the first distance information, which is one or more pieces of information about the window and the distance between one or more containers.

According to one embodiment, the location information management unit 120 may calculate the distance from at least one of the edges of the rectangular shaped frames constituting one or more containers to at least one component. At this time, the position information management unit 120 may use a point corresponding to the center of gravity of at least one component as a reference point of distance calculation. Alternatively, if the shape of at least one component is a rectangle, at least one rim of the rectangular shaped rims constituting at least one component may be used as a reference point of distance calculation. In this manner, the location information manager 120 can determine the location of at least one component in one or more containers. As such, the location information management unit 120 may obtain the second distance information, which is one or more pieces of information about the distance between one or more containers and at least one component.

Meanwhile, the location information management unit 120 may extract the third distance information, which is at least one information on the distance between the window and at least one component, using the obtained first distance information and second distance information.

The GUI generation unit 130 of the electronic device 100 may delete the one or more containers created in the window from the window based on an instruction received from the outside. At the same time, the GUI generation unit 130 calculates the position of the at least one component in the window using the obtained third distance information, and calculates the position of the at least one component The window can be created. That is, the GUI generating unit 130 may delete one or more containers that were used to determine the position of at least one component when creating the window, and at the same time, delete at least one The location of the at least one component can be newly calculated to determine the position of the component and the at least one component can be inserted at a predetermined position in the window based on the calculation result.

The display unit 140 of the electronic device 100 can perform a function of providing the information generated in the electronic device 100 to the outside (e.g., a user) of the electronic device 100 in a visual form. According to one embodiment, the display unit 140 may include a touch circuit configured to sense a touch or a sensor circuit configured to measure an intensity of a force generated by the touch. The display unit 140 may be a display included in the housing of the electronic device 100, or may be an independent display device that may be connected to the electronic device 100 by wire or wireless connection.

The storage 150 of the electronic device 100 may store various data used by at least one component of the electronic device 100. [ Here, the data may include input data or output data for the software and related commands. In addition, the storage unit 150 may include a volatile memory or a non-volatile memory. According to one embodiment, the storage unit 150 may store a program and a plurality of user interfaces that can be provided through the program.

The input 160 of the electronic device 100 may receive commands or data to be used for components of the electronic device 100 from the outside (e.g., a user) of the electronic device 100. The input unit 160 may include a mouse, a keyboard, and a touch pad. According to one embodiment, a first input received from a user via an input unit 160 (e.g., a keyboard) may be used to insert at least one content into a user interface being displayed through the display unit 140. [ Also, the second input received from the user through the input unit 160 (e.g., a mouse) can be used to select any one of the data stored in the storage unit 150. [

According to one embodiment, the component management unit 110 executes a program used for editing a configuration of a window that has already been generated based on an instruction received from the outside, Inserting the at least one component into the one or more inserted containers using the second distance information and setting at least one of the inserted one or more containers and the at least one component And change at least one of the first distance information and the second distance information in response to the change.

2 is a diagram illustrating a process of generating and outputting a graphical user interface in an electronic device according to an embodiment of the present invention. Referring to FIG. 2, the first screen 201, the second screen 202 and the third screen 203 used for constructing the window corresponding to the program being executed in the electronic device can be checked.

According to one embodiment, the electronic device 100 may create a layer 210 that is used to determine the location and size of one or more containers 220 and at least one component 230, 235, and the like. One or more containers 220 may be disposed on the layer 210. The electronic device 100 may determine the location and size of the one or more containers 220 based on user commands received via the input 160, such as a mouse or keyboard. The electronic device 100 may then insert at least one component 230, 235 into one or more containers 220 disposed on the layer 210. The at least one component 230 or 235 may be divided into various types according to the use such as a grid, a table, a radio button, and a list box. The at least one component 230 and 235 may be divided into a minimum unit block and stored in the storage unit 150 in advance Can be.

According to one embodiment, the electronic device 100 may calculate the distance from at least one of the borders of the layer 210 to at least one of the borders of the one or more containers 220 have. For example, electronic device 100 may calculate 19, the distance from the top of the borders that make up layer 210, to the top border of the borders that make up one or more containers 220. In addition, the electronic device 100 may calculate 19, which is the distance from the left border among the borders constituting the layer 210, to the left border of the borders constituting the one or more containers 220. [

According to one embodiment, the electronic device 100 includes a plurality of containers 220 that are spaced apart from at least one of the edges of the one or more containers 220 to a distance of at least one of the edges of the at least one component 230 Can be calculated. For example, electronic device 100 may calculate 20, the distance from the top of the borders that make up one or more containers 220 to the top border of the borders that make up at least one component 230. The electronic device 100 may also calculate 14, the distance from the left border of the one or more of the borders that make up the one or more containers 220, to the left border of the borders that make up the at least one component 230.

According to one embodiment, the electronic device 100 is configured to have a distance from at least one of the borders of the at least one component 230 to at least one of the borders of the at least one component 235, Can be calculated. For example, the electronic device 100 may calculate 12, the distance from the right border of the at least one component 230 to the left border of the borders that make up the at least one component 235.

Referring to the second screen 202, the electronic device 100 includes a layer 210 that includes one or more containers 220 and at least one component 230, 235, As shown in Fig. In this case, at least some of the edges of the layer 210 and at least some of the edges of the window 211 may be set to correspond.

Then, referring to the third screen 203, the electronic device 100 may delete one or more pre-inserted containers 220 when generating and outputting the window 211 as a graphic user interface. At the same time, the electronic device 100 can recalculate and determine the position of at least one component 230, 235 inserted in the one or more containers 220 based on the window 211. For example, referring to the calculated results, the electronic device 100 determines the distance from the upper border of the borders constituting the window 211 to the upper border of the borders constituting the at least one component 230 to 39 You can decide. In addition, the electronic device 100 refers to the calculated results to calculate the distance from the left border of the borders constituting the window 211 to the left border of the borders constituting the at least one component 230 to 33 You can decide.

3 is a flowchart illustrating a method of generating and outputting a graphical user interface in an electronic device according to an exemplary embodiment of the present invention.

In step 300, a window corresponding to the program running in the electronic device may be displayed.

In step 310, based on the first instruction received from the outside, one or more containers may be created in the window and at least one component may be inserted into the created one or more containers.

In step 320, the first distance information is obtained from at least one of the borders of the window to at least one of the borders of the one or more containers, and at least one of the borders of the one or more containers To obtain at least one component from at least one of the edges of the window to the at least one component using the first distance information and the second distance information, The third distance information on the distance can be obtained.

In step 330, the one or more containers created in the window are deleted in the window based on a second instruction received from the outside, and the third distance information You can calculate the position in the window.

In step 340, the window including the at least one component may be generated based on the calculation result.

According to various embodiments, some of the operations described in FIG. 3 may be omitted or repeated a plurality of times. Further, each of the operations disclosed in Fig. 3 is appropriate to be viewed as an embodiment, and any one operation can not be construed as being limited to another operation.

According to various embodiments disclosed in this document, an electronic device constituting a graphical user interface using a virtual container includes a display unit configured to display a window corresponding to a program being executed in the electronic device, a display unit configured to display, A component manager for creating one or more containers in the window and inserting at least one component into the created one or more containers, at least one border of the one or more containers from at least one border of the border of the window, Obtaining second distance information about a distance from at least one of the rims of the one or more containers to the at least one component, 2 A position information management unit that obtains third distance information on a distance from at least one of the edges of the window to the at least one component using the first information and the second information received from the outside, The method comprising: deleting the one or more containers created in the at least one container in the window using the obtained third distance information to calculate a position within the window of the at least one component; And a graphic user interface generation unit for generating the window including the component.

According to various embodiments disclosed in this document, an electronic device constituting a graphical user interface using a virtual container may further include a storage unit including the first distance information, the second distance information, and the third distance information have.

According to various embodiments disclosed in this document, in an electronic device constituting a graphical user interface using a virtual container, the component management unit edits the configuration of the generated window based on a third instruction received from the outside Executing the program to be used, inserting the one or more containers into the window using the first distance information, inserting the at least one component into the inserted one or more containers using the second distance information And changing at least one of the first distance information and the second distance information in response to the setting of at least one of the one or more inserted containers and the at least one component being changed.

In an electronic device that configures a graphical user interface using a virtual container according to various embodiments disclosed herein, the location information manager may be configured to determine whether the at least one component is present in the one or more containers, And acquires fourth distance information on a distance between the at least one component, and the storage unit stores the fourth distance information.

A method of operating an electronic device that configures a graphical user interface using a virtual container according to various embodiments disclosed herein includes displaying a window corresponding to a program running in the electronic device, Creating at least one container in the window and inserting at least one component within the created one or more containers based on at least one of the edges of the one or more containers from at least one of the edges of the window; To obtain first distance information on a distance to a border, to obtain second distance information on a distance from at least one of the rims of the one or more containers to the at least one component, The second distance information Acquiring third distance information about a distance from at least one of the rim of the window to the at least one component using the first instruction and the second instruction received from the outside, Removing the containers from the window, calculating a position within the window of the at least one component using the obtained third distance information, and calculating the position of the at least one component based on the calculated result And creating a window.

According to various embodiments disclosed in this document, an operating method of an electronic device that configures a graphical user interface using a virtual container includes storing the first distance information, the second distance information, and the third distance information in a storage And a step of storing in the storage unit.

A method of operating an electronic device that configures a graphical user interface using a virtual container according to various embodiments disclosed in this document, the obtaining comprising: determining, based on a third instruction received from the outside, Executing the program used to edit the configuration, inserting the one or more containers into the window using the first distance information, and using the second distance information to insert the at least one component into the inserted one or more containers And changing at least one of the first distance information and the second distance information in response to the setting of at least one of the inserted one or more containers and the at least one component being changed can do.

A method of operating an electronic device for configuring a graphical user interface using a virtual container according to various embodiments of the present disclosure, the obtaining comprising: providing a plurality of at least one component in the one or more containers Further comprising the step of obtaining fourth distance information about a distance between the at least one component in response to the first distance information and storing the fourth distance information in a storage unit of the electronic device .

An operation method of an electronic device constituting a graphical user interface using a virtual container according to an embodiment of the present invention can be implemented by a computer program stored in a storage medium for execution through a combination with a computer.

In addition, according to an embodiment of the present invention, an operation method of an electronic device constituting a graphic user interface using a virtual container may be implemented in the form of a program command which can be executed through various computer means, have. The computer-readable medium may include program instructions, data files, data structures, and the like, alone or in combination. The program instructions recorded on the medium may be those specially designed and constructed for the present invention or may be available to those skilled in the art of computer software. Examples of computer-readable media include magnetic media such as hard disks, floppy disks and magnetic tape; optical media such as CD-ROMs and DVDs; magnetic media such as floppy disks; Magneto-optical media, and hardware devices specifically configured to store and execute program instructions such as ROM, RAM, flash memory, and the like. Examples of program instructions include machine language code such as those produced by a compiler, as well as high-level language code that can be executed by a computer using an interpreter or the like.

As described above, the present invention has been described with reference to particular embodiments, such as specific constituent elements, and limited embodiments and drawings. However, it should be understood that the present invention is not limited to the above- And various modifications and changes may be made thereto by those skilled in the art to which the present invention pertains.

Accordingly, the spirit of the present invention should not be construed as being limited to the embodiments described, and all of the equivalents or equivalents of the claims, as well as the following claims, belong to the scope of the present invention .

Claims (10)

A display unit configured to display a window corresponding to a program being executed in the electronic device;
A component manager for creating one or more containers in the window based on a first command received from the outside and inserting at least one component into the generated one or more containers;
Obtain first distance information from a border of at least one of the edges of the window to at least one border of a border of the one or more containers, The method comprising: obtaining second distance information about a distance to a component from the at least one frame of the window using a first distance information and a second distance information, A location information management unit for obtaining information;
The method comprising: deleting, in the window, the one or more containers created in the window, based on a second instruction received from the outside, and using the obtained third distance information to determine a position in the window of the at least one component And a graphical user interface generation unit for generating the window including the at least one component based on the calculation result, wherein the graphical user interface generation unit configures the graphical user interface using the virtual container.
The method according to claim 1,
Further comprising: a storage unit that stores the first distance information, the second distance information, and the third distance information, and configures a graphical user interface using the virtual container.
3. The method of claim 2,
The component management unit,
Executing a program used to edit a configuration of the generated window based on a third command received from the outside, inserting the one or more containers into the window using the first distance information, Inserting the at least one component into the inserted one or more containers using information, and in response to changing the settings of at least one of the inserted one or more containers and the at least one component, And changing the at least one of the first distance information and the second distance information.
3. The method of claim 2,
Wherein the location information management unit obtains fourth distance information on the distance between the at least one component in response to the presence of the plurality of at least one component in the one or more containers,
Wherein the storage unit stores the fourth distance information. ≪ RTI ID = 0.0 > 15. < / RTI >
Displaying a window corresponding to a program running in the electronic device;
Creating one or more containers in the window based on a first instruction received from the outside and inserting at least one component in the created one or more containers;
Obtain first distance information from a border of at least one of the edges of the window to at least one border of a border of the one or more containers, The method comprising: obtaining second distance information about a distance to a component from the at least one frame of the window using a first distance information and a second distance information, Acquiring information;
The method comprising: deleting, in the window, the one or more containers created in the window, based on a second instruction received from the outside, and using the obtained third distance information to determine a position in the window of the at least one component Calculating; And
And creating the window including the at least one component based on the result of the calculation. ≪ Desc / Clms Page number 19 >
6. The method of claim 5,
Further comprising storing the first distance information, the second distance information, and the third distance information in a storage unit of the electronic device, the method comprising: constructing a graphical user interface using a virtual container.
The method according to claim 6,
Wherein the acquiring comprises:
Executing a program used to edit a configuration of the generated window based on a third command received from the outside, inserting the one or more containers into the window using the first distance information, Inserting the at least one component into the inserted one or more containers using information, and in response to changing the settings of at least one of the inserted one or more containers and the at least one component, And changing at least one of the first distance information, the second distance information, and the second distance information.
The method according to claim 6,
Wherein the obtaining further comprises obtaining fourth distance information about the distance between the at least one component in response to the presence of the plurality of at least one component in the one or more containers,
Wherein the step of storing further comprises storing the fourth distance information in a storage of the electronic device.
9. A computer-readable recording medium having recorded thereon a program for causing a computer to perform the method according to any one of claims 5 to 8.
9. A computer program stored in a storage medium for executing the method of any one of claims 5 to 8 through a combination with a computer.

Images