Computer Music: Musc216
XCODE Tutorials

Open a New Window


Description: Launch the application and the Main Window appears with a button. Click the button and a new window opens in front of the Main Window.

Observations: This project requires a second Nib file be created.

Procedure:

PART I: Create a new project.

1. Create a new Cocoa Application project.

PART II: Create a new NIB file. This will be the NEW WINDOW which will open when you click the button on the MainWindow.

1. Double-click the MainMenu.nib file to launch Project Builder.

2. In Project Builder, close down the MainMenu.nib window but leave Project Builder open.

3. You will get Project Builder's "Starting Point" window. Select "Empty" and click "New".

4. You are going to save the new window by selecting "Save As" from Project Builder's File menu, BUT FIRST navigate the Save As directory window till you find your new project folder, then save the new window in the "English.lproj" folder by calling the new window, "NewWindow" -- you don't have to put the suffix, ".nib" on the file name. Project Builder will do that for you automatically.

5. Click "Add" when you get to the "Add File" window. Make sure the 'checkbox' is selected next to your project name.

PART III: Add a window CLASS to your NewWindow.nib file.

1. In the Tools Palette, select the "Cocoa-Window" group.

2. Drag a Window (not a "Panel" or a "Drawer") over to your NewWindow.nib window, right beside the "First Responder" Class. Immediately, you should see a new window appear on your screen. Drag it to the top left corner and re-size it to a smaller size.

3. With your new window selected, choose "Show Info" from the Tools pull-down menu at the top of the screen. You can always open the Info Window by using the short-cut keys: shift-option I ("I" for "info"). With the Info Window selected, choose "Attributes" from the Info Window's pop-up button.

4. Name the new window, "My New Window" in the "Window Title" field. Press the RETURN KEY and you should see the name of the window change immediately.

5. Close the Info Window.

PART IV: Create a "Custom Class" for your new window.

1. Click the "Classes" tab at the top of the NewWindow.nib window. Make SURE you are in the COLUMNS view and not in the LIST view.

2. Scroll all the way to the left, and select NSObject in the 1st (leftmost) column.

3. In the second column, scroll down and select NSResponder.

4. In the third column, select NSWindowController.

5. With NSWindowController selected, press the RETURN KEY to create a new subclass.

6. Name it "NewWindowController".

7. Click on the "Instances" tab at the top of the NewWindow.nib window

8. Open the Info Window (shift-option I). See step 2 in the previous section if you don't remember hot to open the Info Window.

9. In the "Instances" tab view of your NewWindow.nib window, select the "File's Owner" instance.

10. In the Info Window, choose "Custom Class" in the File's Owner Info window pull-down menu.

11. Scroll til you find "NewWindowController" and select it. (This is the class you created in step 6).

12. Now select "Connections" from the Info Window's pull down menu. You should see one "Outlet" called "window".

PART V: Connect the "File's Owner" class to the "Window" class.

1. In the NewWindow.nib window, make sure you are in the INSTANCES view by clicking the "Instances" tab.

2. Holding down the CONTROL KEY (not the OPTION KEY), drag a connection from the "File's Owner" instance to the "Window" instance.

3. You should see the "window" outlet in the "File's Owner" Info Window become selected. If you don't you will need to go back and repeat steps 7-12 in Part IV.

4. Click the "Connect" button at the bottom right of the Info Window.

PART VI: Save your work and create the files for you NewWindowController.

1. Choose "Save All" from Project Builder's File pull-down menu.

2. Click the "Classes" tab on the NewWindow.nib window.

3. Find and select the NewWindowController class you created in Part IV. Hint: it's a subclass of NSWindowController which is a subclass of NSResponder which is a subclass of NSObject.

4. With your NewWindowController class selected, choose "Create Files for NewWindowController" from the "Classes" pull-down menu at the top of the screen.

5. When the Save Window appears, make sure the checkbox in the "Insert into Targets" field is selected next to your project's name. If it isn't, choose Cancel, go back and repeat from STEP 1 in this part. (Part VI).

6. Close your NewWindow.nib window. You can also QUIT Project Builder but you don't have to because you're going to open the MainMenu.nib file and do some work on it next.

PART VII: Open the MainMenu.nib file in Project Builder and add some features to it.

1. Open the MainMenu.nib file in Project Builder by double-clicking on the MainMenu.nib file in the Xcode window.

2. If you don't see a Window open, then double-click on the Window instance in the MainMenu.nib window.

3. Re-size the window to a smaller size.

4. With the window selected, open the Info Window (shift-command I). Select "Attributes" and change the name of the window to "Main Window". Press the RETURN KEY to set the window name.

You now have TWO "Main" windows to worry about. There is the "MainMenu.nib" window which contains all the Instances and Classes, etc. And there is the "Main Window" window which you just named. This "Main Window" window is actually the "Window" INSTANCE you see in the "MainMenu.nib" window. If you should accidentally close down the "Main Window" you can open it again by simply double-clicking on the "Window" instance in the "MainMenu.nib" window.

