MacOS Programming: Utilizing the Menus and the Toolbar

One other macOS programming tutorial is right here, and in the present day we're going to speak a couple of very attention-grabbing subject: Menus . Each macOS developer must know easy methods to handle the menus, as they’re a elementary a part of each utility. Menus are the place the place customers entry the options of the applying and guarantee they’re all the time discovered and used.

Menus are separated by menu gadgets, a menu merchandise being the choice on which the consumer clicked. Menu gadgets could be related to one-touch keys or key mixtures. Customers can subsequently entry the underlying options just by utilizing their keyboard. There’s additionally a particular aspect, the separator, which merely consists of a horizontal line separating the opposite menu gadgets. Along with all these, the menus could include sub-menus that make it straightforward to group related options collectively.

By default, every utility is supplied with the primary menu displayed within the high bar of the macOS. A lot of the menus you’ll create will exist right here. Nevertheless, there are additionally particular menus, known as context menus. A pop-up menu seems when a click on on a UI management assigned to such a menu is made or on a proper click on. The displayed menu gadgets could also be distinctive to the pop-up menu or widespread to these obtainable in the primary menu.

When speaking about menus, there may be all the time one other consumer interface command intently related to them. That is the toolbar. The aim of a toolbar is to offer customers with entry to essential options of the applying by buttons situated in a predefined and acquainted location. Toolbars usually are not required to exist in macOS purposes and are associated to menus for one easy motive: Toolbar gadgets that may be enabled should all the time have equal menu gadgets. If customers disguise the toolbar (as a result of that's one thing that may be finished), then there ought to be no performance out of their attain.

We’ll see all of the above intimately within the subsequent components of this tutorial. You'll learn to create menus in each Interface Builder and programmatically, study among the finest practices, and see easy methods to use the toolbar. We’re about to discover some actually attention-grabbing stuff!

A have a look at the start-up challenge

Earlier than delving into the main points of the menus, let's check out the demo utility we're going to work on in the present day. As ordinary, we don’t begin a brand new utility from scratch, it’s important to obtain a startup challenge.

Our demo utility will subsequently be an ultra-light picture modifying utility with just a few options: zoom choices and filtering capabilities. So far as zooming is anxious, let's zoom in, zoom in, zoom out to suit the loaded picture, in addition to different quicker zoom choices, resembling doubling the zoom stage ahead or backward. We’ll group these choices in a submenu.

The filtering choices we are going to help are the identical because the filters we used within the demo utility of a earlier tutorial the place we talked about alerts, leaves, and modal home windows. The filters are already carried out within the ImageFilter.swift file of the startup challenge and may apply the next results to a picture:

Sepia and blur filters can take parameters that set the extent of the impact. Nevertheless, on this demo utility, we don’t permit the enter of parameters to maintain issues easy. The parameter values ​​are hard-coded in an auxiliary class known as ImageHelper that you will discover within the respective file. For extra info on filters, see CIFilters in Apple Docs.

The predefined consumer interface that you will discover within the startup utility comprises a scroll view and an built-in picture view. The required IBOutlet properties have already been related and something that isn’t immediately associated to the menus or the toolbar has additionally been carried out. I invite you to try the configureScrollView () technique of the ViewController class; it comprises a code that prompts the zoom (known as magnification) on the scrolling view and units the present, minimal, and most zoom values.

To save lots of time, the Open and Save options to open and save a picture already work in the primary menu of the applying. Our purpose right here is to implement every part else about zooming and filtering. Lastly, some photos that we are going to want later are already within the catalog Property. That stated, after exploring the startup challenge in Xcode, be ready to handle the primary menu of the applying; it's our start line.

The primary menu underneath macOS

It is extremely straightforward to entry the default major menu of any Cocoa utility primarily based on a window. all it’s important to do is open the Primary.storyboard file and you will discover it right here, simply above the applying window controller:

Every utility comes with an ordinary assortment of built-in menus that debate widespread options that an utility would possibly want. One such instance is the search characteristic on the Edit> Discover menu or the choice to daring font utilizing the Format> Font menu. Nevertheless, not all menus or menu gadgets are essential for an utility. In such instances, these menus and menu gadgets could merely be deleted.

When utilizing menus, all the time remember the fact that customers look forward to finding a standard habits assembly in every macOS utility. For instance, the choices within the first menu that use the applying identify, resembling Conceal [AppName] Conceal Others, Exit [AppName]or Window> Decrease are only a few of the choices that customers are ready to seek out. And never solely them, but in addition the important thing mixtures that can be utilized as shortcuts (eg, Cmd + Q to give up the applying). So the advice right here is to maintain every part that’s widespread and already works by default; delete solely these built-in menus you merely don’t want.

Observe : [AppName] above represents the identify of the applying, in our case Menus.

Take the time to navigate by the default menu gadgets in the primary menu of the startup challenge. Maintain the doc define seen whilst you click on on numerous menus and submenus and see how they’re structured.

It’s best to know that one thing essential is essential: even when all of the menu gadgets are enabled within the situation file, when you run the applying now, you’ll notice that a lot of them are grayed out and disabled. This happens as a result of the disabled menu gadgets usually are not related to an motion technique (IBAction). Activated gadgets are already related to the built-in strategies supplied by Cocoa. You’ll have the chance to examine this very quickly as a result of we’re going to create our personal menu gadgets. You’ll uncover that, with out connecting them to the strategies of motion, they continue to be disabled.

Observe : In fact, menu gadgets could be disabled and enabled on demand programmatically or by the storyboard to stop entry to sure options, however it's one thing completely totally different and never the case right here.

When you've accomplished your go to (brief, I suppose) to the default gadgets in the primary menu, it's time to begin eradicating a few of them. Here’s what you’ll want to delete:

Full the Modify menu merchandise. Specify the Format menu merchandise. Open the file and maintain solely the Open … and Save … choices; delete every part else.

It’s best to make deletions by choosing the suitable components within the define of the doc. It’s attainable to delete solely the menu assigned to a higher-level menu merchandise, however the menu merchandise itself should stay there.

Create a brand new menu

Now could be the time so as to add a brand new menu in our shrunken major menu. We’ll name it Zoom and it’ll present menu gadgets that can permit us to carry out the next operations:

Zoom in Zoom outAdjust the loaded picture to the dimensions of the present window

Listed here are the steps to create a top-level menu merchandise in addition to a brand new menu in Xcode:

Click on the plus button to open the library listing and seek for the phrase "menu" within the menu (with out the citation marks). Choose a menu merchandise and . and drop it on the desired place. Right here it ought to be proper after the File menu merchandise. Place the brand new menu merchandise in the primary menu or within the doc construction. The brand new menu merchandise is presently empty. Open the library once more and this time drag a Menu merchandise on the high of the primary menu menu merchandise. Or, drop it because the baby aspect of the menu merchandise within the doc construction . With the brand new menu chosen, open the Zoom Attributes Inspector and as the worth. the Title area .

And right here you might be! You could have a model new menu, though it nonetheless must be configured. Launch the applying to view it reside:

Configuration of menu gadgets

As you’ll be able to see, every new menu comes with three default menu gadgets. New menu gadgets could also be added or pointless gadgets could also be eliminated on demand.

For our demonstration right here, the three components supplied by default are completely tailored to our wants. Nevertheless, we cannot maintain them as they’re proper now. The very first thing to alter is their titles. The simplest method to do that is to double-click on a menu merchandise as you see it in the primary menu.

A greater approach to proceed is to choose the menu merchandise after which show the Inspector Attributes . There are extra properties to configure past title. Let's assessment the commonest:

Simply after the Title area, you will discover the important thing equal . Assign the keys or key mixtures you wish to use as a shortcut for the menu merchandise on this area. The important thing equal of a menu merchandise seems to its proper when the menu is expanded.

The next part is mostly left as is. You possibly can assign a tag worth to the menu merchandise for programmatic entry, and even an identifier for a similar causes. Observe that the identifier could be a string worth, it doesn’t essentially must act on a quantity just like the tag. We'll see later easy methods to use the identifier to tell apart the menu merchandise you clicked on. With area Indentation you’ll be able to specify the indent stage of the menu merchandise. This may add empty areas on the left facet of the merchandise and push it to the suitable. The checked checkboxes and hidden clearly point out what they’re used for: by unchecking the Enabled examine field, you’re going to get a menu merchandise that all the time appears to be like disabled, even when It’s related to an motion technique. By checking the Hidden examine field, the menu merchandise simply doesn’t seem within the menu when the applying is operating. Lastly, use the State popup button to specify whether or not or not a examine mark ought to be chosen. It’s often a parameter specified within the code, during which a flag describing a sure situation determines whether or not this situation is met and whether or not the examine field ought to be seen or not.

A picture could be displayed proper subsequent to a menu merchandise. The next part of the Attribute inspector's settings is the place to course of the photographs. Go away all fields clean if you don’t want a picture. In any other case, enter one within the first area labeled Picture . Should you use the State attribute described above and wish totally different photos for enabled, disabled, and blended states, use the next three fields to outline the respective photos. Normally, this detailed stage of configuration issues the weather that play a reasonably essential position within the utility and it’s actually essential to visually point out the present state of the situation, state, mode, and so forth. that they characterize.

Lastly, the final property part of the Attribute Inspector is the title of the merchandise. As a substitute of the default textual content, use the settings obtainable right here to set a title assigned to the menu merchandise. Virtually by no means (if solely ever) you’ll need to set an assigned menu merchandise title. See the next instance:

The consequence:

Let's now configure the three menu gadgets of our demo utility:

Choose the Component 1 menu merchandise. Within the Attributes Inspector, set the next:

Title : Zoom In Key Equal : + Picture : zoom_in

Subsequent, choose the merchandise menu merchandise 2 and set these values. :

Title : Zoom Out Key Equal : – Picture : zoom_out

Lastly, choose the merchandise three and apply it:

Title : Match Equal Key : Order + zero Picture : zoom_fit

Along with the above, it might be good to have a separator between the primary two components (zoom in, zoom out) and the final. So as to add a separator, open the library and seek for the time period Menu once more. Then, drag a menu merchandise from the separator simply above the Alter menu merchandise :


Our new menu merchandise and menu at the moment are prepared. Right here's what it is best to see within the doc preview:

Connecting Menu Objects to Actions

A menu merchandise is ineffective so long as it isn’t related to an motion technique and subsequently it performs an motion. Now that our new menu gadgets are in place and we’ve got configured the way in which they are going to be displayed, let's proceed precisely like this; join them to IBAction strategies.

Should you open the assistant editor facet by facet with Interface Builder in Xcode and also you click on on considered one of our new menu gadgets, you’ll uncover that the AppDelegate class is the category that's occurring. opens mechanically to attach the merchandise. to a way of motion. The ViewController class doesn’t even exist as an automated choice to open within the wizard editor once you click on menu gadgets. Even when you open it manually, you will note that it’s forbidden to create a connection between a menu merchandise and the category file. It is because the primary menu is for the whole utility and never a particular view controller.

It's completely high-quality to have your IBAction strategies carried out in AppDelegate, though that doesn’t encourage you. One of many causes is that you’ll want to make use of both the NotificationCenter or one other mechanism to tell the totally different view controllers of the actions that have an effect on them that set off the precise workflow. One more reason is that you’ll find yourself having your AppDelegate class stuffed with strategies that usually shouldn’t be there.

So, as you perceive, this isn’t the strategy we are going to comply with right here. We’ll keep away from connecting the menu gadgets to the actions of the AppDelegate class, so shut the wizard editor. Now open the ViewController.swift file the place we would like IBAction strategies to be related to our menus.

We should add three strategies IBAction:

One to zoom in and on this case we are going to enhance the extent of enlargement by zero.25. One to zoom out, the place we are going to scale back the extent of enlargement by zero.25. One for adjusting the picture to the window.

Right here they’re unexpectedly:

@IBAction func zoomIn (_ sender: N any)
scrollView.magnification + = zero.25

@IBAction func zoomOut (_ sender: N any)
scrollView.magnification – = zero.25

@IBAction func zoomToFit (_ sender: N any)

@ IBAction Features zoomIn ( sender : Something )

scrollView . . . Magnification + = . ] zero.25

@ [1945910] [1945910] [1945910] [1945910]] Features zoomOut ( _ : : : scrollView . Enlarge picture – = zero.25 – [19459104] }

@ [1945910] [1945910] [1945910] [194590] zoomToFit The Sender : ] ) {