我最近在想，要如何幫助 Delphi 或是 VB 的設計師們可以快速入門 iPhone 程式開發。
Delphi 之所以方便使用，是提供了一系列方便使用的 VCL 元件，讓設計師可以快速地把視窗軟體實作出來。
所以，這次我就把 IB (Interface Builder) 與 Xcode 之間很類似 VCL 的拖曳觀念，來寫一篇教學文件給大家參考，希望可以有拋磚引玉的作用。
我在這裡的範例是做一個調色盤，有三個分別是紅綠藍的 Slider Bar，藉由 Slider Bar 的調整，讓整個背景隨時呈現色彩。
首先，開啟 Xcode 新增一個 Window-based Application
取名 palette
產生新的 Project 如下：
找到 MainWindow.xib 開啓，會交由 Interface Builder (IB)
在 IB 會看到兩個視窗，一個是 MainWindow.xib (像是 Delphi 的 View Forms/Units)。
(如果畫面不一樣，改變工具列上面的 View Mode)
另一個是 Window 的 View。(像是 Delphi 的 Form)
在 IB 按下 +SHIFT+L 開啓 Library (像是 Delphi 上面的 Components Palette)
將 Slider 拖曳到 Window 的 View 上面排列、調整位置、大小 (會 Delphi 這個就不難)
在 IB 按下 +SHIFT+I 開啓 Inspector (像是 Delphi 的 Object Inspector)。
設定 Slider 的『屬性』(記得 Window 點選到 Slider，跟 Delphi 設定屬性原理一樣)
Value Minimum: 0，Maximum: 255
再拖曳兩個 Label 進來 Window 的 View 上面排列，只要對該 Label 點兩下，就可以直接修改內容，分別給 Red Value 與 0
把這三個選取後，複製貼上(就像在 Delphi 的 Form 上面作業一樣)，一共產生三組，分別要處理 RGB 用。
您也可變更 Label 的顏色『屬性』
這樣會比較好辨識
到這裡都很簡單吧！
把 Object 拉到 Window 的 View 上面，就像是在 Delphi 把 VCL 元件拉到 Form 上面一樣簡單。
接下來我們把元件的關係連結起來。
從 Library 把 NSObject(金黃色正方體) 拉到 MainWindow.xib 上面
看到這樣：
然後按 +4 把 Inspector 切換到 Identidy
這裡我們要設定 Class Identity, Class Action, Class Outlets 等三個部份
Class Identity 類別識別，目前是 NSObject，我們設定名稱為 Controller
Class Action 是指元件的動作，相當於 Delphi 的事件
Class Outlets 是哪些元件會在程式內用到的、會與畫面互動的，可以在這裡指定
再看一次我們的畫面，我命名如下：
sliderR, sliderG, sliderB 會觸發事件，我們要在程式內安排程式碼。
labelR, labelG, labelB 會因為事件發生，在程式碼內改變他們的屬性。
所以把這6個加到 Class Outlets 內。
確認 MainWindow.xib 點選到的是剛剛加進來的 Object (Type: NSObject)。
Class Identity 的 Class 命名為 Controller。
Class Action 分別加上 (在框框下面有個 + 號)
- sliderChangedR: (Type: id)
- sliderChangedG: (Type: id)
- sliderChangedB: (Type: id)
Class Outlets 分別加上
- sliderR (Type: UISlider)
- sliderG (Type: UISlider)
- sliderB (Type: UISlider)
- labelR (Type: UILabel)
- labelG (Type: UILabel)
- labelB (Type: UILabel)
接著我們把 IB 建立的產生成 Class 檔案，選取功能表 File\Write Class Files...
接著的視窗內，Save As: 會依照剛剛 Class Identity 的 Class: Controller 命名
把檔案儲存在 Classes 的檔案夾內(我習慣把 Class 都放到 Classes 檔案夾內)
按下 Save 後，會出現詢問視窗，是否要把 Controller.m 與 Controller. h 加到 palette 專案裡，記得勾選 palette 後按下 Add
回到 Xcode 會多出這兩個檔案 Controller.m 與 Controller.h
Controller.m 的內容
開啓 Controller.h 將 @interface Controller: 後面加上 NSObject
這裡可以看到 6 個 IBOutlet 與 3 個 IBAction 的定義
再來開啓 Controller.m 來安排事件程式：
依照 sliderR, sliderG, sliderB 的變化而改變 labelR, labelG, labelG 的值。
這時候興奮地按下 Build and go，出現 iPhone 的畫面了！
可是拉動 Slider 並不會看到數值改變啊！
那是因為我們在 IB 還沒有把 Connections 建立起來。
所以回到 IB 點選 MainWindows.xib 的 Controller，然後按 +2 把 Inspector 切換到 Connections Inspector：
這裡區分三個部份，我們要用前面兩個：Outlets 與 Received Actions。
看到 Outlets 內的 labelB 右邊的圈圈吧！將游標移到上面，會出現一個 + 號，然後按住滑鼠左鍵，移動到 Window 上面的 labelB 然後放開滑鼠左鍵。在移動滑鼠的時候，會看到一條藍色的連結線，讓設計者很清楚哪一個要連結。
Connections Inspector 的 Outlets 內 labelB 會有連結 Label (0) 的顯示
依此類推，將 labelG, labelR, sliderR, sliderG, sliderB 也都連結起來
然後換 Received Actions 內的三個。
一樣從 sliderChangedB 右邊的圈圈開始，拉到 Window 的藍色 Slider 上面，然後放開滑鼠左鍵
在放開滑鼠左鍵後會看到這個視窗，點選 Value Changed
依此類推，可以看到 Received Actions 顯示
記得把 MainWindow.xib 存檔後，回到 Xcode
Build and go 就可以看到結果了！
最後階段要改變 Window 背景顏色
開啓 Controller.h 加上 #import "paletteAppDeledate.h"
開啓 Controller.m 在 @implementation 上面加上 @class paletteAppDelegate;
因為 window 的這個元件是在 paletteAppDelegate 內，我們要從 Controller 去使用 paletteAppDelegate 內的元件。
(有點像是 Delphi 要把被使用的 Unit 加到 uses 內)
接著在這三個事件內加上這兩行
最後的 Controller.m 程式
執行看看，成功了吧，恭喜！
