In Xcode, create a Cocoa application and name it My Filter Browser.

Add the Quartz and Quartz Core frameworks to the project.

For details, see Using the Image Kit in Xcode.

Choose File > New File.

Choose Objective-C Class and click Next.

Name the file FilterBrowserController.m and keep the option to create the header file. Then click Finish.

In FilterBrowserController.h import the Quartz Core and Quartz frameworks by adding these statements:

#import <Quartz/Quartz.h>

#import <QuartzCore/QuartzCore.h>

Create an instance variable for the filter browser. Your interface should look as follows:

@interface FilterBrowserController : NSObject {

     IKFilterBrowserPanel *filterBrowserPanel;

}

@end

Save the FilterBrowserController.h file.

Open the FilterBrowserController.m file.

In the implementation file, add an awakeFromNib method.

This method needs to load all Core Image plug-ins, as shown:

- (void)awakeFromNib

{

    [CIPlugIn loadAllPlugIns];

}

Next you’ll write a showFilterBrowserPanel: method that is invoked when the user chooses the Open Filter Browser menu item. You’ll create the menu item later.

The method first defines a constant to set the mask so that the filter browser uses the brushed metal look. This is optional. The default is to use the Aqua look. Note that you must provide a selector for the method that is invoked when the user closes the browser. You’ll write the selector method next.

- (IBAction)showFilterBrowserPanel:(id)sender

{

    int myStyleMask = NSTexturedBackgroundWindowMask;

    if(!filterBrowserPanel)

        filterBrowserPanel = [IKFilterBrowserPanel

               filterBrowserPanelWithStyleMask:myStyleMask];

    [filterBrowserPanel beginWithOptions:NULL modelessDelegate:self didEndSelector:@selector(browserPanelDidEndSelector:returnCode:contextInfo:) contextInfo:nil];

}

Add the browserPanelDidEndSelector:returnCode:contextInfo: selector method.

This method simply takes the filter browser out of the screen list so that is it not visible.

- (void)browserPanelDidEndSelector:(NSWindow *)sheet returnCode:(int)returnCode contextInfo:(void *)contextInfo

{

    [sheet orderOut:self];

}

Save the FilterBrowserController.m file.

Open the FilterBrowserController.h file and add this method declaration, making sure that you insert it before the @end statement.

- (IBAction)showFilterBrowserPanel:(id)sender;

Save the FilterBrowserController.h file.

Double-click the MainMenu.nib file to open Interface Builder.

Delete the window icon in the nib document window.

Choose File > Synchronize With Xcode.

Drag an NSObject from the library to the nib document window.

In the Identity inspector for the NSObject, choose FilterBrowserController from the Class pop-up menu.

Double-click the MainMenu icon in the nib document window.

Drag a submenu item from the Library to the MainMenu and place it between the Format and View menu items. Name the menu Filter.

Name the item in the Filter menu Show Filter Browser.

Control-drag from the Show Filter Browser menu item to the FilterBrowserController and in the connections panel choose showFilterBrowserPanel:.

Save the nib file.

In Xcode, click Build and Go.

When the application launches, choose Show Filter Browser from the Filter menu.

Try the Search feature. Click the Preview button to toggle the preview off and back on. Then click the plus (+) button and add a collection. Drag a few filters into your collection.

Quit the application.

Now that the application runs, you’ll make a few refinements by adding an options dictionary and using a different window background.

In Xcode, open the FilterBrowserController.m file and add a method that creates a dictionary of options. Make sure that you place this method before the showFilterBrowserPanel: method .

The Image Kit provides constants that let you specify the size of controls to use in the browser. The default is to use regular size controls. You’ll change the size to miniature by using the key constant IKUISizeFlavor and the value IKUISizeMini.

-(NSDictionary *)createFilterBrowserUIOptions

{

 NSMutableDictionary *options = [[NSMutableDictionary alloc] init];

 [options setObject:IKUISizeMini forKey:IKUISizeFlavor];

 return options;

}

When you write a more complex application, you could let the user set the control size as a preference. Then your options dictionary method could set the options based on user preferences.

Modify the showFilterBrowserPanel: method so that it calls the createFilterBrowserUIOptions method.

In addition, set the style mask to 0 to get the default look.

After modification, the method to show the filter browser should look as follows:

- (IBAction)showFilterBrowserPanel:(id)sender

{

  int myStyleMask = 0;

  NSDictionary * options = [self createFilterBrowserUIOptions];

  if(!filterBrowserPanel)

    filterBrowserPanel = [IKFilterBrowserPanel

        filterBrowserPanelWithStyleMask:myStyleMask];

  [filterBrowserPanel beginWithOptions:options

     modelessDelegate:self

     didEndSelector:@selector(browserPanelDidEndSelector:returnCode:contextInfo:)

     contextInfo:nil];

}

In Xcode, click Build and Go.

After these modifications, the filter browser should look similar to the following:

Note that if you created a collection previously, the collection appears in the filter browser. Collections are persistent across launches of an application, on a per user basis.

In Xcode, open the project that you created in the last section.

Choose File > New File.

Choose Objective-C Class and click Next.

Name the file FilterViewController.m and keep the option to create the header file. Then click Finish.

This is the controller for the filter user interface view. It obtains the filter, gets a view that contains the controls for the input parameters of the filter, and adds the view to the user interface.

In the FilterViewController.h file, add statements to import the Quartz and Quartz Core frameworks. You’ll also need to add a directive for the FilterBrowserController class to allow the two controllers to communicate.

#import <Quartz/Quartz.h>

#import <QuartzCore/QuartzCore.h>

@class FilterBrowserController;

Add two IBOutlet objects to the interface—one for a view that contains the filter UI view and another for the filter browser controller. You’ll set these up in Interface Builder later.

