Xcode Development

NSTableView class to create a single column table view

1. Create an Xcode project

Step 01: Launch Xcode 3.0 and create a new project by clicking on File ⇒ New Project.
Step 02: Select Application ⇒ Cocoa Application and click on the Next button.
Step 03: Specify the Project Name and Project Directory as follows:
Project Name: SingleColumnTableView
Project Directory: ~/Documents/Project/XCode/Tutorial/SingleColumnTableView/
Click on the Finish button.

This will bring up the Project window.

2. Edit the NIB file

Step 01: In the Groups & Files browser, expand the NIB Files folder and double click the MainMenu.nib file.

This will launch the Interface Builder application and open the following windows:

a. Interface Builder NIB file browser
b. Interface Builder Inspector
c. Interface Builder Library
d. Application Main Menu window
e. Application Window

3. Create a controller class

Step 01: Use Xcode to create the application controller class. In the Groups & Files browser, right click on the Classes folder ⇒ Add ⇒ New File.
Step 02: Select Cocoa ⇒ Objective-C class and click on the Next button.

Specify a name for the application controller class and click on the Finish button.

Filename: ApplicationController.m

You should now be able to see the files for the ApplicationController class will be automatically added to the Xcode project.

Double click on the ApplicationController.h file to view its interface specifications.

Double click on the ApplicationController.m file to view its implementation details.

Step 03: Click on the Interface Builder icon to bring it to the foreground. Using the Interface Builder Library, select Objects & Controllers ⇒ Controllers ⇒ NSObject and drag it to the Interface Builder NIB file browser.

Using the Interface Builder Inspector, specify the following information:

Class Identity ⇒ Class: ApplicationController
Interface Builder Identify ⇒ Name: ApplicationController

Because Interface Builder is automatically synchronized with Xcode, you can see the ApplicationController class that was previously created in Xcode, in the drop-down list box for the class identify.

You should now be able to see the reference to the ApplicationController class in the NIB file browser as shown below.

Step 04: Specify an action that the application controller class can respond to.

Go to Class Actions, click on the button and specify an action called update:

Step 05: Specify an outlet that will be used by the application controller class to communicate with the target table view object.

Go to Class Outlets, click on the button and specify an outlet called tableView.

Leave the tableView type as id for the moment. The tableView type will be changed to NSTableView later on.

4. Create a table view and link it to the application controller class' outlet

Step 01: Using the Interface Builder Library, click on the Objects tab and select the Views & Cells ⇒ Data Views folderr
Step 02: Drag and drop an NSTableView object from the library to the application window. Resize the NSTableView object so that it is correctly positioned within the window. Leave a little space at the bottom of the window, so that we can later on, add a button to update the table view contents.
Step 03: Since we're going to create a single column table view, we will need to delete the second table column using the Interface Builder NIB file browser.

Expand the Window (Window) object till you reach the Table View node.

Select the second Table Column and delete the object using the menu option Edit ⇒ Delete.

Your application window should now contain a single column table view.

Step 04: Slowly click on the NSTableView object twice, to select the Table View object.

The first click will select the Scroll View object and the second click will select the Table View object. The Table View will be highlighted as shown below.

Ctrl+drag from the Table View object to the ApplicationController class to specify its dataSource and delegate outlets.

Right click on the Table View object to check the newly created associations for its dataSource and delegate outlets.

Step 05: Select the ApplicationController class and ctrl+drag to the Table View object to its tableView outlet.

Right click on the ApplicationController class to check the newly create association for the tableView outlet.

Using the Interface Builder, change the type for the tableView outlet to NSTableView.

5. Create a button and link it to the application controller class' update action

Step 01: Using the Interface Builder Library, click on the Objects tab and select the Views & Cells ⇒ Buttons folder.
Step 02: Drag and drop an NSButton from the library to the application window.

Select the button and click on it once to rename it to Update.

Step 03: Select the Update button and ctrl+drag to the ApplicationController class in the Interface Builder NIB file browser.

Right click on the ApplicationController class to check the newly create association for the update: action.

