TWI875105B - Method and apparatus for generating ui component - Google Patents

Abstract

The present invention discloses a method for generating a UI component in an electronic device. Specifically, the method for generating a UI component may include the following steps: confirming an object component; confirming at least one slot of the object component; identifying state information associated with at least one slot in source code associated with the object component; determining at least one subcomponent corresponding to at least one slot based on the state information; and generating an object component including at least one subcomponent based on the hierarchical structure of the object component.

Description

Method and device for generating UI components

The embodiments of this specification are related to a method and device for generating a UI (User Interface) component. The embodiments of this specification are related to a method and device for generating an object component including at least one subcomponent based on the hierarchical structure of the object component.

A UI component can be a unit that constitutes a web page or a mobile page. For example, a UI component corresponding to an interface tool set included in a mobile page can be constructed as a hierarchical structure including lower-level components.

The embodiments disclosed in this specification are intended to provide a method and device for generating UI components.

The technical issues that this embodiment aims to solve are not limited to the technical issues described above, and other technical issues can also be inferred from the following embodiments.

As a technical means for realizing the above-mentioned subject, the method for generating a UI component in an electronic device in the first aspect of the present invention may include the following steps: confirming an object component; confirming at least one slot of the object component; identifying state information related to at least one slot in source code related to the object component; determining at least one subcomponent corresponding to at least one slot based on the state information; and generating an object component including at least one subcomponent based on the hierarchical structure of the object component.

According to one embodiment, the step of identifying the state information may include the following steps: using the level 1 API to determine the state information of the first type in the state information as the set default state information of the first type; and using the level 1 API to identify the state information of the second type in the state information in the source code.

According to one embodiment, the source code may include: a first field indicating that the status information of the first type is set to the set default status information of the first type; and a second field indicating the status information of the second type.

According to one embodiment, the step of identifying the state information may include the following steps: using the level 2 API to identify the state information of type 1 and the state information of type 2 in the source code.

According to one embodiment, the second level API may be an API used when the source code includes the third field, and the third field indicates that at least a portion of the first type of status information is set to the first type of status information that is different from the set first type of default status information.

According to one embodiment, a default version of an object component may include at least one default subcomponent, which corresponds to default status information associated with at least one slot.

According to one embodiment, when the state information of the first slot in at least one slot is different from the default state information of the first slot in the default version of the object component, and the state information of the second slot in at least one slot is the default state information of the second slot in the default version of the object component, the source code may include: a first subfield, which indicates that the state information of the first slot is set to state information different from the default state information of the first slot; and a second subfield, which indicates that the state information of the second slot is set to the default state information of the second slot.

According to one embodiment, the step of identifying status information may further include the following steps: identifying status information associated with at least one slot through an interface.

According to one embodiment, the interface may include: a first area, which sets the state information of the object component; and a second area, which sets the state information of each of at least one subcomponent.

According to one embodiment, the step of determining at least one subcomponent includes the following steps: based on the state information, identifying the data of each of the at least one subcomponent; the step of generating the object component may include the following steps: based on the state information, rendering the data of each of the at least one subcomponent to satisfy the hierarchical structure, thereby generating the object component.

According to one embodiment, the source code may be one of source code in the form of xml (Extensible Markup Language) or source code in the form of json (JavaScript Object Notation).

The electronic device for generating a UI component according to the second aspect of the present invention may include: a transceiver; a register storing one or more commands; and one or more processors; and a register storing one or more commands executed by one or more processors; and the one or more processors are as follows: confirming an object component by executing one or more commands, confirming at least one slot of the object component, identifying state information associated with at least one slot in source code associated with the object component, determining at least one subcomponent corresponding to at least one slot based on the state information, and generating an object component including at least one subcomponent based on the hierarchical structure of the object component.

The recording medium of the third aspect of the present invention may be a non-transitory computer-readable recording medium recording a program for executing a method for generating a UI component in a computer.

According to an embodiment of the present specification, an electronic device can identify state information related to at least one slot of an object component in source code related to the object component. The electronic device can use the state information to determine at least one subcomponent corresponding to at least one slot, and generate an object component including at least subcomponents based on the hierarchical structure of the object component. Accordingly, when a default version of an object component and a specific subcomponent generate different versions of an object component, even if only the fields related to the specific subcomponent of the source code related to the object component are modified, the electronic device can reuse other subcomponents other than the specific subcomponent to efficiently generate different versions of the object component.

The effects of the present invention are not limited to the effects mentioned above. Ordinary technicians in this technical field can clearly understand other effects not mentioned based on the description of the scope of the patent application.

200: Object component

210: Slot 1

220: Slot 2

230: Slot 3

240: Slot 4

300: Status information tree

310: Type 2 status information

311: Status information

312: Status information

313: Status information

314: Status information

320: Hierarchy of object components

321: Image-related subcomponents

322: Text related subcomponents

323: Text related subcomponents

324:Key-related subcomponents

400: Source code

401: Field 1

402: Field 2

410: Status information tree

411: Type 2 status information

413: Status information

414: Status information

415: Status information

500: Source code

501: Field 1

502: Field 2

503: Subfield

504: Subfield

505: Subfield

510: Status information tree

511: Type 2 status information

513: Status information

514: Status information

515: Status information

600: Object component

610: Slot 1

620: Slot 2

630: Slot 3

640: Slot 4

700: Source code

701: 1st subfield

702: Second subfield

710: Status information tree

711: Status information

712: Status information

800: Object component

810: Slot 1

820: Slot 2

830: Slot 3

840: Slot 4

900: Interface

901: Area 1

902: Area 2

910: Source code

911: Field 1

920: Source code

921: Field 1

1000: Object component

1050: Object component

1100: Electronic devices

1110: Processor

