Home iOS & Swift Books macOS by Tutorials

11
Adding Menu Controls Written by Sarah Reichelt

Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as scrambled text.

You can unlock the rest of this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

In the previous chapter, you created a document-based app. You imported a package to convert Markdown to HTML, and you added controls to allow the user to select a preview style. You even included an AppKit view in the SwiftUI app.

In this chapter, you’ll dive deeply into menus. In Section 1, you added menus to your app, so some of this is familiar to you. But those menus applied app-wide settings only. Now you’ll learn some different menu tricks, as well as how to track the active window so you can apply menu actions to that window only.

Adding the Style Files

The web view renders the HTML using a default style, but it’d be nice to have the ability to choose your own styles by using Cascading Style Sheets (CSS).

Open your project from the last chapter or open the starter project in the downloaded materials for this chapter.

Next, open the assets folder in this chapter’s downloads and locate the StyleSheets folder.

Drag this folder into your Project navigator, selecting Copy items if needed, Create groups and the MarkDowner target:

Adding the StyleSheets folder.
Adding the StyleSheets folder.

This new folder contains a set of CSS files, with some different styles, and a .swift file that sets up an enumeration for these styles. You’ll use the data in this enumeration to generate menu items.

Creating a New Menu

You’re going to have a lot of menu code, so to hold it all, create a new Swift file called MenuCommands.swift. Replace its contents with:

// 1
import SwiftUI

// 2
struct MenuCommands: Commands {
  // 3
  var body: some Commands {
    // 4
    EmptyCommands()
  }
}
@AppStorage("styleSheet")
  var styleSheet: StyleSheet = .raywenderlich

Generating Menu Items

Next, you’re going to use the enumeration to create the items for this new menu. Replace EmptyCommands() with:

// 1
CommandMenu("Display") {
  // 2
  ForEach(StyleSheet.allCases, id: \.self) { style in
    // 3
    Button {
      // 4
      styleSheet = style
    } label: {
      // 5
      Text(style.rawValue)
    }
    // keyboard shortcut goes here
  }
  
  // more menu items
}

// more menus
.commands {
  MenuCommands()
}
Display menu
Riftzeh kufe

Styling the HTML

To get your WebView to use the selected style, open WebView.swift.

@AppStorage("styleSheet")
  var styleSheet: StyleSheet = .raywenderlich
var formattedHtml: String {
  return """
    <html>
    <head>
       <link href="\(styleSheet).css" rel="stylesheet">
    </head>
    <body>
       \(html)
    </body>
    </html>
    """
}
func updateNSView(_ nsView: WKWebView, context: Context) {
  nsView.loadHTMLString(
    formattedHtml,
    baseURL: Bundle.main.resourceURL)
}
Changing styles
Lpozxecd nnjmot

Adding Keyboard Shortcuts

Back in Section 1, you added a menu that used a Picker. This gave you a checkmark beside the selected choice, but didn’t allow for keyboard shortcuts. Since this is an editor app, it’s more important that users can keep their hands on the keyboard, so having keyboard shortcuts is the priority.

.keyboardShortcut("t", modifiers: .command)
.keyboardShortcut(KeyEquivalent(style.rawValue.first!))
Style menu shortcuts
Gynba guve ykibwrabv

.foregroundColor(style == styleSheet ? .accentColor : .primary)
Active style sheet marked
Uzgife hgjye pveax fuyzux

Inserting a Submenu

Another useful feature would be the ability to change the editor’s font size. You’ll add this to the Display menu as a submenu, with items to increase, decrease and reset the font size.

@AppStorage("editorFontSize") var editorFontSize: Double = 14
// 1
Divider()

// 2
Menu("Font Size") {
  // 3
  Button("Smaller") {
    if editorFontSize > 8 {
      editorFontSize -= 1
    }
  }
  // 4
  .keyboardShortcut("-")

  // 5
  Button("Reset") {
    editorFontSize = 14
  }.keyboardShortcut("0")

  Button("Larger") {
    editorFontSize += 1
  }.keyboardShortcut("+")
}
@AppStorage("editorFontSize") var editorFontSize: Double = 14
.font(.system(size: editorFontSize))
Font size submenu
Mikh haza lixkafa

Using the Help Menu

Back in Section 1, you removed the Help menu item as it didn’t do anything useful. In this app, you’ll make it show a new window that actually provides some useful information.

// 1
CommandGroup(replacing: .help) {
  // 2
  NavigationLink(
    // 3
    destination:
      WebView(
        html: nil,
        address: "https://bit.ly/3x55SNC")
      // 4
      .frame(minWidth: 600, minHeight: 600)
  ) {
    // 5
    Text("Markdown Help")
  }
}
Opening a help window.
Iyujemy u fuxd hapkis.

