Sunday, February 22, 2015

Cell Based NSTableView in OSX Cocoa Using Swift

Overview

If you're like me, learning to develop applications for OSX in swift and have no interest in IOS or Objective-C, then sometimes putting together even some of the more basic applications demonstrating the various controls available in Cocoa can be quite frustrating.

This is the first of a series of blog posts I will be putting together which shows how to use controls in swift in a very simple way with the aim of getting something up and running faster against which you can prototype further changes.

This post demonstrates how to quickly setup and use an NSTableView with NSCell based content. The alternate method is to use NSView based content which I will cover in the next post.
NOTE: These examples were put together using Xcode 6.1.1.

Populating the table using Cell Based content.


First thing to do is startup Xcode, choose File -> New -> Project.
Make sure when selecting the template you choose OS X Application type of Cocoa Application as shown in the following image.


Clicking Next fill in the options for the new project ensuring to choose the Language as Swift and unchecking other options as shown the in the following image.



At this point you should have able to run the project which will show the following empty window.

It's now time to add an NSTableView to the window. This can be done by clicking on the Project Navigator to show the hierarchy of project files then by selecting the MainMenu.xib to show the window in the standard editor.




  • Select the "NSTableView Cell Based Example" as shown above, then in the lower right hand side of the screen look for the NSTableView and drag it onto the center of the window.
  • Expand the contents of the "Document Outline" window and select the "Table View".
  • On the RHS of the screen choose the "Attributes Inspector" and ensure the "Content Mode" is set to "Cell Based". Once this has been set then you will notice in the "Document Outline" that "Text Cell" will appear under each of the "Table Column"s.  
  • Your setup should look like the screen capture below. Also worth noting at this point is that I have, for each of the two columns, changed their names by specifying the "Identity Identifier" through the "Identity Inspector". Why i have done this will be explained a bit further on.




It's time to chop some code!

Add to the AppDelegate class the two protocols associated with the NSTableView, and these are:
  • NSTableViewDataSource
  • NSTableViewDelegate

A quick run through the example code:
  • On line 8, i have added a simple string array, dataSource, with data which is used used to populate the table.
  • On line 22, you can see the:
    func numberOfRowsInTableView(aTableView: NSTableView) -> Intmethod being implemented. This simply returns the number of rows to create in the table view, in this case it is the length of the dataSource array.
  • On line 26, you can see the:
    func tableView(aTableView: NSTableView, objectValueForTableColumn aTableColumn: NSTableColumn?,row rowIndex: Int) -> AnyObject?This function is required when using Cell Based NSTableViews. All this code is doing is concatenating the columns identifier, which i set up previously as Col1 and Col2, and the value from the dataSource array which corresponds to the row.


Now that the AppDelegate implements both NSTableViewDataSource and NSTableViewDelegate, it is possible to wire up the the table views dataSource and delegate outlets to it as shown below.



It should be possible to run the application now and see the data displayed:

Final Comments


  • In this example the AppDelegate class implemented both the NSTableViewDataSource and NSTableViewDelegate. However, given that no NSTableViewDelegate methods needed to be implemented the AppDelegate need not have implemented this protocol. Not implementing the protocol also implies not needing to hookup the table views outlet to the AppDelegate class.


Further information can be found in the Apple Developer documentation here:
https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/TableView/PopulatingCellTables/PopulatingCellTables.html#//apple_ref/doc/uid/10000026i-CH5-SW1








2 comments:

  1. Great example. Can you point me in the direction what to do if I want to edit one the cell's text inline? Thanks

    ReplyDelete
    Replies
    1. The following stack overflow post i believe contains the information you seek.
      http://stackoverflow.com/questions/28281045/view-based-nstableview-editing

      Delete