GUI_Design_Studio使用手册

《GUI_Design_Studio使用手册》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、目录第一部分GUIDESIGNSTUDIO快速入门3第一章环境简介31.工程面板32.元素面板43.图标面板54.注释面板65.故事板面板76.备注面板8第二章窗口设计91.创建工程92.创建对话框103.创建应用程序窗口124.创建文档窗口145.创建"EditTask"对话框166.放置屏幕截图17第三章窗口交互191.添加故事看板192.添加导航功能203.添加文件打开标准对话框234.添加菜单功能26第二部分GUIDESIGNSTUDIO功能介绍28第一章使用图片281.导出设计文档282.使用图片29第二

2、章使用组件301.使用设计文档作为普通组件302.使用设计文档作为组件缩略图313.使用设计文档作为定制组件32第三章使用模板331.基于模板创建工程332.向工程中插入模板34第四章网页程序设计351.使用图片和文字占位符352.创建网页的头部和尾部363.创建动态内容364.鼠标事件375."前进"和"后退"切换39第一部分GUIDesignStudio快速入门第一章环境简介1.工程面板使用工程面板可以访问工程所有设计文档和图片文件。在这里你可以快速做如下事情：1)创建新的工程目录来组织文件。2)创建新的设计文

3、档。3)复制已有的设计文档。4)从剪贴板上粘贴图片生成图片文件。5)加入其它工程和文件夹的链接，以访问它们的所有设计文档和图片文件。特别适用于使用库工程的公共组件或使用存在别处图片的情况。6)当你选择了列表中的工程或文件夹时候，其对应的文件树将出现在下方。7)双击设计文件打开它，或者拖拽它将其添加到打开的设计文档中。8)使用鼠标右键拖拽添加组件缩略图。9)双击或拖拽图片文件，将其添加到打开的设计文档中。1.元素面板元素面板提供所有可以用于创建应用程序GUI的窗体和控件。元素被分成若干类别。当从列表中选择某一类别时候

4、，该类别的元素将出现在下面的窗口中。每个元素都是十分典型的，并且为了方便使用，一些类别中包含了同一个元素的不同变形形式。在这里你可以快速做如下事情：1)双击或拖拽元素，可以将元素添加到打开的设计文档中。2)在设计文档中，双击元素编辑它的属性。1.图标面板使用图标面板，可以访问公共的、主工程中的、以及其它在通过工程面板链接添加的工程或目录中的图标。公共图标按类别存放着，可以创建新的类别目录来存放新的图标。当从列表中选择某一类别时，该类别的图标将出现在下面的窗口中，可以通过大小、颜色深度来过滤这些图标。此外，还可以通过

5、外部编辑器创建新的图标或编辑已经存在的图标。图标分类列表过滤条件（图标尺寸、颜色深度）图标列表新建图标1.注释面板1.故事板面板故事板面板提供用于构建设计文档中控制流程的元素来实现一个模拟原型。故事板元素通常显示在其它设计元素的上方。1.备注面板备注面板提供记录关联设计文档和它上面的元素的笔记摘要，可用于提供弹出注释和生成详细说明规格文档。和其它面板不一样的是，备注面板的内容会随着当前活动的设计文档而变化。第一章窗口设计1.创建工程1)使用"File

6、NewProject..."菜单命令，打开"NewProject

7、"对话框。2)选择一个合适的文件夹用于存放创建的工程，如上图所示的"C:MyGUIDesigns"。如果想使用的文件夹不存在，在"Location"框可以直接输入路径，该文件夹会被自动创建。3)在"Name"框输入"Tutorial"，将为工程自动创建一个"Tutorial"子文件夹。4)点击"OK"按钮创建工程后，工程将被自动打开。1.创建对话框1)可以通过"File

8、New"菜单命令，或者"Ctrl+N"快捷键创建新的未命名的设计文档，之后在保存时需要指定保存位置和名称。此外，还可以在"Project"面板

9、点击"NewDesign"图标，将文件直接创建在工程文件夹下。在弹出对话框中输入"NewTaskDialog"。2)在"Elements"面板中选中"WindowsandDialogs"分类。在元素列表中选中"Dialog"元素，以双击或拖拽的方式将元素添加到设计文档中。3)双击对话框元素打开其属性设置页，修改其标题为"TaskDetails"。4)确保"Layout

10、SnaptoEdges"菜单命令处于选中状态。边缘捕捉允许GUI元素间可以正确对齐。常常需要在窗口中保证页边空白和按钮布局的一致性，这不是必须的但这

11、么做可以增强专业感。在"Elements"面板的"DesignGrids"分类下，通过双击或拖拽的方式将下左图所示的按钮添加到对话框中。然后拖拽该按钮使其捕捉到对话框的四边，如下右图所示。1)在"Elements"面板中的"Buttons"分类下，添加"OK"and"Cancel"按钮。你会发现按钮默认的宽度和网格右列的宽度是一致的。2)在"Elements