目 录第一部分 GUI DESIGN STUDIO快速入门3第一章 环境简介31. 工程面板32. 元素面板43. 图标面板54. 注释面板65. 故事板面板76. 备注面板8第二章 窗口设计91. 创建工程92. 创建对话框103. 创建应用程序窗口124. 创建文档窗口145. 创建"Edit Task"对话框166. 放置屏幕截图17第三章 窗口交互191. 添加故事看板192. 添加导航功能203. 添加文件打开标准对话框234. 添加菜单功能26第二部分 GUI DESIGN STUDIO功能介绍28第一章 使用图片281. 导出设计文档282. 使用图片29第二章 使用组件301. 使用设计文档作为普通组件302. 使用设计文档作为组件缩略图313. 使用设计文档作为定制组件32第三章 使用模板331. 基于模板创建工程332. 向工程中插入模板34第四章 网页程序设计351. 使用图片和文字占位符352. 创建网页的头部和尾部363. 创建动态内容364. 鼠标事件375. "前进"和"后退"切换39 / 第一部分 GUI Design Studio快速入门第一章 环境简介1. 工程面板使用工程面板可以访问工程所有设计文档和图片文件.在这里你可以快速做如下事情：1) 创建新的工程目录来组织文件.2) 创建新的设计文档.3) 复制已有的设计文档.4) 从剪贴板上粘贴图片生成图片文件.5) 加入其它工程和文件夹的,以访问它们的所有设计文档和图片文件.特别适用于使用库工程的公共组件或使用存在别处图片的情况.6) 当你选择了列表中的工程或文件夹时候,其对应的文件树将出现在下方.7) 双击设计文件打开它,或者拖拽它将其添加到打开的设计文档中.8) 使用鼠标右键拖拽添加组件缩略图.9) 双击或拖拽图片文件,将其添加到打开的设计文档中.2. 元素面板元素面板提供所有可以用于创建应用程序GUI的窗体和控件.元素被分成若干类别.当从列表中选择某一类别时候,该类别的元素将出现在下面的窗口中.每个元素都是十分典型的,并且为了方便使用,一些类别中包含了同一个元素的不同变形形式.在这里你可以快速做如下事情：1) 双击或拖拽元素,可以将元素添加到打开的设计文档中.2) 在设计文档中,双击元素编辑它的属性.3. 图标面板使用图标面板,可以访问公共的、主工程中的、以与其它在通过工程面板添加的工程或目录中的图标.公共图标按类别存放着,可以创建新的类别目录来存放新的图标.当从列表中选择某一类别时,该类别的图标将出现在下面的窗口中,可以通过大小、颜色深度来过滤这些图标.此外,还可以通过外部编辑器创建新的图标或编辑已经存在的图标.图标分类列表过滤条件〔图标尺寸、颜色深度〕图标列表新建图标4. 注释面板5. 故事板面板故事板面板提供用于构建设计文档中控制流程的元素来实现一个模拟原型.故事板元素通常显示在其它设计元素的上方.6. 备注面板备注面板提供记录关联设计文档和它上面的元素的笔记摘要,可用于提供弹出注释和生成详细说明规格文档.和其它面板不一样的是,备注面板的内容会随着当前活动的设计文档而变化.第二章 窗口设计1. 创建工程1) 使用"File | New Project..."菜单命令,打开" New Project"对话框.2) 选择一个合适的文件夹用于存放创建的工程,如上图所示的"C:\My GUI Designs\".如果想使用的文件夹不存在,在"Location"框可以直接输入路径,该文件夹会被自动创建.3) 在"Name"框输入"Tutorial",将为工程自动创建一个"Tutorial"子文件夹.4) 点击"OK"按钮创建工程后,工程将被自动打开.2. 创建对话框1) 可以通过"File | New" 菜单命令,或者"Ctrl+N"快捷键创建新的未命名的设计文档,之后在保存时需要指定保存位置和名称.此外,还可以在"Project"面板点击"New Design"图标,将文件直接创建在工程文件夹下.在弹出对话框中输入"NewTaskDialog".2) 在"Elements"面板中选中"Windows and Dialogs"分类.在元素列表中选中"Dialog"元素,以双击或拖拽的方式将元素添加到设计文档中.3) 双击对话框元素打开其属性设置页,修改其标题为"Task Details".4) 确保"Layout | Snap to Edges"菜单命令处于选中状态.边缘捕捉允许GUI元素间可以正确对齐.5) 常常需要在窗口中保证页边空白和按钮布局的一致性,这不是必须的但这么做可以增强专业感.在"Elements"面板的"Design Grids"分类下,通过双击或拖拽的方式将下左图所示的按钮添加到对话框中.然后拖拽该按钮使其捕捉到对话框的四边,如下右图所示.6) 在"Elements"面板中的"Buttons"分类下,添加"OK" and "Cancel"按钮.你会发现按钮默认的宽度和网格右列的宽度是一致的.7) 在"Elements"面板中的"Text"分类下,添加两个"Left Text"元素,将它们对齐到网格左列的左边线,双击静态文本框将它们的属性分别改为"&Summary"和"&Description"."&"符号紧跟的字符显示带有下划线表明它是键盘快捷键.8) 点击"Summary",按住"Ctrl"的同时点击"Description",此时"Summary"和"Description"被同时选中,此时你可以同时调整它们的大小.9) 在"Elements"面板中的"Text"分类下,分别添加"Edit Box"和"Multiple LineEdit Box"元素.同时选中"Description"和"Multiple LineEdit Box"元素,使用"Layout | Align | Top"菜单命令或者在工具栏点击按钮,使两个元素顶端对齐.10) 最后,清空两个文本框的"Text"属性后保存.做好的对话框如下图所示：3. 创建应用程序窗口1) 在项目工程文件夹下创建一个名为"ApplicationWindow"的设计文档,在"Elements"面板的"Windows and Dialogs"分类下,添加"Frame Window"元素,修改其标题属性为"Tutorial Application".2) 在"Elements"面板的"Toolbars and Menus"分类下,添加"Menu Bar"元素,左右拉伸菜单栏使其捕捉到应用程序窗口的左右两边.3) 双击菜单栏打开其属性编辑器,选中"&View"项,在编辑框中输入"&Task"后点击"Insert"按钮,将"Task"菜单项插入到"View"项后面,点击"OK"保存修改.4) 在菜单栏下面添加"Docked Toolbar"元素.默认情况下,工具栏的上边框属性为"Groove"以保证它和菜单栏可以融合,下边框的属性是"Raised"带有一个凹陷的边缘.如果没有菜单栏而想创建一个工具栏,可以在工具栏的属性页中将上边框属性设为"Flat".5) 在"Elements"面板的"Toolbars and Menus"分类下,添加10个"Toolbar Button"元素和3个"Toolbar Spacer – Vertical"元素到工具栏,效果如下左图.切换到"Icons"面板的"Toolbars"分类下,添加合适的图标按钮到工具栏按钮上,效果如下右图.6) 在"Elements"面板的"Toolbars and Menus"分类下,添加"Status Bar"元素,调整状态栏的大小使其捕捉到应用程序窗口的底部.切换到"Controllers"分类,在状态栏的右下角添加"Small Window Resize Gripper"元素.重新切换到"Toolbars and Menus"分类下,添加3个"Status Indicator"元素至状态栏,分别修改其文本属性为"CAP"、"NUM"、"SCRL",并置"NUM"为激活状态其余置为非激活状态.7) 最后,保存修改,做好的应用程序窗口如下图所示：4. 创建文档窗口1) 在项目工程文件夹下创建一个名为"TaskListDocument"的设计文档,在"Elements"面板的"Windows and Dialogs"分类下,添加"Frame Window"元素,修改其标题属性为"Task List".2) 在"Elements"面板的"Lists,Treesand Tables "分类下,添加一个"Check List Box"元素.选中CheckBox,使用键盘上的"→"和"↓"键可以使CheckBox相对于左上角平移,按住"Shift"键的同时使用键盘上的"↑"或"←"可以缩放CheckBox.3) 双击CheckBox打开其属性编辑器,切换到"Style"选项卡,勾选"Flat Style"选项将CheckBox的边框设置为细边框.切换到"Data"选项卡,删除默认的列表项,插入"Walk the dog"、"Breakfast"、"Fix the car"、"Lunch"、"Watch some TV"、"Dinner"、"More TV"、"Go to bed"项目,选中"Lunch"项勾选"Selected"复选框将其设置为默认状态下选中的列表项.4) 在"Annotations"面板下,添加"Boxed Annotation"元素将其置于文档窗口的右侧.设置其"Title"属性为"More Info","Annotation"属性为"We probably want more info in columns with headers for sorting...".5) 在"Annotations"面板下,添加"Large Dot Target"元素到CheckBox上,单击工具栏上的"Make Connection"命令进入构建连接模式：光标变成铅笔形状,任何可以被连接的元素将被橙色的矩形框包围.在Dot和Annotation间建立连接.6) 最后,保存修改,完成效果如下图所示：5. 创建"Edit Task"对话框1) 通过在工程树状图中双击打开"NewTaskDialog.gui"文件,使用"Ctrl+A"全选后"Ctrl+C"复制所有元素.创建新的设计文档"EditTaskDialog",使用"Ctrl+V"粘贴之前复制的元素.〔或者,双击打开"NewTaskDialog.gui"文件,使用"File | Save As..."菜单命令将其保存为新的设计文档"EditTaskDialog.gui",该文档会自动创建到工程树状图中.〕2) 分别修改文本框的Text属性为"Lunch"和"Phone the nearest pizza place and order something nice."3) 最后,保存修改,完成效果如下图所示：6. 放置屏幕截图1) 在项目工程文件夹下创建一个名为"Screenshot"的设计文档.2) 在"Project"面板下,通过拖拽的方式将"ApplicationWindow.gui"设计文档添加到当前设计中.注意,"ApplicationWindow"只能作为一个组件整体被选中,其中的各子元素都被锁定,并且原来在工具栏各按钮上的高亮的矩形框都不被显示.事实上,元素都直接关联到设计文档而不。