6. Automatically generate source code and merge changes for the ApplicationController class

Step 01: Select the ApplicationController in the Interface Builder NIB file browser and click on File ⇒ Write Class Files.

Browse to the folder: ~/Documents/Project/XCode/Tutorial/SingleColumnTableView
Click on Save.
Click on Merge. This will launch the FileMerge utility.

Step 02: Merge changes to the ApplicationController.h file.

Select the ApplicationController.h file using the FileMerge utility.
This will show the ApplicationController.h source code differences between the

a. new source code that we just automatically generated using Interface Builder, on the left hand side
b. previous source code that we had initially generated using Xcode, on the right hand side

Difference #1: Select the first difference by pressing the ↓ down arrow key. We want to keep the changes on the right side so, press the → right arrow key. Alternatively, you can use the Actions drop down list to choose the difference to be selected for inclusion in the final merge.
Difference#2: Select the difference on the left, since we don't want the extra line break.
Difference#3: Select the difference on the left, since we want the IBOutlet NSTableView *tableView; entry to be included in the final merge.
Difference#4: Select the difference on the left, since we want the - (IBAction)update:(id)sender; entry to be included in the final merge.

Save the merge by clicking on File ⇒ Save Merge. You should see a green tick mark next to the ApplicationController.h file.

Step 03: Merge changes to the ApplicationController.m file.

Select the ApplicationController.m file using the FileMerge utility.

This will show the ApplicationController.m source code differences between the

a. new source code that we just automatically generated using Interface Builder, on the left hand side
b. previous source code that we had initially generated using Xcode, on the right hand side

Difference #1: Select the difference on the right.
Difference#2: Select the difference on the left, since we don't want the extra line break.
Difference#3: Select the difference on the left, since we want the - (IBAction)update:(id)sender; entry to be included in the final merge.

Save the merge by clicking on File ⇒ Save Merge. You should see a green tick mark next to the ApplicationController.m file.

Combine the files by selecting Merge ⇒ Combine Files.

Open the ApplicationController.h file to view the merged changes.

Open the ApplicationController.m file to view the merged changes.

7. Add a data source for the table view

Step 01: Open the ApplicationController.h file and add a data source.

Add the following lines of code just after the interface declaration:

// Data source
@private NSMutableArray *aBuffer;

8. Implement NSTableView protocol methods for displaying table view contents

Step 01: Implement the protocol method to retrieve the total number of rows in a table view.

Add the following lines of code to the ApplicationController.m file:

- (int)numberOfRowsInTableView:(NSTableView *)tableView{
return ([aBuffer count]);
}

Step 02: Implement the protocol method to retrieve the object value for a table column.

Add the following lines of code to the ApplicationController.m file:

- (id)tableView:(NSTableView *)tableView
objectValueForTableColumn:(NSTableColumn *)tableColumn
row:(int)row{
return [aBuffer objectAtIndex:row];
}

9. Implement the Update button handler

Step 01: Implement the ApplicationController update: method to print a log message to a console window and add a string object to the table view.

Add the following lines of code to the update: method in the ApplicationController.m file:

- (IBAction)update:(id)sender {
NSLog(@"The user has clicked the update button");
[aBuffer addObject:@"HelloWorld"];
[tableView reloadData];
}

10. Implement the awakeFromNib and dealloc methods

Step 01: In the awakeFromNib method, implement code to create and allocate memory for a new mutable array object.

Add the following lines of code to the ApplicationController.m file:

- (void)awakeFromNib{
aBuffer = [NSMutableArray new];
[tableView reloadData];
}

Step 02: In the dealloc method, implement code to release memory allocated to the mutable array object.

Add the following lines of code to the ApplicationController.m file:

- (void)dealloc{
[aBuffer release];
[super dealloc];
}

11. Build and run the application

Step 01: Display the Xcode console window by clicking on Run ⇒ Console.
Step 02: In the Xcode project window, click on the Build and Go icon to build and launch the application.
Step 03: Click on the Update button. This will create a row entry in the table view.