1120: Storage

S110: Step

S120: Step

S130: Step

S140: Step

S150: Step

FIG1 is a flow chart showing a method for generating UI components in an electronic device.

FIG. 2 is a diagram for illustrating an object component of an embodiment.

FIG. 3 is a diagram subsequent to FIG. 2 for illustrating a method of generating an object component including at least one subcomponent based on state information associated with a slot of an embodiment, wherein the at least one subcomponent satisfies the hierarchical structure of the object component.

FIG. 4 is a diagram for illustrating a method for identifying state information associated with at least one slot in source code according to an embodiment.

FIG. 5 is a diagram for illustrating a method for identifying state information associated with at least one slot in source code according to an embodiment.

FIG. 6 is a diagram for illustrating a new version of an object component of an embodiment of FIG. 4 and FIG. 5 .

FIG. 7 is a diagram for illustrating a method for identifying state information associated with at least one slot in source code according to an embodiment.

FIG8 is a diagram of an object component used to illustrate a version of an embodiment, following FIG7.

FIG. 9 is a diagram for explaining a method for identifying status information associated with at least one slot through an interface.

FIG. 10 is a diagram following FIG. 9 and is used to illustrate an object component of an embodiment.

FIG. 11 is a block diagram illustrating an electronic device for generating a UI component according to an embodiment.

The terms used in the embodiments are common terms that are currently widely used as much as possible, considering the functions of the invention, but they may vary according to the intentions of technicians in this field or precedents, the emergence of new technologies, etc. In addition, in specific cases, there are terms that the applicant chooses arbitrarily. In such cases, their meanings will be described in detail in the corresponding description. Therefore, the terms used in the invention should be defined based on the meaning of the terms and the overall content of the invention, rather than simply based on the names of the terms.

When a part is mentioned in the entire manual as "including" a certain component, it means that other components are not excluded unless otherwise stated, but may further include other components. In addition, the terms "...part" and "...module" in the manual refer to a unit that processes at least one function or action, which can be implemented by hardware or software, or by a combination of hardware and software.

The expression "at least one of a, b and c" recorded in the entire manual may include "a alone", "b alone", "c alone", "a and b", "a and c", "b and c" or "a, b, c".

The "terminal" mentioned below can be realized by a computer or a portable terminal, which can be connected to a server or other terminals via a network. Here, the computer includes, for example, a notebook computer, a desktop computer, a laptop computer, etc. equipped with a web browser (WEB Browser), and the portable terminal is a wireless communication device that ensures portability and mobility, for example, it can include IMT (International Mobile Telecommunication), CDMA (Code Division Multiple Access), W-CDMA (W-Code Division Multiple Access), LTE (Long Term Evolution) and other communication terminals, such as smart phones, tablet computers and all types of handheld wireless communication devices.

Below, with reference to the attached drawings, the embodiments of the present invention are described in detail so that those with common sense in the technical field to which the present invention belongs can easily implement it. However, the present invention can be implemented in various forms and is not limited to the embodiments described here.

When describing the embodiments, the description of the technical contents that are well known in the technical field to which the present invention belongs and are not directly related to the present invention is omitted. The reason is: by omitting redundant descriptions, the main idea of the present invention is clearly conveyed to avoid confusion of the main idea of the present invention.

For the same reason, some components are exaggerated, omitted or roughly represented in the attached drawings. In addition, the size of each component does not fully reflect the actual size. The same reference symbols are given to the same or corresponding components in each drawing.

If you refer to the attached figures and the embodiments described in detail below, you can clearly understand the advantages and features of the present invention, as well as the methods for realizing such advantages and features. However, the present invention is not limited to the embodiments disclosed below, and can also be implemented in various different forms. This embodiment is only provided to fully disclose the present invention and fully inform the scope of the invention to those with common knowledge in the technical field to which the present invention belongs. The present invention is only defined by the scope of the invention patent application. Throughout the specification, the same reference symbols refer to the same constituent elements.

At this point, it should be understood that the combination of each block of the process flow chart and the flow chart can be implemented by computer program instructions. Such computer program instructions can be loaded on a processor of a general-purpose computer, a special-purpose computer or other programmable data processing device, so that such instructions implemented by the processor of the computer or other programmable data processing device will produce a method for implementing the functions described in the blocks of the flow chart. In order to implement the functions in a specific manner, such computer program instructions can be stored in a computer-usable or computer-readable memory that can be oriented to a computer or other programmable data processing device, so that the instructions stored in the computer-usable or computer-readable memory can also produce a manufactured item that includes the following instruction method, which implements the functions described in the blocks of the flow chart. Computer program instructions may also be loaded onto a computer or other programmable data processing device, thereby executing a series of action steps on the computer or other programmable data processing device to generate a process executed by the computer, and the instructions executed by the computer or other programmable data processing device may also provide steps for executing the functions described in the blocks of the flowchart.

Furthermore, each block may represent a module, a fragment, or a portion of code that includes one or more executable instructions for performing a specific logical function. Furthermore, it should be noted that in some alternative embodiments, the functions mentioned in the blocks may not be generated in sequence. For example, two blocks represented in succession may be executed simultaneously or in reverse order depending on the corresponding functions.

Below, with reference to the attached drawings, the practical examples of the present invention are described in detail.

Figure 1 is a flow chart showing a method for generating UI components in an electronic device.

Referring to Figure 1, it can be clearly understood that the actions of the electronic device to generate the UI component can be changed, part of the actions can be replaced, or part of the order between the actions can be changed within the scope of the technical field to which the present invention belongs.

In step S110, the electronic device can confirm the target component.

