macOS Controls Tutorial: Part 1/2
- Getting Started with macOS Controls
- NSControl – The Building Block of MacOS Controls
- Set the Value of macOS Controls
- Enable & Disable macOS Controls
- Field of Dreams – NSTextField
- Living in the Past – A Past Tense Verb
- The Value Combo – NSComboBox
- Method 1 – Calling Methods Directly On The Control
- Method 2 – Using A Data Source
- Which Method To Use?
- The Singles Bar – A Singular Noun
- Pop Goes the Weasel – NSPopupButton
- Filling the Spaces – Adding Items To Pop Up Buttons
- The More the Merrier – A Plural Noun
- Text is Next – NSTextView
- The Phrase that Pays – Adding a Text View
- Pushing Your Buttons – NSButton
- Buttoning Things Down – Adding a Button
- Where to Go From Here?
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
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
- Date Pickers
- 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.
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.
Enable & Disable macOS Controls
Enabling or disabling macOS controls based on the state of an app is a very common UI task. When a control is disabled, it will not respond to mouse and keyboard events, and will usually update its graphical representation to provide some visual cues that it is disabled, such as drawing itself in a lighter “greyed out” color.
The methods for enabling and disabling a control are:
// disable a control myControl.isEnabled = false // enable a control myControl.isEnabled = true // get a control's enabled state let isEnabled = myControl.isEnabled
Okay, that seems pretty easy – and the great thing is that these methods are common to all macOS controls. They’ll all work the same way for any control you use in your UI.
Now it’s time to take a look at the more common macOS Controls.