5. Drag a BUTTON from the Cocoa-Controls palette to the Main Window window. You can rename the button if you want but you don't have to.

PART VIII: Add a Controller Class to the MainMenu.nib. and create an OUTLET and and ACTION.

1. Click the "Classes" tab at the top of the MainMenu.nib window. Make SURE you are in the COLUMNS view and not in the LIST view.

2. Scroll all the way to the left, and select NSObject in the 1st (leftmost) column.

3. With NSObject selected, press the RETURN KEY to create a new subclass

4. Name it "ONWAppController" and press the RETURN KEY to set the name.

PART IX: Instantiate your new ONWAppController class and create an OUTLET and and ACTION.

1. With the new ONWAppController class still selected, open the Info Window (shift-command I) and choose "Attributes" from the pop-up menu.

2. Select the "Outlet" tab and click the ADD button to add a new outlet. Change the name to "firstWindow" and press the RETURN KEY to set the name. In the "Type" column, select NSWindow. Be sure to change this to NSWindow and don't leave it set to "ID".

3. Now clic the "Actions" tab and click the ADD button to add a new action. Change the name to "displayNewWindow" and press the RETURN KEY to set the name.

4. Tab back and forth from OUTLET to ACTION. If you have accidentally added an extra Outlet or Action, be sure to remove it by selecting it and clicking the REMOVE button. There should only be ONE Outlet and ONE action.

5. With the ONWAppController class selected in the MainMenu.nib window, choose "Instantiate ONWAppController" from the Classes pull-down menu at the top of the screen.

6. Click the INSTANCES tab on the MainMenu.nib window to see your new ONWAppController class.

PART X: Connect Outlets and Actions from the WindowController class to the BUTTON in your Main Window.

1 . Do you still see your "Main Window" window open with the button you created? If not, double-click on the Window class in the MainMenu.nib window.

2. Be sure the INSTANCES tab is selected in the MainMenu.nib window and you can see your new ONWAppController class. Be sure the Info Window is open and set to "Connections".

3. Holding down the CONTROL KEY (not the OPTION KEY), drag a connection from the BUTTON in your Main Window to the ONWAppController instance. Be sure you drag the connection from the Button to the controller and not the other way around. You should see the "displayNewWindow" Target/Action" become selected. Click the CONNECT button.

4. Holding down the CONTROL KEY, drag a connection from the ONWAppController instance in the MainMenu.nib window to the WINDOW INSTANCE, which should be right beside it. Be sure you drag the connection from the ONWAppController instance to the Window instance and not the other way around. You should see the "firstWindow" Outlet" become selected. Click the CONNECT button.

PART XI: Save your work and create the files for you NewWindowController.

1. Choose "Save All" from Project Builder's File pull-down menu.

2. Click the "Classes" tab on the MainMenu.nib window.

3. Find and select the ONWAppController class you created.

4. With your ONWAppController class selected, choose "Create Files for ONWAppController" from the "Classes" pull-down menu at the top of the screen.

5. When the Save Window appears, make sure the checkbox in the "Insert into Targets" field is selected next to your project's name. If it isn't, choose Cancel, go back and repeat from STEP 1 in this part. (Part VI).

6. Choose SAVE ALL from the File pull-down window. QUIT Project Builder.

PART XII: Enter Code.

When you created the files in Project Builder you ended up with TWO GROUPS of files:

- one group for the NewWindow.nib called:

NewWindowController.h
NewWindowController.m

This group gets NO NEW CODE for this simple project. If you created a more elaborate project such that when the new window opened, you would have code in these files for anything happening in the new window.

- one group for the ONWAppController:

ONWAppController.h
ONWAppController.m

You need to add the following code to the respective files:

- ONWAppController.h

#import <Cocoa/Cocoa.h>

@class NewWindowController; // This is new

@interface ONWAppController : NSObject

{

NewWindowController *controller; // This is new

IBOutlet NSWindow *firstWindow;

}

-(IBAction)displayNewwindow:(ID)sender;

@end

- ONWAppController.m

// The #import "NewWindowController.h" is new

#import "NewWindowController.h"
#import "ONWAppController.h"

@implementation ONWAppController
- (IBAction)displayNewWindow:(id)sender
{

  // This is all new. Note: the string @"NewWindow"is the name
  // of the New Window Nib file and it HAS to be EXACTLY the same
  // as the Nib File name or nothing will happen.

  if (_controller == nil) // Has 2nd window been loaded?
  {
    _controller = [[NewWindowController alloc]     initWithWindowNibName:@"NewWindow"];
  }

  // Show the window.

  [_controller showWindow:self];

}
@end


Xcode Tutorials

Main Page