The Document Window

Each Interface Builder document stores information about one or more objects you want to create at runtime in your application. Most of these objects correspond to elements displayed on the screen, such as windows, views, controls, and menus. Some objects do not correspond to displayed elements, such as the controller objects your application uses to manage its windows and views.

The document window lists the objects in a document. Figure 1-2 shows an example of a document window.

The Library Window

The Library window contains the objects and resources you add to your Interface Builder documents. Figure 1-3 shows the Library window with a set of Cocoa button objects. You can drag a button object onto a design surface such as a window or view.

The Inspector Window

The inspector window makes it easy to display and adjust the settings for the currently selected objects. You use the mode icons along the top of the window to select a pane and display the associated settings. Figure 1-4 shows the Attributes pane for a Cocoa button.

The Connections Panel

A connection is a way to associate interface elements with source code. For documents used on the Cocoa and Cocoa Touch platforms, the connections panel is a quick way to create and manage the connections for a particular object.

Creating the Viewer

The first task is to create a simple Quartz Composer viewer.

1. Open Xcode and create a project using the Mac OS X Cocoa application template. Name the project QCDemo.

2. Add the Quartz framework to the project’s target.

   1. In the Groups & Files list, open the Targets group and select the QCDemo target.

   2. Press Command-I to display the Target Info window.

   3. Click General.

   4. Under linked libraries, click the plus (+) button. A dialog appears with a list of libraries.

   5. Choose Quartz.framework from the list and click the Add button.

   6. Close the Target Info window.

3. Open The QCDemo project’s Interface Builder document.

   1. In the project’s Groups & Files list, open the Resources group.

   2. Find the file MainMenu.xib.

   3. Double-click MainMenu.xib to open the document.

4. Set the size attributes of the QCDemo window.

   1. In the document window, select the window object.

   2. Press Command-3 to open the Size pane of the inspector window.

   3. Set the window’s width and height to 480 x 420.

   4. Select the Minimum Size option.

   5. Set the minimum size to the current size by clicking the Use Current button.

5. Add a Quartz Composer view to the QCDemo window.

   1. Press Command-Shift-L to open the Library window.

   2. Click Objects and enter quartz in the search field at the bottom of the window.

   3. Drag the Quartz Composer view object from the Library window to the QCDemo window.

6. Set the size attributes of the Quartz Composer view.

   1. In the QCDemo window, select the Quartz Composer view object.

   2. Press Command-3 to open the Size pane of the inspector window.

   3. Set the view’s position X and Y to 0 x 60.

   4. Set the view’s width and height to 480 x 360.

   5. Set the view’s autosizing control as shown in Figure 1-7. To learn more about this control, see Setting a View’s Autosizing Behavior.

   

7. Select an initial composition for the Quartz Composer view.

   1. In the QCDemo window, select the Quartz Composer view object.

   2. Press Command-1 to open the Attributes pane of the inspector window.

   3. Click the Load button.

   4. Select the composition at the following location:

      /System/Library/Screen Savers/Shell.qtz

8. Save the Interface Builder document.

9. Run a simulation of the QCDemo user interface.

   1. Press Command-R to start the simulation and display the composition.

   2. Try resizing the QCDemo window and observe what happens to the composition.

   3. Press Command-Q to quit the simulation.

10. In Xcode, build and run the QCDemo application.

    1. Click Build and Run.

    2. Verify that the application runs correctly.

    3. Press Command-Q or click Stop to quit the application.

Adding the Pause/Play Button

The next task is to add a button that toggles between pause and play.

1. Add a push button to the user interface.

   1. In the Interface Builder Library window, click Objects.

   2. Type push in the search field.

   3. Drag a push button from the Library window to the open area at the bottom of the QCDemo window.

   4. Use the horizontal and vertical guides to position the button in the lower-right corner of the window.

2. Set the attributes of the push button.

   1. Press Command-1 to open the Attributes pane.

   2. Set the button’s title to Pause and its alternate title to Play.

   3. Change the button type to Toggle.

   4. The settings in the Attributes pane should look like Figure 1-4.

3. In the Size pane, set the button’s autosizing control as shown in Figure 1-8.

   

4. Connect the button to the QC view’s play: action.

   1. Hold down the Control key.

   2. Drag from the Pause/Play button to the QC view.

   3. Select the play: action from the list that appears.

