いつも忘れるのでCocoa Bindingで設定することをまとめる


Cocoa Bindingあんまり使わないから、つかう度に設定方法を忘れてしまいます。

StoryBoardやnib上でガシガシいじるので、ビルドエラーも起きないしログ読んでも原因すぐわからないし、Bindingについての書籍もなかなかないしっていうことで、未来の自分がまたBindingいじる時の備忘録です。

あと、AppkitにはUICollectionViewDataSourceみたいなDataSourceはないのでNSCollectionViewつかうときは割とBindingはつかうのかなとかって思っています。（もっと簡単でいいやり方あれば知りたいです。）

今回サンプルアプリを作りながらBindの設定を思い出します。

# つくるもの
* OSXアプリ
* ウィンドウ上に9個のアイコン+タイトルを表示
![スクリーンショット 2015-06-14 3.32.39.png](https://qiita-image-store.s3.amazonaws.com/0/61792/d0b649ec-6579-4b6d-1057-608741435e1f.png "スクリーンショット 2015-06-14 3.32.39.png")


# 作り方
## Storyboardを用意する
![スクリーンショット 2015-06-14 0.27.22.png](https://qiita-image-store.s3.amazonaws.com/0/61792/5c0ad70f-366a-c0c2-0fc8-70d5423cda21.png "スクリーンショット 2015-06-14 0.27.22.png")
1. ViewControllerにCollectionViewを貼り付ける
2. CollectionViewItemの中身を用意する
3. CollectionViewItemにStoryboardID振る

## 画像を用意する
適当に用意する。
![スクリーンショット 2015-06-14 3.32.55.png](https://qiita-image-store.s3.amazonaws.com/0/61792/b8239638-1c31-52ea-60b1-4213217dc32a.png "スクリーンショット 2015-06-14 3.32.55.png")



## コーディング
### Modelクラス
* テキストとイメージを持つクラスを作成

```swift:hoge.swift
import Cocoa
import Foundation

class Hoge : NSObject {
    var _name: String = ""
    var _image: NSImage
    
    init(name: String) {
        _name = name
        _image = NSImage(named:name)!
        
        super.init()
    }
}

```
### ViewControllerクラス
* WindowにならべるCollectionViewItemをCollectionViewに設定
* さっきつくったHogeクラスを配列にしてCollectionViewに設定

```swift:ViewController.swift
import Cocoa

class ViewController: NSViewController {

    var hogeArray = NSMutableArray()
    var nameArray = ["doctor","girl","hanamiju","madam","boy","UMA","woman","worker","yankee"]
    
    @IBOutlet weak var hogeCollectionView: NSCollectionView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let itemPrototype = self.storyboard?.instantiateControllerWithIdentifier("collectionViewItem") as! NSCollectionViewItem
        hogeCollectionView.itemPrototype = itemPrototype
        
        for name in nameArray {
            var hoge = Hoge(name: name)
            hogeArray.addObject(hoge)
        }
        
        hogeCollectionView.content = hogeArray as [AnyObject]
    }
}
```

##Binding

上記まででコーディングは終わり。
InterfaceBuilderにもどってバインドしていきます。

### ArrayControllerの設定
* ArrayControllerをViewControllerのSceneに追加
* 追加したArrayControllerを選択し、Attribute InspectorからArrayとして取り込むModelを設定（下図）

![スクリーンショット 2015-06-14 3.48.28.png](https://qiita-image-store.s3.amazonaws.com/0/61792/34f95f28-ea79-afe6-3d79-99cef54037fe.png "スクリーンショット 2015-06-14 3.48.28.png")

### CollectionViewの設定
CollectionViewのバインド先をArrayControllerに設定
* CollectionViewを選択し、Binding InspectorからContentを設定。（下図）

![スクリーンショット 2015-06-14 0.55.01.png](https://qiita-image-store.s3.amazonaws.com/0/61792/d90cb697-35cd-14ff-b75c-3e7523fb50e4.png "スクリーンショット 2015-06-14 0.55.01.png")

### CollectionViewItemの設定
各コントロール（今回はImageとLabel）のBind先をCollectionViewItemに設定する
* CollectionViewの各コントロールを選択
* bind先をCollectionViewItemに設定
* Model Key Pathを「representedObject.プロパティ」に設定

![スクリーンショット 2015-06-14 4.04.41.png](https://qiita-image-store.s3.amazonaws.com/0/61792/c69bc2c2-7d16-d12f-1063-71e9d779162b.png "スクリーンショット 2015-06-14 4.04.41.png")

これでうまく表示できるかと。

# まとめ
上記でやったことを図に起こしてみるとこんな感じ
![zu.png](https://qiita-image-store.s3.amazonaws.com/0/61792/c3be4035-c67c-b9ba-248b-6599ee29931f.png "zu.png")


* Array Controllerにモデルを設定
* CollectionViewをArray Controllerにバインド
* CollectionViewItemをCollectionViewのitemProtorypeに設定
* CollectionViewItemに内包されているControlsをCollectionViewItemにバインド