GUI_Design_Studio使用手冊(cè)

1、目 錄 TOC o 1-3 h z u HYPERLINK l _Toc300318720 第一部分 GUI Design Studio快速入門 PAGEREF _Toc300318720 h 3 HYPERLINK l _Toc300318721 第一章 環(huán)境簡(jiǎn)介 PAGEREF _Toc300318721 h 3 HYPERLINK l _Toc300318722 1. 工程面板 PAGEREF _Toc300318722 h 3 HYPERLINK l _Toc300318723 2. 元素面板 PAGEREF _Toc300318723 h 4 HYPERLINK l _Toc3003

2、18724 3. 圖標(biāo)面板 PAGEREF _Toc300318724 h 5 HYPERLINK l _Toc300318725 4. 注釋面板 PAGEREF _Toc300318725 h 6 HYPERLINK l _Toc300318726 5. 故事板面板 PAGEREF _Toc300318726 h 7 HYPERLINK l _Toc300318727 6. 備注面板 PAGEREF _Toc300318727 h 8 HYPERLINK l _Toc300318728 第二章 窗口設(shè)計(jì) PAGEREF _Toc300318728 h 9 HYPERLINK l _Toc30

3、0318729 1. 創(chuàng)建工程 PAGEREF _Toc300318729 h 9 HYPERLINK l _Toc300318730 2. 創(chuàng)建對(duì)話框 PAGEREF _Toc300318730 h 10 HYPERLINK l _Toc300318731 3. 創(chuàng)建應(yīng)用程序窗口 PAGEREF _Toc300318731 h 12 HYPERLINK l _Toc300318732 4. 創(chuàng)建文檔窗口 PAGEREF _Toc300318732 h 14 HYPERLINK l _Toc300318733 5. 創(chuàng)建Edit Task對(duì)話框 PAGEREF _Toc300318733 h

4、16 HYPERLINK l _Toc300318734 6. 放置屏幕截圖 PAGEREF _Toc300318734 h 17 HYPERLINK l _Toc300318735 第三章 窗口交互 PAGEREF _Toc300318735 h 19 HYPERLINK l _Toc300318736 1. 添加故事看板 PAGEREF _Toc300318736 h 19 HYPERLINK l _Toc300318737 2. 添加導(dǎo)航功能 PAGEREF _Toc300318737 h 20 HYPERLINK l _Toc300318738 3. 添加文件打開標(biāo)準(zhǔn)對(duì)話框 PAGER

5、EF _Toc300318738 h 23 HYPERLINK l _Toc300318739 4. 添加菜單功能 PAGEREF _Toc300318739 h 26 HYPERLINK l _Toc300318740 第二部分 GUI Design Studio功能介紹 PAGEREF _Toc300318740 h 28 HYPERLINK l _Toc300318741 第一章 使用圖片 PAGEREF _Toc300318741 h 28 HYPERLINK l _Toc300318742 1. 導(dǎo)出設(shè)計(jì)文檔 PAGEREF _Toc300318742 h 28 HYPERLINK

6、l _Toc300318743 2. 使用圖片 PAGEREF _Toc300318743 h 29 HYPERLINK l _Toc300318744 第二章 使用組件 PAGEREF _Toc300318744 h 30 HYPERLINK l _Toc300318745 1. 使用設(shè)計(jì)文檔作為普通組件 PAGEREF _Toc300318745 h 30 HYPERLINK l _Toc300318746 2. 使用設(shè)計(jì)文檔作為組件縮略圖 PAGEREF _Toc300318746 h 31 HYPERLINK l _Toc300318747 3. 使用設(shè)計(jì)文檔作為定制組件 PAGERE

7、F _Toc300318747 h 32 HYPERLINK l _Toc300318748 第三章 使用模板 PAGEREF _Toc300318748 h 33 HYPERLINK l _Toc300318749 1. 基于模板創(chuàng)建工程 PAGEREF _Toc300318749 h 33 HYPERLINK l _Toc300318750 2. 向工程中插入模板 PAGEREF _Toc300318750 h 34 HYPERLINK l _Toc300318751 第四章 網(wǎng)頁(yè)程序設(shè)計(jì) PAGEREF _Toc300318751 h 35 HYPERLINK l _Toc3003187

8、52 1. 使用圖片和文字占位符 PAGEREF _Toc300318752 h 35 HYPERLINK l _Toc300318753 2. 創(chuàng)建網(wǎng)頁(yè)的頭部和尾部 PAGEREF _Toc300318753 h 36 HYPERLINK l _Toc300318754 3. 創(chuàng)建動(dòng)態(tài)內(nèi)容 PAGEREF _Toc300318754 h 36 HYPERLINK l _Toc300318755 4. 鼠標(biāo)事件 PAGEREF _Toc300318755 h 37 HYPERLINK l _Toc300318756 5. 前進(jìn)和后退切換 PAGEREF _Toc300318756 h 39GU

