CN118295656A - Component-based slot setting method and device - Google Patents

Abstract

The invention discloses a slot setting method and device based on components, wherein the method comprises the following steps: creating a component to be used in a page of a design end; creating a slot associated with the component based on the attributes of the component and the containers in the component, wherein the slot is a reserved content placeholder area for the component; creating at least one instance from a component associated with the slot; editing layer elements in the slots of the examples, rendering and synchronously updating the components, the examples and the display contents of the slots. The invention creates the slot associated with the component based on the attribute of the component and the container in the component, is convenient for freely editing the design element of the area in the slot, so that the user can carry out self-defined modification on the content of the area in the invoked component (instance), the component definer can set the layout specification in the component by using the slot, and the user of the component can carry out design in the specification area when the user of the component invokes the component to use the instance.

Description

Component-based slot setting method and device

Technical Field

The invention relates to the technical field of software design, in particular to a method and a device for setting a slot based on a component.

Background

Current user interface design tools or software both support the design operations performed by the user on the component. When a user interface design is made in the design tool, upon direct invocation of an existing component, a copy of the current component is created, i.e., the current component is replicated, referred to herein as an "instance". But when the component is invoked, the contents of the instance do not allow modification and adjustment, for example: delete, add new content, etc. As shown in fig. 2, the user (component user) often needs to modify and adjust the content of a partial area (custom content, custom footer) of an instance, so that the invoked component is not flexible enough when in use, and cannot meet the requirement that the user wants to perform custom modification on the content of the partial area (i.e. the slot area of the present application) in the component. For example, when a component user invokes a UI popup component, the middle portion of the UI popup is indeterminate and requires custom modification at the time of use, but the component cannot custom modify the internal content, resulting in limited flexibility of the popup. Also, as shown in FIG. 3, when the component user invokes the tab component, the number of tabs required is uncertain and custom modifications (increasing or decreasing the number of tab tags in the tab) are required at the time of use, but the component cannot custom modify the internal content, resulting in limited flexibility of the tab.

Therefore, the problem of how to set a "custom" area in a component by a component definer, and how to design in the "custom" area when a component user invokes a component use instance needs to be solved.

Disclosure of Invention

In view of the foregoing, the present invention has been made to provide a method and apparatus for setting a component-based slot that satisfies the problem that a user can customize and modify the contents of an internal area of a called component (hereinafter, an example).

According to an aspect of the present invention, there is provided a component-based slot setting method including:

Creating a component to be used in a page of a design end;

Creating a slot associated with the component based on the attributes of the component and the containers in the component, wherein the slot is a reserved content placeholder area of the component;

creating at least one instance from a component associated with the slot;

editing layer elements in the slots of the examples, rendering and synchronously updating the components, the examples and the display contents of the slots.

In an alternative manner, the creating a slot associated with the component based on the attribute of the component further includes:

creating slot attributes through the extended attributes of the components;

and associating the selected container in the component with the slot attribute to set the container as a slot.

In an alternative manner, the creating a slot associated with the component based on the container in the component further comprises:

Setting a container in the selected component as a slot attribute, and associating the container to the slot attribute to set the container as a slot.

In an alternative manner, after or simultaneously with editing the layer element in the slot of the instance, the method further includes:

Analyzing command parameters of the slot, checking whether the content or data of the slot is legal or not, and returning an error if the content or data of the slot is illegal; if it is legal, the slot reference is created and associated with the reference, definition, and layer identification of the layer element.

In an alternative manner, the slot further includes a design draft code conversion operation that converts a design end code of the slot into a front end slot code.

In an alternative, the method further comprises:

after the instance is created, the attribute of the instance and the attribute of the component keep synchronously changed;

Before unbinding the instance, when the instance is modified, only the attribute of the instance is changed, and the attribute of the component is not changed, wherein the layer element of the instance does not support the operations of adding, deleting and modifying in the current state.

In an alternative manner, the slot includes a layout specification setting operation that supports a target user to define a layout specification by region for the page of the design side through the component.

In an alternative, the method further comprises:

The slot unbinding operation is used for deleting related tasks, references and definitions according to the slot identification and synchronizing the components and the examples;

Slot deletion operations, including unbinding slots and deleting layers;

the instance switching operation with the slots is used for switching or reserving the slot effect of the previous assembly according to the names and the levels of the slots in the two assemblies;

The change operation of the component slot is used for judging whether the sub-layer is a slot or a component with the same instance, and whether the change operation is executed according to a judging result;

the change operation of the instance slot comprises a sub-layer editing operation, a sub-layer checking operation and a change executing operation;

And an instance slot resetting operation, which is used for resetting the instance slot, wherein slot allocation is not cleared when the slot is reset.

According to another aspect of the present invention, there is provided a component-based slot setting apparatus including:

The component creation module is used for creating a component to be used in a page of the design end;

A slot creation module for creating a slot associated with the component based on the attributes of the component and the containers in the component, wherein the slot is a reserved content placeholder area for the component;

an instance creation module for creating at least one instance from a component associated with the slot;

And the instance editing module is used for editing the layer element in the slot of the instance, rendering and synchronously updating the assembly, the instance and the display content of the slot.

According to the scheme provided by the embodiment of the invention, the components to be used are created in the page of the design end; creating a slot associated with the component based on the attributes of the component and the containers in the component, wherein the slot is a reserved content placeholder area of the component; creating at least one instance from a component associated with the slot; editing layer elements in the slots of the examples, rendering and synchronously updating the components, the examples and the display contents of the slots. The invention creates the slot associated with the component based on the attribute of the component and the container in the component, is convenient for freely editing the design element of the area in the slot, so that the user can carry out self-defined modification on the content of the area in the invoked component (instance), the component definer can set the layout specification in the component by using the slot, and the user of the component can carry out design in the specification area when the user of the component invokes the component to use the instance.

The foregoing description is only an overview of the present invention, and is intended to be implemented in accordance with the teachings of the present invention in order that the same may be more clearly understood and to make the same and other objects, features and advantages of the present invention more readily apparent.

Drawings

Various other advantages and benefits will become apparent to those of ordinary skill in the art upon reading the following detailed description of the preferred embodiments. The drawings are only for purposes of illustrating the preferred embodiments and are not to be construed as limiting the invention. Also, like reference numerals are used to designate like parts throughout the figures. In the drawings:

FIG. 1 is a flow chart of a component-based slot setting method according to an embodiment of the invention;

FIG. 2 illustrates a schematic diagram of a UI popup assembly in accordance with an embodiment of the invention;

FIG. 3 illustrates a schematic view of a tab bar assembly of an embodiment of the invention;

FIG. 4 shows a layout specification design schematic of an embodiment of the invention;

FIG. 5 illustrates a slot icon schematic diagram of an embodiment of the present invention;

FIG. 6 illustrates a schematic diagram of a creation entry of a slot in a component property in accordance with an embodiment of the present invention;

FIGS. 7 a-7 c illustrate a first slot creation flow diagram according to an embodiment of the present invention;

FIGS. 8 a-8 b illustrate a second slot creation flow diagram according to an embodiment of the invention;

FIGS. 9 a-9 c are diagrams illustrating a slot usage and a selected slot rear property panel according to an embodiment of the present invention;

FIG. 10 illustrates a flow diagram of component properties of an embodiment of the present invention;

FIG. 11 is a flow chart of a slot according to an embodiment of the invention;

FIG. 12 is a functional flow diagram of a socket according to an embodiment of the present invention;

FIG. 13a is a flow chart illustrating creation of a slot according to an embodiment of the present invention;

FIG. 13b is a flow chart illustrating the use of slots according to an embodiment of the present invention;

FIG. 13c is a flow chart illustrating the unbinding of slots according to an embodiment of the present invention;

FIG. 13d is a flowchart illustrating a method for deleting a slot according to an embodiment of the present invention;

FIG. 13e illustrates an example switch flow diagram with slots according to an embodiment of the present invention;