5. Save the Interface Builder document.

6. Run a simulation of the user interface.

   1. Press Command-R to start the simulation.

   2. Try out the button and verify its behavior.

   3. Resize the QCDemo window and make sure the button retains its correct position.

   4. Press Command-Q to quit the simulation.

7. In Xcode, build and run the QCDemo application.

   1. Click Build and Run.

   2. Verify that the application runs correctly.

   3. Press Command-Q or click Stop to quit the application.

Creating the AppController Class

The third task is to create a class in the Xcode project. The purpose of this class is to load QC compositions.

1. Create the source files for a new objective-C class.

   1. In the Xcode project window, select the Classes group.

   2. Choose File > New File.

   3. In the New File dialog, choose the Mac OS X Cocoa Objective-C class template and click Next.

   4. Name the file AppController.m and click Finish. Xcode creates the files AppController.m and AppController.h.

2. Add the code in Listing 1-1 to the AppController.h source file.

   
   
   

   Listing 1-1  AppController class interface

   #import <Cocoa/Cocoa.h>

   #import <Quartz/Quartz.h>

   @interface AppController : NSObject

   {

   IBOutlet NSWindow* qcWindow;

   IBOutlet QCView* qcView;

   }

   - (IBAction) loadComposition:(id)sender;

   @end

3. Save the AppController.h source file.

4. Add the code in Listing 1-2 to the AppController.m source file.

   
   
   

   Listing 1-2  AppController class implementation

   #import "AppController.h"

   @implementation AppController

   - (IBAction) loadComposition:(id)sender

   {

   void (^handler)(NSInteger);

   NSOpenPanel *panel = [NSOpenPanel openPanel];

   [panel setAllowedFileTypes:[NSArray arrayWithObjects: @"qtz", nil]];

   handler = ^(NSInteger result) {

   if (result == NSFileHandlingPanelOKButton) {

   NSString *filePath = [[[panel URLs] objectAtIndex:0] path];

   if (![qcView loadCompositionFromFile:filePath]) {

   NSLog(@"Could not load composition");

   }

   }

   };

   [panel beginSheetModalForWindow:qcWindow completionHandler:handler];

   }

   @end

5. Save the AppController.m source file.

6. Build the QCDemo application (to verify that the code you just added is free of errors.)

   1. In Xcode, click Build or press Command-B.

   2. Verify that the message “Build succeeded” appears at the bottom of the project window.

Adding the AppController Class

The next task is to add an instance of the new class to the Interface Builder document and connect the class outlets.

1. Create an instance of the AppController class.

   1. In the Interface Builder Library window, click Classes.

   2. Locate the AppController class.

   3. Drag this class into the document window to create an instance named App Controller.

2. Connect the App Controller’s qcWindow outlet to the design window.

   1. Hold down the Control key.

   2. In the document window, drag from the App Controller to the Window object.

   3. Select the qcWindow outlet from the list that appears.

3. Connect the App Controller’s qcView outlet to the QC view in the design window.

   1. Hold down the Control key.

   2. Drag from the App Controller to the QC view in the design window.

   3. Select the qcView outlet from the list that appears.

Adding the Load Button

The final task is to add a button that allows the user to select and load another composition.

1. Add a second push button to the user interface.

   1. In the Library window, click Objects.

   2. Type push in the search field.

   3. Drag a push button from the Library window to the open area at the bottom of the QCDemo window.

   4. Position the new button to the left of the Pause/Play button.

2. In the Attributes pane of the inspector, set the button’s title to Load.

3. In the Size pane of the inspector, set the button’s autosizing control as shown in Figure 1-8.

4. Connect the button to the App Controller’s loadComposition: action.

   1. Hold down the Control key.

   2. Drag from the Load button to the App Controller.

   3. Select the loadComposition: action from the list that appears.

5. Save the Interface Builder document.

6. Run a simulation of the user interface.

   1. Press Command-R to start the simulation.

   2. Verify that the QCDemo window looks like the window shown in Figure 1-6.

   3. Press Command-Q to quit the simulation.

7. In Xcode, build and run the QCDemo application.

   1. Click Build and Run. The QCDemo window appears.

   2. Click Load. A sheet dialog appears.

   3. Use the dialog to load another Quartz Composer composition. For example, load:

      /System/Library/Screen Savers/Arabesque.qtz

   4. Press Command-Q to quit the application.