GUIDesignStudio使用手册.docx

1、GUIDesignStudio使用手册目 录第一部分 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第一章

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

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

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

5、设计文档中控制流程的元素来实现一个模拟原型。故事板元素通常显示在其它设计元素的上方。6. 备注面板备注面板提供记录关联设计文档和它上面的元素的笔记摘要，可用于提供弹出注释和生成详细说明规格文档。和其它面板不一样的是，备注面板的内容会随着当前活动的设计文档而变化。第二章 窗口设计1. 创建工程1) 使用File | New Project.菜单命令，打开 New Project对话框。2) 选择一个合适的文件夹用于存放创建的工程，如上图所示的C:My GUI Designs。如果想使用的文件夹不存在，在Location框可以直接输入路径，该文件夹会被自动创建。3) 在Name框输入Tutoria

6、l，将为工程自动创建一个Tutorial子文件夹。4) 点击OK按钮创建工程后，工程将被自动打开。2. 创建对话框1) 可以通过File | New 菜单命令，或者Ctrl + N快捷键创建新的未命名的设计文档，之后在保存时需要指定保存位置和名称。此外，还可以在Project面板点击New Design图标，将文件直接创建在工程文件夹下。在弹出对话框中输入NewTaskDialog。 2) 在Elements面板中选中Windows and Dialogs分类。在元素列表中选中Dialog元素，以双击或拖拽的方式将元素添加到设计文档中。3) 双击对话框元素打开其属性设置页，修改其标题为Task

7、 Details。4) 确保Layout | Snap to Edges菜单命令处于选中状态。边缘捕捉允许GUI元素间可以正确对齐。5) 常常需要在窗口中保证页边空白和按钮布局的一致性，这不是必须的但这么做可以增强专业感。在Elements面板的 Design Grids分类下，通过双击或拖拽的方式将下左图所示的按钮添加到对话框中。然后拖拽该按钮使其捕捉到对话框的四边，如下右图所示。 6) 在Elements面板中的 Buttons分类下，添加OK and Cancel按钮。你会发现按钮默认的宽度和网格右列的宽度是一致的。7) 在Elements面板中的Text分类下，添加两个Left Tex

8、t元素，将它们对齐到网格左列的左边线，双击静态文本框将它们的属性分别改为&Summary和&Description。&符号紧跟的字符显示带有下划线表明它是键盘快捷键。8) 点击Summary，按住Ctrl的同时点击Description，此时Summary和Description被同时选中，此时你可以同时调整它们的大小。9) 在Elements面板中的Text分类下，分别添加Edit Box和Multiple Line Edit Box元素。同时选中Description和Multiple Line Edit Box元素，使用Layout | Align | Top菜单命令或者在工具栏点击按钮

9、，使两个元素顶端对齐。10) 最后，清空两个文本框的Text属性后保存。做好的对话框如下图所示：3. 创建应用程序窗口1) 在项目工程文件夹下创建一个名为ApplicationWindow的设计文档，在Elements面板的Windows and Dialogs分类下，添加Frame Window元素，修改其标题属性为Tutorial Application。2) 在Elements面板的Toolbars and Menus分类下，添加Menu Bar元素，左右拉伸菜单栏使其捕捉到应用程序窗口的左右两边。3) 双击菜单栏打开其属性编辑器，选中&View项，在编辑框中输入&Task后点击Inse

10、rt按钮，将Task菜单项插入到View项后面，点击OK保存修改。4) 在菜单栏下面添加Docked Toolbar元素。默认情况下，工具栏的上边框属性为Groove以保证它和菜单栏可以融合，下边框的属性是Raised带有一个凹陷的边缘。如果没有菜单栏而想创建一个工具栏，可以在工具栏的属性页中将上边框属性设为Flat。5) 在Elements面板的Toolbars and Menus分类下，添加10个Toolbar Button元素和3个Toolbar Spacer Vertical元素到工具栏，效果如下左图。切换到Icons面板的Toolbars分类下，添加合适的图标按钮到工具栏按钮上，效果

11、如下右图。 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) 在项目工程文件夹下创建一个名为TaskListDocu

12、ment的设计文档，在Elements面板的Windows and Dialogs分类下，添加Frame Window元素，修改其标题属性为Task List。2) 在Elements面板的Lists,Trees and Tables 分类下，添加一个Check List Box元素。选中CheckBox，使用键盘上的和键可以使CheckBox相对于左上角平移，按住Shift键的同时使用键盘上的或可以缩放CheckBox。3) 双击CheckBox打开其属性编辑器，切换到Style选项卡，勾选Flat Style选项将CheckBox的边框设置为细边框。切换到Data选项卡，删除默认的列表项，

13、插入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面板下，添加Larg

14、e 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.

