Chapter    18

Using Alerts and Panels

With every program, you’ll need to design the unique features of your program while letting the Cocoa framework worry about making your program look and behave like a standard OS X program. Two common features of nearly every OS X program are alerts and panels.

An alert typically pops up on the screen to inform the user such as asking the user to verify the deletion of a file or to alert the user of a problem. A panel displays common user interface items such as a print panel that OS X programs typically display to give you options for printing, or an open panel for selecting a file.

By using alerts and panels, you can add common OS X user interface elements without having to create your own user interface or without needing to write Swift code. Alerts and panels are part of the Cocoa framework that your OS X programs can use to create a standard OS X user interface.

Using Alerts

An alert is based on the NSAlert class in the Cocoa framework. At the simplest level, you can create an alert with two lines of Swift code:

var myAlert = NSAlert()
    myAlert.runModal()

The first line declares an object called myAlert that is based on the NSAlert class. Then the second line uses the runModal() method to display the alert. When an alert appears, it’s considered modal, which means the alert won’t let the user do anything until the user dismisses the alert.

The above two lines of code creates a generic alert that displays an OK button, a generic graphic image, and a generic text message as shown in Figure 18-1.

9781484212349_Fig18-01.jpg

Figure 18-1. Creating a generic alert

To customize an alert, you can modify the following properties:

  • messageText – Displays the main alert message in bold. In Figure 18-1, Alert is the messageText.
  • informativeText – Displays non-bold text directly underneath the messageText. In Figure 18-1, there is no informativeText.
  • icon – Displays an icon. By default, the icon is the program’s icon.
  • alertStyle – Displays a critical icon when set to NSAlertStyle.CriticalAlertStyle. Otherwise displays the default alert icon.
  • showsSuppressionButton – Displays a check box with the default text of “Do not show this message again” unless the suppressionButton?.title is defined.
  • suppressionButton?.title – Replaces the default text (“Do not show this message again”) with custom text for the check box.

To see how to customize an alert, follow these steps:

  1. From within Xcode choose File image New image Project.
  2. Click Application under the OS X category.
  3. Click Cocoa Application and click the Next button. Xcode now asks for a product name.
  4. Click in the Product Name text field and type AlertProgram.
  5. Make sure the Language pop-up menu displays Swift and that no check boxes are selected.
  6. Click the Next button. Xcode asks where you want to store the project.
  7. Choose a folder to store your project and click the Create button.
  8. Click the MainMenu.xib file in the Project Navigator. Your program’s user interface appears.
  9. Click the AlertProgram icon to display the window of your program’s user interface.
  10. Choose View image Utilities image Show Object Library. The Object Library appears in the bottom right corner of the Xcode window.
  11. Drag a Push Button on to the user interface window.
  12. Choose View image Assistant Editor image Show Assistant Editor. The AppDelegate.swift file appears next to your user interface.
  13. Move the mouse pointer over the push button, hold down the Control key, and drag the mouse above the last curly bracket in the bottom of the AppDelegate.swift file.
  14. Release the Control key and the mouse button. A pop-up window appears.
  15. Click in the Connect pop-up menu and choose Action.
  16. Click in the Name text field and type showAlert.
  17. Click in the Type pop-up menu, choose NSButton, and click the Connect button. Xcode creates an empty IBAction method.
  18. Modify the IBAction method as follows:
    @IBAction func showAlert(sender: NSButton) {
        var myAlert = NSAlert()
        myAlert.messageText = "Warning!"
        myAlert.informativeText = "Zombies approaching"
        myAlert.alertStyle = NSAlertStyle.CriticalAlertStyle
        myAlert.showsSuppressionButton = true
        myAlert.suppressionButton?.title = "Stop scaring me"
        myAlert.runModal()
    }
  19. Choose Product image Run. Your user interface appears.
  20. Click on the push button. An alert appears as shown in Figure 18-2.

    9781484212349_Fig18-02.jpg

    Figure 18-2. Displaying a customized alert

  21. Click the OK button on the alert to make it go away.
  22. Choose AlertProgram image Quit AlertProgram.

Getting Feedback from an Alert

An alert typically displays a single OK button so the user can dismiss the alert. However, an alert can get feedback from the user in one of two ways:

  • Selecting the suppression check box
  • Clicking on a button other than the OK button

To determine if the user selected the suppression check box or not, you need to access the suppressionButton!.state property. If the check box is selected, the suppressionButton!.state property is 1. If the check box is clear, the suppressionButton!.state property is 0.

The second way to get feedback from an alert is by displaying two or more buttons on an alert. To add more buttons to an alert, you need to use the addButtonWithTitle method. Then to determine which button the user selected, you need to use the NSAlertFirstButtonReturn, NSAlertSecondButtonReturn, or NSAlertThirdButtonReturn constants.

