macOS Controls Tutorial: Part 1/2

Update Note: Updated for Xcode 11.3 / Swift 5 by Roberto Machorro. Previous updates by Ernesto García, Michael Briscoe. Original post by Ernesto García.

If you’re an iOS developer and you’re interested in learning about Mac development, you’re in luck – with your iOS skills, you’ll find it quite easy to learn!

Many of the Cocoa classes and design patterns you know and love like strings, dictionaries and delegates have direct equivalents in Mac development. You’ll feel right at home!

However, one big difference with macOS development are there are different controls. Gone are UIButton and UITextField – instead there are similar (but slightly different) variants.

This tutorial will introduce you to some of the more common macOS controls of the user interface – the foundation upon which most Mac apps are built. You’ll learn about these controls, as well as the methods and properties you’ll need to understand in order to get up and running as a developer! :]

In this tutorial, you’ll be creating a simple Mac application like the popular game Mad Libs. Mad Libs is a word game where you can insert different words in a block of text in order to create a story – which often has hilarious results!

Once you’ve completed both parts of this tutorial, you’ll have a fundamental understanding of the following macOS controls:

• Labels and Text Fields
• Combo Boxes
• Popup Buttons
• Text Views
• Sliders
• Date Pickers
• Buttons
• Radio Buttons
• Check Buttons
• Image Views

The best way to learn any new programming platform is to dive right in and get started – so without further ado, here’s your introduction to macOS Controls! :]

Getting Started with macOS Controls

Open Xcode, and choose File/New/Project. In the Choose a template dialog, select macOS/Application/App, which is the template you use to create an app with a GUI on macOS. Then click Next.

In the next screen, type MadLibs as the product name, and enter a unique Organization name and identifier. Make sure that Storyboard is selected as User Interface and Swift is the selected language.

Click Next and choose the location where you’d like to save your new project. Click Create.

Open Main.storyboard. Xcode has created for you the basic skeleton of a macOS app: a Window controller and a content View controller.

Select the window in the Window Controller Scene and open the Attributes Inspector. Change the window Title to MadLibs.

A macOS app usually has a resizable window and its content has to adapt to the window size. The best tool for that is Auto Layout. To add Auto Layout to all the controls in this tutorial would create a major distraction; we want you to focus strictly on the macOS controls.

Accordingly, only the default autoresizing is applied, which means that all controls will maintain a fixed position and size, regardless of any window resizing the user performs – including the possibility that some of the controls fully or partially will be out of the window’s visible rectangle.

Note: If you want to learn more about Auto Layout and how to use it in your macOS apps, you can follow our macOS Development Tutorial for Beginners, Part 3.

During the tutorial, you’ll need to add some macOS controls to this view, and the default height may not be enough to fit them all. If you need to resize it, drag down the bottom edge of the content view, or set the view’s Height property in the Size Inspector.

Build and run.

You’ve built a working application – without any coding at all. The window is empty right now, but you’re going to fill it up with some macOS controls and make it look great! :]

Now that the basic framework has been laid down, you can move on to the main focus of this tutorial – adding macOS controls to your app.

Each of the remaining steps in this tutorial will focus on a single, different control. You’ll learn the basics of each control and how to use each one in the MadLibs app to try it out.

NSControl – The Building Block of MacOS Controls

NSControl is the foundation upon which all other macOS controls are built. NSControl provides three features which are pretty fundamental for user interface elements: drawing on the screen, responding to user events, and sending action messages.

As NSControl is an abstract superclass, it’s entirely possible that you’ll never need to use it directly within your own apps unless you want to create your own custom macOS controls. All of the common controls are descendants of NSControl, and therefore inherit the properties and methods defined in that.

The most common methods used for a control are getting and setting its value, as well as enabling or disabling the control itself. Have a look at the details behind these methods below:

Set the Value of macOS Controls

If you need to display information you’ll usually change the control’s value. Depending on your needs, the value can be a string, a number or even an object. In most circumstances, you’ll use a value which matches the type of information being displayed, but NSControl allows you to go beyond this and set several different value types!

The methods for getting and setting a control’s value are:

// getting & setting a string
let myString = myControl.stringValue
myControl.stringValue = myString

// getting & setting an integer
let myInteger = myControl.integerValue
myControl.integerValue = myInteger

// getting & setting a float
let myFloat = myControl.floatValue
myControl.floatValue = myFloat

// getting & setting a double
let myDouble = myControl.doubleValue
myControl.doubleValue = myDouble

// getting & setting an object
let myObject: Any? = myControl.objectValue
myControl.objectValue = myObject

You can see how the different setters and getters fit with the type-safety of Swift.