15、菜单命令将其保存为新的设计文档EditTaskDialog.gui，该文档会自动创建到工程树状图中。）2) 分别修改文本框的Text属性为Lunch和Phone the nearest pizza place and order something nice.3) 最后，保存修改，完成效果如下图所示：6. 放置屏幕截图1) 在项目工程文件夹下创建一个名为Screenshot的设计文档。2) 在Project面板下，通过拖拽的方式将ApplicationWindow.gui设计文档添加到当前设计中。注意，ApplicationWindow只能作为一个组件整体被选中，其中的各子元素都被锁定，并且原

16、来在工具栏各按钮上的高亮的矩形框都不被显示。事实上，元素都直接关联到设计文档而不是创建副本，这意味着设计文档修改后，重新打开或刷新（F5）引用它的设计文档将会看到这些改变。3) 以同样的方式添加TaskListDocument.gui和EditTaskDialog.gui。将会发现在TaskListDocument中创建的Annotation元素和在EditTaskDialog中创建的网格线均被隐藏。4) 选中EditTaskDialog对话框，使用工具栏的Open Component按钮可以直接打开组件所在的设计文档。5) 最后，保存修改，完成效果如下图所示：6) 使用Simulator |

17、 Run Simulator菜单命令（F9）或工具栏按钮，预览结果，如下图所示。使用Esc键退出模拟状态返回设计模式。第三章 窗口交互1. 添加故事看板1) 打开Project面板，创建一个新的设计文档Storyboard1。在工程树状图中使用拖拽的方式将ApplicationWindow.gui、TaskListDocument.gui、EditTaskDialog.gui 、NewTaskDialog.gui添加到当前的设计文档中。2) 使用命令栏的Make Connection按钮，构建如下图所示的连接。如果需要创建多个连接，可以按住Shift键的同时按下命令按钮。再次单击命令按钮或者单

18、击Esc键退出连接模式。注意：虽然ApplicationWindow在选择时被作为一个最小单元，但是构建连接时仍然可以使用其中的子元素。在应用程序窗口的外围出现淡绿色的框，意味着该窗口被选为起点或者设计的主元素。系统默认第一个就是主元素。可以使用F10或使用右键菜单Set Representative Element来指明主元素（此时淡绿色会变为深绿色）。主元素是模拟器显示的起始元素，也是当该设计文档作为其他设计文档的组件时候，展现的起始元素。3) 最后，保存修改，运行模拟器。2. 添加导航功能1) 双击打开Storyboard1设计文档，使用File | Save As.菜单命令将Story

19、board1设计文档另存为Storyboard2，它会被自动创建到工程树中。2) 双击工具栏新建按钮和Task List对话框之间的连线打开连接属性设置页，修改Navigation Type属性由默认的Modal Popup为Show Window，将Task List对话框设置为非模态。点击OK按钮应用修改，箭头形状发生改变。连接类型具体说明参见下表：连接类型箭头形状说明1. Modal Popup把目标对象作为模态窗口在其他所有窗口的高一级打开，直到所有同级窗口都关闭为止。2. Modal Choice Popup与Modal Popup类似。目标窗口打开后点击窗口区域以外窗口会自动关闭（

20、或取消）。当窗口关闭后，之前打开的Modal Choice Popup窗口也会自动关闭。适用于嵌套级联菜单和其他弹出式选择窗口。3. Show Window在同级显示目标窗口，而其他同级窗口仍可处于活动状态。（个人认为把目标窗口作为非模态窗口，类似于查找替换窗口）4. Hide Window隐藏指定的目标窗口。5. Toggle Window根据目标窗口是否可见显示或隐藏窗口。目标窗口不可见则显示它，目标窗口可见则隐藏它。6. Toggle Overlay根据目标窗口是否可见显示或隐藏窗口。与Toggle Window类似，不同点在于目标窗口不识别鼠标事件而鼠标事件传递给目标窗口压盖的下层元素

21、。适用于响应鼠标经过事件的同时，按钮、选项卡或其他元素仍然需要导航切换的情况。7. Replace Window显示目标窗口，取代另一个窗口使其隐藏。如果目标窗口连接到 Window Placeholder Anchor（窗口占位符锚点），则连接到该占位符的所有窗口将被取代，适用于选项卡和面板等。如果目标窗口连接到Window Position Anchor（窗口位置锚点）或者没有连接锚点，将显示目标窗口而关闭源窗口，适用于向导和序列化的显示等。（？）8. Replace Top Window显示目标窗口，取代所有其他同级窗口使其隐藏。使用该连接类型以及组件缩略图，网页程序可以在页面间进行导航

22、切换，支持历史记录前进和后退的切换。（？）3) 默认情况下，窗口均在屏幕中心被打开。在Storyboard面板下添加Window Position Anchor元素，将其置于欲显示Task List对话框的位置上，在锚点和Task List对话框之间建立连接。运行模拟器测试Task List对话框是否出现在预想的位置。4) 在Storyboard面板下，添加Close、Close and Accept、Close and Cancel按钮到设计文档，建立如下图所示的连接。Close按钮用来关闭连接的父窗口；而Close and Accept、Close and Cancel按钮用来关闭和它关联

