本文將在GUI Design Studio 使用教程八：創建導航功能的功能基礎上，引入標準庫組件的使用。你還將了解GUI Design Studio中的導航元素（如按鈕）如何執行多個操作。

1、首先，我們需要創建一個新的"Empty Document"設計文件。我們將以現有的"Task List Document" 設計為基礎。

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

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

現在，在文本框中輸入新的文檔名稱"EmptyDocument"：

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

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

4、點擊ok，保存修改，然后保存設計文檔。

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

6、選擇任務列表文檔窗口和其相關的關閉按鈕，將其移到到左邊，以騰出空間給空白的文檔窗口。創建"EmptyDocument.gui"設計文檔。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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