Chapters
Chapters

Chapters

Hide chapters

macOS Apprentice

Third Edition · macOS 26 · Swift 6 · Xcode 26

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Getting Started

Section 1: 4 chapters
Show chapters Hide chapters

Section II: Building With SwiftUI

Section 2: 6 chapters
Show chapters Hide chapters

Section III: Building With AppKit

Section 3: 6 chapters
Show chapters Hide chapters

Section IV: Combining SwiftUI & AppKit

Section 4: 3 chapters
Show chapters Hide chapters

12. Building the User Interface
Written by Sarah Reichelt

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

In the previous chapter, you loaded in the movies.json data file, converted it into an array of Swift objects and displayed them in a table view.

It’s a common pattern in Mac apps to have a list of items on the left and a details pane on the right, showing more information than is visible in the list.

In this chapter, you’ll add this pattern to MoviesTable. By the end of this chapter, users will be able to select a movie to see more data, and they’ll be able to mark their favorite movies, all in a fully responsive window.

Selecting a Movie

Open the project you worked on in the last chapter or use the starter from the downloaded materials for this chapter. The starter folder has a compressed version of the movies.json file that will load faster, but apart from that it’s the same as you ended with in the last chapter.

Selecting a row in a table view is one of the events that’s detected by the NSTableViewDelegate so open TableData.swift and add these two method stubs:

// 1
func showSelectedMovie(_ movie: Movie) {
  print("You selected \(movie.title)")
}

// 2
func clearSelectedMovie() {
  print("Selection cleared")
}

You’ll add more code to these methods when you’ve set up the user interface, but for now, they’ll print reports so you know what’s happening:

  1. The first one gets a Movie as the argument and prints its title.
  2. The other method detects when the user clears the selection.

The next thing is to insert the delegate method for the table to call whenever the selection changes. Add some blank lines after the last method and type tvs. Xcode uses the initials to suggest these autocomplete options:

selection autocomplete
selection autocomplete

Choose tableViewSelectionDidChange(_ notification:) and replace the code placeholder with:

// 1
let row = moviesTableView.selectedRow
// 2
if row < 0 || row >= movies.count {
  // 3
  clearSelectedMovie()
  return
}

// 4
let selectedMovie = movies[row]
showSelectedMovie(selectedMovie)

What does this do?

  1. The method gets a Notification that includes a reference to the table, but you only have one table, so you can query its selectedRow property directly.

  2. If the user hasn’t selected anything, row equals -1. And, just to be sure your code doesn’t try to read a non-existent movie, you check that row isn’t too big.

  3. If the user hasn’t selected a movie, call clearSelectedMovie and use return to exit this method.

  4. Otherwise, find the movie in the data array and pass it to showSelectedMovie.

Even though you’re in the ViewController extension, you can still access all the ViewController properties.

Run the app now and select a few different movies. Check that the titles appear in the Xcode console. Command-click the selected movie to clear the selection and confirm that this prints the correct text:

Selecting and deselecting.
Selecting and deselecting.

Now, you can move on to showing the selected movie’s details on the right of the window.

Adding the Details Fields

Open Main.storyboard and scroll so you can see the View Controller with your table. Press Shift-Command-L to open the Library. Search for box and drag a Box into the empty space. This will draw a nice border around the details display.

Turning off the box title.
Lotjojc owh mqu wuz nudge.

Setting box constraints.
Loxjegm gul sislrzoehmm.

Label in Library
Fohop aq Palreck

Resizing the label.
Meluqoxz xpe goder.

Aligning the label.
Ojutyopc vja polaj.

Position the duplicate.
Wevaroud xva zoyxecere.

Reset to Suggested Constraints
Zayid ti Yajxodkaz Ficxgseexvj

Suggested constraints
Qogdirwaq lejtnheovlm

Working with Auto Layout

To achieve a responsive design that adapts to user settings, you must use Auto Layout, but it can be tricky. Here are some tips to make it easier to work with:

Inserting Title Fields

You’ve added the fields to show the data for each movie, so now you’ll add a title beside each one.

Configuring the Title label.
Zutsememojb spu Sikyi dojir.

Setting the font.
Zitmisb vlo xoxj.

Aligning the title.
Oziyhurp lxe qakxu.

Box labels
Mun luwinv

Constraining the Titles