FIG. 13f is a schematic diagram illustrating a change flow to a component socket according to an embodiment of the present invention;

FIG. 13g illustrates a change flow diagram for an instance slot according to an embodiment of the present invention;

FIG. 13h illustrates a flowchart of a reset instance slot according to an embodiment of the present invention;

fig. 14 is a schematic structural view of a component-based slot arrangement apparatus according to an embodiment of the present invention.

Detailed Description

Exemplary embodiments of the present invention will be described in more detail below with reference to the accompanying drawings. While exemplary embodiments of the present invention are shown in the drawings, it should be understood that the present invention may be embodied in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the invention to those skilled in the art.

Prior to implementing the embodiments of the present invention, technical terms referred to hereinafter are explained in detail:

Slots: slots (slots) are functions vue provided for the encapsulator of the component, allowing a developer to define an uncertain, desired portion specified by a user as a Slot when encapsulating the component. The slot may be considered as a content placeholder reserved for a user during encapsulation of the component, and filled content may be specified for the slot when the component is used by a user of the component.

Named slot: in a component, multiple slots may be required to set multiple custom intervals, and on the technical side, in addition to the default slot, the slots need to be named to determine the location of a particular slot when in use.

Rendering scope: the slot content may access the data scope of the parent component because the slot content itself is defined in the parent component template. I.e. the content in the slot is allowed to be implemented using the data defined by the parent element itself, but not vice versa.

Scope slot: in some scenarios, a parent component needs to pass data content to a child component, and the manner in which the data is passed, namely the scope slot.

Vue: a JavaScript framework for building a user interface is built based on standard HTML, CSS, and JavaScript, and provides a set of declarative, componentized programming models.

And (3) assembly: it allows the UI to be divided into separate, reusable parts, in practice components are often organized into a hierarchical nested tree structure.

Embodiment one:

Because the functions of the current component instance are not flexible enough, the instance can be edited after being unbinding, but the instance becomes a common layer after unbinding, and the current component is not included any more, and the requirement of a user on custom modification of the content of a partial area (called as a slot area in the document) in the component cannot be met. The technical problem to be solved by the present embodiment is to set a partial area of a component that is frequently changed as a slot. The function of the slot is: firstly, the design elements of the partial area in the slot can be freely edited without unbinding the instance, and secondly, the layout specification is formulated. As shown in FIG. 2, a component definer may set a "custom" area with slots within the component, and a user of the component may design in the "custom" area when invoking a component use case. In addition, as shown in fig. 3, the component definer can set a "custom" area in the component by using a slot, and when the user of the component invokes the component use case, the user can adjust and increase the tab number in the "custom" area.

Fig. 1 is a flow chart illustrating a component-based slot setting method according to an embodiment of the present invention. Specifically, as shown in fig. 1, the method comprises the following steps:

step S101, creating a component to be used in a page of the design end.

A component (button, pop-up window, form, etc.) is created from the design side component library and configuration options (size, shape, color, font, logo, etc.) for the component are set.

Step S102, creating a slot associated with the component based on the attribute of the component and the container in the component, wherein the slot is a reserved content placeholder area of the component.

In this embodiment, the slots belong to a class of component attributes, as shown in fig. 6, including component status, display status, text content, instance switching, and slots, "slots" are created in the component attributes (a slot can be understood as an empty attribute without any entity at this time), then a container in the component is selected and associated with the slots created in the component attributes, and after the association is successful, the container becomes a slot. The functional icon of the slot is shown in FIG. 5 as a "#" sign (in the slot concept of vue "#" is commonly used for v-slot shorthand). The overall functionality of the socket is exposed as an extension of the component properties. The component property expansion is used firstly because the slot is also user modifiable in nature, and the type of user input is required, which accords with the design principle of the component property. Secondly, the name of the slot is also a content with practical meaning, and the name (name) as a component attribute is not obtrusive. Creation of slots in component properties portals as shown in fig. 6, clicking on the new component property ("+") on the right side of the component property selects the new property type (slot). It should be noted that the slot is created by "container", i.e., only "container" can be set as the slot. Because the slot is essentially an area and volume-consuming that is indicative of custom content, the container is most suitable, and all portals for non-legacy design software functions are mostly containers. The slots in this embodiment are reserved content placeholder regions for the components, i.e., reserved placeholder regions for the custom content of the components, which may be compared to "parking spaces" (i.e., reserved space for vehicle parking). That is, the function of the slot in the assembly is similar to the function of the parking space in a parking lot, in that space is reserved for a specific object to park or insert as desired.

