第 5 章:GUIX Studio 屏幕设计器

设计应用程序屏幕是 GUIX Studio 的主要用途。 屏幕设计是通过之前第 3 章所述的所有不同视图实现的。 而 GUIX Studio 中屏幕设计的主元素是目标视图,其中会直观显示所有屏幕元素,并且显示方式与在嵌入式目标显示器中的完全相同。 这些屏幕元素的选择、移动、调整大小等操作均可通过简单的鼠标和按钮操作完成。 此外,用户还可对选定对象使用对齐和 Z 序按钮操作。 以下子节介绍 GUIX Studio 屏幕设计的各种功能。

创建/配置项目

在 GUIX Studio 中创建项目非常简单:选择“新建项目”按钮或“项目”、“新建项目”菜单选项。 随后 GUIX Studio 会显示“配置项目”对话框。 在此对话框中,可指定基本显示设置,以及定位 GUIX Studio 所生成代码的路径信息。

创建新项目时,将显示“配置项目”对话框。 开发者可在此指定目标可用显示器硬件数量和每个显示器的属性。 属性包括显示器的逻辑名称、x/y 分辨率、颜色深度和格式,以及其他显示属性。 GUIX Studio 支持同一项目使用多个显示器。 如果需要更多显示器,则应更改“显示器数量”字段,以与嵌入式设备上的显示器数量匹配。 项目中显示器的最大数量为 4。 图 21 显示“配置项目”对话框

修改项目和/或显示器设置可通过以下方式实现:选择“配置”、“项目/显示器”菜单选项,或者选择具体项目或显示器,右键单击,再选择“配置”、“项目/显示器”。 在任一情况下,都将显示“配置项目”对话框,以便更改项目设置和/或显示器设置。

Screenshot of the Configure Project dialog.

图 21

“目录”组是用户可指定 Studio 所生成 C 源文件和头文件的默认输出目录的位置。 这些目录通常是相对于项目位置进行保存的,以便将项目从一台计算机轻松移到另一台计算机,或从一个文件系统轻松移到另一个文件系统。

“附加头文件”字段是用户可指定自定义头文件的位置。 如果需要多个头文件,请使用分号分隔列表。

调用 Studio“生成应用程序”或“生成资源”命令时,这些都是默认目录,系统会在其中写入这些源文件。 当然,可以通过在“输出目录”对话框中输入新位置,随时替代这些目录位置。

选择小组件

通过单击“项目视图”小组件树中的小组件,或单击“目标视图”区域中的可见小组件,可选择小组件。 选择单个小组件后,其属性会显示在“属性视图”区域。 图 22 显示已选择“按钮”小组件

Screenshot of the selected widget.

图 22

使用属性

如前所述,所选小组件的属性会显示在“属性视图”中。 所有小组件都有一组通用属性,以及特定于特殊小组件类型的一些属性。 例如,按钮小组件具有“已推送”属性,而窗口小组件则没有此属性。 下面是一组通用的小组件属性:

属性 含义
小组件类型 小组件的类型,用于引用
小组件名称 小组件的名称,可传递给小组件创建函数,并用于所生成源文件中的变量命名。
小组件 ID 小组件的 ID。 此 ID 值用于生成从子小组件位置移到其父屏幕所用的信号。
小组件最左侧坐标
顶部 小组件最顶层坐标
宽度 小组件的宽度(以像素为单位)
高度 小组件的高度(以像素为单位)
边框 小组件边框类型
透明 如果小组件是部分透明的,则应选中此选项
绘制所选项 如果最初应绘制所选状态的小组件,则应选中此选项。
启用 如果最终用户可选择或单击此小组件,则应选中此选项。
接受焦点 如果小组件接受焦点,则应选中此选项。
运行时分配 如果应动态分配小组件控制块,则应选中此选项。
常规填充 常规填充颜色资源 ID
选定填充 选定填充颜色资源 ID
绘制函数 用户定义的自定义绘制函数名称。 如果此字段为空,则使用该小组件类型的标准绘制函数。
事件函数 用户定义的自定义事件处理函数名称。 如果此字段为空,则使用此小组件类型的标准事件处理函数。

图 23 显示一个简单窗口小组件的属性。

Screenshot of the properties of a simple window widget.

图 23

许多小组件类型都有特定于各小组件类型的其他属性。

例如,在上面的图 23 中,“窗口”小组件类型支持壁纸像素图 ID,以及指示壁纸是应居中还是平铺的样式设置。

文本小组件支持字符串 ID 字段,以及文本对齐样式和字体规范。 通常阅读每个小组件类型的说明以及该小组件类型的可用样式和创建函数参数后,即可弄清这些附加的小组件属性。

操作小组件

若要操作小组件,首先必须选择小组件。 为此,可直接单击“目标视图”中的小组件,也可在“项目视图”小组件树中进行选择。 选择后,该小组件将显示虚线轮廓。 在此状态下,单击小组件,并将其拖动到其父窗口的所需位置,即可移动此小组件。 如果是顶层小组件,则拖动此小组件可有效设置其在目标显示器上的初始位置。 当然,如果使用 GUIX API,用户始终可以随时移动任何小组件,或调整其大小。