9、I Design Studio快速入門環(huán)境簡(jiǎn)介工程面板使用工程面板可以訪問工程所有設(shè)計(jì)文檔和圖片文件。在這里你可以快速做如下事情：創(chuàng)建新的工程目錄來(lái)組織文件。創(chuàng)建新的設(shè)計(jì)文檔。復(fù)制已有的設(shè)計(jì)文檔。從剪貼板上粘貼圖片生成圖片文件。加入其它工程和文件夾的鏈接，以訪問它們的所有設(shè)計(jì)文檔和圖片文件。特別適用于使用庫(kù)工程的公共組件或使用存在別處圖片的情況。當(dāng)你選擇了列表中的工程或文件夾時(shí)候，其對(duì)應(yīng)的文件樹將出現(xiàn)在下方。雙擊設(shè)計(jì)文件打開它，或者拖拽它將其添加到打開的設(shè)計(jì)文檔中。使用鼠標(biāo)右鍵拖拽添加組件縮略圖。雙擊或拖拽圖片文件，將其添加到打開的設(shè)計(jì)文檔中。元素面板元素面板提供所有可以用于創(chuàng)建應(yīng)用程序GUI

10、的窗體和控件。元素被分成若干類別。當(dāng)從列表中選擇某一類別時(shí)候，該類別的元素將出現(xiàn)在下面的窗口中。每個(gè)元素都是十分典型的，并且為了方便使用，一些類別中包含了同一個(gè)元素的不同變形形式。在這里你可以快速做如下事情： 雙擊或拖拽元素，可以將元素添加到打開的設(shè)計(jì)文檔中。在設(shè)計(jì)文檔中，雙擊元素編輯它的屬性。圖標(biāo)面板使用圖標(biāo)面板，可以訪問公共的、主工程中的、以及其它在通過工程面板鏈接添加的工程或目錄中的圖標(biāo)。公共圖標(biāo)按類別存放著，可以創(chuàng)建新的類別目錄來(lái)存放新的圖標(biāo)。當(dāng)從列表中選擇某一類別時(shí)，該類別的圖標(biāo)將出現(xiàn)在下面的窗口中，可以通過大小、顏色深度來(lái)過濾這些圖標(biāo)。此外，還可以通過外部編輯器創(chuàng)建新的圖標(biāo)或編輯已

11、經(jīng)存在的圖標(biāo)。圖標(biāo)分類列表過濾條件（圖標(biāo)尺寸、顏色深度）圖標(biāo)列表新建圖標(biāo)注釋面板故事板面板故事板面板提供用于構(gòu)建設(shè)計(jì)文檔中控制流程的元素來(lái)實(shí)現(xiàn)一個(gè)模擬原型。故事板元素通常顯示在其它設(shè)計(jì)元素的上方。備注面板備注面板提供記錄關(guān)聯(lián)設(shè)計(jì)文檔和它上面的元素的筆記摘要，可用于提供彈出注釋和生成詳細(xì)說(shuō)明規(guī)格文檔。和其它面板不一樣的是，備注面板的內(nèi)容會(huì)隨著當(dāng)前活動(dòng)的設(shè)計(jì)文檔而變化。窗口設(shè)計(jì)創(chuàng)建工程使用File | New Project.菜單命令，打開 New Project對(duì)話框。選擇一個(gè)合適的文件夾用于存放創(chuàng)建的工程，如上圖所示的C:My GUI Designs。如果想使用的文件夾不存在，在Locatio

12、n框可以直接輸入路徑，該文件夾會(huì)被自動(dòng)創(chuàng)建。在Name框輸入Tutorial，將為工程自動(dòng)創(chuàng)建一個(gè)Tutorial子文件夾。點(diǎn)擊OK按鈕創(chuàng)建工程后，工程將被自動(dòng)打開。創(chuàng)建對(duì)話框可以通過File | New 菜單命令，或者Ctrl + N快捷鍵創(chuàng)建新的未命名的設(shè)計(jì)文檔，之后在保存時(shí)需要指定保存位置和名稱。此外，還可以在Project面板點(diǎn)擊New Design圖標(biāo)，將文件直接創(chuàng)建在工程文件夾下。在彈出對(duì)話框中輸入NewTaskDialog。 在Elements面板中選中Windows and Dialogs分類。在元素列表中選中Dialog元素，以雙擊或拖拽的方式將元素添加到設(shè)計(jì)文檔中。雙擊對(duì)話