In this embodiment, two slot creation modes including creation-before-association and creation-and-association are included. The slot creation mode of firstly creating and then associating comprises the following steps:

creating slot attributes through the extended attributes of the components;

and associating the selected container in the component with the slot attribute to set the container as a slot.

As shown in fig. 7a to 7c, a "component" is selected (Step 1), a "+" sign is clicked, a display state is selected (Step 2), a new attribute type is selected (including component state, display state, text content, instance switching and slot), a slot attribute is created at the component attribute, a pop-up window is created in the component attribute, a click is created (Step 3), step4 is entered to complete the adding operation, at this time, the slot attribute is not associated with any layer, then a container in the component is selected (Step 5), the slot attribute is associated with the container, and the container becomes a slot after the association.

The creation mode of the slot which is created and associated comprises the following steps:

Setting a container in the selected component as a slot attribute, and associating the container to the slot attribute to set the container as a slot.

As shown in fig. 8a to 8b, a container in a component is selected in the component, the "associated component attribute" button on the uppermost side of the attribute panel is clicked (Step 1), a slot attribute is created, when there is an associable slot, a window menu is flicked (Step 2) first, a new slot is clicked (Step 3, when there is no associable slot, a window mode flick frame is flicked directly), after creation, the container is directly associated with the created slot attribute (Step 4), and then when the component is selected, the added slot attribute can be seen (Step 5).

Step S103, at least one instance is created according to the component associated with the slot.

At least one instance is created from components associated with a slot that allows a designer to make flexible adjustments (adding new layer elements or deleting layer elements) in the slot area in the instance when invoking the component (instance), as shown in fig. 9 a-9 c. The new design element can be directly dragged into the slot area in a dragging mode, or a layer element can be directly built in the slot area.

Step S104, editing the layer elements in the slots of the examples, rendering and synchronously updating the components, the examples and the display contents of the slots.

The designer may modify the layer elements within the slot using various editing tools and render in real-time within the preview area of the slot. The slot function in this embodiment, in contrast to the existing component instance, allows a user to reserve content placeholders for the user of the component when the component is created. And when the user calls the component, the area reserved with the content can be modified and adjusted in the instance, so that the component instance has more flexibility.

In an alternative embodiment, after or simultaneously with editing the layer element in the slot of the instance, the method further includes:

Analyzing command parameters of the slot, checking whether the content or data of the slot is legal or not, and returning an error if the content or data of the slot is illegal; if it is legal, the slot reference is created and associated with the reference, definition, and layer identification of the layer element.

As shown in fig. 13b, after editing the layer element in the slot of the example, a verification operation is performed to ensure validity of the slot, and if an illegal situation is found, an error is returned. If validated, a slot reference is created and associated with a reference (reference), definition (definition), and layer identification (layerId) of the layer element.

In an alternative embodiment, the slot further includes a design draft code conversion operation that converts a design end code of the slot into a front end slot code.

For components and examples in the design tool, through the design draft code conversion function of the slot, the use of the slot code by a matched research and development engineer can be supported during D2C (design draft code conversion). Wherein front-end socket code (HTML, CSS, and JavaScript scripts) is used to render the socket content at the client. The design draft transcoding function enables designers and development engineers to work cooperatively better, the designers can intuitively define slots in the design tool, and the front end is automatically generated through the transcoding function.

In an alternative embodiment, the method further comprises:

after the instance is created, the attribute of the instance and the attribute of the component keep synchronously changed;