若要调整小组件的高度,请将鼠标置于小组件上边缘,并等待鼠标指针变成上下箭头。 此时,在按住鼠标右键的同时移动鼠标,即可更改小组件的高度。 通过将鼠标指针置于小组件的左边缘,即可用类似的方式调整小组件的宽度。 图 24 显示已调整大小并已移到父窗口左上方区域的“按钮”小组件

Screenshot of the button widget.

图 24

操作多个小组件

通过在按住 Ctrl 键的同时单击目标视图中的多个小组件,可选择多个小组件。 执行此操作后,将显示选择的每个小组件,并且其周围带有虚线轮廓。 请注意,选择多个小组件时,选项组中的每个小组件都必须是同一父窗口的子项。

选择多个小组件后,通过单击其中一个所选小组件,并在按住鼠标右键的同时移动鼠标,可同时移动这些小组件。 此外,用户还可使用“工具栏”上的对齐按钮对齐该组所选小组件。 图 25 显示已选择“按钮”和“新按钮”小组件,图 26 显示选择这些小组件后选择“左对齐”按钮选项的结果

Screenshot of the button and new button widgets selected

图 25

Screenshot of the result of the Align-Left button selection.

图 26

剪切/复制/粘贴操作

“目标视图”中的选定小组件可以采用标准方式进行剪切、复制和粘贴。 用户可在同一项目中复制小组件和屏幕,也可将一个项目中的小组件和屏幕复制并粘贴到另一个项目中。“工具栏”中有用于剪切、复制和粘贴的按钮。 “编辑”菜单选项中也有相同的选项。 请注意,粘贴小组件时,应先选择父小组件,然后再粘贴新的小组件。 图 27 显示选择“按钮”小组件、复制此小组件并将副本粘贴到同一窗口中的结果

Screenshot of the cut/copy/paste operations.

图 27

在同一项目中复制/粘贴通常很简单,因为在同一项目中工作时所复制小组件可能需要的资源是始终存在的。 但是,如果从项目 A 复制小组件,并将该小组件粘贴到项目 B,则可能会出现一些资源依赖项问题。

在 Studio 中复制小组件时,Studio 应用程序会列出所复制小组件所需资源的列表,并生成一个 XML 格式的可移植资源依赖项表(复制到 Windows 剪贴板)以及实际复制的小组件信息。 将小组件粘贴到不同的项目中时,Studio 会先检查资源依赖项列表,并将所需资源添加到打开的项目中(如果其中没有这些资源)。 Studio 按资源 ID 名称确定匹配的资源,而对于字符串资源,Studio 还会比较字符串内容。 如果找到匹配的资源,Studio 会更新所粘贴小组件的资源 ID,以便在新项目中正确使用这些资源。 如果找不到匹配的资源,则会添加这些资源。

当 Studio 在小组件粘贴操作过程中将资源添加到项目中时,对于字体和像素图资源,Studio 实际会添加一个指向资源的链接。 此链接是在源项目中生成的,如果应用程序找不到与粘贴到的项目的项目位置相关的资源,用户将收到警告消息。 不管是否将这些资源链接添加到项目中,你可能都需要将字体和图像文件手动复制到新项目树下的适当位置,才能消除资源加载错误。 Studio 不能将 .ttf、.png 或 .jpg 文件从一个位置复制到另一个位置。

避免这类问题的简单方法是:确保在要共享的两个项目之间使用一致的目录结构。 如果要将项目 A 中的内容轻松移到项目 B 中,请将两个项目所使用的图形图像和字体保存在各自项目文件夹的一致子目录下。

更改 Z 顺序

用户可将小组件轻松移到其他小组件的前面或后面。 为此,可选择小组件,并选择“工具栏”上的“移到顶层”或“移到底层”按钮。 图 28 显示将第二个按钮移到底层

Screenshot of the button z-order.

图 28

分配颜色、字体和像素图

除了能够在“属性视图”中为所选小组件选择颜色、字体和像素图以外,此应用程序还支持使用简单的拖放方法将资源分配给小组件。 若要使用此功能,只需左键单击资源视图中的字体颜色等资源,并将此资源拖动到目标视图中所需小组件的上方。 通过在小组件上方释放鼠标左键,放置资源。

使用拖放方法时,始终会为小组件的普通背景色分配颜色资源。 对于所选颜色或所选文本颜色等其他颜色,必须使用“属性视图”进行分配。

同样,对于支持像素图显示的小组件,也会为“常规”或“填充”像素图字段分配像素图资源。 若要为支持多个像素图的小组件分配其他字段,必须使用“属性视图”。

使用模板

在 Studio 中设计的任何屏幕或子小组件集合均可用作新屏幕和新子控件的模板。 可以将模板基于“窗口”类型小组件(这是普通用例)或任何其他小组件类型。 使用模板与复制和粘贴小组件相似,只是在修改基础模板后,根据此模板所派生的内容也会自动修改。 在使用模板的派生屏幕或继承实例时,用户不能修改模板小组件的属性。 但是,通过任何方式修改模板属性后,引用该模板的所有实例都会自动更新,因为这些实例派生自该模板。