13、框元素打開其屬性設(shè)置頁(yè)，修改其標(biāo)題為Task Details。確保Layout | Snap to Edges菜單命令處于選中狀態(tài)。邊緣捕捉允許GUI元素間可以正確對(duì)齊。常常需要在窗口中保證頁(yè)邊空白和按鈕布局的一致性，這不是必須的但這么做可以增強(qiáng)專業(yè)感。在Elements面板的 Design Grids分類下，通過雙擊或拖拽的方式將下左圖所示的按鈕添加到對(duì)話框中。然后拖拽該按鈕使其捕捉到對(duì)話框的四邊，如下右圖所示。 在Elements面板中的 Buttons分類下，添加OK and Cancel按鈕。你會(huì)發(fā)現(xiàn)按鈕默認(rèn)的寬度和網(wǎng)格右列的寬度是一致的。在Elements面板中的Text分類下，添加

14、兩個(gè)Left Text元素，將它們對(duì)齊到網(wǎng)格左列的左邊線，雙擊靜態(tài)文本框?qū)⑺鼈兊膶傩苑謩e改為&Summary和&Description。&符號(hào)緊跟的字符顯示帶有下劃線表明它是鍵盤快捷鍵。點(diǎn)擊Summary，按住Ctrl的同時(shí)點(diǎn)擊Description，此時(shí)Summary和Description被同時(shí)選中，此時(shí)你可以同時(shí)調(diào)整它們的大小。在Elements面板中的Text分類下，分別添加Edit Box和Multiple Line Edit Box元素。同時(shí)選中Description和Multiple Line Edit Box元素，使用Layout | Align | Top菜單命令或者在工具欄

15、點(diǎn)擊按鈕，使兩個(gè)元素頂端對(duì)齊。最后，清空兩個(gè)文本框的Text屬性后保存。做好的對(duì)話框如下圖所示：創(chuàng)建應(yīng)用程序窗口在項(xiàng)目工程文件夾下創(chuàng)建一個(gè)名為ApplicationWindow的設(shè)計(jì)文檔，在Elements面板的Windows and Dialogs分類下，添加Frame Window元素，修改其標(biāo)題屬性為Tutorial Application。在Elements面板的Toolbars and Menus分類下，添加Menu Bar元素，左右拉伸菜單欄使其捕捉到應(yīng)用程序窗口的左右兩邊。雙擊菜單欄打開其屬性編輯器，選中&View項(xiàng)，在編輯框中輸入&Task后點(diǎn)擊Insert按鈕，將Task菜單

16、項(xiàng)插入到View項(xiàng)后面，點(diǎn)擊OK保存修改。在菜單欄下面添加Docked Toolbar元素。默認(rèn)情況下，工具欄的上邊框?qū)傩詾镚roove以保證它和菜單欄可以融合，下邊框的屬性是Raised帶有一個(gè)凹陷的邊緣。如果沒有菜單欄而想創(chuàng)建一個(gè)工具欄，可以在工具欄的屬性頁(yè)中將上邊框?qū)傩栽O(shè)為Flat。在Elements面板的Toolbars and Menus分類下，添加10個(gè)Toolbar Button元素和3個(gè)Toolbar Spacer Vertical元素到工具欄，效果如下左圖。切換到Icons面板的Toolbars分類下，添加合適的圖標(biāo)按鈕到工具欄按鈕上，效果如下右圖。 在Elements面板的

17、Toolbars and Menus分類下，添加Status Bar元素，調(diào)整狀態(tài)欄的大小使其捕捉到應(yīng)用程序窗口的底部。切換到Controllers分類，在狀態(tài)欄的右下角添加Small Window Resize Gripper元素。重新切換到Toolbars and Menus分類下，添加3個(gè)Status Indicator元素至狀態(tài)欄，分別修改其文本屬性為CAP、NUM、SCRL，并置NUM為激活狀態(tài)其余置為非激活狀態(tài)。最后，保存修改，做好的應(yīng)用程序窗口如下圖所示：創(chuàng)建文檔窗口在項(xiàng)目工程文件夾下創(chuàng)建一個(gè)名為TaskListDocument的設(shè)計(jì)文檔，在Elements面板的Windows

18、and Dialogs分類下，添加Frame Window元素，修改其標(biāo)題屬性為Task List。在Elements面板的Lists,Trees and Tables 分類下，添加一個(gè)Check List Box元素。選中CheckBox，使用鍵盤上的和鍵可以使CheckBox相對(duì)于左上角平移，按住Shift鍵的同時(shí)使用鍵盤上的或可以縮放CheckBox。雙擊CheckBox打開其屬性編輯器，切換到Style選項(xiàng)卡，勾選Flat Style選項(xiàng)將CheckBox的邊框設(shè)置為細(xì)邊框。切換到Data選項(xiàng)卡，刪除默認(rèn)的列表項(xiàng)，插入Walk the dog、Breakfast、Fix the car