In the present invention, a component may be a unit constituting a web page or a mobile page. Components may be classified into atomic components and composite components. Components that are identified as components without lower-level components based on the hierarchical structure of components may be classified as atomic components. Atomic components may be the smallest unit constituting a web page or a mobile page. Furthermore, components that are identified as components including lower-level components based on the hierarchical structure of components may be identified as composite components. That is, a composite component may be a component that is hierarchically constructed with each lower-level component as an element. In the present invention, lower-level components may refer to subcomponents.

According to one embodiment, an electronic device can identify an object component that is an object generated by a component. Here, the object component is a hierarchical component that is composed of each component at a lower level as an element, and can be a composite component.

In step S120, the electronic device can identify at least one slot of the target component.

In the present invention, a slot may be a placeholder for a subcomponent constituting a composite component. Whether a slot exists in a composite component may vary depending on whether user conversion is supported when the UI component is generated, and may be preset in the electronic device. A composite component that supports user conversion may include a slot as a placeholder for a subcomponent. A default subcomponent corresponding to a UI component of an existing service may be located in a slot of each composite component. A composite component including a default subcomponent may be a composite component of a default version. However, a default subcomponent may only be located in a slot, and components that may be located in a slot are not limited to default subcomponents. For example, a subcomponent different from a default subcomponent may be located in a slot. In addition, a subcomponent may not be located in a slot. At this time, the corresponding slot of the composite component may be a void area.

According to one embodiment, the electronic device can identify at least one subslot, which is a placeholder for an object component of a composite component. More specifically, the electronic device can identify at least one subslot as a placeholder for an object component based on a hierarchical structure of the object component. Here, each of the at least one slot can be an atomic component, but is not limited thereto. At least a portion of at least one slot can be a composite component. That is, a subcomponent of an object component can be not only a subcomponent of a lower level in its relationship with the object component, but also a composite component.

In step S130, the electronic device may identify status information associated with at least one slot in source code associated with the object component.

In the present invention, the state information may be information for setting the characteristics of the subcomponent located in the slot. More specifically, the characteristics of the subcomponent may be detailed characteristics of the UI aspect of the UI component displayed by the terminal, and the state information may be a parameter value corresponding to the characteristics used when rendering the UI component. For example, the state information may include at least one of the state information of the size of the component, the state information of the color tone of the background and text of the component, the state information of the alignment of the text of the component, the state information of the spacing between the texts of the component, and the state information of the corner radius of the component.

According to one embodiment, the status information associated with at least one slot identified by the electronic device can be divided into: the second type of status information, which sets the characteristics of the object component composed of at least one slot from an overall perspective; and the first type of status information, which sets the characteristics of each of the at least one slot. The electronic device can identify: the second type of status information, which sets the characteristics of the object component itself in the source code associated with the object component; and the first type of status information, which sets the characteristics of each of the at least one slot constituting the object component. Here, the source code can be a source code in the form of xml or a source code in the form of json. According to another embodiment, the electronic device can identify the status information associated with at least one slot based on the settings associated with the object component confirmed through the interface. Here, the interface is an interface for setting status information associated with at least one slot, which can be a figma. The following will describe in detail the specific method of identifying the status information associated with at least one slot in the interface or source code.

In step S140, the electronic device can determine at least one subassembly corresponding to at least one slot based on the status information.

According to one embodiment, the electronic device can identify: the second type of status information, which sets the characteristics of the object component itself; and the subcomponents of at least one slot, the at least one slot corresponding to the first type of status information, the first type of status information sets the characteristics of at least one slot constituting the object component.

When the identified status information is the default status information corresponding to the slot, the subcomponent located in the slot can be determined as the default component. However, the default subcomponent can only be located in the slot, and the components that can be located in the slot are not limited to the default subcomponents. That is, when a new version of an object component is generated according to a business decision, other types of subcomponents can be located in the slot instead of the default subcomponent. At this time, the electronic device can identify the status information of the slot as the status information corresponding to the other types of subcomponents, instead of the default status information. The electronic device can determine the subcomponent corresponding to the slot as the other types of subcomponents, instead of the default subcomponent.

In step S150, the electronic device may generate an object component including at least one subcomponent based on the hierarchical structure of the object component.

According to one embodiment, an electronic device may generate an object component by combining or aggrcgate at least one subcomponent to satisfy a hierarchical structure of the object component. A default version of an object component may include a default subcomponent corresponding to default state information, the default state information being associated with at least one slot that constitutes the object component. In connection therewith, when a default subcomponent corresponding to a slot of each object component is located, the electronic device may identify an object component of a default version including a default subcomponent. The object component identified by the electronic device may be an object component of a default version, but is not limited thereto. When a new version of an object component is generated based on a business decision, other types of subcomponents may be located in the slot instead of the default subcomponent. At this time, the electronic device can recognize the new version of the object component, which has a sub-component of a different type than the default version of the object component located in the corresponding slot.

FIG. 2 is a diagram for illustrating an object component of an embodiment.

The object component may correspond to one of the interface tool sets constituting a web page or a mobile page. Referring to FIG. 2 , the object component 200 may be a component related to a message box, which transmits information or provides questions to a user using a computing device by popping up a page. In addition, the object component 200 may be a default version of the object component. However, the object component is not limited to a message box-related component, and the object component may be a component of a UI element such as a text button or a container button.

The object component 200 is a component with a green background, which can be divided into at least one sub-slot. Referring to FIG. 2 , the object component 200 is a composite component, which can include a first slot 210, a second slot 220, a third slot 230, and a fourth slot 240.

