Creating a menubar menu [Mac OSX] using Objective-C

A new tutorial for you and more so in the genre of developing desktop tools. With most of the iOS developers now having access to a Mac and xCode, this is the easiest jump to creating your own tool for the Mac OSX.

In this series of how to articles, we shall look at creating an app for the Mac OSX using Objective-C and xCode.

1. start xCode and select a new project, in the sidebar select "Application" under the OSX.
Note: Ensure that you have select Application under OSX not iOS.


2. Fill in the details of the app, for this example we are calling it menuBar. You can fill in the other details like your company name, the identifier, class prefix (you can leave this blank if you want), App Store Category, etc.


3. Click on the AppDelegate.m which can be found in the list of files created by xcode for you


4. If you press run, the app compiles and creates a window on the screen.


Creating An item in the menuBar

1. We add an image to our project, the icon that we want to use for the project called icon.png (you can download it from here or create a new icon which is 16x16)

2. Drag drop the Icon.png file to the sidebar to the left. Select the copy items into destination group's folder

3. spot the

-(void)applicationDidFinishLaunching:(NSNotification *)aNotification

function and add the following code to the function under that.

Code :

NSStatusBar *statusBar = [NSStatusBar systemStatusBar];
    statusItem = [statusBar statusItemWithLength:NSVariableStatusItemLength];
    [statusItem retain];
    [statusItem setImage:[NSImage imageNamed:@"Icon.png"]];

and add the following code on top just after the implementation

NSStatusItem *statusItem;

and now if you run the app, you would see the icon.png image on the menubar on top right where you see the user and the time and the app menus. In the image you can see the icon next to the Dropbox icon.


If you hover your mouse over it or attempt to click it, nothing happens. Let us have a tooltip text added to the icon, the way to do so is very simple and easy, we simply use

[statusItem setToolTip:@"This is our tool tip text"];

Now if you hover the mouse over the icon, you will see the tooltip pop-up. However if you click on the icon, nothing happens, it is almost as if it does not respond. We can change that too as

[statusItem setHighlightMode:YES];

Now if you run the app, you can see that it responds to selecting the icon, highlighting the icon and unhighlighting it on release.

To ensure that we do not have memory leaks, we also add the code to release theMenu and statusItem that we allocated. We add the code to the function delloc

[statusItem release];
    [theMenu release];

Let us add a drop down menu to this icon, as we set out to do in the first place. To do that, we need to create and set the menu for this. So first we declare the variable and create the menu. We declare a variable theMenu as follows

NSMenu *thetheMenu;

and the menus is created as follows by placing this code before where we created our statusbar

theMenu = [[NSMenu alloc] initWithTitle:@""]
  [theMenu setAutoenablesItems:NO];

  NSMenuItem *tItem = nil;
  tItem = [theMenu addItemWithTitle:@"Quit" action:@selector(terminate:) keyEquivalent:@"q"];
  [tItem setKeyEquivalentModifierMask:NSCommandKeyMask];

Now we can see the menu drop down when we click on the icon. If we select theQuit menu option here, the app quits.

We can also add more items simply by create new menuItems. An example could be

[theMenu addItemWithTitle:@"One" action:nil keyEquivalent:@""];
 [theMenu addItemWithTitle:@"Two" action:nil keyEquivalent:@""];
 [theMenu addItemWithTitle:@"Three" action:nil keyEquivalent:@""];

Handling the menu items

The various menu items can be handled by adding a handler (function) or using the system functions like we did with the quit menu item, where we called terminate

Here's an example of declaring a handler and then assigning it to a menu item

-(void)onHandleFour:(id) sender
 {
  NSLog(@"You selected Four");
 }

and this can be assigned to the menu item as

[theMenu addItemWithTitle:@"Four" action:@selector(onHandlerFour:) keyEquivalent:@""];

if you select the menu item four, a message is printed to the console window (only when run from xCode). Additional handlers can be set up for other menu items.

and one can also add a separator to the menu using

[theMenu addItem:[NSMeuItem separatorItem]];

While the app also creates a main window, if your tool does not require the main window then you could either hide it or remove it entirely. In the next part of this tutorial, we shall look at using the badge feature on the dock icon and understanding how that works.

The full code

Here's the full code for the appDelegate.m file those that want to copy and paste the code directly

//
//  ozeAppDelegate.m
//  menuBar
//
//  Created by Jayant Varma on 9/04/13.
//  Copyright (c) 2013 OZ Apps. All rights reserved.
//

#import "ozeAppDelegate.h"

@implementation ozeAppDelegate

NSStatusItem *statusItem;
NSMenu *theMenu;

- (void)dealloc
{
    [super dealloc];
    
    [statusItem release];
    [theMenu release];
}

- (void)applicationDidFinishLaunching:(NSNotification *)aNotification
{
    // Insert code here to initialize your application

    NSMenuItem *tItem = nil;
    
    theMenu = [[NSMenu alloc] initWithTitle:@""];
    [theMenu setAutoenablesItems:NO];
    
    [theMenu addItemWithTitle:@"One" action:nil keyEquivalent:@""];
    [theMenu addItemWithTitle:@"Two" action:nil keyEquivalent:@""];
    [theMenu addItemWithTitle:@"Three" action:nil keyEquivalent:@""];

    [theMenu addItem:[NSMenuItem separatorItem]];
    
    tItem = [theMenu addItemWithTitle:@"Quit" action:@selector(terminate:) keyEquivalent:@"q"];
    [tItem setKeyEquivalentModifierMask:NSCommandKeyMask];

    NSStatusBar *statusBar = [NSStatusBar systemStatusBar];
    statusItem = [statusBar statusItemWithLength:NSVariableStatusItemLength];
    [statusItem retain];
    [statusItem setImage:[NSImage imageNamed:@"Icon1.png"]];
    [statusItem setToolTip:@"This is our tool tip text"];
    [statusItem setHighlightMode:YES];
    [statusItem setMenu:theMenu];

}

@end