Before unbinding the instance, when the instance is modified, only the attribute of the instance is changed, and the attribute of the component is not changed, wherein the layer element of the instance does not support the operations of adding, deleting and modifying in the current state.

In this embodiment, the slot is dependent on the component, and the slot serves as an exchangeable content area inside the component, whose function is closely related to the component. The instance is a copy of the component, when the synchronous relation is established between the instance and the component after the instance is created, when the attribute of the component changes, all the attributes of the instance created based on the component also synchronously change correspondingly (change the attribute of the component and change the copy synchronously), so that the consistency between the component and the instance is ensured. However, when the attribute of an instance is modified alone, the attribute of the component is not affected, i.e. the copy is modified alone, only the attribute of the copy is changed, and the component attribute remains unchanged. Because an instance is considered a separate copy of a component, the instance property settings may be different from the properties of the component, and thus, may allow a designer to make adjustments to the instance without having to worry about affecting the properties of the component. Also, in this embodiment, the layer elements of the instance do not support add, delete, and modify operations in the current state. If the adding and deleting operations are allowed to be carried out on the layer elements of the instance, the attribute of the instance is not consistent with the attribute of the component, so that the synchronous relationship of the instance and the component is destroyed.

In an alternative embodiment, the slot includes a layout specification setting operation that supports a target user to define a layout specification by region for the page of the design side through the component.

In the current component method, a user cannot define a layout specification according to a region by a component, if the layout specification is to be defined, the component cannot be used, and the meaning of the specification is lost, namely, the user can only define rules (belonging to a design guideline) at the present stage, and cannot really form the specification in the component. In this embodiment, the slot includes a layout specification setting operation, which supports the target user to define the layout specification of the page of the design end according to the region through the component, as shown in fig. 4, the component definer may set the layout specification in the component by using the slot, and when the user of the component invokes the component use case, the user of the component may perform the design in the specified specification region. The layout specification setting operation of the slots allows the component definer to define the layout structure and style requirements of the page using the slots to preset the layout specification (including division of regions, arrangement, size and scale of elements, etc.) inside the component. When a user of the component invokes the component with the standard slot layout, the user can design the component in a specified standard area, and the user does not need to consider the layout problem again, so that the design operation is simplified, and the consistency and standardization of the page design style are ensured.

In an alternative embodiment, the method further comprises:

The slot unbinding operation is used for deleting related tasks, references and definitions according to the slot identification and synchronizing the components and the examples;

Slot deletion operations, including unbinding slots and deleting layers;

the instance switching operation with the slots is used for switching or reserving the slot effect of the previous assembly according to the names and the levels of the slots in the two assemblies;

The change operation of the component slot is used for judging whether the sub-layer is a slot or a component with the same instance, and whether the change operation is executed according to a judging result;

the change operation of the instance slot comprises a sub-layer editing operation, a sub-layer checking operation and a change executing operation;

And an instance slot resetting operation, which is used for resetting the instance slot, wherein slot allocation is not cleared when the slot is reset.

In this embodiment, as shown in fig. 10, a component attribute definition module (compon entPropDefinition) is configured to create and configure a definition of a component attribute, including a preference, a type, an attribute value, and the like of the component attribute. The component properties are associated by creating a component property association module (componentPropReference). The component instance is assigned an attribute value by a component instance assignment attribute module (componentPropAssignment). The slot flow is shown in fig. 11, and is based on the expansion of the component attribute, which has the advantage of multiplexing the component attribute logic shown in fig. 10, and the product must keep data and logic consistent with the component attribute. The functional flow of the slot is shown in fig. 12, and data interaction can be performed at the front end, the c++ end and the schema end through the slot. A new slot (slot) is created by a createSlot method of ComponentPropertyManager, and a mapping relation between component ids and slot ids (slot ids) is built at the C++ end according to slotName and type parameters (map < componentId, slotId >). In addition to the mapping of component IDs to slot IDs, there are also mappings of slot IDs to slot entities (map < slotId, slotDefinitio n >), mappings of component sub-layers to slot IDs (map < layerId, slotId >), etc. The components are associated with the slots using the createU seSlot method. The slot value is modified by the updateSlotValue method. renameSlot method alters the name of the slot. The slots are ordered by sortSlots method. All slots are listed by listSlots method. When the slot is no longer needed, the method deleteSlot is used for deleting, or the method detachSlot is used for unbinding the association of the slot and the component so as to release the memory resource related to the slot and update the related mapping relation.

Specifically, the process of creating slots is shown in fig. 13a, where the command parser traverses all components in the component set, and obtains the component ID of each component and the corresponding slot name. slotDefinition objects are created for each component and saved into map < slotId, slotDefinition >, the mapped key is slot ID (slotId), and the value is the corresponding slotDefinition object.

The flow of using slots is shown in fig. 13b, where the legal verification is to perform legal verification on the parsed slot command parameters to avoid system errors or anomalies. If the parameter check is passed, continuing to execute the subsequent operation, otherwise, returning error information.

The flow of unbinding slots is shown in FIG. 13c, deleting related tasks, references, and definitions according to the slot identification, and synchronizing components and instances.

The process of deleting slots is shown in FIG. 13d, and includes unbinding slots and deleting layers.

An example switching flow with slots is shown in fig. 13e, where the slot effect of the previous component is switched or reserved according to the names and the hierarchy of the slots in the two components.

As shown in FIG. 13f, the process of changing the component slots determines whether the sub-layer is a slot or a component of the same instance, and executes a change operation according to the determination result.

The change flow to the instance slot is shown in fig. 13g, and includes a sub-layer editing operation, a sub-layer checking operation, and a change execution operation.

The flow of resetting an instance slot is shown in FIG. 13h for resetting an instance slot, wherein slot allocation is not cleared when resetting the slot.

According to the scheme provided by the embodiment of the invention, the components to be used are created in the page of the design end; creating a slot associated with the component based on the attributes of the component and the containers in the component, wherein the slot is a reserved content placeholder area of the component; creating at least one instance from a component associated with the slot; editing layer elements in the slots of the examples, rendering and synchronously updating the components, the examples and the display contents of the slots. The invention creates the slot associated with the component based on the attribute of the component and the container in the component, is convenient for freely editing the design element of the area in the slot, so that the user can carry out self-defined modification on the content of the area in the invoked component (instance), the component definer can set the layout specification in the component by using the slot, and the user of the component can carry out design in the specification area when the user of the component invokes the component to use the instance.

Embodiment two:

Fig. 14 is a schematic structural view of a component-based slot arrangement apparatus according to an embodiment of the present invention. The component-based slot setting apparatus 14 includes: component creation module 1401, slot creation module 1402, instance creation module 1403, and instance editing module 1404.

A component creation module 1401, configured to create a component to be used in a page of a design end;

a slot creation module 1402 for creating a slot associated with the component based on the attributes of the component and the container in the component, wherein the slot is a reserved content placeholder area for the component;

An instance creation module 1403 for creating at least one instance from components associated with the slot;

An instance editing module 1404, configured to edit a layer element in a slot of the instance, render and synchronously update the component, the instance, and the presentation content of the slot.

In an alternative manner, the slot creation module 1402 is further configured to:

creating slot attributes through the extended attributes of the components;

and associating the selected container in the component with the slot attribute to set the container as a slot.

In an alternative manner, the slot creation module 1402 is further configured to:

Setting a container in the selected component as a slot attribute, and associating the container to the slot attribute to set the container as a slot.

In an alternative manner, after or simultaneously with editing the layer element in the slot of the instance, the method further includes:

Analyzing command parameters of the slot, checking whether the content or data of the slot is legal or not, and returning an error if the content or data of the slot is illegal; if it is legal, the slot reference is created and associated with the reference, definition, and layer identification of the layer element.

In an alternative manner, the slot further includes a design draft code conversion operation that converts a design end code of the slot into a front end slot code.

In an alternative, the method further comprises:

after the instance is created, the attribute of the instance and the attribute of the component keep synchronously changed;

