GUI Design Studio使用手册.doc

GUI_Design_Studio使用手册目录
第一部分 GUI DESIGN STUDIO快速入门 3
第一章环境简介 3
1. 工程面板 3
2. 元素面板 4
3. 图标面板 5
4. 注释面板 6
5. 故事板面板 7
6. 备注面板 8
第二章窗口设计 9
1. 创建工程 9
2. 创建对话框 10
3. 创建应用程序窗口 12
4. 创建文档窗口 14
5. 创建"Edit Task"对话框 16
6. 放置屏幕截图 17
第三章窗口交互 19
1. 添加故事看板 19
2. 添加导航功能 20
3. 添加文件打开标准对话框 23
4. 添加菜单功能 26
第二部分 GUI DESIGN STUDIO功能介绍 28
第一章使用图片 28
1. 导出设计文档 28
2. 使用图片 29
第二章使用组件 30
1. 使用设计文档作为普通组件 30
2. 使用设计文档作为组件缩略图 31
3. 使用设计文档作为定制组件 32
第三章使用模板 33
1. 基于模板创建工程 33
2. 向工程中插入模板 34
第四章网页程序设计 35
1. 使用图片和文字占位符 35
2. 创建网页的头部和尾部 36
3. 创建动态内容 36
4. 鼠标事件 37
5. "前进"和"后退"切换 39
GUI Design Studio快速入门
环境简介
工程面板
使用工程面板可以访问工程所有设计文档和图片文件。在这里你可以快速做如下事情:
创建新的工程目录来组织文件。
创建新的设计文档。
复制已有的设计文档。
从剪贴板上粘贴图片生成图片文件。
加入其它工程和文件夹的链接,以访问它们的所有设计文档和图片文件。特别适用于使用库工程的公共组件或使用存在别处图片的情况。
当你选择了列表中的工程或文件夹时候,其对应的文件树将出现在下方。
双击设计文件打开它,或者拖拽它将其添加到打开的设计文档中。
使用鼠标右键拖拽添加组件缩略图。
双击或拖拽图片文件,将其添加到打开的设计文档中。
元素面板
元素面板提供所有可以用于创建应用程序GUI的窗体和控件。元素被分成若干类别。当从列表中选择某一类别时候,该类别的元素将出现在下面的窗口中。每个元素都是十分典型的,并且为了方便使用,一些类别中包含了同一个元素的不同变形形式。在这里你可以快速做如下事情:
双击或拖拽元素,可以将元素添加到打开的设计文档中。
在设计文档中,双击元素编辑它的属性。
图标面板
使用图标面板,可以访问公共的、主工程中的、以及其它在通过工程面板链接添加的工程或目录中的图标。公共图标按类别存放着,可以创建新的类别目录来存放新的图标。
当从列表中选择某一类别时,该类别的图标将出现在下面的窗口中,可以通过大小、颜色深度来过滤这些图标。此外,还可以通过外部编辑器创建新的图标或编辑已经存在的图标。
图标分类列表
过滤条件(图标尺寸、颜色深度)
图标列表
新建图标
注释面板
故事板面板
故事板面板提供用于构建设计文档中控制流程的元素来实现一个模拟原型。故事板元素通常显示在其它设计元素的上方。
备注面板
备注面板提供记录关联设计文档和它上面的元素的笔记摘要,可用于提供弹出注释和生成详细说明规格文档。和其它面板不一样的是,备注面板的内容会随着当前活动的设计文档而变化。
窗口设计
创建工程
使用"File | New Project..."菜单命令,打开" New Project"对话框。
选择一个合适的文件夹用于存放创建的工程,如上图所示的"C:\My GUI Designs\"。如果想使用的文件夹不存在,在"Location"框可以直接输入路径,该文件夹会被自动创建。
在"Name"框输入"Tutorial",将为工程自动创建一个"Tutorial"子文件夹。
点击"OK"按钮创建工程后,工程将被自动打开。