Top main menu

In this tutorial we cover the following topics

• General information
• Menu with .storyboard
• Menu with .xib

There is no advanced theory related to application's main menu and also editing it consists of simple drag and drop activities, so we jump right away into a first project. The one thing which counts is whether we will use .xib or .storyboard. We will show both approaches but for some details related to discussion which is better, please refer to First application: Xcode file formats section.

1. Step 1: setting up a project in Xcode
   Launch Xcode and select File | New | Project... from main menu or from Welcome to Xcode screen select Create a new Xcode project.
   In project window select macOS | Application | Cocoa App template and then click the Next button.
   
   
   You will see the project options sheet. Name it macOS Menu Storyboard and make sure that only the Use storyboards check box is selected. Completed sheet should look like below
   
   
   Press Next button, and you will be prompted for a location for your project. When selected, press Create to save the project.
2. Step 2: add label
   Single click Main.storyboard file in Project Navigator to open the application’s view in Xcode’s Interface Builder.
   
   
   From the Object Library drag a Label object onto the View Controller Scene (we can display Object Library selecting View | Utilities | Show Object Library
   
   
   Select the Size inspector by selecting right icon (or press command + option + 5) and/or the Attributes inspector by selecting right icon (or press command + option + 4) and set label's property like its width or title to whatever you want. In my case Title was set to an empty string as well as some constraints.
   
3. Step 3: create an outlet for the label
   Show ViewController.swift file next to the user interface selecting either View | Assistant Editor | Show Assistant Editor or clicking right icon (an icon with double circles).
   
   
   Control drag a mouse pointer (drag it with Ctrl pressed) from the label to the ViewController class.
   
   
   Fill the popup with name labelSelectedMenuItem
   
   
   Xcode should add the following code to the ViewController class:
   
   Swift

   @IBOutlet weak var labelSelectedMenuItem: NSTextField!

   1	@IBOutlet weak var labelSelectedMenuItem: NSTextField!

4. Step 4: add an action for an existing menu item
   Click the File pull-down menu in the Interface Builder. Notice that the Assistant Editor should now display the AppDelegate.swift file.
   
   
   Control drag a mouse pointer (drag it with Ctrl pressed) from the menu item you want (Page Setup in my cases) to the AppDelegate class.
   
   
   Select Action as a Connection type, name it actionMenuItemSelected and select NSMenuItem as its Type
   
   
   Xcode should add the following code to the AppDelegate class:
   
   Swift

   @IBAction func actionMenuItemSelected(_ sender: NSMenuItem) { }

   1 2	@IBAction func actionMenuItemSelected(_ sender: NSMenuItem) {     }

   
   Notice that we can't control drag a mouse pointer from the menu item to the ViewController class -- there will be no option to create an action in this case.
5. Step 5: connect an action with an outlet
   Now we have to connect somehow label outlet with an action which both are in separate files.

   Control drag a mouse pointer (drag it with Ctrl pressed) from menu item you have selected previously (Page Setup in my cases) to the First Responder icon
   

   
   From a pop-up select actionMenuItemSelected
   
   
   We can verify existence of this connection in the Connections inspector
   
   
   More information about first responder can be found in firstResponder or Responder object. We can think of this as the control/view that has the focus, because it will be the first to respond to events.

   Copy the actionMenuItemSelected from the AppDelegate class to the ViewController class.

   Add / modify actionMenuItemSelected method in the AppDelegate class with the following code

   Swift

   print("AppDelegate:actionMenuItemSelected")

   1	print("AppDelegate:actionMenuItemSelected")

   Add / modify actionMenuItemSelected method in the ViewController class with the following code

   Swift

   print("ViewController:actionMenuItemSelected")

   1	print("ViewController:actionMenuItemSelected")

6. Step 6: make a test
   Run the application. From application's top main menu select menu item you have selected previously (Page Setup in my cases). You should see
   

   
   
   ViewController:actionMenuItemSelected
   
   

   
   printed as an output.
7. Step 7: make a test
   Now we can connect a label outlet with an action.

   Add / modify actionMenuItemSelected method in the ViewController class with the following code

   Swift

   @IBAction func actionMenuItemSelected(_ sender: NSMenuItem) { print("ViewController:actionMenuItemSelected") labelSelectedMenuItem.stringValue = "Selected menu item: " + sender.title }

   1 2 3 4

   @IBAction func actionMenuItemSelected(_ sender: NSMenuItem) {         print("ViewController:actionMenuItemSelected")         labelSelectedMenuItem.stringValue = "Selected menu item: " + sender.title     }

   and test the application
   
8. Step 8: add a new menu item
   Single click Main.storyboard file in Project Navigator to open the application’s view in Xcode’s Interface Builder.

   Click the File pull-down menu in the Interface Builder.

   From the Object Library drag a Menu item object to the File and place it somewhere there
   

   
   Change its name (and/or any other properties you want) to Menu Item
   
9. Step 9: bind a new menu item with an action
   Control drag a mouse pointer (drag it with Ctrl pressed) from the menu item you have just add (Menu Item in my cases) to the First Responder icon
   
   
   From a pop-up select actionMenuItemSelected
   
   
   We can verify existence of this connection in the Connections inspector
   
10. Step 10: make a test
    Test the application
    

1. Step 1: setting up a project in Xcode
   Launch Xcode and select File | New | Project... from main menu or from Welcome to Xcode screen select Create a new Xcode project.
   In project window select macOS | Application | Cocoa App template and then click the Next button.
   
   
   You will see the project options sheet. Name it macOS Menu Xib and make sure that the Use storyboards check box is NOT selected. Completed sheet should look like below
   
   
   Press Next button, and you will be prompted for a location for your project. When selected, press Create to save the project.
2. Step 2: add label
   Single click MainMenu.xib file in Project Navigator to open the application’s view in Xcode’s Interface Builder.
   
   
   Click the Window icon in the Document Outline to display the program’s user interface.
   
   
   From the Object Library drag a Label object onto the user interface window (we can display Object Library selecting View | Utilities | Show Object Library
   
   
   Select the Size inspector by selecting right icon (or press command + option + 5) and/or the Attributes inspector by selecting right icon (or press command + option + 4) and set label's property like its width or title to whatevery you want. In my case Title was set to an empty string as well as some constraints.
   
3. Step 3: create an outlet for the label
   Show AppDelegate.swift file next to the user interface selecting either View | Assistant Editor | Show Assistant Editor or clicking right icon (an icon with double circles).
   
   
   Control drag a mouse pointer (drag it with Ctrl pressed) from the label to the AppDelegate class.
   
   
   Fill the popup with name labelSelectedMenuItem
   
   
   Xcode should add the following code to the AppDelegate class:
   
   Swift

   @IBOutlet weak var labelSelectedMenuItem: NSTextField!

   1	@IBOutlet weak var labelSelectedMenuItem: NSTextField!

4. Step 4: add an action for an existing menu item
   Click the File pull-down menu in the Interface Builder, next the menu item you want (Page Setup in my cases), and show the Connections inspector by selecting right icon (or press command + option + 6)
   
   
   As we can see, the Connections Inspector pane shows that the Page Setup command (or any other you selected) is connected to the runPageLayout action method in the First Responder.

   Click the close icon (the X) that appears in the top-left corner of the First Responder. This breaks the connection between the command and the method.
   

   Control drag a mouse pointer (drag it with Ctrl pressed) from the menu item you have selected (Page Setup in my cases) to the AppDelegate class.
   

   
   Select Action as a Connection type, name it actionMenuItemSelected and select NSMenuItem as its Type
   
   
   Xcode should add the following code to the AppDelegate class:
   Swift

   @IBAction func actionMenuItemSelected(_ sender: NSMenuItem) { }

   1 2	@IBAction func actionMenuItemSelected(_ sender: NSMenuItem) {     }

5. Step 5: make a test
   Now we can connect a label outlet with an action.

   Add / modify actionMenuItemSelected method in the AppDelegate class with the following code

   Swift

   @IBAction func actionMenuItemSelected(_ sender: NSMenuItem) { labelSelectedMenuItem.stringValue = "Selected menu item: " + sender.title }

   1 2 3

   @IBAction func actionMenuItemSelected(_ sender: NSMenuItem) {         labelSelectedMenuItem.stringValue = "Selected menu item: " + sender.title     }

   and test the application
   
6. Step 6: add a new menu item
   Click the File pull-down menu in the Interface Builder.

   From the Object Library drag a Menu item object to the File and place it somewhere there
   

   
   Change its name (and/or any other properties you want) to Menu Item
   
7. Step 7: bind a new menu item with an action
   Control drag a mouse pointer (drag it with Ctrl pressed) from the menu item you have just add (Menu Item in my cases) to the actionMenuItemSelected functon body. Make sure that the entire method is highlighted.
   
   
   We can verify existence of this connection in the Connections inspector
   
8. Step 8: make a test
   Test the application