<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Makes No Sense At All &#187; NSMatrix</title>
	<atom:link href="http://www.katoemba.net/makesnosenseatall/tag/nsmatrix/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.katoemba.net/makesnosenseatall</link>
	<description>Interesting things to share around software development, music and what else comes to mind</description>
	<lastBuildDate>Mon, 17 May 2010 19:59:13 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Safari like button bar in Interface Builder</title>
		<link>http://www.katoemba.net/makesnosenseatall/2008/01/13/safari-like-button-bar-in-interface-builder/</link>
		<comments>http://www.katoemba.net/makesnosenseatall/2008/01/13/safari-like-button-bar-in-interface-builder/#comments</comments>
		<pubDate>Sun, 13 Jan 2008 15:08:55 +0000</pubDate>
		<dc:creator>Berrie</dc:creator>
				<category><![CDATA[Software development]]></category>
		<category><![CDATA[Button Bar]]></category>
		<category><![CDATA[Cocoa]]></category>
		<category><![CDATA[Interface Builder]]></category>
		<category><![CDATA[Mac OS X 10.5]]></category>
		<category><![CDATA[NSMatrix]]></category>

		<guid isPermaLink="false">http://www.katoemba.net/makesnosenseatall/index.php/2008/01/13/safari-like-button-bar-in-interface-builder/</guid>
		<description><![CDATA[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&#8217;m writing I have an NSTableView with date based rows, and I want to allow easy filtering the table contents on date [...]]]></description>
			<content:encoded><![CDATA[<p>In the previous post on the <a href="/makesnosenseatall/index.php/2008/01/09/nsview-with-gradient-background/">use of NSGradient</a> 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&#8217;m writing I have an <a href="http://developer.apple.com/documentation/Cocoa/Reference/ApplicationKit/Classes/NSTableView_Class/Reference/Reference.html" target="_blank">NSTableView</a> 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&#8217;ll get the idea).</p>
<p><center><img src="http://www.katoemba.net/makesnosenseatall/wp-content/uploads/2008/01/filtering-screenshot1.png" width="567" height="210"/><br />
</center></p>
<p>Until recently you had to use for example <a href="http://www.harmless.de/cocoa-code.php" target="_blank">AMButtonBar</a> 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.<br/></p>
<p>Start by dropping an <a href="http://developer.apple.com/documentation/Cocoa/Reference/ApplicationKit/Classes/NSMatrix_Class/Reference/Reference.html" target="_blank">NSMatrix</a> component (you will find this in the objects library under Views &amp; Cells, Inputs &amp; 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 <a href="http://developer.apple.com/documentation/Cocoa/Reference/ApplicationKit/Classes/NSMatrix_Class/Reference/Reference.html" target="_blank">NSMatrix</a> object so that newly added buttons will have look right. Click on the little circle that is visible on the right bottom of the <a href="http://developer.apple.com/documentation/Cocoa/Reference/ApplicationKit/Classes/NSMatrix_Class/Reference/Reference.html" target="_blank">NSMatrix</a> when it&#8217;s selected,</p>
<p><center><br />
<img src="http://www.katoemba.net/makesnosenseatall/wp-content/uploads/2008/01/prototype-screenshot.png" width="362" height="83"/><br />
</center></p>
<p>then the prototype attributes are shown in the Inspector window. Select <b>Recessed</b> as <b>Style</b>, and use centered <b>Alignment</b>. Select the right value under <b>Position</b>, based on whether you want to add an image to the buttons or not. In this case I choose not to use images.</p>
<p><center><br />
<img src="http://www.katoemba.net/makesnosenseatall/wp-content/uploads/2008/01/prototype-attributes-screenshot.png" width="272" height="345"/><br />
</center></p>
<p>Once the prototype is setup properly, select the <a href="http://developer.apple.com/documentation/Cocoa/Reference/ApplicationKit/Classes/NSMatrix_Class/Reference/Reference.html" target="_blank">NSMatrix</a> object and have a look at the attributes in the Inspector window.
</p>
<p><center><br />
<img src="http://www.katoemba.net/makesnosenseatall/wp-content/uploads/2008/01/matrix-attributes-screenshot.png" width="271" height="171"/><br />
</center></p>
<p>Change the number of rows and columns to meet your needs, in this case I&#8217;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.<br/><br />
Next, for each button edit the button <b>Title</b> and specify a unique <b>Tag</b> 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.
</p>
<p>The final step is to write the method in the controller class, and attach it to the <a href="http://developer.apple.com/documentation/Cocoa/Reference/ApplicationKit/Classes/NSMatrix_Class/Reference/Reference.html" target="_blank">NSMatrix</a> object. When you use the tag values to identify which button was clicked you will only need a single method, and don&#8217;t have to attach a method directly to the buttons. A sample implementation method:</p>
<p>
<pre><code>
- (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;
    }
}
</code></pre>
</p>
<p>If you&#8217;re using coredata filtering the data is very easy, as you only need to create a <a href="http://developer.apple.com/documentation/Cocoa/Reference/Foundation/Classes/NSPredicate_Class/Reference/NSPredicate.html" target="_blank">NSPredicate</a> object in which you specify the filtering criteria, and set that predicate on the <a href="http://developer.apple.com/documentation/Cocoa/Reference/ApplicationKit/Classes/NSArrayController_Class/Reference/Reference.html" target="_blank">NSArrayController</a> that holds the rows. This is beyond the scope of this post, if you have questions on that let me know.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.katoemba.net/makesnosenseatall/2008/01/13/safari-like-button-bar-in-interface-builder/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