The first slot 210 may be a start slot including an image or an icon. More specifically, the default sub-assembly corresponding to the first slot 210 may be an icon with the letter C engraved in a circle with a deep green hue. More specifically, the hue of the letter C in the icon may be the same as the green color that is the background hue of the object assembly 200. When the electronic device determines the default sub-assembly corresponding to the first slot 210 in the source code, the default state information corresponding to the first slot 210 may be identified as the state information for setting the icon with the letter C engraved in a circle with a deep green hue. However, the sub-assembly corresponding to the first slot 210 of FIG. 2 is not limited to the default sub-assembly, and the sub-assembly corresponding to the first slot 210 may be a sub-assembly of another type, rather than a default sub-assembly. For example, the subcomponent corresponding to the first slot 210 may be a text-related subcomponent.

The second slot 220 may be a content slot including text. More specifically, the default subcomponent corresponding to the second slot 220 may include the text "Message box v3 does not support development code yet. If you want to use RDS (Relational Database Service) code, please use V2." When the electronic device determines the default subcomponent corresponding to the second slot 220 in the source code, the default status information corresponding to the second slot 220 may be identified as the status information for setting the text "Message box v3 does not support development code yet. If you want to use RDS code, please use V2." However, the subcomponent corresponding to the second slot 220 of FIG. 2 is not limited to the default subcomponent, and the subcomponent corresponding to the second slot 220 may be a subcomponent of another type, rather than a default subcomponent. For example, the subcomponent corresponding to the second slot 220 may be an image or icon related subcomponent.

The third slot 230 may be a bottom slot including text. More specifically, the default sub-component corresponding to the third slot 230 may include the text "button" and icons associated with the text. More specifically, the color tone of the text and the icons associated with the text may be blue. When the electronic device determines the default sub-component corresponding to the third slot 230 in the source code, the default state information corresponding to the third slot 230 may be identified as state information for setting the text "button" and icons associated with the text. However, the sub-component corresponding to the third slot 230 of Figure 2 is not limited to the default sub-component, and the sub-component corresponding to the third slot 230 may be other types of sub-components instead of the default sub-component. For example, the sub-component corresponding to the third slot 230 may be an image-related icon. Alternatively, the status information corresponding to the third slot 230 may not be set separately. In this case, the third slot 230 may be an empty area.

The fourth slot 240 may be an end slot including a button. More specifically, the default subassembly corresponding to the fourth slot 240 may include an arrow-shaped button icon associated with the button. When the electronic device determines the default subassembly corresponding to the fourth slot 240 in the source code, the default state information corresponding to the fourth slot 240 may be identified as state information for setting the arrow-shaped button icon. However, the subassembly corresponding to the fourth slot 240 is not limited to the default subassembly, and the subassembly corresponding to the fourth slot 240 may be a subassembly of another type, rather than a default subassembly. For example, the subassembly corresponding to the fourth slot 240 may be a text-related icon.

FIG. 3 is a diagram subsequent to FIG. 2 for illustrating a method of generating an object component including at least one subcomponent based on state information associated with a slot of an embodiment, wherein the at least one object component satisfies a hierarchical structure of the object component.

According to one embodiment, an electronic device can identify state information related to at least one slot constituting an object component in source code related to the object component or in an interface related to setting of state information. The state information tree 300 related to the object component can represent the state information related to the object component in a hierarchical manner. The state information related to the object component displayed by the state information tree 300 may include: the second type of state information 310, which sets the characteristics of the object component from an overall perspective; and the first type of state information, which sets the characteristics of each of at least one slot.

The second type of status information 310 is used to set the characteristics of the object component itself, which may include the background color information of the object component and the size information of the object component. Referring to FIG. 2 , the background color information of the object component may be green, and the size information of the object component may be M.

The first type of status information is status information that sets the characteristics of at least one slot, and may include status information 311 of the first slot 210, status information 312 of the second slot 220, status information 313 of the third slot 230, and status information 314 of the fourth slot 240.

The state information 311 of the first slot 210 is used to set the information of the icon with the letter C engraved in a circle of deep green hue, and may include information of data related to the icon, size information of the circle of the icon, hue information of the letter C, and font size information. The state information 312 of the second slot 220 is used to set the text "Message box v3 does not support development code yet. If you want to use RDS code, please use V2." and may include information of text data, font size information of the text, and font hue information of the text. The state information 313 of the third slot 230 is used to set the text "button" and the information of the arrow-shaped icon related to the text, and may include information of data related to the text, font size information of the text, and font hue information of the text. In addition, the state information 313 of the third slot 230 may include data information related to the arrow-shaped icon and the color tone information of the icon. The state information 314 of the fourth slot 240 is used to set the information of the arrow-shaped button icon, and may include data information related to the icon, the size information of the icon, and the color tone information of the icon.

According to one embodiment, the electronic device can identify data corresponding to each of at least one slot according to the second type of state information 310 and the first type of state information, and render the data of each of at least one subcomponent based on the state information related to the object component to satisfy the hierarchical structure, thereby generating the first version of the object component. More specifically, the electronic device can render the data of each of at least one subcomponent through rendering logic, thereby generating the object component.

Referring to the hierarchy 320 of the object component, the image-related subcomponent 321 corresponding to the state information 311 may be located in the first slot 210 of the object component, the text-related subcomponent 322 corresponding to the state information 312 may be located in the second slot 220 of the object component, the text-related subcomponent 323 corresponding to the state information 313 may be located in the third slot 230 of the object component, and the key-related subcomponent 324 corresponding to the state information 314 may be located in the fourth slot 240 of the object component. That is, the object component generated by the electronic device may depend on the state information tree 300 or be oriented to the state information tree 300, and may be in a one-to-one correspondence relationship with the state information tree 300.

