愛瘋手機.tw / appholic.tw ：app程式 / app programming

iPhone Interface Builder之一：2009年09月10日星期四

本文參考iPhone Interface Builder User Guide內容。

(A) Interface Builder的角色？

答：iPhone程式開發，Interface Builder佔了重要的地位，以下圖為例，假設想做一個華氏轉攝氏的轉換表，讓使用者，

1. Click Deg F之下的框框，會出現最下方的數字鍵盤。
2. 按下Convert按紐後，將Deg F下框框的數值轉成攝氏，並顯示在Deg C之下的框框內。

下圖整個畫面是由Interface Builder作成，完成後存在.xib或.nib檔案裡。再通過一些操作，讓這些畫面上的東西和程式code相連，這就是Interface Builder的角色。

(B) 上圖中的各個項目及整個工作，如何用程式做到？

答：這些項目可以用UILabel、UITextFiled、UIButton完成：

首先，在程式中

1. 先定個Class MyView為UIView Class。
2. 在MyView中寫下面兩行，可定義出Deg F及Deg C下的兩個text field instance variable：
   • IBOutlet UITextField *infield;
   • IBOutlet UITextField *outfield;
3. 再在MyView中定一個convert function (or method)如下：
   • -(IBAction) convert: id (sender);
   • convert 負責將infield的華氏值轉為攝氏後寫入outfiled內。

接著：

UILabel:UIView : UIResponder : NSObject：Deg F 和Deg C兩個可以用UILabel完成。

UITextFeild:UIControl : UIView : UIResponder : NSObject：兩個框框用UITextField完成。

UIButton：UIControl : UIView : UIResponder : NSObject：Convert用UIButton完成。

問題來了，如何連結MyView內的infield、outfield、convert到畫面？

(C)如何連結MyView內的infield、outfield、convert到畫面？

答：經過(B)項中的IBOutlet & IBAction ( Defining Outlets and Actions in Xcode )。IBOutlet就是代表object的instance variable，IBAction就是object之間的message。

(D) iPhone Interface Builder User Guide的重要內容：

答：

Interface Builder Basic Concepts：Interface Builder Document 即是.xib .nib file，用Interface Builder將object drag入Interface Builder Document，也可以建立objects之間的link或relationship。objects包括windoes, views, controls, menus，這些都是visual objects，non-visual objects有cotroller object，它是來管理windows和views的。

Interface Builder Document的例子：

.xib畫面--圖3：最上方為tool bar，tool bar上有view mode selectot、inspector、search field，最下方為status bar，status bar上顯示Xcode project。 其中為各個object，這些是nib objects，有proxy object(outside the document)及interface object(actually created when document is loaded)，proxy object有Files Owner、First Responder、Application三樣，interface object有window、object、Custom View三樣。

.xib：intermedia XML-based file, text based (can perform diff), used during development。

.nib： during deployment，.xib轉成.ni，.nib是binary file。

按.xib畫面上的 i後出現.xib file的資訊---圖4，注意project folder。

圖3

圖4

connections and bindings。

(E)可以看.xib file嗎？

答：可以。見下三圖。找到.xib file，用右鍵/打開檔案的應用程式/其他(圖5)，出現應用程式，scroll到"文字編輯"(圖6)，選用此應用程式。出現.xib檔，是個xml型式檔案(圖7)。仔細看圖7的橫線各行，可以看到，

第一行是IBDocument.RootObjects

第二行是IBUIWindow

第三行是IBUIViewController

第四行是IBUIView

第五行是IBLabel

第六行是NSFrame

這些即是.xib記錄window 、viewcontroller、 view label的方法。

圖5。

圖6

圖7

(F)其他相關資訊：

答：XcodeWorkspace Guide、Source Control Management ( SCM )。 resource programming guide、nib loading process。 Bundle Programming Guide。 Bundle structure。

(G)看一下用Interface Builder將畫面製作完成後，和程式間的連結：

圖8：選擇MainWindow.xib/ Files Owner，滑鼠移至Application connection/Outlets/delegate，左邊MainWindow.xib的convert App Delegate會被highlight，表示convertAppDelegate Class是UIApplication的delegate。如此，在main()中 int retVal = UIApplicationMain ( ... );這一行就可自動跳到UIApplication的delegate --- convertAppDelegate了。

圖9：選擇MainWindow.xib/First Responder後，看右邊Responder Connections，橫線上有convert:汶convertBack:兩個method(or message)，covert:即是所寫的將華氏換攝氏的程式，又多寫了一個將攝氏換華氏的程式 -- convertBack:，所以Responder也記錄了要respond user clicking 跳到convert:及convertBack: ，注意下面有一堆copy: cut: ...，表示可以用copy: cut:..等功能，試試在鍵入度數時，用copy: cut: ... 等功能。這表示，一旦用了IB Object，自動送上許多editing功能。

圖10：選擇MainWindow.xib/convert App Delegate後，看右邊convert App Delegate Connections，可以看到Outlets有contentView連上MyView及window連上Window，contentView、window均為convertAppDelegate的instance variable。Referencing Outlets中delegate連上File's Owner。

圖12：選擇MainWindow.xib/convert App Delegate，滑鼠移至convert App Delegate Connections/Referencing Outlets/delegate，左邊MainWindow.xib的File's Owner會被highlight。

圖13：選擇MainWindow.xib/Window後，看右邊Window Connections，可以看到Referencing Outlets有convert App Delegate。滑鼠移至Window connection/Outlets/delegate，左邊MainWindow.xib的convert App Delegate會被highlight。

圖14：選擇MainWindow.xib/My View Controller後，可看到右邊My View Controller Identity內空無一物，但可看到有Class Identity、Class Actions、Class Outlets、Interface Builder Identity等項目，在Interface Builder Identity中有Object ID 是15。

圖15,16,17,18：instance variables -- infield, outfield,messages --- convert:, convertBack:對應到Interface Builder Objects的圖示。

圖19：My View的referenceing Outlets中contentView連到convert App Delegate。

圖20,21,22,23,24,25,26：圖20~25是六個Interface Objects和code相互間的連結， 圖26是六個Interface Objects與code一起在iPhone simulator上的呈現。 注意：兩個UILabel並未和任何code連結，表示，iPhone系統程式的code也在運作。