How to read/write control values in AppKit (about outlets) | How to Create macOS Apps

In the previous article, we implemented the process of executing an action when a button is clicked. Actions with buttons are one of the basic things common to most applications. Similarly, reading and writing values of controls is one of the common issues in application development.

A control is a type of view, such as a button, label, or text field. In this article, we will explain how to read and write values of controls in AppKit through the implementation of a function that reads a string entered in a text field and sets a new string in a label.

Create a project

Create a project for your new macOS application. Name the project CocoaHelloWorld2. For instructions on how to create a project, please refer to the following article.

See Also

Create Cocoa Hello World | How To Create macOS Apps This is a series of articles explaining how to create a Cocoa version of Hello World. This time, we will create Hello World with zero coding, just editing th…

Create an user interface

After creating the project, create the UI by editing the View Controller Scene in the Main.storyboard and creating a view like the following screen capture.

Create a label

The “Label” is placed in the area where “Hello World” is written. Create it by the following operation.

STEP

Click the “Library” button and drag & drop “Label” from the “Library” window to add it.

STEP

Change the label string to “Hello World”.

STEP

Set “Font” to “Text Style – Large Title”.

STEP

Set the auto-layout to be as shown in the table below.

Item	Setting
X	Center (Horizontally center in container)
Y	Fix from the top
Width	Fix
Height	Fix

Name input field

The name input field displayed in the center places the “Text Field”. It is created by the following operation.

STEP

Drag and drop “Text Field” from the “Library” window.

STEP

Adjust the width.

STEP

In the “Attributes” inspector, enter “Your Name” in the “Placeholder” field.

Placeholder field sets the placeholder string. A placeholder string is a string that is dimmed into a text field when nothing is entered into the text field.

STEP

Set the auto-layout to be as shown in the following table.

Item	Setting
X	Center (Horizontally center in container)
Y	Center (Vertically center in container)
Width	Fix
Height	Fix

“Change Name” button

The button labeled “Change Name” places a “Push Button”. Operate as follows.

STEP

Place the “Push Button” from the “Library” window.

STEP

Double-click the button and change the title to “Change Name”.

STEP

Set the auto-layout settings as shown in the following table.

Item	Setting
X	Center (Horizontally Center in Container)
Y	Fix from “Text Field”
Width	Fix
Height	Fix

Create outlets

To reference an object placed in the view you wish to create in the Storyboard from your code, create an outlet. An outlet is a property in Swift with the attribute @IBOutlet.

When a connection is set up between an outlet and an object in the Storyboard, the outlet is assigned an instance of the object on the Storyboard.

Create the name entry field and the outlet to the label

Create a name input field and an outlet to a label. Labels and text fields are NSTextField classes in AppKit. You can see what class corresponds to the control in the “Library” window.

Define an outlet in ViewController.swift as follows.

import Cocoa

class ViewController: NSViewController {
    
    @IBOutlet var messageLabel: NSTextField!
    @IBOutlet var nameField: NSTextField!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

    override var representedObject: Any? {
        didSet {
        // Update the view, if already loaded.
        }
    }


}

Connect to outlets

Connect the messageLabel property to the label that says “Hello World” and the nameField to the text field with a connection. Operate as follows.

STEP

Open the “Main.storyboard”.

STEP

Connect connections from the “View Controller” to the “Hello World” label placed in the view by holding down the control key or by dragging and dropping with the right mouse button.

STEP

Select “messageLabel” from “Outlets”.

This operation creates a connection between messageLabel and the placed label, and when Main.storyboard is loaded, the label object is assigned to the property messageLabel.

STEP

Operate as in steps (2) and (3) to connect a connection between the nameField property and the text field for name entry.

Create a button action

Implement the action to be performed when the “Change Name” button is clicked. Add the following code to the ViewController.swift file.

import Cocoa

class ViewController: NSViewController {
    
    @IBOutlet var messageLabel: NSTextField!
    @IBOutlet var nameField: NSTextField!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

    override var representedObject: Any? {
        didSet {
        // Update the view, if already loaded.
        }
    }

    @IBAction func changeName(_ sender: Any?) {
        // Get the string entered
        let name = nameField.stringValue
        
        // Create the new string
        let message = "Hello \(name)"
        
        // Update the label
        messageLabel.stringValue = message
    }
}

See the following article for information on how to configure actions and implemented code to be executed by buttons.

See Also

How to create buttons in AppKit (about targets and actions) | How to create macOS Apps Buttons are one of the most frequently used elements in an application. In this article, we will add a “Quit” button to the Cocoa Hello World so that the app…

Change the size of the label

Run the application. Enter a name and click the “Change Name” button to change the label string. It may seem fine, but try entering a longer name.

If it is longer than the original “Hello World” it cannot be displayed. One way is to change it dynamically, but here, let’s fix the left and right margins so that the label width changes with the window size.

STEP

Open the “Main.storyboard”.

STEP

Select the “Hello World” label and open the “Size” inspector.

STEP

Select “Width Equals: 130” and “Height Equals: 31” and press “Delete” key to delete them.

STEP

Widen the width of the label to where the guide appears.

STEP

Set the left and right margin constraints and click “Add 2 Constraints”.

STEP

Set “Alignment” to center in the Attribute Inspector.

Running Test

Run the completed application. Check for differences in display due to long strings and window size.

Download the sample code

The sample code created for this article can be downloaded here.

Serialized Articles

This article is part of a series of articles titled “How to create macOS Apps with AppKit”. For other articles, please open the following links.

How to create macOS apps with AppKit List of Serialized Articles