GUI-Design-Studio使用手册.doc

目 录
第一局部 GUI DESIGN STUDIO快速入门 3
第一章 环境简介 3
1. 工程面板 3
2. 元素面板 4
3. 图标面板 5
4. 注释面板 6
5. 故事板面板 7
s"面板中选中"Windows and Dialogs"分类。在元素列表中选中"Dialog"元素，以双击或拖拽的方式将元素添加到设计文档中。
双击对话框元素翻开其属性设置页，修改其标题为"Task Details"。
确保"Layout | Snap to Edges"菜单命令处于选中状态。边缘捕捉允许GUI元素间可以正确对齐。

常常需要在窗口中保证页边空白和按钮布局的一致性，这不是必须的但这么做可以增强专业感。在"Elements"面板的" Design Grids"分类下，通过双击或拖拽的方式将下左图所示的按钮添加到对话框中。然后拖拽该按钮使其捕捉到对话框的四边，如下右图所示。

在"Elements"面板中的" Buttons"分类下，添加"OK" and "Cancel"按钮。你会发现按钮默认的宽度和网格右列的宽度是一致的。
在"Elements"面板中的"Text"分类下，添加两个"Left Text"元素，将它们对齐到网格左列的左边线，双击静态文本框将它们的属性分别改为"&Summary"和"&Description"。"&"符号紧跟的字符显示带有下划线说明它是键盘快捷键。
点击"Summary"，按住"Ctrl"的同时点击"Description"，此时"Summary"和"Description"被同时选中，此时你可以同时调整它们的大小。
在"Elements"面板中的"Text"分类下，分别添加"Edit Box"和"Multiple Line Edit Box"元素。同时选中"Description"和"Multiple Line Edit Box"元素，使用"Layout | Align | Top"菜单命令或者在工具栏点击按钮，使两个元素顶端对齐。
最后，清空两个文本框的"Text"属性后保存。做好的对话框如下列图所示：

创立应用程序窗口
在工程工程文件夹下创立一个名为"ApplicationWindow"的设计文档，在"Elements"面板的"Windows and Dialogs"分类下，添加"Frame Window"元素，修改其标题属性为"Tutorial Application"。
在"Elements"面板的"Toolbars and Menus"分类下，添加"Menu Bar"元素，左右拉伸菜单栏使其捕捉到应用程序窗口的左右两边。
双击菜单栏翻开其属性编辑器，选中"&View"项，在编辑框中输入"&Task"后点击"Insert"按钮，将"Task"菜单项插入到"View"项后面，点击"OK"保存修改。
在菜单栏下面添加"Docked Toolbar"元素。默认情况下，工具栏的上边框属性为"Groove"以保证它和菜单栏可以融合，下边框的属性是"Raised"带有一个凹陷的边缘。如果没有菜单栏而想创立一个工具栏，可以在工具栏的属性页中将上边框属性设为"Flat"。
在"Elements"面板的"Toolbars and Menus"分类下，添加10个"Toolbar Button"元素和3个"Toolbar Spacer – Vertical"元素到工具栏，效果如下左图。切换到"Icons"面板的"Toolbars"分类下，添加适宜的图标按钮到工具栏按钮上，效果如下右图。

在"Elements"面板的"Toolbars and Menus"分类下，添加"Status Bar"元素，调整状态栏的大小使其捕捉到应用程序窗口的底部。切换到"Controllers"分类，在状态栏的右下角添加"Small Window Resize Gripper"元素。重新切换到"Toolbars and Menus"分类下，添加3个

"Status Indicator"元素至状态栏，分别修改其文本属性为"CAP"、"NUM"、"SCRL"，并置"NUM"为激活状态其余置为非激活状态。
最后，保存修改，做好的应用程序窗口如下列图所示：

创立文档窗口
在工程工程文件夹下创立一个名为"TaskListDocument"的设计文档，在"Elements"面板的"Windows and Dialogs"分类下，添加"Frame Window"元素，修改