Before unbinding the instance, when the instance is modified, only the attribute of the instance is changed, and the attribute of the component is not changed, wherein the layer element of the instance does not support the operations of adding, deleting and modifying in the current state.

In an alternative manner, the slot includes a layout specification setting operation that supports a target user to define a layout specification by region for the page of the design side through the component.

In an alternative, the method further comprises:

The slot unbinding operation is used for deleting related tasks, references and definitions according to the slot identification and synchronizing the components and the examples;

Slot deletion operations, including unbinding slots and deleting layers;

the instance switching operation with the slots is used for switching or reserving the slot effect of the previous assembly according to the names and the levels of the slots in the two assemblies;

The change operation of the component slot is used for judging whether the sub-layer is a slot or a component with the same instance, and whether the change operation is executed according to a judging result;

the change operation of the instance slot comprises a sub-layer editing operation, a sub-layer checking operation and a change executing operation;

And an instance slot resetting operation, which is used for resetting the instance slot, wherein slot allocation is not cleared when the slot is reset.

According to the scheme provided by the embodiment of the invention, the components to be used are created in the page of the design end; creating a slot associated with the component based on the attributes of the component and the containers in the component, wherein the slot is a reserved content placeholder area of the component; creating at least one instance from a component associated with the slot; editing layer elements in the slots of the examples, rendering and synchronously updating the components, the examples and the display contents of the slots. The invention creates the slot associated with the component based on the attribute of the component and the container in the component, is convenient for freely editing the design element of the area in the slot, so that the user can carry out self-defined modification on the content of the area in the invoked component (instance), the component definer can set the layout specification in the component by using the slot, and the user of the component can carry out design in the specification area when the user of the component invokes the component to use the instance.

The algorithms or displays presented herein are not inherently related to any particular computer, virtual system, or other apparatus. Various general-purpose systems may also be used with the teachings herein. The required structure for a construction of such a system is apparent from the description above. In addition, embodiments of the present invention are not directed to any particular programming language. It will be appreciated that the teachings of the present invention described herein may be implemented in a variety of programming languages, and the above description of specific languages is provided for disclosure of enablement and best mode of the present invention.

In the description provided herein, numerous specific details are set forth. However, it is understood that embodiments of the invention may be practiced without these specific details. In some instances, well-known methods, structures and techniques have not been shown in detail in order not to obscure an understanding of this description.

Similarly, it should be appreciated that in the above description of exemplary embodiments of the invention, various features of the embodiments of the invention are sometimes grouped together in a single embodiment, figure, or description thereof for the purpose of streamlining the disclosure and aiding in the understanding of one or more of the various inventive aspects. However, the disclosed method should not be construed as reflecting the intention that: i.e., the claimed invention requires more features than are expressly recited in each claim. Rather, as the following claims reflect, inventive aspects lie in less than all features of a single foregoing disclosed embodiment. Thus, the claims following the detailed description are hereby expressly incorporated into this detailed description, with each claim standing on its own as a separate embodiment of this invention.

Those skilled in the art will appreciate that the modules in the apparatus of the embodiments may be adaptively changed and disposed in one or more apparatuses different from the embodiments. The modules or units or components of the embodiments may be combined into one module or unit or component and, furthermore, they may be divided into a plurality of sub-modules or sub-units or sub-components. Any combination of all features disclosed in this specification (including any accompanying claims, abstract and drawings), and all of the processes or units of any method or apparatus so disclosed, may be used in combination, except insofar as at least some of such features and/or processes or units are mutually exclusive. Each feature disclosed in this specification (including any accompanying claims, abstract and drawings), may be replaced by alternative features serving the same, equivalent or similar purpose, unless expressly stated otherwise.

Furthermore, those skilled in the art will appreciate that while some embodiments herein include some features but not others included in other embodiments, combinations of features of different embodiments are meant to be within the scope of the invention and form different embodiments. For example, in the following claims, any of the claimed embodiments can be used in any combination.