View the resulting log messages on the console window.

Document version: 1.0
Document date: 2008-03-08
Document reference: XCT_NSTVSC-1.0

Development tools: Xcode 3.0, Interface Builder 3.0.
Operating system: Mac OS X 10.5.2 (Leopard)

Handling button events

1. Create an Xcode project

Step 01: Launch Xcode 3.0 by clicking on the Xcode application icon.
Step 02: Click on File ⇒ New Project
Step 03: Select Application ⇒ Cocoa Application and click on the Next button.
Step 04: Specify the Project Name and Project Directory as follows:

Project Name: HandlingButtonEvents
Project Directory: ~/Documents/Project/XCode/Tutorial/HandlingButtonEvents/

Click on the Finish button.

This will bring up the Project window.

2. Edit the NIB file

Step 01: In the Groups & Files browser, expand the NIB Files folder and double click the MainMenu.nib file

This will launch the Interface Builder application.

The Interface Builder (IB) application will display a set of windows for developing a Human Machine Interface (HMI):

a. Interface Builder NIB file browser
b. Interface Builder Inspector

c. Interface Builder Library
d. Application Main Menu window
e. Application Window

3. Create a controller class

Step 01: We will now use Xcode to create the application controller class. In the Groups & Files browser, right click on the Classes folder ⇒ Add ⇒ New File.
Step 02: Select Cocoa ⇒ Objective-C class and click on the Next button.

Specify a name for the application controller class and click on the Finish button.

Filename: ApplicationController.m

You should now be able to see the files for the ApplicationController class will be automatically added to the Xcode project.
Double click on the ApplicationController.h file to view its interface specifications.

Double click on the ApplicationController.m file to view its implementation details.

Step 03: Click on the Interface Builder icon to bring it to the foreground. Using the Interface Builder Library, select Objects & Controllers ⇒ Controllers ⇒ NSObject and drag it to the Interface Builder NIB file browser.

Using the Interface Builder Inspector, specify the following information:

Class Identity ⇒ Class: ApplicationController
Interface Builder Identify ⇒ Name: ApplicationController

Because Interface Builder is automatically synchronized with Xcode, you can see the ApplicationController class that was previously created in Xcode, in the drop-down list box for the class identify.

You should now be able to see the reference to the ApplicationController class in the NIB file browser as shown below.

Step 04: Specify an action that the application controller class can respond to.

Click on the button and specify an action called update:

Using Interface Builder, click on File ⇒ Write Class Files to to update the source files for the application controller class.

Click on the Save button.

Click on the Replace button to overwrite the existing application controller class files.

Double click on the ApplicationController.h file from the Xcode project browser window.

Observe the newly added action method entry in the interface file

- (IBAction)update:(id)sender;

Double click on the ApplicationController.m file from the Xcode project browser window.

Observe the newly added action method implementation entry in the implementation file

- (IBAction)update:(id)sender {
}

Step 05: Implement the update action method for the application controller class.

As an example, add code to the ApplicationController.m implementation file to print a debug log message to a console window.

- (IBAction)update:(id)sender {
NSLog(@"The user has clicked the update button");
}

4. Create a button and link it to the application controller class' update action

Step 01: Using the Interface Builder Library, click on the Objects tab and select the Views & Cells folder.
Step 02: Drag and drop an NSButton from the library to the application window.

Select the button and click on it once to rename it to Update.

Step 03: Select the Update button and ctrl+drag to the ApplicationController class in the Interface Builder NIB file browser.

Select the update: in the Recieved Actions pop-up window.

Select the Update button and view the button connections using the Interface Builder Inspector.

Select the ApplicationController class from the Interface Builder NIB file browser and view the application controller class connections.

5. Build and run the application

Step 01: Display the Xcode console window by clicking on Run ⇒ Console

This will bring up the Xcode console window.

Step 02: In the Xcode project window, click on the Build and Go icon to build and launch the application.

This will launch the application window.

Step 03: Click on the Update button.

View the resulting log messages on the console window.