If you have four or more buttons on an alert, you can check for the fourth button by using NSAlertThirdButtonReturn + 1, a fifth button by using NSAlertThirdButtonReturn + 2, and so on for each additional button beyond the third one.

To see how to identify what options the user chose in an alert, follow these steps:

  1. Make sure your AlertProgram project is loaded in Xcode.
  2. Click on the AppDelegate.swift file in the Project Navigator pane.
  3. Modify the IBAction showAlert method as follows:
    @IBAction func showAlert(sender: NSButton) {
        var myAlert = NSAlert()
        myAlert.messageText = "Warning!"
        myAlert.informativeText = "Zombies approaching"
        myAlert.alertStyle = NSAlertStyle.CriticalAlertStyle
        myAlert.showsSuppressionButton = true
        myAlert.suppressionButton?.title = "Stop scaring me"

        myAlert.addButtonWithTitle("Ignore it")
        myAlert.addButtonWithTitle("Run")
        myAlert.addButtonWithTitle("Panic")
        myAlert.addButtonWithTitle("Do nothing")

        let choice = myAlert.runModal()

        switch choice {
        case NSAlertFirstButtonReturn:
            print ("User clicked Ignore it")
        case NSAlertSecondButtonReturn:
            print ("User clicked Run")
        case NSAlertThirdButtonReturn:
            print ("User clicked Panic")
        case NSAlertThirdButtonReturn + 1:
            print ("User clicked Do nothing")
        default: break
        }

        if myAlert.suppressionButton!.state == 1 {
            print ("Checked")
        } else {
            print ("Not checked")
        }

    }

    The addButtonWithTitle methods create buttons on the alert where the first addButtonWithTitle method creates a default button and the other addButtonWithTitle methods create additional buttons. To capture the button that the user clicked on, the above code creates a constant called “choice.”

    Then it uses a switch statement to identify which button the user clicked. Notice that the fourth button is identified by adding 1 to the NSAlertThirdButtonReturn constant.

    The suppressionButton!.state property checks if the user selected the check box that appears on the alert. If its value is 1, then the user selected the check box. Otherwise if its value is 0, the check box is clear.

  4. Choose Product image Run. Your user interface appears.
  5. Click the button. The alert appears as shown in Figure 18-3.

    9781484212349_Fig18-03.jpg

    Figure 18-3. The alert created by Swift code

  6. Click in the Stop scaring me check box to select it.
  7. Click on one of the buttons such as Panic or Run. No matter which button you click, the alert goes away.
  8. Choose AlertProgram image Quit AlertProgram. Xcode appears again and displays text in the Debug Area such as User clicked Panic and Checked.

Displaying Alerts as Sheets

Alerts typically appear as a modal dialog that creates another window that you can move separately from the main program window. Another way to display alert is as a sheet that appears to scroll down from the title bar of the currently active window.

To make an alert appear as a sheet, you need to use the beginSheetModalForWindow method like this:

alertObject.beginSheetModalForWindow(window, completionHandler: closure)

The first parameter defines the window where you want the sheet to appear. In the AlertProgram project, the IBOutlet representing the user interface window is called a window. The second parameter is the completion handler label, which identifies the name of a special function called a closure.

A closure represents a shorthand way of writing a function. Instead of writing a function the traditional way like this:

func functionName(parameters) -> Type {
    // Insert code here
               return value
}

You can write a closure like this:

    let closureName = { (parameters) -> Type in
    // Insert code here
}

To see how to turn an alert into a sheet and use closures, follow these steps:

  1. Make sure your AlertProgram project is loaded in Xcode.
  2. Click on the AppDelegate.swift file in the Project Navigator pane.
  3. Modify the IBAction showAlert method as follows:
    @IBAction func showAlert(sender: NSButton) {
        var myAlert = NSAlert()
        myAlert.messageText = "Warning!"
        myAlert.informativeText = "Zombies approaching"
        myAlert.alertStyle = NSAlertStyle.CriticalAlertStyle
        myAlert.showsSuppressionButton = true
        myAlert.suppressionButton?.title = "Stop scaring me"

        myAlert.addButtonWithTitle("Ignore it")
        myAlert.addButtonWithTitle("Run")
        myAlert.addButtonWithTitle("Panic")
        myAlert.addButtonWithTitle("Do nothing")

        let myCode = { (choice:NSModalResponse) -> Void in
            switch choice {
            case NSAlertFirstButtonReturn:
                print ("User clicked Ignore it")
            case NSAlertSecondButtonReturn:
                print ("User clicked Run")
            case NSAlertThirdButtonReturn:
                print ("User clicked Panic")
            case NSAlertThirdButtonReturn + 1:
                print ("User clicked Do nothing")
            default: break
            }

            if myAlert.suppressionButton!.state == 1 {
                print ("Checked")
            } else {
                print ("Not checked")
            }
        }
        myAlert.beginSheetModalForWindow(window, completionHandler: myCode)
    }
  4. Choose Product image Run. The user interface appears.
  5. Click on the button. Notice that now the alert drops down as a sheet as shown in Figure 18-4.

    9781484212349_Fig18-04.jpg

    Figure 18-4. The alert as a sheet

  6. Click in the Stop scaring me check box to select it.
  7. Click on one of the buttons such as Panic or Run. No matter which button you click, the alert goes away.
  8. Choose AlertProgram image Quit AlertProgram. Xcode appears again and displays text in the Debug Area such as User clicked Run and Checked.

