[iPhone] Interface Builder

1, Interface Builder shorts for IB

2, What is Interface Builder

Interface Builder is a visual tool to create the user interfaces of your iPhone OS and Mac OS X applications.
  a) Add elements by dragging preconfigured objects.
  b) Add visual elements: such as windows, views, controls, menus, and other elements.
  c) Add non-visual elements: such as view controller objects your application uses to manage its windows and views.
  d) Arrange elements: set their attributes, establish connections between them
  e) Create connections
  f) Save created items in a nib file.

2, Launch Interface Builder 
The 1st way: Run /Developer/Applications/Interface Builder
The 2nd way: On Xcode project window, double click left button of mouse on xib file.

When Interface Builder is launched, Interface Builder Document Window is shown

3, Other Workflow Tools
3.1 Library
A)
  The library window contains the objects and resources you add to your Inter face Builder documents. The library windows contains two mode: Objects and Media, in different mode, you can access different type of objects; In Objects mode, the window displays the objects you use to build the user interface of your application, including windows, menus, views, controls, and many other types of objects; In Media mode, the window
displays the image and sound resources you can refer to from your objects.

B)
  To open library window, click Tools -> Library

3.2 Inspector
A)
  The inspector window displays the attributes for the currently selected objects along with controls for adjusting those attributes. Because most objects have a large number of configurable attributes, the inspector
window is divided into multiple panes, each of which displays a specific set of attributes. Each pane is then further divided into sections, which can be collapsed to save space.
  a) Attributes
     Displays the object-specific configuration attributes.
  b) Effects
     Displays the Core Animation–based and Core Graphics–based attributes associated with the object.
  c) Size
     Displays information about the size and position of the object and also displays alignment controls and autosizing attributes.
  d) Bindings
    Displays the available bindings for an object and provides an interface for binding those objects to one or more controllers.
  e) Connections
    Displays the outlets and actions of the object along with information about which ones are currently connected to other objects.
  f) Identity
    Displays information that helps identify the object, either at design time or runtime.
  g) AppleScript
    Displays the scripts to run in response to runtime events. This pane is used when building AppleScript-based applications using AppleScript Studio and the AppleScriptKit framework.

B)
  To open Inspector window, click Tools -> Inspector. You can also open the window by clicking Tools -> Attribute/Size/Connection/Identity Inspector, and you can open connection inspector window by clicking right button of mouse on a object or pressing Ctrl key then clicking left button of mouse.

C) Connection Inspector Sections Introduction
   a) Outlets
    Lists the outlets exposed by the object. An outlet is a member variable of the class that has the IBOutlet keyword associated with it (such as IBOutlet UIView *view, IBOutlet UITextField *textField). Outlets let you create inter-object references from in Interface Builder.
   b) Received Actions
    Lists the incoming actions that the current object is capable of handling. Each of these entries corresponds to a member method of the object. A received action may be associated with multiple objects. The Received Actions has one of following type:
    - (IBAction)respondToButtonClick;
    - (IBAction)respondToButtonClick:(id)sender;
    - (IBAction)respondToButtonClick:(id)sender forEvent:(UIEvent*)event;


2.3 Strings
To open Strings window, click Tools -> Strings

3, Usefule Modifier Key
  A) Ctrl 
    press Crtl key then click left button of mouse on object to open connections inspector panel
  B) Option
    Press Option key then make mouse over an object to view the alignment
  C) Shift
    Press Shift key then click object in Library window to add object to current selected object.

4, Select Objects
  A) Click to select in most cases
     when you click in a window, Interface Builder selects the object directly under the mouse
  B) lick-wait-click to select the child object:
    a) Click the parent object to select it.
    b) Wait for a second or so.
    c) Click the child object to select the child object.

5, Nib or Xib files
Files in the nib and xib formats play a very important role in the creation of applications. In their primary role, nib files simplify the code you have to write to create your application’s user interface. They provide a
loadable set of objects that replace the code you would write to create windows, views, and other inter face-related items.

The nib and xib file formats themselves provide you with options for the development of your projects.
Although they represent the same information, you use each type of file differently. The xib file format is
preferred during development because it provides a SCM-friendly format, and because xib files can be
compared with the diff command. At build time, Xcode automatically converts your project’s xib files to nib
files so that they can be deployed with your application. If you have existing nib files, however, you can also
continue saving to that same format.

you might see any of the following items at the top level of the nib file:
  * Window resources
  * Menu resources (both menu bars and individual menus)
  * Views
  * Formatter objects
  * Controller objects (view controllers, array controllers, object controllers, and so on)
  * Core Data managed object contexts
  * Program-specific custom objects
  * Proxy objects, including File’s Owner

To create new Nib file, on Xcode window, click File -> New File... -> iPhone OS -> User Interfaces -> Application/Empty/View/Window XIB