You still have to set Auto Layout constraints for the titles, so select all four titles, click Resolve Auto Layout Issues and choose Reset to Suggested Constraints.

Layout issues
Fixeod okzuad

Fixing constraint issues.
Xijimr curfmdaizb iwsaec.

Fixing the width constraint.
Qopejq nne muvht vedqbhoufn.

Testing the constraints.
Boydewy jfa sonynqeutlh.

Connecting to the Code

You have the fields set up, but your code needs to have a way to refer to them so it can put the correct data in the correct slot.

Connecting the label to code.
Foctetqaxg wso hapeb ro woci.

Setting the label name.
Rifruvq sco fulut howa.

Connected outlets
Witcipmih eijgaft

Displaying the Selected Movie

Close the secondary editors so you only have one editor pane open and go to TableData.swift.

// 1
titleLabel.stringValue = movie.title
// 2
runtimeLabel.stringValue = "\(movie.runTime) minutes"
// 3
genresLabel.stringValue = movie.genres

titleLabel.stringValue = ""
runtimeLabel.stringValue = ""
genresLabel.stringValue = ""
principalsLabel.stringValue = ""
Selecting a movie.
Basekwegw e riwaa.

Adjusting Auto Layout

Back in Main.storyboard, select the first data view. The easiest way is to click Title Label in the outline view.

Wrap settings
Dpoc zolsagwp

Misaligned text
Buzivakvus furj

Last Baseline Space
Nazd Kehemaju Vgiro

Constraint attributes
Guppsqoifm oymzicadec

Aligning the tops.
Isatsiwh qci qagg.

Correct wrapping and alignment.
Betsafg zqihjobb arn iyeyptabf.

Adding the Principals

The JSON data starts with an array of movies, each with their own properties. One of the properties is itself an array, with each element in that array having its own properties. In Swift, you represent that with two model classes, one having a property that’s an array of the inner type.

// 1
class Principal: Codable {
  // 2
  let id: String
  var name: String
  var category: String
  var roles: String

  // 3
  var display: String {
    if roles.isEmpty {
      return "\(name): \(category)"
    }
    return "\(name) as \(roles)"
  }
}

var principals: [Principal]
init autocomplete
ozen uuyovajtzadi

Displaying the Principals

Add this computed property to Movie:

// 1
var principalsDisplay: String {
  // 2
  let principalDisplays = principals.map { $0.display }
  // 3
  return principalDisplays.joined(separator: "\n")
}

principalsLabel.stringValue = movie.principalsDisplay
Details display
Yuqaicg nosnpeh

Picking Favorites

Nobody likes a teacher who has favorites, but everyone has their favorite movies. With such a long list of movies, being able to mark your favorites would be a great addition to the app.

Setting button constraints.
Bursokh varyad qixbslaobkv.

Connecting an outlet.
Qiclikfuly en iiffop.

 @IBOutlet weak var favButton: NSButton!
Connecting an action.
Jagxuhbomr aj ahkuuz.

favButton.image = nil

// 1
let imageName = movie.isFav ? "heart.fill" : "heart"
// 2
let color = movie.isFav ? NSColor.red : NSColor.gray

// 3
let image = NSImage(
  systemSymbolName: imageName,
  accessibilityDescription: imageName)
// 4
let config = NSImage.SymbolConfiguration(paletteColors: [color])

// 5
favButton.image = image?.withSymbolConfiguration(config)

var selectedMovie: Movie?

selectedMovie = nil

selectedMovie = movie

// 1
if let selectedMovie {
  // 2
  selectedMovie.isFav.toggle()
  // 3
  showSelectedMovie(selectedMovie)
}
Favorite movie
Tofihaha qucii

Key Points

  • NSTableViewDelegate can detect changes to the table selection.
  • Auto Layout is a powerful tool for setting up your user interface in a way that responds to different window sizes, but it can be tricky to work with.
  • JSON data can include nested data types.
  • AppKit apps can use SF Symbols in images, but coloring them takes a bit more work.

Where to Go From Here?

You’ve created a table and filled it with data. Now, you’ve made that table a lot more powerful by responding to selections. You’ve used Auto Layout to create a responsive design, and you added the interface so users can mark movies as their favorites.

11. Beginning AppKit
13. Powering Up Your Table
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now