19、、Lunch、Watch some TV、Dinner、More TV、Go to bed項(xiàng)目，選中Lunch項(xiàng)勾選Selected復(fù)選框?qū)⑵湓O(shè)置為默認(rèn)狀態(tài)下選中的列表項(xiàng)。在 Annotations面板下，添加Boxed Annotation元素將其置于文檔窗口的右側(cè)。設(shè)置其Title屬性為 More Info ，Annotation屬性為 We probably want more info in columns with headers for sorting.。在Annotations面板下，添加Large Dot Target元素到CheckBox上，單擊工具欄上的Make Conne

20、ction命令進(jìn)入構(gòu)建連接模式：光標(biāo)變成鉛筆形狀，任何可以被連接的元素將被橙色的矩形框包圍。在Dot和Annotation間建立連接。 最后，保存修改，完成效果如下圖所示：創(chuàng)建Edit Task對(duì)話框通過在工程樹狀圖中雙擊打開NewTaskDialog.gui文件，使用Ctrl + A全選后Ctrl + C復(fù)制所有元素。創(chuàng)建新的設(shè)計(jì)文檔EditTaskDialog，使用Ctrl + V粘貼之前復(fù)制的元素。（或者，雙擊打開NewTaskDialog.gui文件，使用File | Save As.菜單命令將其保存為新的設(shè)計(jì)文檔EditTaskDialog.gui，該文檔會(huì)自動(dòng)創(chuàng)建到工程樹狀圖中。）

21、分別修改文本框的Text屬性為L(zhǎng)unch和Phone the nearest pizza place and order something nice.最后，保存修改，完成效果如下圖所示：放置屏幕截圖在項(xiàng)目工程文件夾下創(chuàng)建一個(gè)名為Screenshot的設(shè)計(jì)文檔。在Project面板下，通過拖拽的方式將ApplicationWindow.gui設(shè)計(jì)文檔添加到當(dāng)前設(shè)計(jì)中。注意，ApplicationWindow只能作為一個(gè)組件整體被選中，其中的各子元素都被鎖定，并且原來(lái)在工具欄各按鈕上的高亮的矩形框都不被顯示。事實(shí)上，元素都直接關(guān)聯(lián)到設(shè)計(jì)文檔而不是創(chuàng)建副本，這意味著設(shè)計(jì)文檔修改后，重新打開或刷新（

22、F5）引用它的設(shè)計(jì)文檔將會(huì)看到這些改變。以同樣的方式添加TaskListDocument.gui和EditTaskDialog.gui。將會(huì)發(fā)現(xiàn)在TaskListDocument中創(chuàng)建的Annotation元素和在EditTaskDialog中創(chuàng)建的網(wǎng)格線均被隱藏。選中EditTaskDialog對(duì)話框，使用工具欄的Open Component按鈕可以直接打開組件所在的設(shè)計(jì)文檔。最后，保存修改，完成效果如下圖所示：使用Simulator | Run Simulator菜單命令（F9）或工具欄按鈕，預(yù)覽結(jié)果，如下圖所示。使用Esc鍵退出模擬狀態(tài)返回設(shè)計(jì)模式。窗口交互添加故事看板打開Project

23、面板，創(chuàng)建一個(gè)新的設(shè)計(jì)文檔Storyboard1。在工程樹狀圖中使用拖拽的方式將ApplicationWindow.gui、TaskListDocument.gui、EditTaskDialog.gui 、NewTaskDialog.gui添加到當(dāng)前的設(shè)計(jì)文檔中。使用命令欄的Make Connection按鈕，構(gòu)建如下圖所示的連接。如果需要?jiǎng)?chuàng)建多個(gè)連接，可以按住Shift鍵的同時(shí)按下命令按鈕。再次單擊命令按鈕或者單擊Esc鍵退出連接模式。注意：雖然ApplicationWindow在選擇時(shí)被作為一個(gè)最小單元，但是構(gòu)建連接時(shí)仍然可以使用其中的子元素。在應(yīng)用程序窗口的外圍出現(xiàn)淡綠色的框，意味著該窗

24、口被選為起點(diǎn)或者設(shè)計(jì)的主元素。系統(tǒng)默認(rèn)第一個(gè)就是主元素?？梢允褂肍10或使用右鍵菜單Set Representative Element來(lái)指明主元素（此時(shí)淡綠色會(huì)變?yōu)樯罹G色）。主元素是模擬器顯示的起始元素，也是當(dāng)該設(shè)計(jì)文檔作為其他設(shè)計(jì)文檔的組件時(shí)候，展現(xiàn)的起始元素。最后，保存修改，運(yùn)行模擬器。添加導(dǎo)航功能雙擊打開Storyboard1設(shè)計(jì)文檔，使用File | Save As.菜單命令將Storyboard1設(shè)計(jì)文檔另存為Storyboard2，它會(huì)被自動(dòng)創(chuàng)建到工程樹中。雙擊工具欄新建按鈕和Task List對(duì)話框之間的連線打開連接屬性設(shè)置頁(yè)，修改Navigation Type屬性由默認(rèn)的Mo

25、dal Popup為Show Window，將Task List對(duì)話框設(shè)置為非模態(tài)。點(diǎn)擊OK按鈕應(yīng)用修改，箭頭形狀發(fā)生改變。連接類型具體說(shuō)明參見下表：連接類型箭頭形狀說(shuō)明Modal Popup把目標(biāo)對(duì)象作為模態(tài)窗口在其他所有窗口的高一級(jí)打開，直到所有同級(jí)窗口都關(guān)閉為止。Modal Choice Popup與Modal Popup類似。目標(biāo)窗口打開后點(diǎn)擊窗口區(qū)域以外窗口會(huì)自動(dòng)關(guān)閉（或取消）。當(dāng)窗口關(guān)閉后，之前打開的Modal Choice Popup窗口也會(huì)自動(dòng)關(guān)閉。適用于嵌套級(jí)聯(lián)菜單和其他彈出式選擇窗口。Show Window在同級(jí)顯示目標(biāo)窗口，而其他同級(jí)窗口仍可處于活動(dòng)狀態(tài)。（個(gè)人認(rèn)為把目標(biāo)

26、窗口作為非模態(tài)窗口，類似于查找替換窗口）Hide Window隱藏指定的目標(biāo)窗口。Toggle Window根據(jù)目標(biāo)窗口是否可見顯示或隱藏窗口。目標(biāo)窗口不可見則顯示它，目標(biāo)窗口可見則隱藏它。Toggle Overlay根據(jù)目標(biāo)窗口是否可見顯示或隱藏窗口。與Toggle Window類似，不同點(diǎn)在于目標(biāo)窗口不識(shí)別鼠標(biāo)事件而鼠標(biāo)事件傳遞給目標(biāo)窗口壓蓋的下層元素。適用于響應(yīng)鼠標(biāo)經(jīng)過事件的同時(shí)，按鈕、選項(xiàng)卡或其他元素仍然需要導(dǎo)航切換的情況。Replace Window顯示目標(biāo)窗口，取代另一個(gè)窗口使其隱藏。如果目標(biāo)窗口連接到 Window Placeholder Anchor（窗口占位符錨點(diǎn)），則連接到

27、該占位符的所有窗口將被取代，適用于選項(xiàng)卡和面板等。如果目標(biāo)窗口連接到Window Position Anchor（窗口位置錨點(diǎn)）或者沒有連接錨點(diǎn)，將顯示目標(biāo)窗口而關(guān)閉源窗口，適用于向?qū)Ш托蛄谢娘@示等。（？）Replace Top Window顯示目標(biāo)窗口，取代所有其他同級(jí)窗口使其隱藏。使用該連接類型以及組件縮略圖，網(wǎng)頁(yè)程序可以在頁(yè)面間進(jìn)行導(dǎo)航切換，支持歷史記錄前進(jìn)和后退的切換。（？）默認(rèn)情況下，窗口均在屏幕中心被打開。在Storyboard面板下添加Window Position Anchor元素，將其置于欲顯示Task List對(duì)話框的位置上，在錨點(diǎn)和Task List對(duì)話框之間建立連接。

28、運(yùn)行模擬器測(cè)試Task List對(duì)話框是否出現(xiàn)在預(yù)想的位置。在Storyboard面板下，添加Close、Close and Accept、Close and Cancel按鈕到設(shè)計(jì)文檔，建立如下圖所示的連接。Close按鈕用來(lái)關(guān)閉連接的父窗口；而Close and Accept、Close and Cancel按鈕用來(lái)關(guān)閉和它關(guān)聯(lián)的所有同級(jí)窗口，兩者并沒有什么實(shí)際的區(qū)別。注意，在本版本中，這一步不是必須的，但是這么做可以使設(shè)計(jì)思想更加明確。在Storyboard面板下，添加Exit按鈕與Tutorial Application應(yīng)用程序窗口建立連接，用來(lái)直接關(guān)閉模擬器。最后，保存修改，完成效果