According to one embodiment, the state information corresponding to the specific slot can be set to be different from the state information tree 300, and the state information corresponding to the slot other than the specific slot is set to be the same as the state information tree 300, so as to generate the object component 200 of the default version of FIG. 2 and the object component of a different version of the subcomponent located in the specific slot. That is, the subcomponent located in the slot other than the specific slot can be reused as it is when generating different versions of the object component. The developer can add a field related to the state information corresponding to the specific slot in the source code, and reuse the field related to the state information corresponding to the slot other than the specific slot. That is, it is possible to minimize repeated work, such as the developer writing unnecessary source code. Furthermore, even if a sub-assembly is updated by a designer, if the status information of the slot where the sub-assembly is located has not changed, the developer can directly use the updated sub-assembly without any additional work.

FIG. 4 is a diagram for illustrating a method for identifying state information associated with at least one slot in source code according to an embodiment.

The source code 400 may include a first field 401 associated with the first type of state information and a second field 402 associated with the second type of state information. Here, the source code may be a source code for generating a version of an object component different from the default version of the object component in FIG. 2 . The electronic device may use the first level API to identify the state information associated with at least one slot in the source code 400 .

In the present invention, the first-level API is an API that reflects the design specifications of the object component, and can be an API that simplifies the generation of object components of a predefined style. That is, the first-level API is an API for quickly providing an object component of a predefined style, which can prevent developers from hard-coding. Here, the predefined style can mean that the first type of state information in the state information associated with at least one slot is set as the default state information.

The first field 401 may indicate that the state information of the first type of at least one first subslot of at least one subslot included in the object component is the default state information of the first type set. For example, the state information of at least one first slot other than the third slot of the first slot, the second slot, the third slot, and the fourth slot as at least one slot may be included in the first field 401. The first field 401 may indicate that the state information of the first slot, i.e., the start slot, the second slot, i.e., the content slot, and the fourth slot, i.e., the end slot, is set to the default state information by the Setstate (buildMessageBoxState) function that sets the state information. That is, the subcomponents corresponding to the first slot, the second slot, and the fourth slot may be determined as the default subcomponents of the default style.

According to one embodiment, the electronic device may use the first level API to determine the first type of state information of at least one first sub-slot as the set first type of default state information in the source code. The first type of state information of the state information tree 410 may correspond to the state information 413, state information 414, and state information 415 as the first type of state information of each of the first slot, the second slot, and the fourth slot. The sub-assemblies that are the same as the first slot 210, the second slot 220, and the fourth slot 240 of the default version of the object assembly 200 may be located in the first slot, the second slot, and the fourth slot of the new version of the object assembly. On the contrary, the electronic device may confirm that the state information corresponding to the third slot is not recorded in the source code 400. That is, the sub-assembly may not be located in the third slot of the new version of the object assembly, and the third slot of the new version of the object assembly may be an empty area.

The second field 402 may represent the status information of the second type. More specifically, referring to FIG. 4 , the second field 402 may represent that the status information of the second type is the set default status information of the second type. The default color tone value, default size value, and default effect value of the object component may be preset to the specifications related to the object component. For example, the background color tone information of the object component in the first type of status information is the color (Color) of the set default color tone value (value), which may be green (green). Furthermore, the size information of the object component in the first type of status information is the size (Size) of the set default size value, which may be M. The effect information of the object component in the first type of status information is the effect of the set default effect value, which can be a tint. That is, the background feature of the object component can be determined to be a light green tint.

According to one embodiment, the electronic device can use the first level API to identify the second type of state information of the object component in the source code. Referring to FIG. 4, the second type of state information 411 of the object component can be the set default state information of the second type. That is, the size and background color of the new version of the object component can be the same as the size and background color of the default version of the object component 200. The new version of the object component generated based on the source code 400 can have the same design as the default version of the object component 200, except that the third slot 230 is an empty area. The first type of state information of at least one first slot in the first field 401 is set to the default state information, and the new version of the object component can be an object component of a predefined style.

According to one embodiment, the electronic device can analyze the source code to determine the API for analyzing the status information. More specifically, for each of at least one slot, when the first type of status information is set as the default status information in the source code or is not included in the source code, the electronic device can use the first level API to identify the status information associated with the at least one slot in the source code.

FIG. 5 is a diagram subsequent to FIG. 4 for illustrating a method for identifying state information associated with at least one slot in source code of another embodiment.

The source code 500 may include a first field 501 associated with the first type of status information and a second field 502 associated with the second type of status information. Here, the source code may be a source code for generating a version of an object component different from the default version of the object component in FIG. 2 . The electronic device may use the second level API to identify the status information associated with at least one slot in the source code 500 .

In the present invention, the second-level API may be an API for generating and assembling at least one subcomponent. More specifically, the second-level API may be an API for generating object components customized in different styles rather than object components of a predefined style.

The first field 501 may indicate the status information of the first type of at least one first sub-slot of at least one sub-slot included in the object component. For example, the status information of at least one first slot other than the first slot, the second slot, the third slot, and the third slot of the fourth slot as at least one slot may be included in the first field 501. The sub-field 503 corresponding to the first slot in the first field 501 may include information of image data related to a logo, an icon, a circular image, a square image, information of the height and width of the image data, information of the color tone of the image data, and information of the font color tone of the text in the image data. The subfield 504 corresponding to the second slot in the first field 501 may include information about text data, font size information, and font color information of the text data. The subfield 505 corresponding to the fourth slot in the first field 501 may include information about icon data related to a key, information about the height and width of the icon data, and color information of the icon data. In addition, the subfield 505 may include a field for information about text keys, but the information about text keys related to the fourth slot may not be set in the subfield 505.

The second field 502 may represent the second type of status information. More specifically, referring to FIG. 5 , the second field 502 may represent that the second type of status information is the set second type of default status information. For example, the background color information of the object component in the first type of status information is the color (Color) of the set default color value (value), which may be green (green). In addition, the size information of the object component in the first type of status information is the size (Size) of the set default size value (M). The effect information of the object component in the first type of status information is the effect (effect) of the set default effect (effect) value (tint).

