GUI Design Studio 4.5.151.0原型设计工具的使用

作者: admin 分类: 开发工具发布时间: 2014-03-04 13:18 ė2,162 浏览数 6没有评论

GUI Design Studio是一款无需编码，拖放式的用户界面设计及原型设计工具，适用于Web、桌面、移动和嵌入式软件应用程序。
官网地址：http://www.carettasoftware.com/guidesignstudio/
当前版本：4.5.151.0

在这里记录下创建带有Tab控件的应用程序步骤：
1.菜单栏→”File”→”New Project”，”Name”填入test，”Location”填入保存项目的路径，点击”OK”；
2.右侧”Project”面板，点击”New Design”按钮，如下图所示：

在弹出的输入框中，输入TestDialog，点击绿色按钮；
3.展开右侧”Elements”面板，选中”Windows and Dialogs”类别，在下方列表找到”Dialog”元素，将其拖动到设计页面中，如下图所示：

拖动边框可调整大小；
4.双击对话框，弹出属性设置对话框，修改”Title”填入test对话框;
5.按下F9即可预览设计效果，如下图所示：

预览的窗口样式是Vista，这个可以在菜单栏→”File”→”Preferences”进行修改，或者”Project”→”Project Options”→”Visual Style”；
6.从右侧”Elements”面板的”Tabs”类别，拖入”Horizontal Tab Bar”元素，双击可修改每一页面的标题名称等；
7.再从”Tabs”类别，拖入3个”Tab Panel”元素，这3个分别对应3个Tab页面；
8.从”Elements”面板中，不同的类别，拖入一些控件元素到这3个”Tab Panel”上；
9.将工具栏上的导航链接，更改为”Replace Window”样式，如下图所示：

按下F4，转换到链接模式，光标变成铅笔形状。首先在第一个Tab按钮的地方，进行按下，移动到所想要关联的”Tab Panel”元素上，放开鼠标，即可完成链接。点选的过程中，会出现橙色框，以方便识别具体元素。链接完成如下图所示：

10.再次按下F9，点击Tab控件上不同的页面按钮，即可切换对应的绑定页面，如下图所示：