29、如下圖所示：添加文件打開標(biāo)準(zhǔn)對(duì)話框以TaskListDocument.gui文件為模板，創(chuàng)建一個(gè)新的副本文件的方法有三：打開TaskListDocument.gui文件，使用File | Save As.菜單命令將該設(shè)計(jì)文檔重新保存為EmptyDocument.gui文件。打開TaskListDocument.gui文件，使用Project | Duplicate Design.菜單命令。打開TaskListDocument.gui文件，在Project面板下使用命令圖標(biāo)。雙擊打開列表框?qū)傩皂?yè)刪除所有的列表項(xiàng)，保存修改，完成效果如下圖所示：以Storyboard2.gui為模板，創(chuàng)建副本文件S

30、toryboard3.gui。打開Storyboard3.gui，添加EmptyDocument.gui。在Project面板上，使用Add Project Link命令按鈕添加標(biāo)準(zhǔn)組件庫(kù)的工程鏈接。（鏈接地址為C:Documents and SettingsAll UsersDocumentsGUI Design StudioSamplesStandard ComponentsStandard Components.gdp） 雙擊打開Dialog_FileOpen_Standard.gui，可以看到文件打開對(duì)話框有自己的一系列的導(dǎo)航用于關(guān)閉對(duì)話框和打開下拉菜單。但是，當(dāng)把它拖拽到設(shè)計(jì)文檔中時(shí)

31、，它只能被看作是一個(gè)整體組件，它只是一個(gè)對(duì)話框而已！這一特性使得我們可以自由使用之前設(shè)計(jì)好的設(shè)計(jì)文檔作為模板。大多數(shù)情況下，使用文件打開對(duì)話框只是為了表明這里將出現(xiàn)一個(gè)文件打開窗口而已，若覺得標(biāo)準(zhǔn)文件打開對(duì)話框不能滿足應(yīng)用需求，可以以Dialog_FileOpen_Standard.gui為模板創(chuàng)建一個(gè)新的副本。為了防止不小心修改標(biāo)準(zhǔn)模板庫(kù)里已有的模板，建議在Tutorial工程下創(chuàng)建Dialog_FileOpen_Standard的副本。雙擊打開Storyboard3.gui，添加Dialog_FileOpen_Standard到設(shè)計(jì)文檔，在工具欄的文件打開按鈕和文件打開對(duì)話框之間建立Mod

32、al Popup類型的連接。在文件打開對(duì)話框中單擊Open按鈕后需要執(zhí)行的操作實(shí)際是關(guān)閉對(duì)話框并打開TaskListDocument窗口。首先，從Storyboard面板中添加Close and Accept按鈕，在在Open按鈕和Close and Accept按鈕之間創(chuàng)建連接；然后，在Open按鈕和TaskListDocument對(duì)話框之間創(chuàng)建連接。新的導(dǎo)航切換動(dòng)作會(huì)覆蓋該組件的設(shè)計(jì)文檔中原先的切換動(dòng)作。在本例中，Dialog_FileOpen_Standard.gui中Open按鈕關(guān)聯(lián)著Close and Accept按鈕，如果在Storyboard3將文件打開對(duì)話框的Open按鈕關(guān)聯(lián)到

33、TaskListDocument對(duì)話框，那么實(shí)際運(yùn)行時(shí)單擊Open將切換到TaskListDocument對(duì)話框。當(dāng)一個(gè)按鈕或其它元素上有多個(gè)導(dǎo)航切換行為時(shí)，切換動(dòng)作按照它們創(chuàng)建時(shí)的順序執(zhí)行。（Open按鈕為何不能先和TaskListDocument對(duì)話框再和Close and Accept按鈕建立連接？若先顯示文檔窗口再關(guān)閉打開對(duì)話框，文檔窗口和打開對(duì)話框處于同一級(jí)別，Close and Accept命令會(huì)使的文檔窗口立即關(guān)閉。）在Storyboard面板下添加Window Position Anchor元素，將錨點(diǎn)和Task List對(duì)話框之間建立連接，調(diào)整好Task List對(duì)話框的顯示

34、位置。在Storyboard面板下添加Navigation Overlay元素（見下左圖），使用拖拽的方式將其置于如下右圖所示的位置上。將其和EditTaskDialog對(duì)話框間建立連線，雙擊連線打開連接屬性設(shè)置頁(yè)，將Event Trigger屬性從Left Click改為L(zhǎng)eft Double Click。運(yùn)行模擬器，將鼠標(biāo)移至條紋矩框的范圍內(nèi)雙擊可打開EditTaskDialog對(duì)話框。 最后，保存修改，完成效果如下圖所示：添加菜單功能以Storyboard3 為模板，創(chuàng)建副本Storyboard4.gui。在Project面板上打開Standard Components 下的Common

