CPPopUpButton: A Combo Box

The name does not imply to me the behavior.  If Cocoa had named this object a combo box, then Cappuccino would have followed suit.  However, what this control does is what one would expect a combo box to do.

On adding this control to your view, one will see a field that has a blue arrow to the right.  This arrow changes in appearance depending on the initialization option.  Regardless the choice made on initialization, clicking on the control causes a list of items to appear, or pop-up, from which the user can make a selection.

There are two initialization options, which are obtained by passing one of two boolean values to the method initWithFrame:(CGRect)pullsDown:(BOOL).

Pop-up Button initialized with "pullsDown:NO"

Displayed options from a Pop-up Button
initialized with "pullsDown:NO"

Selecting "NO" provides a box which displays the current choice. Clicking the blue double arrow pops-up a list of choices, which indicate the current selection with a round dot.  Changing the selection, changes the displayed text in the control's primary view.

Pop-up Button initialized with "pullsDown:YES"

Displayed options from a Pop-up Button
initialized with "pullsDown:YES"

Selecting "YES" provides a box which displays a fixed text matching the first item in the list.  This item is never a viable selection.  Clicking the single, downward-facing arrow on the blue button drops a list from the control, which continues to remain visible while displaying what can be used as prompt text.  Making a selection does not change the displayed text in the control.

For each of these selection types, one can extract the items from the list by their index number and assign targets and actions to them so that when a user selects the option, a method of our choosing activates.  This can make the pop-up button a useful choice in initializing menu commands if one is apposed to using a menu bar object, or for propagating a sequence of changes to the form or other elements of the application based on the selection.

In the following example, we will create one menu of each, and we will assign actions to three of the selections.

Example

Start a new project, and remove the code that creates the text that reads "Hello World!" from the applicationDidFinishLaunching method.

To the applicationDidFinishLaunching method, add the following:

var button = [[CPPopUpButton alloc] initWithFrame:CGRectMake(20, 200, 200, 20) pullsDown:NO];
[button addItemWithTitle:@"Selection Option 1"];
[button addItemWithTitle:@"Selection Option 2"];
    [button addItemWithTitle:@"Selection Option 3"];
    [button sizeToFit];
[contentView addSubview:button];
  
    var testMenuItem = [button itemAtIndex:2];
    [testMenuItem setTarget:self];
    [testMenuItem setAction:@selector(startListening:)];
var button = [[CPPopUpButton alloc] initWithFrame:CGRectMake(20, 250, 200, 20) pullsDown:YES];
[button addItemWithTitle:@"Choose an action:"];
[button addItemWithTitle:@"Start Listening"];
    [button addItemWithTitle:@"Stop Listening"];
var menuItem = [button itemAtIndex:1];
[menuItem setTarget:self];
[menuItem setAction:@selector(startListening:)];
menuItem = [button itemAtIndex:2];
[menuItem setTarget:self];
[menuItem setAction:@selector(stopListening:)];
    [button sizeToFit];
[contentView addSubview:button];

Elsewhere in the AppController object, add the following methods.  If you do not like using the console to log messages, you can change these code lines to "alert()" function calls:

-(void) option3:(id)sender
{
    console.log("Option 3 selected");
}
-(void) startListening:(id)sender
{
    console.log("Start Listening");
}
-(void) stopListening:(id)sender
{
    console.log("Stop Listening");
} 

Load the page, and you will have an opportunity to play with the various methods and choices.  As you change the option selection on each box, if you select the modified options, you will see messages that indicate each "action" was handled appropriately.

A list of all the available methods can be found at the API Documentation Page.