According to one embodiment, the electronic device may determine the first type of state information and the second type of state information in the source code using the second level API. The first type of state information of the state information tree 510 may correspond to the state information 513, the state information 514, and the state information 515 as the first type of state information of each of the first slot, the second slot, and the fourth slot. The subassemblies that are the same as the first slot 210, the second slot 220, and the fourth slot 240 of the object assembly 200 of the default version may be located in the first slot, the second slot, and the fourth slot of the object assembly of the new version. On the contrary, the state information of the third slot is not in the first field 501, and the electronic device may confirm that there is no first type of state information corresponding to the third slot. That is, the sub-assembly may not be located in the third slot of the new version of the object assembly, and the third slot of the new version of the object assembly may be an empty area. In addition, the second type of state information 511 of the object assembly may be the set second type of default state information. The new version of the object assembly generated based on the source code 500 may have the same design as the default version of the object assembly 200 except that the third slot is an empty area.

FIG. 6 is a diagram for illustrating a new version of an object component of an embodiment of FIG. 4 and FIG. 5

FIG. 6 shows a new version of the object component 600 that is different from the default version of the object component 200 generated based on the source code 400 of FIG. 4 or the source code 500 of FIG. 5 . It can be observed that the subcomponents located in the first slot 610, the second slot 620, and the fourth slot 640 of the object component 600 may be the same as the subcomponents located in the first slot 210, the second slot 220, and the fourth slot 240 of the object component 200. On the contrary, the subcomponent may not be located in the third slot 630 of the object component 600, and the third slot 630 of the object component 600 may be an empty area. That is, the difference between the third slot 630 of the object component 600 and the third slot 230 of the object component 200 is whether the subcomponent is located in the third slot.

Various versions of object components associated with an object component may be stored in an electronic device. In this regard, when the electronic device receives source code associated with a call to an object component, a version of the object component corresponding to a field value of a variant in the source code may be provided to the terminal. When a specific version of an object component is provided to a terminal, such as when performing AB testing, the version of the object component provided to each user's terminal may be determined by the provider of the UI component.

Referring to FIG. 4 and FIG. 5 , the state information of the first type of at least one slot 1 is respectively set to the default state information of the first type of at least one slot 1. The new version of the object component 600 is not exactly the same as the default version of the object component 200, but can be an object component of a predefined style. That is, it is more efficient for the electronic device to generate the object component in the source code using the first level API and the first level API in the second level API.

However, if the object component is not an object component of a predefined style, the electronic device may generate the object component in the source code using the second level API. That is, when the source code includes a field indicating that at least a portion of the first type of state information is set to the first type of state information different from the set first type of default state information, the second level API may be an API for identifying the state information.

FIG. 7 is a diagram for illustrating a method for identifying state information associated with at least one slot in source code according to an embodiment.

According to one embodiment, when the state information of the first slot in at least one slot is different from the default state information of the first slot in the object component of the default version, and the state information of the second slot in at least one slot is the default state information of the second slot in the object component of the default version, the source code may include: a first subfield indicating that the state information of the first slot is set to state information different from the default state information of the first slot; and a second subfield indicating that the state information of the second slot is set to the default state information of the second slot.

The first subfield 701 corresponding to the first slot of the source code 700 may be different from the subfield 503 corresponding to the first slot of the source code 500. More specifically, the first subfield 701 may indicate that the state information of the first slot, i.e., the start slot, is the two circular image state (TwocircularImageState). That is, the first subfield 701 may indicate that the state information of the first slot is set to state information different from the state information 513 which is the default state information of the first slot. The image data related to the two circular images (TwocircularImage) is data pre-generated by the developer and may be set to the data of the two circular image state (TwocircularImageState). The information of the height and width of the image data related to the two circular images (TwocircularImage) of the source code 700, the hue information of the image data, and the font hue information of the text in the image data are set to be the same as the state information of the source code 500. On the contrary, the second subfield 702 corresponding to the second slot of the source code 700 can be the same as the subfield 504 corresponding to the second slot of the source code 500. That is, the second subfield 702 can indicate that the state information of the second slot is set to be the same as the state information 514 which is the default state information of the second slot.

Referring to the state information tree 710 corresponding to the source code 700, the state information 711 corresponding to the first slot in the state information of the first type may be different from the state information 513 corresponding to the first slot in the state information tree 510. On the contrary, the state information 712 corresponding to the second slot in the state information of the first type may be different from the state information 514 corresponding to the second slot in the state information tree 510.

FIG8 is a diagram of an object component used to illustrate a version of an embodiment, following FIG7.

FIG8 shows a new version of the object component 800 that is different from the default version of the object component 200 generated based on the source code 700 of FIG7 . The subcomponents located in the second slot 820 and the fourth slot 840 of the object component 800 may be the same as the subcomponents located in the second slot 620 and the fourth slot 640 of the object component 600. In addition, the third slot 830 of the object component 800 may be an empty area, such as the third slot 630 of the object component 600. On the contrary, the subcomponent located in the first slot 810 of the object component 800 may be as shown in FIG8 .

More specifically, the subcomponent located in the first slot 810 may be generated by rendering image data related to two circular images (TwoCircularImage) according to the state information in the first subfield 701. Referring to FIG. 8 , the subcomponent located in the first slot 810 may be an icon with the letter C engraved inside two partially overlapping circles.

FIG. 9 is a diagram for explaining a method for identifying status information associated with at least one slot through an interface.

According to one embodiment, a developer or UI designer can set the state information related to the object component by selecting the setting of the interface. Here, the interface is an interface for setting the state information related to at least one slot, which can be a figma. More specifically, the interface can include: a first area 901, which sets the state information of the object component itself; and a second area 902, which sets the state information of each of at least one subcomponent.