23、的所有同级窗口，两者并没有什么实际的区别。注意，在本版本中，这一步不是必须的，但是这么做可以使设计思想更加明确。5) 在Storyboard面板下，添加Exit按钮与Tutorial Application应用程序窗口建立连接，用来直接关闭模拟器。6) 最后，保存修改，完成效果如下图所示：3. 添加文件打开标准对话框1) 以TaskListDocument.gui文件为模板，创建一个新的副本文件的方法有三： 打开TaskListDocument.gui文件，使用File | Save As.菜单命令将该设计文档重新保存为EmptyDocument.gui文件。 打开TaskListDocume

24、nt.gui文件，使用Project | Duplicate Design.菜单命令。 打开TaskListDocument.gui文件，在Project面板下使用命令图标。2) 双击打开列表框属性页删除所有的列表项，保存修改，完成效果如下图所示：3) 以Storyboard2.gui为模板，创建副本文件Storyboard3.gui。打开Storyboard3.gui，添加EmptyDocument.gui。4) 在Project面板上，使用Add Project Link命令按钮添加标准组件库的工程链接。（链接地址为C:Documents and SettingsAll UsersDocu

25、mentsGUI Design StudioSamplesStandard ComponentsStandard Components.gdp） 5) 双击打开Dialog_FileOpen_Standard.gui，可以看到文件打开对话框有自己的一系列的导航用于关闭对话框和打开下拉菜单。但是，当把它拖拽到设计文档中时，它只能被看作是一个整体组件，它只是一个对话框而已！这一特性使得我们可以自由使用之前设计好的设计文档作为模板。大多数情况下，使用文件打开对话框只是为了表明这里将出现一个文件打开窗口而已，若觉得标准文件打开对话框不能满足应用需求，可以以Dialog_FileOpen_Standar

26、d.gui为模板创建一个新的副本。为了防止不小心修改标准模板库里已有的模板，建议在Tutorial工程下创建Dialog_FileOpen_Standard的副本。6) 双击打开Storyboard3.gui，添加Dialog_FileOpen_Standard到设计文档，在工具栏的文件打开按钮和文件打开对话框之间建立Modal Popup类型的连接。7) 在文件打开对话框中单击Open按钮后需要执行的操作实际是关闭对话框并打开TaskListDocument窗口。首先，从Storyboard面板中添加Close and Accept按钮，在在Open按钮和Close and Accept按钮

27、之间创建连接；然后，在Open按钮和TaskListDocument对话框之间创建连接。 新的导航切换动作会覆盖该组件的设计文档中原先的切换动作。在本例中，Dialog_FileOpen_Standard.gui中Open按钮关联着Close and Accept按钮，如果在Storyboard3将文件打开对话框的Open按钮关联到TaskListDocument对话框，那么实际运行时单击Open将切换到TaskListDocument对话框。 当一个按钮或其它元素上有多个导航切换行为时，切换动作按照它们创建时的顺序执行。（Open按钮为何不能先和TaskListDocument对话框再和Cl

28、ose and Accept按钮建立连接？若先显示文档窗口再关闭打开对话框，文档窗口和打开对话框处于同一级别，Close and Accept命令会使的文档窗口立即关闭。）8) 在Storyboard面板下添加Window Position Anchor元素，将锚点和Task List对话框之间建立连接，调整好Task List对话框的显示位置。9) 在Storyboard面板下添加Navigation Overlay元素（见下左图），使用拖拽的方式将其置于如下右图所示的位置上。将其和EditTaskDialog对话框间建立连线，双击连线打开连接属性设置页，将Event Trigger属性从L

29、eft Click改为Left Double Click。运行模拟器，将鼠标移至条纹矩框的范围内双击可打开EditTaskDialog对话框。 10) 最后，保存修改，完成效果如下图所示：4. 添加菜单功能1) 以Storyboard3 为模板，创建副本Storyboard4.gui。2) 在Project面板上打开Standard Components 下的Common_Meuns.gui设计文档。按下Ctrl键的同时，鼠标左键单击File、Edit、View、Window和Help菜单元素，使用Ctrl + C复制。双击打开Storyboard4设计文档，使用Ctrl + V粘贴菜单元素。 3) 在Elements面板的Toolbars and Menus分类下，添加Popup Menu元素。双击打开属性设置对话框，在Item选项卡中，删除原先的菜单项，添加&New和&Edit菜单项。 4) 在应用程序窗口的菜单项和对应的弹出菜单间建立连接。注意建立的连接自动变成Modal Choice Popup类型，当用户在目标窗口（在本例中是菜单）区域外单击后将关闭目标窗口，同样适用于级联菜单。5) 从Storyboard面板中添加Exit按钮，与File菜单中的Exit命令建立连接。6) 在File菜单中的Open命令与文件打开对话框间建立连接。7) 在Tas