---

Create the User Interface Using Interface Builder 3

In the next phase of your project you’ll see how seamlessly Interface Builder and Xcode work together, enabling you to construct and implement the various elements in your project more efficiently and with less overhead.

1. Open Interface Builder 3 (Figure 2-4) and click the MyDocument.nib file in your Xcode project window. Because of the new integration between Xcode 3 and Interface Builder 3, you’ll find the actions and outlets you’ve declared in your MyDocument.h file are also synchronously updated in Interface Builder 3. This will become apparent once you begin to work with your MyDocument nib file and the library of controls available in Interface Builder 3.

   
   

   Figure 4-4  The new Interface Builder 3 icon

   

2. In Interface Builder 3, you’ll find a new library of controls. Scroll down until you find the QuickTime Capture View control, as shown in Figure 4-5.

   
   

   Figure 4-5  The QuickTime Capture View object in the library

   

   The QTCaptureView object provides you with an instance of a view subclass to display a preview of the video output that is captured by a capture session.

3. Drag the QTCaptureView object into your window and resize the object to fit the window, allowing room at the bottom for your Add Frame button (already shown in the illustration below) and to the right for your QTMovieView object in your QTKit still motion capture application.

   Choose Tools > Inspector. In the Identity Inspector, select the information (“i”) icon. Click in the field Class and your QTCaptureView object appears, as shown in Figure 4-6

   
   

   Figure 4-6  The QTCaptureView window and Class Identity in the Inspector

   

4. Set the autosizing for the object in the Capture View Size Inspector, as shown in Figure 2-7.

   
   

   Figure 4-7  Setting the autosizing for your QTCaptureView object

   

5. Now you want to repeat the same sequence of steps to add your QTMovieView object to your Window (already shown above). Scroll down in the Library of controls until you find the QTMovieView object, shown in Figure 4-8.

   
   

   Figure 4-8  The QTMovieView control in the Interface Builder library

   

6. Select the QTMovieView object (symbolized by the blue Q) and drag it into your Window next to the QTCaptureView object, shown below.

7. Choose Tools > Inspector. In the Identity Inspector, select the information (“i”) icon. Click in the Class field and your QTMovieView object appears, as shown in Figure 4-9.

   
   

   Figure 4-9  The QTMovieView object defined in the field Class

   

8. Follow the procedure in step 4 above to set the autosizing for your QTMovieView object.

9. Now you want to specify the Window attributes in your MyDocument.nib file. Select the Window object in your nib and click the attributes icon in the Inspector, as shown in Figure 4-10.

   
   

   Figure 4-10  The Window attributes in MyDocument.nib

   

10. Define the Window size you want in your MyDocument.nib by selecting the size icon (symbolized by a ruler) in the Window Inspector, shown in Figure 4-11.

    
    

    Figure 4-11  Defining the size of the Window

    

11. Specify the delegate outlet connections of File’s Owner in the Window Connections Inspector, as shown in Figure 4-12.

    
    

    Figure 4-12  Specifying the delegate outlet connection for File’s Owner

    

12. In the Library, select the Push Button control and drag it to the Window. Enter the text Add Frame. In autosizing, set the struts for the button at the center and right outside corner, leaving the inside struts untouched, as shown in Figure 4-13.

    
    

    Figure 4-13  Specifying the autosizing for the Add Frame button

    

13. Select the MyDocument.nib and click the Connections Inspector. Now you want to wire up the outlets and received actions, as shown in Figure 4-14. Control-drag each outlet instance variable to the appropriate MyDocument.nib object.

    
    

    Figure 4-14  Specifiying the actions and outlet connections in MyDocument.nib

    

14. Select the File’s Owner object in your MyDocument.nib and then click the Class Identity icon in the Interface Builder Inspector, as shown in Figure 4-15. Note that the green light at the left corner of your StillMotion.xcodeproj is turned on, indicating that Xcode and Interface Builder have synchronized the actions and outlets in your project.

    
    

    Figure 4-15  The My Document Identity Inspector with File’s Owner selected

    

---