35、_Meuns.gui設(shè)計(jì)文檔。按下Ctrl鍵的同時(shí)，鼠標(biāo)左鍵單擊File、Edit、View、Window和Help菜單元素，使用Ctrl + C復(fù)制。雙擊打開Storyboard4設(shè)計(jì)文檔，使用Ctrl + V粘貼菜單元素。 在Elements面板的Toolbars and Menus分類下，添加Popup Menu元素。雙擊打開屬性設(shè)置對(duì)話框，在Item選項(xiàng)卡中，刪除原先的菜單項(xiàng)，添加&New和&Edit菜單項(xiàng)。 在應(yīng)用程序窗口的菜單項(xiàng)和對(duì)應(yīng)的彈出菜單間建立連接。注意建立的連接自動(dòng)變成Modal Choice Popup類型，當(dāng)用戶在目標(biāo)窗口（在本例中是菜單）區(qū)域外單擊后將關(guān)閉目標(biāo)窗口，同

36、樣適用于級(jí)聯(lián)菜單。從Storyboard面板中添加Exit按鈕，與File菜單中的Exit命令建立連接。在File菜單中的Open命令與文件打開對(duì)話框間建立連接。在Task菜單中的New和Edit命令分別與對(duì)應(yīng)的任務(wù)對(duì)話框間建立連接。最后，保存修改，完成效果如下圖所示： GUI Design Studio功能介紹使用圖片導(dǎo)出設(shè)計(jì)文檔使用File | Export菜單命令，將打開的設(shè)計(jì)文檔導(dǎo)出成圖片格式，支持的圖片格式有*.bmp、*.gif、*.jpg、*.png、*.emf。 使用圖片其實(shí)，很多設(shè)計(jì)都不是白手起家，一般情況都是修改原有界面或基于原有界面做改進(jìn)。那么，一個(gè)一個(gè)元素的拖拉和擺放還

37、原原先界面的工作量是驚人的。可以使用截圖的方法重用原有界面：將截好的圖片放在工程目錄下，使用Design | Add Bitmap菜單命令將圖片添加到設(shè)計(jì)文檔中。將截好的圖片放在工程目錄下，在Project面板下使用Refresh Files按鈕刷新，截好的圖片文件會(huì)自動(dòng)添加到工程樹狀圖中。粘貼文件到圖片刷新將圖片復(fù)制到剪貼板，在Project面板下使用Paste Image to File按鈕將剪貼板中的圖像保存到工程目錄下，然后就可以添加到設(shè)計(jì)文檔中使用。注意：添加的圖片關(guān)聯(lián)到圖片文件而不是創(chuàng)建圖片拷貝。使用組件使用設(shè)計(jì)文檔作為普通組件在Project面板下，按下鼠標(biāo)左鍵通過拖拽的方式可以

38、把選中的設(shè)計(jì)文檔作為組件添加到設(shè)計(jì)文檔中。此外，還可以使用Design | Add Component Design.菜單命令添加。添加的組件只能作為一個(gè)整體被選中，其中的各子元素都被鎖定，元素都直接關(guān)聯(lián)到設(shè)計(jì)文檔而不是創(chuàng)建副本。因此，組件所在的設(shè)計(jì)文檔被修改后，在使用該組件的設(shè)計(jì)文檔中通過Design | Refresh菜單命令（F5）刷新后就可以看到修改產(chǎn)生的變化。覆蓋連接組件可以看作一個(gè)獨(dú)立的整體，組件中的子元素仍然可以添加導(dǎo)航連接。如果組件的某個(gè)子元素在其自身的設(shè)計(jì)文檔中已經(jīng)存在連接，那在包含該組件的設(shè)計(jì)文檔中對(duì)該組件的子元素建立的導(dǎo)航連接將覆蓋原先的連接。覆蓋屬性可以覆蓋組件子元素的

39、屬性，甚至該子元素本身還包含子元素的情況下也可以覆蓋屬性。屬性覆蓋可以延伸到任何深度。使用工具欄的Component Item Selection Mode按鈕選中組件的子元素，該子元素周圍會(huì)出現(xiàn)橙色的矩框，雙擊（或Alt + Enter快捷鍵或Edit | Porperties菜單命令）打開其屬性設(shè)置頁(yè)可以修改其屬性。 還原被覆蓋的子元素屬性，方法有二：使用工具欄的Component Item Selection Mode按鈕選中欲還原的組件子元素，點(diǎn)擊鼠標(biāo)右鍵，選擇右鍵菜單中Restore Component Item命令，還原組件子元素。以任意模式選中子元素或組件，點(diǎn)擊鼠標(biāo)右鍵，選擇右鍵