使用模板处理重复项的另一个优点是:与用户每次使用重复项时重新创建的文件相比,Studio 所生成的规范文件通常更小。

若要指定将特定屏幕或子小组件集合用作模板,可在小组件的“属性视图”中选中“模板”复选框。 选中“模板”复选框后,此模板小组件将显示在“插入”|“模板”下拉菜单中。

例如,使用模板时,可以定义一个用作按钮栏的窗口。 此窗口本身可以包含多个子按钮,并且此按钮栏可常用于各种屏幕上。 你可以在 Studio 项目中定义独立的小窗口来容纳所需子按钮,并将该窗口命名为“button_bar”。 然后选择此窗口,并启用“模板”属性。 接下来,选择要在其中添加此按钮栏的屏幕。 使用“插入”|“模板”|“button_bar”菜单命令将 button_bar 窗口的实例插入屏幕中。 请注意,你可以重新定位此按钮栏,但不能更改大多数属性。 不过你可以像使用任何其他预定义的 GUIX 小组件类型一样使用 button_bar 小组件(和任何子元素)。 若要修改 button_bar,必须选择 button_bar 模板进行更改。

另一个典型模板用例是包含许多相似屏幕的应用。 例如,此应用可能包含 10 个不同的屏幕,这些屏幕都共享一个公共标题栏、填充颜色、大小等设置。在这种情况下,可以定义一个模板屏幕,其中包括标题栏子小组件,并配置了屏幕大小、填充颜色和其他属性。 定义此模板屏幕后,即可根据此模板派生 10 个不同的屏幕。 在使用“插入”|“模板”|“<base_screen>”菜单命令后,屏幕将开始显示模板屏幕的所有子小组件和设置。 请注意,根据模板屏幕派生的每个屏幕都不是模板的副本,而是模板屏幕的派生实例。 你随后可自定义每个派生屏幕,以容纳所需的任何附加内容。

请注意,除了所生成规范文件有助于节省空间以外,使用模板还可以更轻松地管理应用外观的变更。 在上例中,假设需要更改 10 个相似屏幕的背景色。 用户不需要选择每个屏幕并更改各自的填充颜色设置,只需选择基础模板并更改其填充颜色,此更改就会立即反映到所有派生的屏幕中。

有关模板的更多注释:必须确保事件处理流程保持不变,这意味着如果为基础屏幕和派生屏幕提供事件处理程序(处理公共小组件事件),则派生屏幕事件处理程序在默认情况下应调用 base_screen 事件处理程序。 这样,基础屏幕事件处理程序可处理此基础屏幕模板派生的所有屏幕通用小组件所生成的事件。

录制和播放宏

宏录制和播放函数可帮助你录制和播放击键和鼠标事件。

为录制宏文件,可选择“录制宏”工具栏按钮,或选择“编辑”、“录制宏”菜单。 GUIX Studio 将显示“录制宏”对话框,你可在其中为宏文件指定路径名。 作出选择后,单击“录制”按钮以开始录制。 完成录制后,再次选择“录制宏”工具栏按钮,或使用下拉菜单选择“编辑”、“结束录制宏”以结束宏录制。

为播放宏文件,可选择“播放宏”工具栏按钮,或使用主下拉菜单选择“编辑”、“播放宏”命令。 GUIX Studio 将显示“播放宏”对话框,你可在其中指定要运行的以前录制的宏文件

在录制需选择输入或输出文件(如添加字体或图像)的宏时,请务必使用键盘键入文件名,而不是使用鼠标从文件浏览器中进行选择。 由于宏录制器会录制鼠标和键盘事件,而文件浏览器可能会随着时间而更改,因此键入文件名比以图形方式选择文件更可靠。

缩放目标视图

“放大”功能可帮助你获取目标屏幕的近视图。

在“配置”|“目标视图”|“缩放”菜单选项中,可选择所需缩放百分比设置。 “工具栏”中也有用于放大/缩小的按钮。

网格/对齐设置

“网格和对齐设置”对话框包含一些用于网格和对齐的设置和选项。 图 29 显示选择“配置”|“目标视图”|“网格”/“对齐”菜单后出现的“网格和对齐设置”对话框

Screenshot of the Grid and Snap Settings.

图 29

打开“显示网格”选项将在目标屏幕上显示网格,你可以在“网格间距”字段中指定网格增量(以像素)为单位,在“对齐间距”字段中指定最小对齐距离。 “对齐网格”和“对齐小组件”选项可帮助你获取小组件的正确位置。 启用这些选项将激活对齐。

启用“对齐网格”选项时

  • 如果在目标视图中用鼠标拖动某个对象,则该对象中心将对齐网格位置。
  • 如果拖动对象的边缘以调整其大小,拖动的边缘会对齐网格位置。
  • 如果选择某个对象并使用向上/向左/向下/向右键,则所选小组件将按对齐距离移动。

启用“对齐小组件”选项时

  • 当所选小组件移动到与另一个小组件对齐的位置附近时,它会与建议对齐的位置对齐。
  • ALT 键可用于暂时禁用“对齐小组件”功能。