Swift 入門指南 V1.00 - 單元 23 - Outlet 與 Action

Swift 入門指南 V1.00 - 單元 23 - Outlet 與 Action

Outlet 是指視窗元件, Action 則是視窗元件觸發的事件 (event) ,像是點擊按鈕讓 Label 改變文字,點擊動作就是 Action ,而 Label 則是對應的 Outlet 。本來 GUI 要做什麼事情,相關程式碼原本都需要自己設定,現在 Xcode 簡化了流程,倒是我們需要調整一下 Xcode 的視窗區域,首先注意到右上角兩個圈圈的按鈕,點擊這個按鈕開啟輔助編輯區

如果輔助編輯區開啟的不是 ViewController.swift ,請點擊檔案的地方自行載入。
然後視窗有點擠,再點擊右上角的按鈕關閉左側導覽列

同樣的,繼續點擊右上角的按鈕關閉右側工具列

好了,看起來如下

最後一個 Label 要當作訊息提示,點選這個 Label 後,按滑鼠右鍵或觸控板一指按著另一指點擊,接著就會出現快顯功能表,找到 Referencing Outlet ,從小圓圈拖曳到程式碼的地方, Xcode 就會自動插入相關程式碼

需要先輸入屬性 (property) 名稱,這裡輸入 display ,最後點擊〔Connect〕

這樣就插入名為 display 的屬性了,注意這是用 @IBOutlet 標記,然後加上 weak 宣告。 weak 是關鍵字 (keyword) 之一,這是為了避免這個 display 屬性執行後進入強參考循環 (strong reference cycle) ,也就是達到關閉程式後同時釋放記憶體的目的。同時注意 display 的型態是 NSTextField ,最後有驚嘆號 ! 。
再來點選 New 按鈕,顯示快顯功能表後找到 Sent Actions 的 selector ,從小圈圈拖曳到程式碼的地方,就會插入處理事件的方法 (method)

輸入名稱為 newMethod ,最後點擊〔Connect〕

事件方法則是用 @IBAction 標記,暫時不用理參數,內容預設是空白,我們加入將 display 的 stringValue 屬性設定成 "This is New Button"

執行後,點擊 New 就會顯示相關訊息

接著再把兩個 Text Field 設定 Outlet ,六個按鈕也設定類似的事件處理的方法,如下

下一個單元我們開始整合 Encrypt 類別,實際讓 GUI 有編碼、解碼的功能。
中英文術語對照
事件 | event |
屬性 | property |
關鍵字 | keyword |
強參考循環 | strong reference cycle |
方法 | method |
訂閱:
張貼留言 (Atom)
window.___gcfg = { 'lang': 'zh-TW' };
沒有留言:
張貼留言