40、菜單中的Restore Component命令，還原整個(gè)組件。使用設(shè)計(jì)文檔作為組件縮略圖當(dāng)僅需要與組件創(chuàng)建一個(gè)連接時(shí)，為了節(jié)省空間可以創(chuàng)建組件縮略圖（Thumbnail component），常用于在網(wǎng)頁(yè)程序中切換網(wǎng)頁(yè)。在Project面板下，按下鼠標(biāo)右鍵通過拖拽的方式可以把選中的設(shè)計(jì)文檔作為組件縮略圖添加到設(shè)計(jì)文檔中。組件縮略圖功能是有限制的，在包含組件縮略圖的設(shè)計(jì)文檔中，不能覆蓋組件縮略圖的屬性，也不能在組件縮略圖間建立連接。使用設(shè)計(jì)文檔作為定制組件定制組件是一個(gè)包含一個(gè)或多個(gè)元素的用于重用的設(shè)計(jì)文檔，它被放置于一個(gè)特殊的文件夾下，可以像添加普通組件那樣添加定制組件。與普通組件不同，添加定

41、制組件到設(shè)計(jì)文檔實(shí)際上是產(chǎn)生定制組件的副本。因此，定制組件的原始設(shè)計(jì)文檔發(fā)生改變并不會(huì)影響到定制組件的副本。在Project面板下，選中任何一個(gè)文件夾，使用Project | Set as Custom Elements Folder菜單命令或者單擊鼠標(biāo)右鍵在彈出的右鍵菜單中使用Set as Custom Elements Folder命令，文件夾的狀態(tài)變?yōu)橄聢D所示的狀態(tài)。設(shè)計(jì)文檔位于定制組件文件夾下在Project面板下，按下鼠標(biāo)左鍵通過拖拽的方式可以把選中的設(shè)計(jì)文檔作為定制組件添加到設(shè)計(jì)文檔中。設(shè)計(jì)文檔位于普通組件文件夾下在Project面板下，按住Ctrl鍵的同時(shí)按下鼠標(biāo)左鍵通過拖拽的方

42、式可以把選中的設(shè)計(jì)文檔作為定制組件添加到設(shè)計(jì)文檔中。使用模板基于模板創(chuàng)建工程使用File | New Project菜單命令打開新建工程對(duì)話框，在Based on下拉列表中可以選擇基于某個(gè)模板創(chuàng)建新項(xiàng)目。若選擇Select template.，可以瀏覽本地上安裝的所有模板。向工程中插入模板可以向現(xiàn)有工程中插入模板，在工程樹狀列表中選中文件夾，點(diǎn)擊鼠標(biāo)右鍵在彈出的右鍵菜單中選擇Insert from Template.。插入的模板文件不會(huì)覆蓋原先已經(jīng)存在的文件，如果出現(xiàn)同名情況，新插入的模板文件將會(huì)使用替換名稱。網(wǎng)頁(yè)程序設(shè)計(jì)GUI Design Studio提供了Replace Top Wind

43、ow的連接類型用于頁(yè)面鏈接。此外，還新增瀏覽模式。頁(yè)面的頂部為帶有Back按鈕和Forward按鈕的瀏覽欄，頁(yè)面默認(rèn)出現(xiàn)在頂部而不是窗口中心區(qū)域。如果設(shè)計(jì)的主元素是網(wǎng)頁(yè)，則會(huì)自動(dòng)進(jìn)入瀏覽模式。當(dāng)然，可以隨時(shí)在瀏覽模式和非瀏覽模式自由切換。使用圖片和文字占位符許多網(wǎng)頁(yè)程序包含大量的文本和圖片內(nèi)容，但是通常情況下在設(shè)計(jì)程序時(shí)這些內(nèi)容都是不可用的。所以，可以使用文本和圖片占位符替代真實(shí)文本直到這些文本變得可用為止。文本在Elements面板的Web分類下，使用Greek Text元素實(shí)現(xiàn)文本占位。通常，該元素含有大量拉丁文本，如果不需要這么多文本可以刪除部分內(nèi)容這樣可以加速繪圖。圖片在Elements面板的Web分類下，使用Image Placeholder元素實(shí)現(xiàn)圖片占位?？梢栽O(shè)置圖片占位符的文字、背景色、頁(yè)邊留白。 創(chuàng)建網(wǎng)頁(yè)的頭部和尾部一個(gè)典型的網(wǎng)站或網(wǎng)頁(yè)程序常常會(huì)在每個(gè)頁(yè)面上都有公共元素，例如頭部和尾部，它們常常會(huì)包含一些頁(yè)面連接。在GUI DesignStudio中，可以創(chuàng)建共享組件并把它們添加到每個(gè)需要的頁(yè)面中。對(duì)于頁(yè)面級(jí)的導(dǎo)航切換，可以使用Replace Top Window連接類型，它會(huì)使用目標(biāo)頁(yè)面替換