6, Add New View Controller (Customize View Controller)
  a) On Xcode window, click File -> New File... -> iPhone OS -> Cocoa Touch Classes -> UIViewController Subclass, then input class name of your view controller
  b) Create a view nib file by click File -> New File ... -> iPhone OS -> User Interfaces -> View XIB
  c) Connect view with controller as following:
    i). On Interface Builder Document Window, make File's Owner object get  focus, then open Identity Inspector Panel by clicking Tools -> Identity Inspector, then set the class to that you created on step a).
    ii) Open Connections Inspector panel of File's Owner (make File's Owner proxy object get focus, then click right button of mouse, or press Ctrl then click left button of mouse, or click Tools -> Connections Inspector, or click Tools -> Inspector then click Connection Panel), then move mouse to the icon "o" on the right of line that contains text (outlet) "view", when the icon is filled with "+", press right button of mouse, then drag it to the target view.
  c) Open the view and add any additional subviews to it to define your user interface.
  d) Connect any additional outlets and actions.
  e) Save the new nib file and add it to your Xcode project.


7, File's Owner Proxy Object
In a nib file, the File’s Owner proxy object is a placeholder for an object that you plan to specify when you load the nib file. The object does not exist in the nib file itself and is not created when the nib file is loaded. When you load your nib file into memory, the nib-loading methods expect you to pass along an object that you want to designate as the nib-file owner. As the nib file is loaded into memory, the nib-loading code substitutes the object you provide for any references to the File’s Owner proxy in the nib file. This substitution results in your object’s outlets and actions being automatically connected to the objects inside the nib file.



8 Add Connection
8.1 Add Outlet Connection Example
  A) Add Outlets
    a) Declare
      @interface MyViewController : UIViewController
      {
        IBOutlet UITextField *textField;
        IBOutlet UISwitch *ctlSwitch;
      }
      @property (nonatomic, retain) IBOutlet UITextField *textField;
      @property (nonatomic, retain) IBOutlet UISwitch *ctlSwitch;
      @end
    b) Implement
      @implement MyViewController
      @synthesize textField;
      @synthesize ctlSwitch;
      @end
    The class MyViewController contains two outlets: textField and ctlSwitch.
  B) Add Outlet Connection
    a) Create a new view Nib
    b) Add objects of UITextField and UISwitch to the view
    c) Open Interface Builder, and set the class of File's Owner to "MyViewController"
    d) Open Connections Inspector Panel of File's Owner, and right-click "o" of outlet textField, then drag to the object of UITextField on the view. Use the same method to create connectons of outlet ctlSwitch.
    After Outlet connection is created, then MyViewController is instanced, the data members textField is pointed to the objects of NSTextFiled, and ctlSwitch is pointed to NSSwitch automatically.
8.2 Add Event Connection
  A) Add Received Actions
    a) Declare
      @interface MyViewController : UIViewController
      ......
      - (IBAction)switchView;  //switchView is method name you declared, this likes message handler in MFC
      - (IBAction)textIsChanged:(id)sender;  //sender is pointed to the object which sends the message
      - (IBAction)switchIsChanged:(id)sender forEvent:(UIEvent*)event; //event stores the event information
      @end
    b) Define
      @implement MyViewController
      ......
      - (IBAction)switchView
      {
      }
      - (IBAction)textIsChanged:(id)sender
      {
      }
      - (IBAction)switchIsChanged:(id)sender forEvent:(UIEvent*)event
      {
      }
      @end
  B) Add Event Connection
    (In fact, this like to create message mapping policy in MFC)
    a) Create a new view Nib
    b) Add objects of UITextField and UISwitch to the view
    c) Open Interface Builder, and set the class of File's Owner to "MyViewController"
    d) Open Connections Inspector Panel of File's Owner, right-click "o" of Received Action, then drag to the object of UITextField on the view, and select the event to be handled.


9, Localization

11, Controller
  you can customize controller by implement a sub-class of UIViewController, or you can use preconfigured controller. If you use preconfigured controller, you need add a view to controller's window (double-click controller object icon on Interface Builder Document Window to open controller's window, then dray view object to that window; in the same way, you can add tool bar, tab bar to controller's window).

12, Set Font
  On Interface Builder Document Window, click menu Font -> Show Fonts to set font, including collection, family, type, and size.

13, Set Color
  If the specified color  is not effective, please adjust 'Opacity' in color setting panel.

14, View and SubView
If you add multiple sub-views to a view at the same position, the previous added sub-views will be hidded by latter added one. In other words, sub-views has z-order in a view.

15, Use Customized Objects in Interface Builder
i.e use customized UIView
1) Define customized objects
  //UICView.h
  @interface UICView:UIView
   {
   }
  @end

  //UICView.m
  @implementation UICView
   //Handle touches began event
   - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
   {
       printf("members count=%i\r\n", touches.count);
       for (UITouch *touch in touches)
       {
           printf("tap count = %i\r\n", touch.tapCount); //for dragging event, touch.tapCount is 0
       }
   }
  @end
2) Add UIView Object
   Open IB, and add a normal UIView object to XIB
3) Change object's class name
   Open Identity Inspector panel, and change the class name of the object added on step 2) to UICView.