Xcode Expert Preferences Notes<\/a> for more information on this option.<\/p>\nNext, double click on the bundle target to bring up its options<\/p>\n
![\"Bundletargetpicture\"](\"\/blog\/wp-content\/uploads\/BundleTargetPicture.png\")
<\/p>\n
In the build options, set the Wrapper Extension<\/b> to be colorPicker<\/b> and the Installation Directory<\/b> to $(HOME)\/Library\/ColorPickers<\/b>. <\/p>\n
![\"Buildoptionscolorpicker\"](\"\/blog\/wp-content\/uploads\/BuildOptionscolorPicker.png\")
<\/p>\n
Then, on the Properties tab, set the Principal Class to be your new Color Picker (which we actually haven’t made yet):<\/p>\n
![\"Colorpickerprincipleclass\"](\"\/blog\/wp-content\/uploads\/ColorPickerPrincipleClass.png\")
<\/p>\n
Once you have your project setup, you can then start creating your UI in Interface Builder by creating a new empty nib:<\/p>\n
![\"Ibcreatenewempty\"](\"\/blog\/wp-content\/uploads\/IBCreateNewEmpty.png\")
<\/p>\n
Then, you can drag a new view into the nib (note: you must have Tiger to do this!):<\/p>\n
![\"Newviewinnib2\"](\"\/blog\/wp-content\/uploads\/NewViewInNib2.png\")
<\/p>\n
Next, you can setup the UI to look the way you want, save the nib, and add it to the Xcode project (I called it \u00e2\u20ac\u0153MyPicker.nib\u00e2\u20ac\u009d):<\/p>\n
![\"Colorpickerui\"](\"\/blog\/wp-content\/uploads\/ColorPickerUI.png\")
<\/p>\n
Now we want to jump back to XCode and create a controller for the nib file, and the main color picker class.<\/p>\n
A long time ago, we decided to call it \u00e2\u20ac\u0153RadiantColorPicker\u00e2\u20ac\u009d. In XCode, select \u00e2\u20ac\u0153File | New…\u00e2\u20ac\u009d and create an Objective C Class named RadiantColorPicker:<\/p>\n
![\"Creatingtheradiantclass\"](\"\/blog\/wp-content\/uploads\/CreatingTheRadiantClass.png\")
<\/p>\n
Change the class to inherit from NSColorPicker and declare that it is going to implement the NSColorPickingCustom formal protocol. <\/p>\n
Some important things to note here: In Tiger and Panther, you MUST descend from NSColorPicker. The documentation incorrectly states that you can implement NSColorPickingDefault or descend from NSColorPicker (note that this will be fixed). <\/p>\n
@interface<\/font> RadiantColorPicker : NSColorPicker <NSColorPickingCustom> {<\/font><\/p>\n@private<\/font><\/p>\n\u00c2\u00a0 \u00c2\u00a0 <\/span><\/font>\/\/ Add two outlets to access things in the nib file we will load<\/font><\/p>\n\u00c2\u00a0 \u00c2\u00a0 <\/span><\/font>IBOutlet<\/font> NSView *mainView;<\/font><\/p>\n\u00c2\u00a0 \u00c2\u00a0 <\/span><\/font>IBOutlet<\/font> NSTextField *textField;<\/font><\/p>\n<\/p>\n
}<\/font><\/p>\n@end<\/font><\/p>\nThe \u00e2\u20ac\u0153mainView\u00e2\u20ac\u009d will be the view that is placed in the Color Picker, and the textField will give us access to our TextField. To set those things up in the nib file, drag the RadiantColorPicker.h file from Xcode and drop it into the nib file in Interface Builder.<\/p>\n
Click on the \u00e2\u20ac\u0153File’s Owner\u00e2\u20ac\u009d in the Instances of the nib file, and set the custom class to be it:<\/p>\n
![\"Settingthecustomclass-1\"](\"\/blog\/wp-content\/uploads\/SettingTheCustomClass-1.png\")
<\/p>\n
Then, hook up the outlets. It is important to drag the mainView outlet to the actual view itself:<\/p>\n
![\"Settingthemainviewoutlet\"](\"\/blog\/wp-content\/uploads\/SettingTheMainViewOutlet.png\")
<\/p>\n
(okay…this is just a start. I’ll eventually finish this).<\/p>\n","protected":false},"excerpt":{"rendered":"
It is pretty easy to create a custom Color Picker that is available in any application, or for just your particular app. It isn’t difficult to do, but there are some caveats that you must… [read more]<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[4,6,1],"tags":[63,130,72],"class_list":["post-113","post","type-post","status-publish","format-standard","hentry","category-apple","category-cocoa","category-general","tag-cocoa","tag-objc","tag-programming"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.corbinstreehouse.com\/blog\/wp-json\/wp\/v2\/posts\/113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.corbinstreehouse.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.corbinstreehouse.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.corbinstreehouse.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.corbinstreehouse.com\/blog\/wp-json\/wp\/v2\/comments?post=113"}],"version-history":[{"count":1,"href":"https:\/\/www.corbinstreehouse.com\/blog\/wp-json\/wp\/v2\/posts\/113\/revisions"}],"predecessor-version":[{"id":5327,"href":"https:\/\/www.corbinstreehouse.com\/blog\/wp-json\/wp\/v2\/posts\/113\/revisions\/5327"}],"wp:attachment":[{"href":"https:\/\/www.corbinstreehouse.com\/blog\/wp-json\/wp\/v2\/media?parent=113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.corbinstreehouse.com\/blog\/wp-json\/wp\/v2\/categories?post=113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.corbinstreehouse.com\/blog\/wp-json\/wp\/v2\/tags?post=113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Newbundleinxcode\"](\"\/blog\/wp-content\/uploads\/NewBundleInXcode.png\")
<\/p>\n![\"Colorpickersoutputdirectory\"](\"\/blog\/wp-content\/uploads\/ColorPickersOutputDirectory.png\")
<\/p>\n