In the above Swift code, the closure is defined as follows:

let myCode = { (choice:NSModalResponse) -> Void in
    switch choice {
    case NSAlertFirstButtonReturn:
        print ("User clicked Ignore it")
    case NSAlertSecondButtonReturn:
        print ("User clicked Run")
    case NSAlertThirdButtonReturn:
        print ("User clicked Panic")
    case NSAlertThirdButtonReturn + 1:
        print ("User clicked Do nothing")
    default: break
    }

    if myAlert.suppressionButton!.state == 1 {
        print ("Checked")
    } else {
        print ("Not checked")
    }
}
myAlert.beginSheetModalForWindow(window, completionHandler: myCode)

You could replace the closure name of “myCode” with the actual closure code in its place like this:

myAlert.beginSheetModalForWindow(window, completionHandler: { (choice:NSModalResponse) -> Void in
    switch choice {
    case NSAlertFirstButtonReturn:
        print ("User clicked Ignore it")
    case NSAlertSecondButtonReturn:
        print ("User clicked Run")
    case NSAlertThirdButtonReturn:
        print ("User clicked Panic")
    case NSAlertThirdButtonReturn + 1:
        print ("User clicked Do nothing")
    default: break
    }

    if myAlert.suppressionButton!.state == 1 {
        print ("Checked")
    } else {
        print ("Not checked")
    }
})

Putting closures inline directly within a method shortens the amount of code you need to write, but at the possible expense of making the overall code harder to understand. Separating the closure by name and then calling it by name makes it easier to reuse that closure elsewhere in your program if necessary, but also makes your code clearer at the expense of forcing you to write more code.

Choose whatever method you like best but as in all aspects of programming, stick to one style to make it easy for other programmers to understand your code later if you’re not around to explain how it works.

Using Panels

Panels represent common user interface elements that OS X programs need such as displaying an Open panel to let users select a file to open and a Save panel to let users choose a folder to store a file. The Open panel is based on the NSOpenPanel class while the Save panel is based on the NSSavePanel class.

Creating an Open Panel

An Open panel let the user select a file to open. The Open panel needs to return a file name if the user selected a file. Some properties that the Open panel uses include:

  • canChooseFiles – Lets the user select a file.
  • canChooseDirectories – Lets the user select a folder or directory.
  • allowsMultipleSelection – Lets the user select more than one item.
  • URLs – Holds the name of the chosen item. If the allowsMultipleSelection property is set to true, then the URLs property holds an array of items. Otherwise it holds a single item.

To see how to use an Open panel, follow these steps:

  1. From within Xcode choose File image New image Project.
  2. Click Application under the OS X category.
  3. Click Cocoa Application and click the Next button. Xcode now asks for a product name.
  4. Click in the Product Name text field and type PanelProgram.
  5. Make sure the Language pop-up menu displays Swift and that no check boxes are selected.
  6. Click the Next button. Xcode asks where you want to store the project.
  7. Choose a folder to store your project and click the Create button.
  8. Click the MainMenu.xib file in the Project Navigator. Your program’s user interface appears.
  9. Click the PanelProgram icon to display the window of your program’s user interface.
  10. Choose View image Utilities image Show Object Library. The Object Library appears in the bottom right corner of the Xcode window.
  11. Drag a Push Button on to the user interface window and double-click on it to change its title to Open.
  12. Choose View image Assistant Editor image Show Assistant Editor. The AppDelegate.swift file appears next to your user interface.
  13. Move the mouse pointer over the push button, hold down the Control key, and drag the mouse above the last curly bracket in the bottom of the AppDelegate.swift file.
  14. Release the Control key and the mouse button. A pop-up window appears.
  15. Click in the Connect pop-up menu and choose Action.
  16. Click in the Name text field and type openPanel.
  17. Click in the Type pop-up menu, choose NSButton, and click the Connect button. Xcode creates an empty IBAction method.
  18. Modify the IBAction method as follows:
    @IBAction func openPanel(sender: NSButton) {
        var myOpen = NSOpenPanel()
        myOpen.canChooseFiles = true
        myOpen.canChooseDirectories = true
        myOpen.allowsMultipleSelection = true

        myOpen.beginWithCompletionHandler { (result) -> Void in
            if result == NSFileHandlingPanelOKButton {
                print (myOpen.URLs)
            }
        }

    }
  19. Choose Product image Run. The user interface appears.
  20. Click on the button. An Open panel appears as shown in Figure 18-5.

    9781484212349_Fig18-05.jpg

    Figure 18-5. The Open panel

  21. Hold down the Command key and click on two different items such as two different files or a file and a folder.
  22. Click the Open button.
  23. Choose PanelProgram image Quit PanelProgram. Xcode appears again. In the Debug area, you should see a list of the files/folders you chose.

 Note  The Open panel only selects a file/folder, but you’ll still need to write Swift code to actually open any file the user selects.

