NSTableViewをCocoa Bindingsで使ってみた

TableViewにデータを表示するためにCocoa Bindingsを初めて使ってみたので手順をメモしておきます。

環境

はじめに

ViewControllerにTableViewを設置しておきます。

f:id:takopomm:20170405151155p:plain

こんな感じです。

1. Array Controllerを設置

f:id:takopomm:20170405151356p:plain

Array ControllerをSceneの中に追加します。

f:id:takopomm:20170405151403p:plain

@IBOutletでViewControllerに接続しておきます。

class ViewController: NSViewController {
    @IBOutlet var arrayController: NSArrayController!

2. モデルを書く

TableViewに表示したいパラメータを持つモデルを定義します。

例えば、「No」「名前」「年齢」などなど…自由に。

3. Array Controllerにコンテンツを追加

先ほどIBOutletで接続したArray Controllerに、TableViewに表示したいパラメータを持つモデルデータを追加します。

arrayController.content = [もでる1, もでる2, もでる3, ...]

という感じです。

4. Storyboardの設定

4.1 Array Controller

Array Controllerを選択した状態で、Attributesの設定項目Object Controllerを編集します。

f:id:takopomm:20170405151707p:plain

  • Class Name: 先ほど定義したモデルのクラス名
  • Keys: モデルのパラメータ名を+から追加

f:id:takopomm:20170405151717p:plain

このような感じにしておきます。

4.2 Table View

Table Viewを選択した状態で、Bindingの設定項目Table Content - Content を編集します。

f:id:takopomm:20170405152031p:plain

  • Bind to Array Controller: チェックをONにする
  • Controller Key: arraygedObjectsのままにしておく

4.3 Table View Cell

Table View Cellを選択した状態で

f:id:takopomm:20170405152516p:plain

Bindingの設定項目Valueを編集します。

f:id:takopomm:20170405152523p:plain

  • Bind to Table Cell View: チェックをONにする
  • Controller Key:空欄のまま
  • Model Key Path:objectValue.xxx

Model Key Pathxxxの部分には、自分で定義したモデルの、表示したいパラメータ名を指定します。 上記の例ではnumberというパラメータを指定しています。

パラメータ名だけを指定してもダメなようです。objectValueが必要でした。

すべてのTable View Cellに設定する

TableViewのカラムが複数ある場合は、すべてのTable View Cellに対して、4.3のようにモデルのパラメータ名を指定しておきます。

以上で準備完了です。

5. 実行

f:id:takopomm:20170405152838p:plain

表示できました!

TableViewDataSourceを指定しなくても、データを表示できる所がいいですね。

ハマったところ

Table View CellModel Key Pathに何を設定したらよいか分からず色々と試していたら、Storyboardのビルドが一向に進まず、しかしエラー内容は特に表示されず、、という状況になってしまい困りました。。

サンプル

上記の実装だけですが、GitHubに置きました。

github.com