The first area 901 may be an area in the interface 900 of the second type of setting state information capable of setting the overall characteristics of the object component. That is, the first area 901 may be an area for setting the state information of the object component itself. More specifically, the type (type) of the first area 901 may correspond to the effect (effect) of the source code 400 and be set to tint. Furthermore, the size (Size) of the first area 901 may correspond to the size (size) of the source code 400 and be set to M. Furthermore, the color (Color) of the first area 901 may correspond to the color (Color) of the source code 400 and be set to green (green).

The second area 902 may be an area in the interface 900 that can set a portion of the status information of at least one slot. For example, regarding the first slot, i.e., the start slot, the second area 902 may include a sub-area for selecting the image data located in the first slot as one of an icon, a logo, a circular image, and a square image; and a sub-area for selecting one of the multiple image data of the selected type. Referring to FIG. 9 , the image data located in the first slot is set as an icon. Furthermore, the image data located in the first slot may correspond to the icon in the first slot 610 of FIG. 6 in the icon. Furthermore, whether to activate the first slot, i.e., the start slot, may also be set by the second area 902.

Source code 910 may be source code in which the status information of at least one slot set in interface 900 is transformed. In the status information of at least one slot set in interface 900, as slot 3 as the bottom slot is deactivated, the first field 911 in source code 910 only includes status information related to slot 1, i.e., the start slot, slot 2, i.e., the content slot, and slot 4, i.e., the end slot, and may not include status information of the deactivated slot 3, i.e., the bottom slot.

In the status information of at least one slot set in the interface 900 in the source code 920, since the third slot, i.e., the bottom slot, and the fourth slot, i.e., the end slot, are disabled, the first field 921 in the source code 920 only includes the status information related to the first slot, i.e., the start slot, and the second slot, i.e., the content slot, and may not include the status information of the disabled third slot, i.e., the bottom slot, and the fourth slot, i.e., the end slot.

FIG. 10 is a diagram following FIG. 9 and is used to illustrate an object component of an embodiment.

The object component 1000 may be a version of the object component generated based on the source code 910. Referring to FIG. 9, the first field 911 may not include the status information of the disabled third slot, i.e., the bottom slot. The object component 1000 generated based on the source code 910 may be the same as the object component 600 of FIG. 6. The bottom slot as the third slot of the object component 1000 may be an empty area.

The object component 1050 may be a version of the object component generated based on the source code 920. Referring to FIG. 9, the first field 921 may not include the status information of the disabled third slot, i.e., the bottom slot, and the fourth slot, i.e., the end slot. That is, the subcomponent may not be located in the third slot, i.e., the bottom slot, and the fourth slot, i.e., the end slot of the object component 1050 generated based on the source code 920, and the third slot, i.e., the bottom slot, and the fourth slot, i.e., the end slot of the object component 1050 may be empty areas. The subcomponent located in the first slot, i.e., the start slot, and the second slot, i.e., the content slot of the object component 1050 may be the same as the subcomponent located in the first slot, i.e., the start slot, and the second slot, i.e., the content slot of the object component 1000.

FIG. 11 is a block diagram illustrating an electronic device for generating a U1 component according to an embodiment.

The electronic device 1100 of FIG. 11 may correspond to the electronic device of the present invention. The electronic device 1100 of the present invention may include a processor 1110 and a memory 1120 according to an embodiment. A person with common sense in the technical field related to the present embodiment may understand that the components shown in FIG. 11 are not necessary for realizing the electronic device, and the electronic device 1100 described in the present invention may have more or less components than the components listed above. On the other hand, in the embodiment, the processor 1110 may include at least one processor.

The processor 1110 can control the overall operation of the electronic device 1100 and process data and signals. The processor 1110 can implement one of the methods described in Figures 1 to 11 above. The processor 1110 can control the embodiments implemented by the electronic device 1100 through the interaction with the memory 1120 and the components that the electronic device 1100 may further include.

One or more processors 1110 may control an embodiment of the electronic device 1100 by interacting with the memory 1120 and the components that the electronic device 1100 may further include. According to one embodiment, one or more processors 1110 may be as follows: confirm an object component by executing one or more commands, confirm at least one slot of the object component, identify state information associated with at least one slot in source code associated with the object component, determine at least one subcomponent corresponding to the at least one slot based on the state information, and generate an object component including at least one subcomponent based on the hierarchical structure of the object component.

The memory 1120 can store information for implementing at least one method described in Figures 1 to 11 above. The memory 1120 can be called a memory, which can be a volatile memory or a non-volatile memory. In addition, the memory 1120 can store one or more commands required to implement the actions of the processor 1110, and can temporarily store data stored on the platform or in an external memory. The memory 1120 can store source code related to the object component, data of at least one subcomponent, and information of the hierarchical structure of the object component. In addition, the memory 1120 can store various versions of the object component including the default version of the object component.

The electronic device 1100 may further include a transceiver (not shown). The transceiver may include a transceiver that communicates with an external device using wireless communication technology. The external device may be a client device, a terminal, an open source platform, or a server. The communication technologies used by the transceiver may include GSM (Global System for Mobile communication), CDMA (Code Division Multi Access), LTE (Long Term Evolution), 5G (5th Generation Mobile Communication Technology), WLAN (Wireless LAN), Wi-Fi (Wireless-Fidelity), Bluetooth, RFID (Radio Frequency Identification), Infrared Data Association (IrDA), Zigbee, NFC (Near Field Communication), etc., but are not limited to these.

