經過這兩篇「NSOutlineView 使用程式呈現樹狀資料」、「Mac Cocoa NSOutlineView 資料綁定」的練習，這次直接處理 NSTableView，果然駕輕就熟，稍為查一些資料，很快就做出成果了，畢竟它比 NSOutlineView 簡單，基本架構都差不多。

這篇就不談太多細節，只把重點記錄下來。

資料綁定

先由資料綁定做起。

準備資料

TableView 是表格狀的資料，所以就用藏經目錄的結構來處理，底下只有三個欄位，ID、經名與作譯者。

宣告 catalog 變數，它是 Catalog 物件的陣列，底下建立了三筆資料。

• NSOutlineView 使用程式呈現樹狀資料
• Mac Cocoa NSOutlineView 資料綁定

此篇實作是接續「NSOutlineView 使用程式呈現樹狀資料」，那次是用程式來處理，本篇要使用 Cocoa Binding 的方式來綁定資料。

關於 Cocoa Binding，可先參考這篇「Mac Cocoa 資料綁定 (Binding) 實作測試」的基本概念。

簡單來說，就是利用資料綁定的方法來呈現樹狀目錄，而不是寫一堆程式來處理。

準備資料

為了配合綁定的需求，把上一個例子的資料稍為修改如下，主要是加上 class 要加上 @objcMembers，變數要加上 @objc 和 dynamic。

底下就是全部的程式了。

• NSOutlineView 使用程式呈現樹狀資料
• Mac Cocoa NSOutlineView 資料綁定

前言

在 Mac AppKit 中，樹狀圖元件是使用 NSOutlineView，這個又被翻譯成「大綱視圖」。

官方文件在此：

https://developer.apple.com/documentation/appkit/NSOutlineView

簡單來說，這個文件大概只比天書簡單一點，真不知誰能看的懂？沒有範例大概是最大的問題，整個 Mac 的說明檔似乎都沒有範例（有啦，上次看 WebView 有一個），而一些有範例的文件，不是時效有點久，就是用 Object-C 寫的，實在很難參考。

翻了許多文件，剛好看到這一篇有人提出 NSOutlineView 的問題，其中一位解答的內容很豐富，有圖有程式，我就試著把程式複製起來，竟然順利執行成功，於是我逐一研究追蹤它的程式，再對照天書一般的說明文件，搭配 Google 翻譯服用，終於又有了初步的成果了。

一些心得

這陣子的研究，對 Mac 程式中的代理 (delegate) 有一點點感覺了。以前用 C++ Builder 處理樹狀目錄時，想法其實很直覺，就是先用程式把每一個項目產生並設定，然後把它們依順序串好，最後把這串交給樹狀目錄主元件，然後再呈現，就完成了。

NSOutlineView 處理的方法不同，它有四個主要的資料處理和代理程式，我們要依它的規則去實作，最後才會產生結果。

我想這大概是以前看過某篇提到的感想，Windows 的作法是把程式、資料、元件等混在一起，不是良好的 MVC 模式，而 Mac 的分離就比較清楚。資料歸資料、處理程式歸程式，畫面由代理程式處理。

底下一一實作並說明。

前言

會研究綁定，主要是因為在研究 NSOutlineView (樹狀圖) 時，得知資料有二種處理方法，一種是由程式處理，一種是設定綁定，因為綁定的部份看不懂，所以才先研究簡單的綁定功能。

在網路上找到了這篇文章，看起來寫的蠻清楚的，例子也簡單好懂，不過實作時，偏偏無法運作，花了一晚找不到原因，也查不到相關資料，最後總算在某一篇問答中找到一句話，突破了盲點，才完成初步的綁定測試。

我的環境是：

macOS 10.15 Catalina

Xcode 11.1

Swift 5

也許之前的版本就沒有問題，這點我無法確定，底下一一說明操作經過。

基本設定

我就抄襲該篇的實作，先設計一個 Person 類別，繼承 NSObject，類別中有一個 scroe 屬性。並在 ViewController 中宣告 son 物件。

我原本以為是不是 scroe 不能宣告變數的類型？後來我有指定是 Int 也沒有問題，是我多慮了。

• WKWebView 功能測試 (上) - 建置、設定、呈現
• WKWebView 功能測試 (下) - 與 Javascript 交流

使用 Javascript 連結網頁與 APP

