本文將在GUI Design Studio 使用教程八：創(chuàng)建導(dǎo)航功能的功能基礎(chǔ)上，引入標(biāo)準(zhǔn)庫(kù)組件的使用。你還將了解GUI Design Studio中的導(dǎo)航元素（如按鈕）如何執(zhí)行多個(gè)操作。

1、首先，我們需要?jiǎng)?chuàng)建一個(gè)新的"Empty Document"設(shè)計(jì)文件。我們將以現(xiàn)有的"Task List Document" 設(shè)計(jì)為基礎(chǔ)。

在創(chuàng)建導(dǎo)航功能一文中，展示了創(chuàng)建設(shè)計(jì)副本的一種方法（打開"TaskListDocument.gui"文件，然后使用"File | Save As..."菜單命令將該文檔保存并重命名為"EmptyDocument.gui"），接下來，我們介紹一種更快的方式來創(chuàng)建設(shè)計(jì)副本。

在工程樹中選擇"TaskListDocument.gui"文件，然后使用"Project | Duplicate Design..."菜單項(xiàng)或者相關(guān)的項(xiàng)目面板命令按鈕：

現(xiàn)在，在文本框中輸入新的文檔名稱"EmptyDocument"：

2、選中這2個(gè)注釋元素，并使用"Edit | Delete"菜單命令或者 Delete鍵，將它們刪除。 注意，當(dāng)相互連接的兩個(gè)元素之間的其中一個(gè)被刪除時(shí)，元素之間的鏈接被自動(dòng)刪除。

3、雙擊任務(wù)列表框打開屬性編輯器，然后刪除所有的列表項(xiàng)。你需要首先選擇一個(gè)列表項(xiàng)目來啟用"Delete"命令按鈕：

4、點(diǎn)擊ok，保存修改，然后保存設(shè)計(jì)文檔。

5、打開"Storyboard2"設(shè)計(jì)文檔，通過"File |Save As..." 菜單命令創(chuàng)建一個(gè)名為"Storyboard3.gui"的設(shè)計(jì)文檔。

6、選擇任務(wù)列表文檔窗口和其相關(guān)的關(guān)閉按鈕，將其移到到左邊，以騰出空間給空白的文檔窗口。創(chuàng)建"EmptyDocument.gui"設(shè)計(jì)文檔。

7、我們需要重新分配“新建文檔”命令的功能以打開空白的文檔窗口。選擇并刪除第一個(gè)文檔窗口的連接線。選擇，為新的空白文檔窗口創(chuàng)建新的鏈接。

8、在故事面板上添加另一個(gè)“關(guān)閉”框，然后在它與空白文檔窗口的 'X' 關(guān)閉按鈕之間創(chuàng)建鏈接。

9、我們需要添加到故事面板的最后一個(gè)組件是文件打開對(duì)話框。首先，需要?jiǎng)?chuàng)建一個(gè)過程與其鏈接。在工程面板上，按下"Add Project Link" 命令按鈕：

瀏覽 "<GUI Design Studio install folder>\Samples\Standard Components\Standard Components.gdp" 項(xiàng)目文件。它將被添加到Project/Folder 列表。

10、找到“打開文件”對(duì)話框的組件文件("Dialog_FileOpen_Standard.gui"):

標(biāo)準(zhǔn)的&ldquo;打開文件”對(duì)話框包含了示例文件夾名稱和詳情。它們不可能完全滿足您的應(yīng)用需求。你可以利用一個(gè)標(biāo)準(zhǔn)對(duì)話框作為模板，創(chuàng)建你自己的對(duì)話框。

11、打開"Dialog_FileOpen_Standard.gui" 文件，在項(xiàng)目瀏覽器中雙擊并查看該文件。

12、在工具欄的文件打開按鈕和文件打開對(duì)話框之間建立"Modal Popup"類型的連接。

13、我們真正想要"Open"按鈕執(zhí)行的操作是編輯對(duì)話框，然后打開任務(wù)列表文檔窗口。你可以訪問對(duì)話框組件中的按鈕來創(chuàng)建新的導(dǎo)航。

首先，從"Storyboard"面板中添加"Close and Accept"按鈕，在"Open"按鈕和"Close and Accept"按鈕之間創(chuàng)建連接；然后，在"Open"按鈕和"TaskListDocument"對(duì)話框之間創(chuàng)建連接，并將Navigation Type修改為"Show Window"。

14、在這個(gè)階段，任務(wù)列表中的文檔窗口將再次出現(xiàn)在屏幕中心的默認(rèn)位置。因此，我們需要添加另一個(gè)定位錨。

15、此時(shí)，我們需要建立一個(gè)鏈接，以便用戶雙擊任務(wù)列表文檔窗口中的選定項(xiàng)時(shí)，它會(huì)打開任務(wù)詳細(xì)信息編輯器對(duì)話框。

在故事板面板上，找到條行框中的"Navigation Overlay" 元素，并將其拖動(dòng)到設(shè)計(jì)中，同時(shí)將其定位在突出顯示的任務(wù)上：

將其和"EditTaskDialog"對(duì)話框間建立連線，雙擊連線打開連接屬性設(shè)置頁(yè)，將"Event Trigger"屬性從"Left Click"改為"Left Double Click"。運(yùn)行模擬器，將鼠標(biāo)移至條紋矩框的范圍內(nèi)雙擊可打開"EditTaskDialog"對(duì)話框。

16、最后，保存修改，效果如下：