Creating a Save Panel

A Save panel looks similar to an Open panel, but its purpose is to let the user select folder and define a file name to save. The Save panel needs to return a file name if the user selected a file. Some properties that the Open panel uses include:

  • title – Displays text at the top of the Save panel. If undefined, it defaults to displaying “Save”.
  • prompt – Displays text on the default button.
  • URL – Holds the path name and file name of the user’s selection.
  • nameFieldStringValue – Holds just the file name the user chose.

To see how to use a Save panel, follow these steps:

  1. Make sure the PanelProgram is loaded in Xcode.
  2. Click on the MainMenu.xib file in the Project Navigator pane.
  3. Drag a Push Button on to the user interface and double-click on it to change its title to Save.
  4. Choose View image Assistant Editor image Show Assistant Editor. Xcode shows the AppDelegate.swift file next to the user interface.
  5. Move the mouse pointer over the Save button, hold down the Control key, and drag the mouse under the IBOutlet line in the AppDelegate.swift file.
  6. Release the Control key and the mouse. A pop-up window appears.
  7. Click in the Connection pop-up menu and choose Action.
  8. Click in the Name text field, type savePanel, and click the Connect button.
  9. Click in the Type pop-up menu and choose NSButton. Then click the Connect button. Xcode creates an empty IBAction method.
  10. Modify this IBAction method as follows:
    @IBAction func savePanel(sender: NSButton) {
        var mySave = NSSavePanel()
        mySave.title = "Save a File Here"
        mySave.prompt = "Save Me"

        mySave.beginWithCompletionHandler { (result) -> Void in
            if result == NSFileHandlingPanelOKButton {
                print (mySave.URL)
                print (mySave.nameFieldStringValue)
            }
        }
    }
  11. Choose Product image Run. Your user interface appears.
  12. Click the Save button. A Save panel appears as shown in Figure 18-6. Notice that the title property creates the text that appears at the top of the Save panel while the prompt property creates the text that appears on the default button in the bottom right corner of the Save panel.

    9781484212349_Fig18-06.jpg

    Figure 18-6. The condensed Save panel

  13. Click the Expand button that appears to the far right of the Save As text field. The Save panel expands as shown in Figure 18-7.

    9781484212349_Fig18-07.jpg

    Figure 18-7. The expanded Save panel

  14. Click in Save As text field and type TestFile.
  15. Click the Save Me button.
  16. Choose PanelProgram image Quit PanelProgram. The Xcode window appears again. In the Debug Area at the bottom of the Xcode window, you should see the full path name of the file and folder you chose, and just the file name you typed.

Summary

When designing a standard OS X user interface, you don’t have to create everything yourself. By taking advantage of the Cocoa framework, you can create alerts and panels that look and behave like other OS X programs with little extra coding on your own part.

Alerts let you display brief messages to the user such as warnings. You can customize an alert with text and graphics, and place two or more buttons on the alert. If you place two or more buttons on an alert, you’ll need to write Swift code to identify which button the user clicked.

An alert typically appears as a separate window, but you can also make it appear as a sheet that drops down from a window’s title.

Panels display commonly used user interface items such as an Open panel to select a file to open, and a Save panel to select a folder and a file name to save data. The Open and Save panels are part of the Cocoa framework, but you’ll need to write additional Swift code to make the Open and Save panels actually open or save a file to a hard disk.

Alerts and panels let you create standard OS X user interface elements with little additional coding. By using these features of the Cocoa framework, you can create standard OS X programs that work reliably and behave how users expect an OS X program to look and behave.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset