CN101702126B - 一种图形界面编辑方法及装置 - Google Patents

Abstract

本发明公开了一种图形界面编辑方法，包括生成控件实例，添加到根面板的控件面板上；在所述控件面板的最高层设置蒙层，屏蔽所述控件面板上控件实例的行为属性；通过所述蒙层，对所述控件面板上的控件实例进行操作。本发明还公开了一种图形界面编辑装置。采用本发明实施例，能够实现设计人员在图形界面设计过程中的所见即所得。

Description

一种图形界面编辑方法及装置

技术领域

本发明涉及业务处理技术领域，特别是涉及一种图形界面编辑方法及装置。

背景技术

在软件开发工作中，构建图形界面是一项重要内容。图形界面是软件在被应用过程中最直接面向用户、和用户交互最多的软件组成部分。一般，图形界面由大量的控件组成。所述控件通常包括文本框、按钮、分隔窗格、表等。

设计图形界面的过程就是根据用户需求，将控件逐一放置到设计界面中，并在后台对控件属性进行编辑，使生成的图形界面中，各控件的展现形式满足用户的需求。

发明人通过对现有技术的研究发现，传统的图形界面编辑过程中，放置到设计界面中的控件，仅仅是各控件的简单示意，并不是真实控件的绘图实例。即为，设计过程中设计界面中展现的控件，与最终生成给用户的图形界面中展现的控件，其形式并不一致，无法做到所见即所得。因此，设计人员在图形界面设计过程中，只能根据用户需求凭借感觉去设置各控件的属性，无法获知该图形界面展示给用户时各控件的真实形式。从而很容易导致最终生成的用户图形界面与用户需求不完全一致。

发明内容

有鉴于此，本发明的目的在于提供一种图形界面编辑方法及装置，能够实现设计人员在图形界面设计过程中的所见即所得。

为实现上述目的，本发明提供了如下方案：一种图形界面编辑方法，所述方法包括：

生成控件实例，添加到根面板的控件面板上；

在所述控件面板的最高层设置蒙层，屏蔽所述控件面板上的控件实例的行为属性；

通过所述蒙层对所述控件面板上的控件实例进行操作。

优选地，所述生成控件实例具体为：

至少设置控件的状态属性或外观属性或行为属性，生成控件实例。

优选地，所述添加到根面板的控件面板上的控件实例为非容器类控件实例。

优选地，所述方法还包括：

在所述蒙层上添加容器类控件；

生成控件实例并添加到对应的容器类控件上；

分别为各容器类控件设置二级蒙层，屏蔽所述容器类控件上控件实例的行为属性；

通过所述二级蒙层对各容器类控件上的各控件实例进行操作。

优选地，所述通过所述蒙层对所述控件面板上的控件实例进行操作，具体为：

通过所述蒙层改变所述控件面板上的控件实例的位置或修改控件实例的外观属性。

优选地，所述通过所述二级蒙层，对各容器类控件上的各控件实例进行操作，具体为：

通过所述二级蒙层，改变各容器类控件上的控件实例的位置或修改控件实例的外观属性。

本发明还提供一种图形界面编辑装置，所述装置包括：

控件实例添加单元，用于生成控件实例，添加到根面板的控件面板上；

蒙层设置单元，用于在所述控件面板的最高层设置蒙层，屏蔽所述控件面板上的控件实例的行为属性；

操作单元，用于通过所述蒙层对所述控件面板上的控件实例进行操作。

优选地，所述控件实例添加单元具体为：至少设置控件的状态属性或外观属性或行为属性，生成控件实例。

优选地，所述控件实例添加单元中添加到根面板的控制面板上的控件实例为非容器类控件实例。

优选地，所述装置还包括：

容器类控件添加单元，用于在所述蒙层上添加容器类控件；

第二控件实例添加单元，用于生成控件实例并添加到对应的容器类控件上；

二级蒙层设置单元，用于分别为各容器类控件设置二级蒙层，屏蔽所述容器类控件上控件实例的行为属性；

第二操作单元，用于通过所述二级蒙层对各容器类控件上的各控件实例进行操作。

优选地，所述操作单元具体为：通过所述蒙层改变所述控件面板上的控件实例的位置或修改控件实例的外观属性。

优选地，所述第二操作单元具体为：通过所述二级蒙层，改变各容器类控件上的控件实例的位置或修改控件实例的外观属性。

根据本发明提供的具体实施例，本发明公开了以下技术效果：

本发明实施例，在图形界面的设计过程中，添加到控件面板上的控件实例，不再仅仅是各控件的简单示意，而是根据用户需求设置了相应属性后的真实按钮。此时，设计人员在控件面板上看到的控件实例，即为运行界面生成程序后，在图形界面中展现给用户的控件，由此实现了所见即所得。

同时，通过采用蒙层，避免设计人员在运用鼠标对控件面板上控件实例进行事件操作时，触发控件实例的行为属性，使得设计人员能够运用自如的对控件面板上各控件实例进行操作。

附图说明

图1是本发明实施例一的图形界面编辑方法流程图；

图2是本发明实施例一所述方法对应的控件面板示意图；

图3是本发明实施例二的图形界面编辑方法流程图；

图4是本发明实施例二所述方法对应的控件面板示意图；

图5是本发明实施例的图形界面编辑装置结构图。

具体实施方式

本发明的目的在于提供一种图形界面编辑方法及装置，能够实现设计人员在图形界面设计过程中的所见即所得。

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

参见图1，本发明实施例一提供的图形界面编辑方法包括以下步骤：

步骤S101：生成控件实例，添加到根面板的控件面板上；

对于图形界面设计而言，其设计界面一般都是由根面板和控件面板构成。其中，所述根面板用于放入控件面板，以便设计人员在所述控件面板上添加界面控件。

在现有技术中，添加到所述控件面板上的控件一般是指该控件对应的示意图标。例如，对于按钮控件，可以采用方框表示。则现有界面设计中，当需要在图形界面上显示一个按钮时，设计人员会在控件面板上添加一个表示按钮的方框，再根据用户需求，在后台编写代码，设置该按钮的属性。但是，经过该设置的按钮属性在控件面板中无法展现。对于设计人员来说，在控件面板中看到的，仍仅仅是方框。只有运行该图形界面的生成程序时，系统才会根据该按钮属性的设置代码，生成相应的按钮，显示在图形界面上展现给用户。

这里需要说明的是，控件的属性一般可以包括：状态属性、外观属性和行为属性。仍以按钮控件为例进行说明。其状态属性是控件的使用状态，例如可以包括可用、不可用、暂不可用等状态；外观属性指控件的外在展示的属性，例如可以包括颜色、或尺寸、或渲染效果等；行为属性是指控件对事件做出的反应，例如按钮控件的行为属性是对输入设备(例如鼠标)按下、点击等事件具有不同的反应。

而本发明实施例中，在设计过程中，便根据用户需求生成控件实例，展现在控件面板上。具体的，所述根据用户需求，生成控件实例具体为：设计人员根据用户的需求，设置控件的状态属性、外观属性、行为属性，生成控件实例。

这时，设计人员在控件面板上看到的，不再是控件的示意图，而是控件的实际视图，即已经根据用户需求对控件各项属性具体定义后的控件实例。例如，仍以按钮控件为例，其对应的控件实例不再仅仅是方框，而是根据用户需求设置了状态、外观、行为属性后的真实按钮。此时，设计人员在控件面板上看到的按钮，即为界面生成程序运行后，在图形界面中展现给用户的按钮，由此实现了所见即所得。

步骤S102：在所述控件面板的最高层设置蒙层，屏蔽所述控件面板上控件实例的行为属性；

其中，所述蒙层设置在所述控件面板的最高层，能够覆盖该控件面板上所有的控件实例。

通过步骤S101，使得本发明实施例中，添加到所述控件面板上的控件实例，已经具备了各控件的行为属性。因此，若设计人员直接运用鼠标对各控件实例进行事件操作，很可能会因为鼠标的点击触发其行为属性对应的事件，而无法实现需要的操作。

需要说明的是，所述事件操作可以包括：对各控件实例的外观属性进行修改、改变其放置位置等。

例如，以按钮控件为例进行说明。当设计人员需要运用输入设备(例如鼠标)对控件面板上的一个按钮控件实例进行拖拽操作，改变其放置位置时，需要首先用鼠标选中该按钮，再将其拖至需要的位置。但是，由于该按钮控件实例已经具备了按钮控件的行为属性，当设计人员用鼠标选中该按钮时，很可能会触发其行为属性，例如“被按下”。此时，所述按钮显示被按下，并将该按钮锁定在被按下状态，使得设计人员无法对其继续执行拖拽操作。

为了避免上述情形，在添加了控件实例的控件面板的最高层设置蒙层，使其能够屏蔽所述控件面板上各控件实例的行为属性，只接收设计人员在所述控件面板内对各控件实例进行的事件操作。

由此，当设计人员运用鼠标对控件面板上的各控件实例进行操作时，通过所述蒙层的屏蔽作用，避免触发控件实例的行为属性，使得操作能够顺利进行。

优选地，本发明实施例中，所述蒙层可以屏蔽所述控件面板上所有控件实例的实行属性；也可以只用于屏蔽控件面板上部分控件实例的行为属性。

具体的，为所述蒙层指定需要屏蔽的控件实例，当蒙层接收到设计人员运用输入设备发送的触发某个控件实例的行为属性的指令时，所述蒙层判断是否需要屏蔽该控件实例的行为属性，如果是，屏蔽该操作指令；如果否，执行该指令。

步骤S103：通过所述蒙层，对所述控件面板上的控件实例进行操作。

具体的，所述蒙层不仅用于屏蔽控件实例的行为属性，还能够接收设计人员的输入设备(如鼠标)事件，并对这些事件行为做出决策，实现设计人员运用输入设备对各控件实例的事件操作。

所述蒙层仅屏蔽了该控件实例的行为属性，设计人员仍然可以对控件实例的其他属性进行操作。通过所述蒙层，设计人员可以运用输入设备改变所述控件面板上控件实例的位置、或修改控件实例的外观属性等操作。

具体的，设计人员可以在所述蒙层上，运用输入设备选中某控件实例，而不必担心会激发该控件实例的行为属性。由此，设计人员可以通过输入设备(如鼠标)将该控件实例拖拽到控件面板上的任意位置，也可以根据用户需求对该控件实例的长、宽、高、色彩、渲染效果等外观属性进行修改。

需要说明的是，设计人员在蒙层上运用输入设备对控件实例进行事件操作时，实际上是由蒙层接收操作事件，并执行操作。

例如，设计人员需要通过蒙层对某一控件实例进行拖拽操作，蒙层接收该拖拽事件，判断被拖拽的是哪个控件、该控件是否允许被拖拽、拖拽后的位置是什么等，然后为该控件设置新的位置坐标。

通过所述蒙层对各控件实例行为属性的屏蔽作用，可以实现设计人员对所述控件面板上各控件实例的事件操作。

下面结合图2进行详细说明，参照图2，为本发明实施例一所述方法对应的控件面板示意图。

如图2所示，Viewer为根面板，Component为控件面板，控件面板上的阴影面板即为蒙层。所述控件面板设置在根面板上，在其上添加按钮、文本框等控件实例。通过所述蒙层的屏蔽作用，设计人员只能运用输入设备实现对该控制面板上的控件实例，如按钮、文本框等进行事件操作，而不能触发其行为属性。

本发明实施例一所述方法中，在图形界面的设计过程中，添加到控件面板上的控件实例，不再仅仅是各控件的简单示意，而是根据用户需求设置了相应属性后的真实按钮。此时，设计人员在控件面板上看到的控件实例，即为运行界面生成程序后，在图形界面中展现给用户的控件，由此实现了所见即所得。

同时，通过采用蒙层，避免设计人员在运用输入设备对控件面板上控件实例进行事件操作时，触发控件实例的行为属性，使得设计人员能够运用自如的对控件面板上各控件实例进行操作。

在图形界面设计中，可以根据该控件是否能够用来盛放其他控件将其分为两类：容器类控件和非容器类控件。

其中，容器类控件能够用于盛放其他控件；该类控件一般自身没有用户图形设计接口，仅依赖于其中所盛放的控件实现一定的功能。容器类控件的行为属性包括鼠标点击时，显示或隐藏该容器类控件内包含的所有控件。因此，将控件放置在一个容器类控件中，其主要目的在于，能够将一个容器类控件内包含的所有控件作为一个整体进行显示、隐藏、移动等。例如，页签控件(TabbedPane)。

对于本发明实施例一所述的方法，在图形界面设计时，若在控件面板上加入容器类型控件时，由于蒙层屏蔽了控件实例的行为属性，使得设计人员无法触发容器类控件的行为属性，使得一些操作无法实现。例如，在控件面板上设置多个页签控件，当用户需要在不同页签之间进行切换时，需要用鼠标点击各页签控件，使其显示或隐藏。但是，实施例一所述方法中，会因为蒙层的原因导致无法上述操作无法实现。本发明实施例二所述方法能够解决上述问题。

参见图3，本发明实施例二提供的图形界面编辑方法包括以下步骤：

步骤S301：生成非容器类控件实例，添加到根面板的控件面板上；

需要说明的是，本发明实施例二中，在所述根面板的控件面板上，可以仅添加非容器类控件。而将容器类控件添加在蒙层上，这样，就可以避免因蒙层导致无法实现对容器类控件行为属性的操作。

具体的，生成非容器类控件实例的过程与实施例一中步骤S101中所述生成控件实例的过程相同，不再赘述。

步骤S302：在所述控件面板的最高层设置蒙层，屏蔽所述控件面板上控件实例的行为属性；

步骤S303：通过所述蒙层，对所述控件面板上的控件实例进行操作；

本发明实施例二的步骤S302-303与实施例一的步骤S102-103相同，不再详细描述。

步骤S304：在所述蒙层上，添加容器类控件；

将所述容器类控件添加在位于控件面板最高层的蒙层上，以避免所述蒙层屏蔽设计人员触发该容器类控件的行为属性。

步骤S305：生成控件实例，分别添加到对应的容器类控件上；

具体的，可以根据用户需求，为各容器类控件设置相应的控件实例。当所述蒙层上包括多个容器类控件时，则根据用户的需求，将生成的控件实例分别放入各容器类控件上。

步骤S305中所述生成控件实例的具体过程与实施例一中步骤S101中相同。

步骤S306：分别为各容器类控件设置二级蒙层，屏蔽所述容器类控件上控件实例的行为属性；

步骤S307：通过所述二级蒙层，对容器类控件上的控件实例进行操作。

需要说明的是，为各容器类控件设置的二级蒙层，只屏蔽该容器类控件上添加的控件实例的行为属性，并不屏蔽该容器类控件的行为属性。因此，设计人员能够触发该容器类控件的行为属性，实现其显示或隐藏功能。同时，还可以避免触发该容器类控件上各控件实例的行为属性。

所述二级蒙层仅屏蔽了该容器类控件上的控件实例的行为属性，设计人员仍然可以对各控件实例的其他属性进行操作。具体的，通过所述二级蒙层，设计人员可以运用输入设备改变所述容器类控件上各控件实例的位置、或修改各控件实例的外观属性等操作。其具体操作过程与实施例一中所述通过蒙层进行操作的过程相同。

下面结合图4进行详细说明，参照图4，为本发明实施例二所述方法对应的控件面板示意图。

如图4所示，将文本框、按钮等非容器类控件添加在根面板的控件面板上，并在其最高层设置蒙层。在该蒙层上添加页签控件Tab1和页签控件Tab2。分别为两个页签控件添加对应的控件实例。例如，在页签控件Tab1上添加checkbox、radio、文本框等。

为页签控件Tab1和页签控件Tab2分别设置二级蒙层，且各二级蒙层只屏蔽各页签控件上各控件实例的行为属性。例如，设置在页签控件Tab1上的二级蒙层只屏蔽其上添加的check box、radio、文本框等控件实例的行为属性，并不屏蔽该页签控件Tab1的行为属性。即为，设计人员运用鼠标点击该页签控件Tab1时，依然能够实现显示或隐藏该页签控件Tab1的功能。但是当设计人员运用鼠标点击页签控件Tab1上的其他控件实例，例如check box时，并不能触发其行为属性，只能对其进行事件操作。

本发明实施例二所述的方法，能够解决因蒙层导致的设计人员无法实现在各容器类控件之间进行切换的问题。

与本发明实施例提供的图形界面编辑方法相对应，本发明实施例还提供了一种图形界面编辑装置，参见图5，该装置包括以下单元：

控件实例添加单元U501，用于生成控件实例，添加到根面板的控件面板上；

蒙层设置单元U502，用于在所述控件面板的最高层设置蒙层，屏蔽所述控件面板上控件实例的行为属性；

操作单元U503，用于通过所述蒙层，对所述控件面板上的控件实例进行操作。

优选的，所述控件实例生成单元中添加到根面板的控制面板上的控件实例为非容器类控件实例。

优选的，所述装置还包括：

容器类控件添加单元U504，用于在所述蒙层上，添加容器类控件；

第二控件实例添加单元U505，用于生成控件实例，分别添加到对应的容器类控件上；

二级蒙层设置单元U506，用于分别为各容器类控件设置二级蒙层，屏蔽所述容器类控件上控件实例的行为属性；

第二操作单元U507，用于通过所述二级蒙层，对各容器类控件上的控件实例进行操作。

优选的，所述控件实例添加单元U501具体为：至少设置控件的状态属性或外观属性或行为属性，生成控件实例。

优选的，所述操作单元U503具体为：通过所述蒙层，改变所述控件面板上的控件实例的位置或修改其外观属性。

优选地，所述第二操作单元U507具体为：通过所述二级蒙层，改变各容器类控件上的控件实例的位置或修改各控件实例的外观属性。

本发明实施例所述装置中，在图形界面的设计过程中，添加到控件面板上的控件实例，不再仅仅是各控件的简单示意，而是根据用户需求设置了相应属性后的真实按钮。此时，设计人员在控件面板上看到的控件实例，即为运行界面生成程序后，在图形界面中展现给用户的控件，由此实现了所见即所得。

同时，通过采用蒙层，避免设计人员在运用输入设备对控件面板上控件实例进行事件操作时，触发控件实例的行为属性，使得设计人员能够运用自如的对控件面板上各控件实例进行操作。

以上对本发明所提供的一种图形界面编辑方法及装置，进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本发明的限制。

Claims (12)

1.一种图形界面编辑方法，其特征在于，所述方法包括：

生成控件实例，添加到根面板的控件面板上；

在所述控件面板的最高层设置蒙层，屏蔽所述控件面板上的控件实例的行为属性；

通过所述蒙层对所述控件面板上的控件实例进行操作。

2.根据权利要求1所述的方法，其特征在于，所述生成控件实例具体为：

至少设置控件的状态属性或外观属性或行为属性，生成控件实例。

3.根据权利要求2所述的方法，其特征在于，所述添加到根面板的控件面板上的控件实例为非容器类控件实例。

4.根据权利要求3所述的方法，其特征在于，所述方法还包括：

在所述蒙层上添加容器类控件；

生成控件实例并添加到对应的容器类控件上；

分别为各容器类控件设置二级蒙层，屏蔽所述容器类控件上控件实例的行为属性；

通过所述二级蒙层对各容器类控件上的各控件实例进行操作。

5.根据权利要求1至4任一项所述的方法，其特征在于，所述通过所述蒙层对所述控件面板上的控件实例进行操作，具体为：

通过所述蒙层改变所述控件面板上的控件实例的位置或修改控件实例的外观属性。

6.根据权利要求4所述的方法，其特征在于，所述通过所述二级蒙层，对各容器类控件上的各控件实例进行操作，具体为：

通过所述二级蒙层，改变各容器类控件上的控件实例的位置或修改控件实例的外观属性。

7.一种图形界面编辑装置，其特征在于，所述装置包括：

控件实例添加单元，用于生成控件实例，添加到根面板的控件面板上；

蒙层设置单元，用于在所述控件面板的最高层设置蒙层，屏蔽所述控件面板上的控件实例的行为属性；

操作单元，用于通过所述蒙层对所述控件面板上的控件实例进行操作。

8.根据权利要求7所述的装置，其特征在于，所述控件实例添加单元具体为：至少设置控件的状态属性或外观属性或行为属性，生成控件实例。

9.根据权利要求8所述的装置，其特征在于，所述控件实例添加单元中添加到根面板的控制面板上的控件实例为非容器类控件实例。

10.根据权利要求9所述的装置，其特征在于，所述装置还包括：

容器类控件添加单元，用于在所述蒙层上添加容器类控件；

第二控件实例添加单元，用于生成控件实例并添加到对应的容器类控件上；

二级蒙层设置单元，用于分别为各容器类控件设置二级蒙层，屏蔽所述容器类控件上控件实例的行为属性；

第二操作单元，用于通过所述二级蒙层对各容器类控件上的各控件实例进行操作。

11.根据权利要求7至10任一项所述的装置，其特征在于，所述操作单元具体为：通过所述蒙层改变所述控件面板上的控件实例的位置或修改控件实例的外观属性。

12.根据权利要求10所述的装置，其特征在于，所述第二操作单元具体为：通过所述二级蒙层，改变各容器类控件上的控件实例的位置或修改控件实例的外观属性。

Images