On the other hand, this specification and drawings disclose the preferred embodiments of the present invention. Although specific terms are used, they are used only in a general sense to easily explain the technical content of the present invention and help understand the invention, and are not intended to limit the scope of the present invention. Obviously, for those with common sense in the technical field to which the present invention belongs, in addition to the embodiments disclosed here, other variations based on the technical ideas of the present invention can also be implemented.

The electronic device or terminal of the above embodiment may include a processor, a memory for storing and executing program data, a permanent storage such as a disk drive, a communication port for communicating with external devices, a user interface device such as a touch panel, a key, an icon, etc. The method implemented by the software module or algorithm can be stored in a computer-readable recording medium as a computer-readable code or program command that can be executed on the above processor. Here, as computer-readable recording media, there are magnetic storage media (e.g., ROM (read-only memory), RAM (random-Access memory), floppy disk, hard disk, etc.) and optical readable media (e.g., CD-ROM, DVD: Digital Versatile Disc)). Computer-readable recording media are distributed in computer systems connected to the network, so that computer-readable codes can be stored and executed in a distributed manner. The media can be read by the computer, stored in the memory, and executed in the processor.

The present embodiment may be represented by a functional block structure and various processing steps. Such functional blocks may be implemented by different numbers of hardware and/or software structures that perform specific functions. For example, the embodiment may be implemented by an integrated circuit structure that can perform various functions such as memory, processing, logic, look-up tables, etc. through the control of one or more microprocessors or other control devices. The components may be executed by software programs or software components. Similarly, the present embodiment includes algorithms implemented by a combination of data structures, programs, routines, or other program structures, and thus may be implemented by programming or scripting languages such as C, C++, Java, assemblers, and Python. In terms of functionality, it can be implemented by algorithms executed in one or more processors. In addition, this embodiment can use prior art to perform electronic environment settings, signal processing and/or data processing. Terms such as "mechanism", "component", "mechanism", and "structure" can be used widely and are not limited to mechanical and physical structures. The above terms can be associated with processors and include the meaning of a series of processes (routines) of software.

The above embodiment is only an example, and other embodiments can be implemented within the scope of the invention application described below.

300: Status information tree

310: Type 2 status information

311: Status information

312: Status information

313: Status information

314: Status information

320: Hierarchy of object components

321: Image-related subcomponents

322: Text related subcomponents

323: Text related subcomponents

324:Key-related subcomponents

Claims (13)

A method for generating a UI component, which is performed by an electronic device, comprises the following steps: confirming an object component; confirming at least one slot of the object component; identifying state information related to the at least one slot in source code related to the object component; determining at least one subcomponent corresponding to the at least one slot according to the state information; and generating the object component including the at least one subcomponent based on the hierarchical structure of the object component, wherein the step of identifying the state information comprises using a first-level application programming interface (API) or a second-level API to identify the state information according to whether the object component is an object component of a predetermined style based on the source code. As in the method for generating a UI component of claim 1, the step of identifying the above-mentioned state information includes the following steps: if the above-mentioned object component is an object component of the above-mentioned predefined style, using the above-mentioned level 1 API, determining the state information of the first type in the above-mentioned state information as the set default state information of the first type; and using the above-mentioned level 1 API, identifying the state information of the second type in the above-mentioned state information in the above-mentioned source code. A method for generating a UI component as in claim 2, wherein the source code includes: a first field indicating that the state information of the first type is set to the default state information of the first type; and a second field indicating the state information of the second type. In the method for generating a UI component as in claim 1, the step of identifying the above-mentioned state information includes the following steps: if the above-mentioned object component is not an object component of the above-mentioned predefined style, using the above-mentioned level 2 API to identify the state information of the first type and the state information of the second type in the above-mentioned source code. A method for generating a UI component as in claim 4, wherein the second level API is an API used when the source code includes a third field, and the third field indicates that at least a portion of the first type of status information is set to the first type of status information that is different from the set first type of default status information. A method for generating a UI component as in claim 1, wherein the default version of the object component includes at least one default subcomponent, and the default subcomponent corresponds to the default state information associated with the at least one slot. The method for generating a UI component as claimed in claim 5, wherein the state information of the first slot in the at least one slot is different from the default state information of the first slot in the default version of the object component, and the state information of the second slot in the at least one slot is the default state information of the second slot in the default version of the object component, the source code includes: a first subfield, which indicates that the state information of the first slot is set to state information different from the default state information of the first slot; and a second subfield, which indicates that the state information of the second slot is set to the default state information of the second slot. As in the method for generating a UI component of claim 1, the step of identifying the above-mentioned state information further includes the following steps: identifying the state information related to the above-mentioned at least one slot through an interface. A method for generating a UI component as in claim 8, wherein the interface includes: a first area for setting the state information of the object component; and a second area for setting the state information of each of the at least one subcomponent. As in claim 1, the method for generating a UI component, wherein the step of determining the at least one subcomponent comprises the following steps: based on the state information, identifying the data of each of the at least one subcomponent; the step of generating the object component comprises the following steps: based on the state information, rendering the data of each of the at least one subcomponent to satisfy the hierarchical structure, thereby generating the object component. A method for generating a UI component as in claim 1, wherein the source code is either a source code in the form of xml or a source code in the form of json. An electronic device for generating a UI component, comprising: one or more processors; and a memory storing one or more commands executed by the one or more processors; and the one or more processors confirm an object component by executing the one or more commands, confirm at least one slot of the object component, identify state information related to the at least one slot in source code related to the object component, and generate a UI component according to the state information. state information, determining at least one subcomponent corresponding to the at least one slot, and generating the object component including the at least one subcomponent based on the hierarchical structure of the object component, wherein the one or more processors are further configured to identify the state information using a first-level application programming interface (API) or a second-level API according to whether the object component is an object component of a predefined style based on the source code. A non-transitory computer-readable recording medium recording a program for executing the method of claim 1 in a computer.