The interface should look as follows:

@interface FilterViewController : NSObject {

    IBOutlet id    filterUIContainerBox;

    IBOutlet FilterBrowserController *browserController;

}

@end

Add a method signature for an addFilter: method.

This is the method that adds the filter user interface view to the panel. You’ll write the method later. When the user double-clicks a filter name, the method is invoked and passed a notification object that contains the name of the selected filter.

- (void)addFilter:(NSNotification*)notification;

Save the FilterViewController.h file.

In Xcode, open the FilterViewController.m file.

Add an awakeFromNib method. This method sets the background color of the filter view and makes sure that the panel is in front.

- (void)awakeFromNib

{

    [[filterUIContainerBox window] setBackgroundColor:[NSColor whiteColor]];

    [[filterUIContainerBox window] orderFront:self];

}

Write a method that creates and returns a dictionary of user interface options for the view. You’ll set the size of the filter input parameter controls. (You can set additional options if you’d like.)

-(NSDictionary *)createFilterBrowserUIOptions

{

  NSMutableDictionary *options = [[NSMutableDictionary alloc] init];

 [options setObject:IKUISizeMini forKey:IKUISizeFlavor];

 return options;

}

Write an addFilter: method.

This method gets the view for the selected filter and inserts it into the panel you created previously in Xcode. The embedded comments explain what the code does.

- (void)addFilter:(NSNotification*)notification

{

    // Get the filter name from the notification.

    NSString    *filterName = [notification object];

    // Create a CIFilter object.

    CIFilter    *newFilter = [CIFilter filterWithName:filterName];

    // Add a filter user interface view only if a filter object exists.

    if(newFilter)

    {

        // Get  the frame rectangle that contains the filter UI container.

        NSRect  windowFrame = [[filterUIContainerBox window] frame];

        // Set the default values for the filter.

        [newFilter setDefaults];

        // Get an options dictionary, which specifies the size of the controls.

        NSDictionary    *options = [self createFilterBrowserUIOptions];

        // Create  a view for the filter, exclude the input image key.

        IKFilterUIView    *filterContentView =

             [newFilter viewForUIConfiguration:options

                        excludedKeys:[NSArray arrayWithObject:@"inputImage"]];

        // Retrieve  the bounding rectangle for the view.

        NSRect  contentBounds = [filterContentView bounds];

       // Make the view width match the width of the filter UI container.

        contentBounds.size.width = [filterUIContainerBox bounds].size.width;

       // Set up automatic resizing to accommodate additional views.

       [filterContentView setAutoresizingMask:NSViewMinYMargin];

        // Increase the window frame size to accommodate the filter UI view.

        windowFrame.size.height += [filterContentView bounds].size.height;

        windowFrame.origin.y -= [filterContentView bounds].size.height;

        // Set the frame of the filter UI container  to be the window frame.

        // Display the changes and animate for a nice effect.

        [[filterUIContainerBox  window] setFrame:windowFrame

                                        display:YES animate:YES];

        // Add the filter UI view to the filter container.

        [filterUIContainerBox  addSubview:filterContentView];

}

Save the FilterViewController.m file.

Open the FilterBrowserController.h file and add this import statement:

#import "FilterViewController.h"

Add an IBOutlet for the FilterViewController. The modified interface should now look like this:

@interface FilterBrowserController : NSObject {

    IKFilterBrowserPanel    *filterBrowserPanel;

    IBOutlet FilterViewController *viewController;

}

- (IBAction)showFilterBrowserPanel:(id)sender;

@end

Open the FilterBrowserController.m file and modify the awakeFromNib method to register for the double-click notification setting the observer as FilterViewController and the method as addFilter:.

The awakeFromNib method should now looks as follows:

- (void)awakeFromNib

{

    [CIPlugIn loadAllPlugIns];

    [[NSNotificationCenter defaultCenter] addObserver:viewController

                         selector:@selector(addFilter:)

                         name:IKFilterBrowserFilterDoubleClickNotification

                         object:nil];

}

Save and close the FilterBrowserController.h and FilterBrowserController.m files.

Double-click the MainMenu.nib file to open Interface Builder.

Drag a panel from the Library to the nib document window.

Change the name of the Panel icon to FilterInputs.

In the Attributes inspector, change the title of the panel to Filter Input Parameters.

Choose File > Synchronize With Xcode.

Drag an Object (NSObject) from the Library to the nib document window.

In the Identity inspector, select FilterViewController from the Class pop-up menu.

In the nib document window, control-drag from the FilterBrowserController icon to the FilterViewController icon. Then in the connections panel, choose the viewController outlet.

Control-drag from the FilterViewController icon to the FilterBrowserController icon. Then connect to the browserController outlet.

Control-drag from the FilterInputs icon to the FilterViewController icon. Then in the connections panel choose delegate.

Drag a Custom View to the panel. Make sure to hold it over the panel until the panel opens, then drop it in the opened panel.

Control-drag from the FilterViewController icon to the custom view. Then in the connections panel choose filterUIContainerBox.

Click the custom view in the panel.

Set the size of the view to 320 by 2 and make sure that the view (which will be a thin line) is positioned at the top of the window.

This is the view to which you’ll add the filter user interface view. Unless you want to start by showing something in this view, its height can be negligible.

Set the springs and struts for the Custom View like this:

Set the springs and struts for the content view of the Custom View so that only the struts—which are the outer Autosizing elements —are set.

Set the size of the panel to 320 by 8.

Unless you want to show something in the panel other than filter input parameters, the panel height can be as small as possible.

Save the MainMenu.nib file.

In Xcode, click Build and Go.

Choose Show Filter Browser from the Filter menu. Double-click one or more filters to test your code. Each time you double-click a filter name, the Filter Input Parameters panel should show the input parameters for that filter.