Posts tagged ‘NSMatrix’

Safari like button bar in Interface Builder

In the previous post on the use of NSGradient I showed a screenshot of a button bar similar to the one that is used in Safari to store your favourites. For an application I’m writing I have an NSTableView with date based rows, and I want to allow easy filtering the table contents on date ranges like month, last month, week, last week etcetera. A button bar is nice looking way of doing this, the screenshot below shows what this looks like (in Dutch, but you’ll get the idea).


Until recently you had to use for example AMButtonBar to get a button bar like this, but with Leopard our developers life has again been made easier: you can now create the button bar in Interface Builder, using only standard components.

Start by dropping an NSMatrix component (you will find this in the objects library under Views & Cells, Inputs & Values) onto your view. Per default it creates a matrix of 1 column, 2 rows with radio buttons on it. Then set the correct prototype on the NSMatrix object so that newly added buttons will have look right. Click on the little circle that is visible on the right bottom of the NSMatrix when it’s selected,



then the prototype attributes are shown in the Inspector window. Select Recessed as Style, and use centered Alignment. Select the right value under Position, based on whether you want to add an image to the buttons or not. In this case I choose not to use images.



Once the prototype is setup properly, select the NSMatrix object and have a look at the attributes in the Inspector window.



Change the number of rows and columns to meet your needs, in this case I’m using 1 row and 6 columns. You end up with one traditional radio button (the one that was originally there) and 5 new buttons according to the prototype. Select the first button and manually set its properties so that it matches the prototype as well.

Next, for each button edit the button Title and specify a unique Tag value in the Inspector window, so that you can distinguish which button was clicked in the attached method in your code later on. Optionally you can add a tooltip under the Identity tab on the Inspector window.

The final step is to write the method in the controller class, and attach it to the NSMatrix object. When you use the tag values to identify which button was clicked you will only need a single method, and don’t have to attach a method directly to the buttons. A sample implementation method:


- (IBAction)filterData:(id)sender
{
    int tag = [sender selectedTag];

    switch (tag) {
        case 1000: // Show all
            // Remove data  filtering so that all rows are shown
            break;
        case 1001: // Show this month
            // Filter data so that only rows with a date between
            // first and last day of current month are shown
            break;
        case 1002: // Show last month
            // Filter data so that only rows with a date between
            // first and last day of previous month are shown
            break;
        default:
            // Should never get here
            break;
    }
}

If you’re using coredata filtering the data is very easy, as you only need to create a NSPredicate object in which you specify the filtering criteria, and set that predicate on the NSArrayController that holds the rows. This is beyond the scope of this post, if you have questions on that let me know.