最後要測試的是最重要的功能，也就是使用 Javascript 連結網頁與 APP。

希望達到的功能有二種：

• 由 APP 向網頁注入 Javascript，並取得傳回資料。

• 網頁的 Javascript 執行 APP 的功能並傳資料給 APP。

有了這雙方溝通的功能，就可以做出很多應用了。

由 APP 向網頁注入 Javascript

在這裡我們要設計二個測試：

1. 把 APP 輸入欄位的內容寫到網頁中的 Label 中。

• WKWebView 功能測試 (上) - 建置、設定、呈現
• WKWebView 功能測試 (下) - 與 Javascript 交流

以前 Mac 程式內建的瀏覽器元件是用 WebView，iOS 則是用 UIWebView，而現在最新的是用 WKWebView，不過文中若提到 WebView 通常就是指 WKWebView，除非有特別強調是指舊版的框架。

建置 WKWebView

因為直接使用 WebView 元件似乎會有問題，在 Xcode 上雖然可以執行，但是直接由 APP 執行就看不到 WebView，所以採用使用 code 來建置 WebView。

底下的 code 是 copy 來的，黑色是原來就有的，紅色是後來加上去的。

import Cocoa

import WebKit

class ViewController: NSViewController, WKUIDelegate, WKNavigationDelegate {

    let webView = WKWebView()

    override func viewDidLoad() {

        super.viewDidLoad()

        // Do any additional setup after loading the view.

        self.webView.uiDelegate = self

        self.webView.navigationDelegate = self

        webView.frame = CGRect(x:0,y:0,width:400,height: 270)

        view.addSubview(webView)

        let myURL=URL(string: "https://www.apple.com")

        let myRequest = URLRequest(url: myURL!)

        webView.load(myRequest)

    }

    override var representedObject: Any? {

        didSet {

        // Update the view, if already loaded.

        }

    }

}

• Xcode 用 Storyboard 開發程式記錄
• Cocoa 用程式操控視窗 (上)
• Cocoa 用程式操控視窗 (中)
• Cocoa 用程式操控視窗 (下)

本篇要實作二個視窗，一個主視窗，一個子視窗，類似在 MS Window 開發程式時的 fmMain、fmOption 二個視窗。

重點在於主視窗可以開啟子視窗，子視窗可以關閉，但並不是像 Mac 的視窗那樣真的關閉，只是隱藏起來。當再次開啟副視窗時，則再次呈現，畫面中的內容也保持一樣。

同時也希望各視窗之間可以彼此操控對方的元件。

初步構想

1. 先設定全域變數 vcMain 和 vcOption 來記錄二個視窗的 ViewController。

2. 要開啟子視窗時，先判斷子視窗是否已經實作了？若無，則實作它，若已實作了則顯示它。

3. 實作視窗後，記錄在全域變數中。

4. 子視窗關閉時，採用隱藏方式。

5. 利用全域變數去控制對方視窗的元件。

• Xcode 用 Storyboard 開發程式記錄
• Cocoa 用程式操控視窗 (上)
• Cocoa 用程式操控視窗 (中)
• Cocoa 用程式操控視窗 (下)

Window 與 View 的生命周期

記錄一下自己測試的順序，這也是為什麼在 ViewController 中要設定 Window 的代理不能在第一個 viewDidLoad 之後做，因為此時 window 還沒有 windowDidLoad。要等到 viewWillAppear 時才能設定 window 的代理。

• viewDidLoad
• windowDidLoad
• viewWillAppear
• viewDidAppear
• viewWillLayout
• viewDidLayout
• viewWillLayout
• viewDidLayout
• ------------------
• windowShouldClose
• windowWillClose
• viewWillDisappear
• viewDidDisappear

• Xcode 用 Storyboard 開發程式記錄
• Cocoa 用程式操控視窗 (上)
• Cocoa 用程式操控視窗 (中)
• Cocoa 用程式操控視窗 (下)

在這系列【Xcode 用 Storyboard 開發程式記錄】已經學會了建立視窗與畫面，開啟視窗，以及為元件寫簡單程式。

底下這一系列就要學習如何用程式來開啟視窗，以及跨視窗操作視窗和元件等各種功能，最後再實作一個總複習，讓視窗與元件的控制可以自在無礙，這也是未來設計 CBReader Mac 版的的前測試。