Monday, February 12, 2007

NSTableView in Objective-C

Okay, lets go through a little example to help you understand just what a NSTableView is doing.

A NSTableView contains two layers, It contains a Data Layer and a Presentation Layer (The Actual TableView)

The datalayer is comprised of two methods that is in any of your classes. I will discuss this later in the example.

An example of this is:
Your monitor will visualize the data but it won't store it. The data is in the computer and is sent to your monitor for visualization.

Now to set this up, you need 3 steps. Step 1 is setting up you .nib file. Step 2 is setting up your data. Step 3 is creating your datasource for the table.

This is going to guide you through the steps to set up a new project that works with a NSTableView.

NOTE:You need to know how to work with XCode and Interface Builder to do this, if you don't know how, you might want to get a visual resouce to explain some of the stuff mentioned here.

Step 1.
  • Create a new NSDocument Based Cocoa App in XCode.
  • When your project is created, double-click the MyDocuments.nib file.
  • When Interface Builder loads you need to do the following:
  1. Remove the "This is a document" lable.
  2. Add a NSTableView Controller.
  3. Open the Inspector and set the columns field to be equal to 1
  4. Double-click in the table view to select the table view and not its NSScrollView Container
  5. Double-Click on the Column's Header to select the NSDataColumn
  6. In the inspector, change the Header to be "Text in Array" and set the identifier to be "text"
  7. Resize the column to look good.
  8. Add a Editable NSTextField (The Text Box)
  9. Add a NSButton and change its text to be something like "Add"
  10. Subclass the NSObject and create a new object called "TableViewController"
  11. Add 3 outlets named "tvTable" with type "NSTableView", "btnAdd" with type "NSButton", "txtTextToAdd" with type "NSTextField"; (You could keep the type as id, it really doesn't matter, this is just the way I like to do it)
  12. Add 1 action called "btnAdd_Click:"
  13. Instantiate and make your connections.After you have made all your connections, create your files.
  • Now you have created your .nib file and your class files. You now need to create your logic
  • Open up the newly created TableViewController.m file
  • You should see a method similar to this
- (IBAction)btnAdd_Click:(id)sender
  • If you don't see this, you will need to start over with the .nib creation.
  • Now, open up the TableViewController.h file
  • In the @interface section, you need to add the following.
NSMutableArray *arrayOfText;
  • Outside the @interface tags, add the following
- (int)numberOfRowsInTableView:(NSTableView *)tableView;
- (id)tableView:(NSTableView *)aTableView objectValueForTableColumn:(NSTableColumn *)aTableColumn row:(int)rowIndex;
  • Build your project and close the .h file.
  • Now change your method stubs to look like this:
- (IBAction)btnAdd_Click:(id)sender
NSString *textToAdd = [txtTextToAdd stringValue];
[arrayOfText addObject:textToAdd];
[tvTable reloadData];

- (int)numberOfRowsInTableView:(NSTableView *)tableView
return [arrayOfText count];
- (id)tableView:(NSTableView *)aTableView objectValueForTableColumn:(NSTableColumn *)aTableColumn row:(int)rowIndex
NSString *valueToDisplay = [[arrayOfText objectAtIndex:rowIndex] string];
return valueToDisplay;
  • Now you need to add in 2 new methods (a init and a dealloc method)
  1. In the .m file, all you have to do is start typing init and wait for codesence to popup. It will too say init. Press enter and it will create your init method. The same will go with dealloc.
  2. Replace the <#Add Code Here#> text in the init method with this: arrayOfText = [[NSMutableArray alloc] init];
  3. Replace the <#Add Code Here#> text in the dealloc method with this: [arrayOfText release];
  • run the project and Wa La! You should now be able to type text into the text box, press the add button and everytime you do that, the text will then appear in the NSTextView.

Now you have finished the construction of the class, It seems like a lot of information but it is just hard to explain with short words. All table views work this way. If you wish, you can check the column's identifier and specifiy information to add based on the column, this makes your table more complex and in some way more beautiful because you can add in a image for a cell or even sliders, radio buttons, etc...

To keep this blog short, I will create another blog called NSTextView in Objective-C Explained.

1 comment:

AnonImus said...

Question for you: I want to enter a string into a textfield, and have it show up in a table, sort of like a faux IM idea. I can't seem to make it work. Ideas?