CN115951811B - 一种组件生成方法和装置 - Google Patents

Abstract

本发明提供了一种组件生成方法和装置，可以响应于用户对第一展示窗口中目标组件图标的第一选择操作，在第二展示窗口中展示目标组件集的操作界面。然后可响应于用户在操作界面的组件状态框中的组件增加操作，在第一展示窗口中至少增加一个和目标组件图标相同的第一组件图标。响应于用户在第一展示窗口中对目标组件图标或任一第一组件图标的第二选择操作，在组件状态框中展示和目标组件图标或任一第一组件图标相对应的属性选择框。响应于用户在各属性选择框中的选择操作，将各选中的属性与目标组件图标或任一第一组件图标相关联，能够有效降低组件在展示和管理的复杂性，有效减少对组件库空间的占用。

Description

一种组件生成方法和装置

技术领域

本发明涉及软件设计技术领域，具体涉及一种组件生成方法和装置。

背景技术

在产品涉及、软件开发等过程中，经常会使用到各种组件，这些组件会在用户进行不同的操作时，呈现不同的效果。如当用户的光标悬停在组件上和点击组件时组件会呈现不同的颜色。现有的设计方法要么需要展开组件的图层结构，通过隐藏或展示相应的底色图层，会使图层结构非常复杂，在调用过程中出错的概率很高。要么将组件的多种交互状态均作为独立的组件创建出来，这样会使组件库体积增大，不易进行查找和管理。

发明内容

为了解决现有技术存在的占用空间大、不便管理、操作复杂的问题，本发明提供了一种组件生成方法和装置，其具有操作简单、易管理等特点。

根据本发明具体实施方式提供的一种组件生成方法，包括：

响应于用户对第一展示窗口中目标组件图标的第一选择操作，在第二展示窗口中展示目标组件集的操作界面；

响应于用户在所述操作界面的组件状态框中的组件增加操作，在所述第一展示窗口中至少增加一个和所述目标组件图标相同的第一组件图标；

响应于用户在所述第一展示窗口中对所述目标组件图标或任一第一组件图标的第二选择操作，在所述组件状态框中展示和所述目标组件图标或用户选择的任一第一组件图标相对应的属性选择框；

响应于用户在各所述属性选择框中的选择操作，将各选中的属性与所述目标组件图标或所述用户选择的任一第一组件图标相关联。

进一步地，所述响应于用户对第一展示窗口中目标组件图标的第一选择操作，在第二展示窗口中展示目标组件集的操作界面之后，还包括：

在所述目标组件图标上显示添加图标，并响应于对所述添加图标的第一点击操作在所述第一展示窗口中增加一个和所述目标组件图标相同的第二组件图标。

进一步地，所述响应于用户对第一展示窗口中目标组件图标的第一选择操作，在第二展示窗口中展示目标组件集的操作界面之后，还包括：

在每次增加一个所述第一组件图标后，将所述添加图标显示至最新的第一组件图标上。

进一步地，所述组件生成方法还包括：响应于用户在所述操作界面的组件状态框中的属性增加操作，在组件状态框中增加一个第一属性选择框，并将用户输入的属性和所述第一属性选择框相关联。

进一步地，所述组件生成方法还包括：响应于用户对第二属性选择框的第一移动操作，将所述第二属性选择框移动到所述第一移动操作完成的位置，并将所述第二属性选择框之后的属性选择框依次向前移动。

进一步地，所述组件生成方法还包括：响应于对任一属性选择框中第一属性的第二移动操作，将所述第一属性移动到所述第二移动操作完成的位置，并将所述第一属性之后的属性依次向前移动。

进一步地，所述组件生成方法还包括：响应于用户在第三属性选择框上的第一停留操作，展示类型调整界面；

响应于用户对所述类型调整界面的第二点击操作，展示可编辑状态的类型调整界面供用户进行类型调整。

进一步地，所述组件生成方法还包括：响应于用户在目标属性选择框中的第二属性的第二停留操作，展示属性调整界面；

当所述目标属性选择框中所包含的属性数量不少于两个时，响应于用户在所述属性调整界面的删除操作，删除所述第二属性。

进一步地，所述组件生成方法还包括：响应于用户在所述操作界面的组件描述框中的描述增加操作，将用户输入的描述内容与所述目标组件图标或所述用户选择的任一第一组件图标相关联。

根据本发明具体实施方式提供的一种组件生成装置，包括：

第一展示模块，用于响应于用户对第一展示窗口中目标组件图标的第一选择操作，在第二展示窗口中展示目标组件集的操作界面；

第一增加模块，用于响应于用户在所述操作界面的组件状态框中的组件增加操作，在所述第一展示窗口中至少增加一个和所述目标组件图标相同的第一组件图标；

第二展示模块，用于响应于用户在所述第一展示窗口中对所述目标组件图标或任一第一组件图标的第二选择操作，在所述组件状态框中展示和所述目标组件图标或用户选择的任一第一组件图标相对应的属性选择框；以及

第一关联模块，用于响应于用户在各所述属性选择框中的选择操作，将各选中的属性与所述目标组件图标或所述用户选择的任一第一组件图标相关联。

本发明提供了一种组件生成方法和装置，可以响应于用户对第一展示窗口中目标组件图标的第一选择操作，在第二展示窗口中展示目标组件集的操作界面。然后可响应于用户在操作界面的组件状态框中的组件增加操作，在第一展示窗口中至少增加一个和目标组件图标相同的第一组件图标。响应于用户在第一展示窗口中对目标组件图标或任一第一组件图标的第二选择操作，在组件状态框中展示和目标组件图标或任一第一组件图标相对应的属性选择框。响应于用户在各属性选择框中的选择操作，将各选中的属性与目标组件图标或任一第一组件图标相关联。该组件生成方法和装置通过两个展示窗口可实现组件集的生成以及对组件集中每个组件的属性设置，只占用一个组件位置即可完成组件的生成，降低了组件在展示和管理的复杂性，并可有效减少对组件库空间的占用。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。

图1是根据一示例性实施例提供的组件生成方法的流程图；

图2是根据一示例性实施例提供的组件集的初始界面图；

图3是根据一示例性实施例提供的组件集的构建界面；

图4是根据一示例性实施例提供的属性及组件添加界面；

图5是根据一示例性实施例提供的属性增加界面；

图6是根据一示例性实施例提供的属性类型交换界面；

图7是根据一示例性实施例提供的属性交换界面；

图8是根据一示例性实施例提供的类型删减界面；

图9是根据一示例性实施例提供的属性值选择界面；

图10是根据一示例性实施例提供的组件实例界面；

图11是根据一示例性实施例提供的生成的组件集的界面；

图12是根据一示例性实施例提供的组件的调整界面；

图13是根据一示例性实施例提供的组件生成装置的结构图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

参照图1所示，本发明的实施例提供了一种组件生成方法，该方法可以包括以下步骤：

101、响应于用户对第一展示窗口中目标组件图标的第一选择操作，在第二展示窗口中展示目标组件集的操作界面。

组件集是组件状态的容器，其子级只能包含可变组件。组件放入组件集 时，组件将赋予属性和值变为可变组件。支持所有容器属性，并可更改样式。用户可在第一展示窗口中输入需要进行功能组合的一个组件，当用户在选中该目标组件图标后，在与第一展示窗口相邻的第二展示窗口中展示目标组件的操作界面。

102、响应于用户在操作界面的组件状态框中的组件增加操作，在第一展示窗口中至少增加一个和目标组件图标相同的第一组件图标。

参照图2所示，在左侧的窗口中选中单个组件，在右侧窗口的属性栏显示「组件状态」一栏，点击组件状态项目「+」按钮，执行创建组件集操作。参照图3所示，在自动新建了组件集后，将选中的 组件放置进 组件集里，即左侧窗口的虚线框中即为组件集。

103、响应于用户在第一展示窗口中对目标组件图标或任一第一组件图标的第二选择操作，在组件状态框中展示和目标组件图标或用户选择的任一第一组件图标相对应的属性选择框。

参照图3右侧所示，在选中「组件集」时，属性栏「组件状态」选项出现在「组件」和「自动布局」。并展示如类型属性，状态属性等类型的属性，和各个类型属性所包含的属性，如类型中包括文字和图标文字。状态中包含常规、按下、悬停和禁用四个属性。

104、响应于用户在各属性选择框中的选择操作，将各选中的属性与目标组件图标或用户选择的任一第一组件图标相关联。

在用户可通过光标等操作工具逐个选中各类型属性中的属性值后，即可完成组件的创建，生成一个新的组件。该组件生成方法使组件的调用更加灵活和更快捷。同时在浏览和查找组件时更聚焦，降低了组件在展示时的复杂性。

在本发明的另一具体实施例中，在响应于用户对第一展示窗口中目标组件图标的第一选择操作，在第二展示窗口中展示目标组件集的操作界面之后，还可包括：

在目标组件图标上显示添加图标，并响应于对添加图标的第一点击操作在第一展示窗口中增加一个和目标组件图标相同的第二组件图标。

参照图3所示，在组件上增加+按钮，在每次点击该增加图标后会增加一个新的组件图标。并且在每次增加一个新的第一组件图标后，可将添加图标显示至最新的第一组件图标上。即图3中左侧所示的将+图标移动到下一个组件图标上。

当用户在操作界面的组件状态框中进行属性增加操作时，在组件状态框中增加一个第一属性选择框，并将用户输入的属性和第一属性选择框相关联。

参照图4所示，在点击「组件状态」旁边的「…」表示更多操作的图标时，点击触发下拉菜单，下拉菜单中包括添加可变组件和添加新的属性两种操作。当点击「添加可变组件」，执行添加 可变组件操作，在左侧的第一展示窗口中增加一个组件图标。在点击「添加新的属性」时执行添加属性操作，参照图5所示，添加新的属性，并激活编辑态，内容为属性4，其中参照图8所示，当点击键盘上的ESC按键或每个类的旁边的「-」取消添加。当按下enter、tab、输入框 blur 状态时可完成添加。

在用户对第二属性选择框进行第一移动操作时，将第二属性选择框移动到第一移动操作完成的位置，并将第二属性选择框之后的属性选择框依次向前移动。

参照图6所示，用户可通过鼠标拖拽的操作将表征状态和大小属性框可相关联下的各个属性进行整体的移动，进而完成位置的交换。

当用户在对任一属性选择框中第一属性的第二移动操作，将第一属性移动到第二移动操作完成的位置，并将第一属性之后的属性依次向前移动。

参照图7所示，当属性列表中有多个属性时，其顺序可以进行调整，在调用时，属性下拉菜单将遵循组建集的属性顺序用户可通过鼠标拖拽的方式将类型属性下边的文字属性和图标文字属性进行位置的交换。

当用户在第三属性选择框上进行第一停留操作时，可展示类型调整界面。

并可响应于用户对类型调整界面的第二点击操作，展示可编辑状态的类型调整界面供用户进行类型调整。

即属性的类型如状态、大小等可进行修改，在将光标悬停在相应的属性框上时，可出现输入框，在点击输入框后即可进行名称的编辑。

当然也可响应于用户在目标属性选择框中的第二属性的第二停留操作，展示属性调整界面。当目标属性选择框中所包含的属性数量不少于两个时，响应于用户在所述属性调整界面的删除操作，删除第二属性。

参照图8所示，即当光标悬停在具体的属性项上时显示输入框，当只有一个属性时，不显示输入框也不能删除该属性。在属性不少于两个时点击触发删除属性操作，从而完成所有子可用组件的该属性的删除。

参照图2所示，在第二展示窗口的上部还设有组件描述框，可用于进行组件信息的描述，可响应于用户在操作界面的组件描述框中的描述增加操作，将用户输入的描述内容与目标组件图标或所述用户选择的任一第一组件图标相关联。

作为上述实施例可行的实现方式，参照图9和图10所示，可变组件是赋予了属性和状态的组件，只能存在于组件集里。在选中第一展示窗口中的组件集后，默认样式为紫色虚线描边，在组件图标的右下角悬浮添加功能按钮「+」。当选中「组件集」或「可用组件」显示该按钮。在多选「组件集」不显示该按钮。

当组件赋予属性为属性1。其属性值为默认，所选组件成为可变组件。选中可变组件后可以设置它的属性和值其中属性显示分类名称。值属性的选项如常规、按下、悬停、禁用等属性值，是一个可输入菜单。

点击输入，可修改值，修改后若为新添加的值则添加在下拉菜单的值列表中。

值的下拉激活下拉加载已有值菜单。选中下拉菜单中的选项可直接添加。

参照图11和图12所示为生成的可变组件的实例，是赋予了属性和状态的 实例。可以通过切换不同状态替换不同可变实例。其可为从组件集调用出来的图层。复制可变组件粘贴到画布即可，或按住option拖动可变组件即可。

实例菜单可展示组件名称处，右侧的下拉箭头，点击打开同一分组或相同尺寸的实例的列表，当直接找到关联组件时，按钮可用，找不到关联组件时，按钮禁用。「…」其他按钮（下拉菜单），同之前逻辑。

六边形的按钮可进行解绑组件、重置组件和所有属性的操作。

可以通过在不同属性内选择下拉菜单中的不同值来切换到你想要的组件状态。并且当该属性只有两个值，同时值内容为“true”/“false”或者“是”/“否”组合时，显示为switch组件。

基于同样的设计思路，参照图13所示，本发明的实施例还提供了一种组件生成装置，该装置在运行时，可实现上述组件生成方法的各个步骤，该装置可以包括：

第一展示模块1301，用于响应于用户对第一展示窗口中目标组件图标的第一选择操作，在第二展示窗口中展示目标组件集的操作界面。

第一增加模块1302，用于响应于用户在操作界面的组件状态框中的组件增加操作，在第一展示窗口中至少增加一个和目标组件图标相同的第一组件图标。

第二展示模块1303，用于响应于用户在第一展示窗口中对目标组件图标或任一第一组件图标的第二选择操作，在组件状态框中展示和目标组件图标或用户选择的任一第一组件图标相对应的属性选择框。以及

第一关联模块1304，用于响应于用户在各属性选择框中的选择操作，将各选中的属性与目标组件图标或用户选择的任一第一组件图标相关联。

进一步地，该组件生成装置还包括第一增加模块，用于在目标组件图标上显示添加图标，并响应于对添加图标的第一点击操作在第一展示窗口中增加一个和目标组件图标相同的第二组件图标。

进一步地，该组件生成装置还包括第二增加模块，用于在每次增加一个第一组件图标后，将添加图标显示至最新的第一组件图标上。

进一步地，该组件生成装置还包括：第二关联模块，用于响应于用户在操作界面的组件状态框中的属性增加操作，在组件状态框中增加一个第一属性选择框，并将用户输入的属性和第一属性选择框相关联。

进一步地，该组件生成装置还包括：第一移动模块，用于响应于用户对第二属性选择框的第一移动操作，将第二属性选择框移动到第一移动操作完成的位置，并将第二属性选择框之后的属性选择框依次向前移动。

进一步地，该组件生成装置还包括：第二移动模块，用于响应于对任一属性选择框中第一属性的第二移动操作，将第一属性移动到第二移动操作完成的位置，并将第一属性之后的属性依次向前移动。

进一步地，该组件生成装置还包括：第一调整模块，用于响应于用户在第三属性选择框上的第一停留操作，展示类型调整界面。

响应于用户对类型调整界面的第二点击操作，展示可编辑状态的类型调整界面供用户进行类型调整。

进一步地，该组件生成装置还包括：第二调整模块，用于响应于用户在目标属性选择框中的第二属性的第二停留操作，展示属性调整界面。

当目标属性选择框中所包含的属性数量不少于两个时，响应于用户在属性调整界面的删除操作，删除第二属性。

进一步地，该组件生成装置还包括：第三关联模块，用于响应于用户在操作界面的组件描述框中的描述增加操作，将用户输入的描述内容与目标组件图标或用户选择的任一第一组件图标相关联。

该组件生成装置具有和上述组件生成方法同样的有益效果，其具体实现方式可参照上述组件生成方法的实施例，本发明在此不再赘述。

对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明并不受所描述的动作顺序的限制，因为依据本发明，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本发明所必须的。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本发明各实施例方法中的步骤可以根据实际需要进行顺序调整、合并和删减，各实施例中记载的技术特征可以进行替换或者组合。

本发明各实施例种装置及终端中的模块和子模块可以根据实际需要进行合并、划分和删减。

本发明所提供的几个实施例中，应该理解到，所揭露的终端，装置和方法，可以通过其它的方式实现。例如，以上所描述的终端实施例仅仅是示意性的，例如，模块或子模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个子模块或模块可以结合或者可以集成到另一个模块，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或模块的间接耦合或通信连接，可以是电性，机械或其它的形式。

作为分离部件说明的模块或子模块可以是或者也可以不是物理上分开的，作为模块或子模块的部件可以是或者也可以不是物理模块或子模块，即可以位于一个地方，或者也可以分布到多个网络模块或子模块上。可以根据实际的需要选择其中的部分或者全部模块或子模块来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能模块或子模块可以集成在一个处理模块中，也可以是各个模块或子模块单独物理存在，也可以两个或两个以上模块或子模块集成在一个模块中。上述集成的模块或子模块既可以采用硬件的形式实现，也可以采用软件功能模块或子模块的形式实现。

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件单元，或者二者的结合来实施。软件单元可以置于随机存储器（RAM）、内存、只读存储器（ROM）、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (10)

1.一种组件生成方法，其特征在于，包括：

响应于用户对第一展示窗口中目标组件图标的第一选择操作，在第二展示窗口中展示目标组件集的操作界面；

响应于用户在所述操作界面的组件状态框中的组件增加操作，在所述第一展示窗口中至少增加一个和所述目标组件图标相同的第一组件图标；

响应于用户在所述第一展示窗口中对所述目标组件图标或任一第一组件图标的第二选择操作，在所述组件状态框中展示和所述目标组件图标或用户选择的任一第一组件图标相对应的属性选择框；

响应于用户在各所述属性选择框中的选择操作，将各选中的属性与所述目标组件图标或所述用户选择的任一第一组件图标相关联。

2.根据权利要求1所述的方法，其特征在于，所述响应于用户对第一展示窗口中目标组件图标的第一选择操作，在第二展示窗口中展示目标组件集的操作界面之后，还包括：

在所述目标组件图标上显示添加图标，并响应于对所述添加图标的第一点击操作在所述第一展示窗口中增加一个和所述目标组件图标相同的第二组件图标。

3.根据权利要求2所述的方法，其特征在于，所述响应于用户对第一展示窗口中目标组件图标的第一选择操作，在第二展示窗口中展示目标组件集的操作界面之后，还包括：

在每次增加一个所述第一组件图标后，将所述添加图标显示至最新的第一组件图标上。

4.根据权利要求1所述的方法，其特征在于，还包括：响应于用户在所述操作界面的组件状态框中的属性增加操作，在组件状态框中增加一个第一属性选择框，并将用户输入的属性和所述第一属性选择框相关联。

5.根据权利要求1所述的方法，其特征在于，还包括：响应于用户对第二属性选择框的第一移动操作，将所述第二属性选择框移动到所述第一移动操作完成的位置，并将所述第二属性选择框之后的属性选择框依次向前移动。

6.根据权利要求1所述的方法，其特征在于，还包括：响应于对任一属性选择框中第一属性的第二移动操作，将所述第一属性移动到所述第二移动操作完成的位置，并将所述第一属性之后的属性依次向前移动。

7.根据权利要求1所述的方法，其特征在于，还包括：响应于用户在第三属性选择框上的第一停留操作，展示类型调整界面；

响应于用户对所述类型调整界面的第二点击操作，展示可编辑状态的类型调整界面供用户进行类型调整。

8.根据权利要求1所述的方法，其特征在于，还包括：响应于用户在目标属性选择框中的第二属性的第二停留操作，展示属性调整界面；

当所述目标属性选择框中所包含的属性数量不少于两个时，响应于用户在所述属性调整界面的删除操作，删除所述第二属性。

9.根据权利要求1所述的方法，其特征在于，还包括：响应于用户在所述操作界面的组件描述框中的描述增加操作，将用户输入的描述内容与所述目标组件图标或所述用户选择的任一第一组件图标相关联。

10.一种组件生成装置，其特征在于，包括：

第一展示模块，用于响应于用户对第一展示窗口中目标组件图标的第一选择操作，在第二展示窗口中展示目标组件集的操作界面；

第一增加模块，用于响应于用户在所述操作界面的组件状态框中的组件增加操作，在所述第一展示窗口中至少增加一个和所述目标组件图标相同的第一组件图标；

第二展示模块，用于响应于用户在所述第一展示窗口中对所述目标组件图标或任一第一组件图标的第二选择操作，在所述组件状态框中展示和所述目标组件图标或用户选择的任一第一组件图标相对应的属性选择框；以及

第一关联模块，用于响应于用户在各所述属性选择框中的选择操作，将各选中的属性与所述目标组件图标或所述用户选择的任一第一组件图标相关联。

Images