Various component embodiments of the invention may be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. Those skilled in the art will appreciate that some or all of the functionality of some or all of the components according to embodiments of the present invention may be implemented in practice using a microprocessor or Digital Signal Processor (DSP). The present invention can also be implemented as an apparatus or device program (e.g., a computer program and a computer program product) for performing a portion or all of the methods described herein. Such a program embodying the present invention may be stored on a computer readable medium, or may have the form of one or more signals. Such signals may be downloaded from an internet website, provided on a carrier signal, or provided in any other form.

It should be noted that the above-mentioned embodiments illustrate rather than limit the invention, and that those skilled in the art will be able to design alternative embodiments without departing from the scope of the appended claims. In the claims, any reference signs placed between parentheses shall not be construed as limiting the claim. The word "comprising" does not exclude the presence of elements or steps not listed in a claim. The word "a" or "an" preceding an element does not exclude the presence of a plurality of such elements. The invention may be implemented by means of hardware comprising several distinct elements, and by means of a suitably programmed computer. In the unit claims enumerating several means, several of these means may be embodied by one and the same item of hardware. The use of the words first, second, third, etc. do not denote any order. These words may be interpreted as names. The steps in the above embodiments should not be construed as limiting the order of execution unless specifically stated.

Claims (9)

1. A component-based slot setting method, comprising:

Creating a component to be used in a page of a design end;

Creating a slot associated with the component based on the attributes of the component and the containers in the component, wherein the slot is a reserved content placeholder area of the component;

creating at least one instance from a component associated with the slot;

editing layer elements in the slots of the examples, rendering and synchronously updating the components, the examples and the display contents of the slots.

2. The method of claim 1, wherein creating a socket associated with the component based on the attributes of the component further comprises:

creating slot attributes through the extended attributes of the components;

and associating the selected container in the component with the slot attribute to set the container as a slot.

3. The method of claim 1 or 2, wherein the creating a slot associated with the component based on a container in the component further comprises:

Setting a container in the selected component as a slot attribute, and associating the container to the slot attribute to set the container as a slot.

4. The method of claim 1, wherein after or while editing the layer element within the slot of the instance, the method further comprises:

Analyzing command parameters of the slot, checking whether the content or data of the slot is legal or not, and returning an error if the content or data of the slot is illegal; if it is legal, the slot reference is created and associated with the reference, definition, and layer identification of the layer element.

5. The method of claim 1, wherein the socket further comprises a design draft code conversion operation that converts a design end code of the socket into a front end socket code.

6. The method according to claim 1, wherein the method further comprises:

after the instance is created, the attribute of the instance and the attribute of the component keep synchronously changed;

Before unbinding the instance, when the instance is modified, only the attribute of the instance is changed, and the attribute of the component is not changed, wherein the layer element of the instance does not support the operations of adding, deleting and modifying in the current state.

7. The method of claim 1, wherein the socket includes a layout specification setting operation that supports a target user to define a layout specification by region for pages of the design end through the component.

8. The method according to claim 1, wherein the method further comprises:

The slot unbinding operation is used for deleting related tasks, references and definitions according to the slot identification and synchronizing the components and the examples;

Slot deletion operations, including unbinding slots and deleting layers;

the instance switching operation with the slots is used for switching or reserving the slot effect of the previous assembly according to the names and the levels of the slots in the two assemblies;

The change operation of the component slot is used for judging whether the sub-layer is a slot or a component with the same instance, and whether the change operation is executed according to a judging result;

the change operation of the instance slot comprises a sub-layer editing operation, a sub-layer checking operation and a change executing operation;

And an instance slot resetting operation, which is used for resetting the instance slot, wherein slot allocation is not cleared when the slot is reset.

9. A component-based slot-setting apparatus, comprising:

The component creation module is used for creating a component to be used in a page of the design end;

A slot creation module for creating a slot associated with the component based on the attributes of the component and the containers in the component, wherein the slot is a reserved content placeholder area for the component;

an instance creation module for creating at least one instance from a component associated with the slot;

And the instance editing module is used for editing the layer element in the slot of the instance, rendering and synchronously updating the assembly, the instance and the display content of the slot.