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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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