Focusing on a Window

So far, all the menu items you’ve added apply their actions to the entire app. But this is a document-based app, so you’ll want to direct some menu items to the active window only. How can you tell which is the active window?

https://github.com/LostMoa/KeyWindow
Finding the KeyWindow package.
Futgawk tre XofSoqfob xohfiwa.

Package dependencies
Bidtovi caquwmoclout

Configuring the Library

Start by opening MarkDownerDocument.swift and importing the new package by adding this line at the top of the file:

import KeyWindow
extension MarkDownerDocument: KeyWindowValueKey {
  public typealias Value = Binding<Self>
}
import KeyWindow
ContentView(document: file.$document)
  .observeWindow()
.keyWindow(
  MarkDownerDocument.self,
  $document)

Adding a Window-specific Menu

In MenuCommands.swift, add the following at the top to import the library:

import KeyWindow
@KeyWindowValueBinding(MarkDownerDocument.self)
  var document: MarkDownerDocument?
Code folding
Bifa rektony

// 1
CommandMenu("Markdown") {
  // 2
  Button("Bold") {
    // 3
    document?.text += "**BOLD**"
  }
  // 4
  .keyboardShortcut("b")

  // 5
  Button("Italic") {
    document?.text += "_Italic_"
  }.keyboardShortcut("i", modifiers: .command)

  Button("Link") {
    let linkText = "[Title](https://link_to_page)"
    document?.text += linkText
  }

  Button("Image") {
    let imageText = "![alt text](https://link_to_image)"
    document?.text += imageText
  }
}
Markdown menu
Razkjuwm yelo

Exporting the HTML

You can type Markdown and preview this as HTML, but you may want to export the HTML code for use on a web site.

// 1
CommandGroup(after: .importExport) {
  // 2
  Button("Export HTML…") {
    // exportHTML()
  }
  // 3
  .disabled(document == nil)
}
Export menu item
Epcetk gime owoh

func exportHTML() {
  // 1
  guard let document = document else {
    return
  }

  // 2
  let savePanel = NSSavePanel()
  savePanel.title = "Save HTML"
  savePanel.nameFieldStringValue = "Export.html"

  // 3
  savePanel.begin { response in
    // 4
    if response == .OK, let url = savePanel.url {
      // 5
      try? document.html.write(
        to: url,
        atomically: true,
        encoding: .utf8)
    }
  }
}
Save panel
Sama xijiy

Exported HTML in Safari
Eknusdim FFQS at Hobope

Coding for the Touch Bar

A lot of MacBooks have a touch bar, and it’s frequently used to provide auto-complete suggestions or formatting options. So, it would be a neat touch to have some of your Markdown menu items available in the touch bar too.

Touch bar simulator
Weuyc fej najuticog

.touchBar {
  TouchbarCommands()
}
Touch bar commands
Yaajv kop piyjomzc

Challenges

Challenge 1: Keyboard shortcuts

When you added the Display menu, you created keyboard shortcuts for every menu item. Since then, you’ve added new menu items to the File and Help menus and they have no shortcuts. You also created a Markdown menu and only some of the items there have shortcuts.

Challenge 2: More Markdown snippets

The Markdown menu has a few snippets, but it’d be good to have more. Add a Headers submenu that inserts the various header types. Header 1 starts with 1 #, Header 6 starts with 6 #s. You can use the header level number as the shortcut.

Key Points

  • The default macOS document app gets a standard suite of menus, but you can add to them in lots of useful ways.
  • An enumeration can automate the creation of a menu. This can even extend to generating keyboard shortcuts.
  • Include a Menu in a menu item to create a submenu.
  • Using a NavigationLink as a menu item allows you to open a new window containing any SwiftUI view.
  • Keeping track of the frontmost window isn’t an easy task and Apple’s mechanisms don’t always work.
  • Once you know which window is the active one, you can target it directly from menu items. This allows you to have window-specific menu items.
  • When saving a file, use an NSSavePanel to request the save path from the user. When you ask the user to select a file, your app can write to that file, even though it’s outside the app’s sandbox container.
  • A lot of MacBooks have a touch bar and SwiftUI makes it easy to add to the default touch bar controls.

Where to Go From Here?

Well done! You’ve reached the end of another section, and you’ve completed a new app. If you’ve been working through the book in order, you’ve now got three working apps in three very different styles.

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.

© 2022 Razeware LLC

You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

Unlock Now

To highlight or take notes, you’ll need to own this book in a subscription or purchased by itself.