Rather than let the user choose a specific command through a button, user interfaces often give choices to pick. Such choices let the user pick one or more options, such as customizing the way a program works. When a user interface needs to offer multiple choices, the two most common ways to offer options are through radio buttons and check boxes.

Radio buttons get their name from car radios that let you press a button to switch to a different radio station. Since you can only listen to one radio station at a time, radio buttons give you multiple options but limit you to choosing only one button. The moment you select a different button, your previous choice is no longer selected. With radio buttons, you can either select zero buttons or select exactly one button at a time.

Check boxes work slightly differently. Like radio buttons, check boxes offer multiple choices. The main difference is that with a group of check boxes, you can select zero or more check boxes at the same time so you can choose multiple options at once.

When you need to limit the user to zero or one choices, use radio buttons. When you need to let the user choose zero or more choices, use check boxes. Figure 16-1 shows the Xcode Preferences dialog that uses both radio buttons and a check box to let the user customize how Xcode behaves.

While radio buttons and check boxes are commonly used to display choices displayed as text, a date picker displays different types of dates for the user to choose. Then the date picker stores the user’s choice in a special date format (rather than separate text representing months or numbers representing days or years).

By storing dates in a special format, your program can properly display dates according to the user’s settings on their computer. For example, in some parts of the world, they display dates like this: mm/dd/yyyy. Yet in other parts of the world they display dates like this: dd/mm/yyyy.

Rather than worry about a particular date format setting on each user’s computer, a date picker uses a special date format so that way the computer can properly display the correct format based on the user’s current settings.

Date pickers, like radio buttons, and check boxes give users a fixed but limited range of valid options to select. This ensures that whatever choice the user makes, the choice will be acceptable to your program.

Check boxes and radio buttons are good for offering users a limited range of choices that are usually text options. For offering users a range of numeric values to select, you can use a slider. Sliders let the user visually select a range of valid options.

Using Check Boxes

You can use a check box by itself or grouped together with other check boxes. A check box is actually based on the NSButton class although it looks and behaves much differently than a typical button. For a check box, the three most important properties include:

• Title – The text that appears next to a check box that describes an option for the user to choose.
• State – Determines if the check box is selected (1) or clear (0).
• Alternate – Text that appears when the check box is clear. (The Title text appears when the check box is selected.)

To see how check boxes work, follow these steps:

1. From within Xcode choose File New 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 CheckProgram.
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 CheckProgram icon to display the window of your program’s user interface.
10. Choose View Utilities Show Object Library. The Object Library appears in the bottom right corner of the Xcode window.
11. Drag a Push Button, three Check Boxes, and a Wrapping Text Field on to the user interface window. Make sure you resize Wrapping Text Field and all the check box widths so it looks like Figure 16-2.

    

    Figure 16-2. The user interface of the CheckProgram.

12. Choose View Utilities Show Attributes Inspector. The Show Attributes Inspector pane appears in the upper right corner of the Xcode window.
13. Click on the top check box and in the Show Attributes Inspector pane, change its Title to “No dogs” and its Alternate to “Dogs.”
14. Click on the middle check box and in the Show Attributes Inspector pane, change its Title to “No cats” and its Alternate to “Cats.”
15. Click on the top check box and in the Show Attributes Inspector pane, change its Title to “No birds” and its Alternate to “Birds.”
16. Double-click on the Push Button and change its Title to “Check.”
17. Choose View Assistant Editor Show Assistant Editor. Xcode displays the AppDelegate.swift file next to the user interface.
18. Move the mouse pointer over the Dogs check box, hold down the Control key, and drag the mouse under the IBOutlet line in the AppDelegate.swift file.
19. Release the Control key and the mouse. A pop-up window appears.
20. Click in the Name text field, type dogBox, and click the Connect button.
21. Move the mouse pointer over the Cats check box, hold down the Control key, and drag the mouse under the IBOutlet line in the AppDelegate.swift file.
22. Release the Control key and the mouse. A pop-up window appears.
23. Click in the Name text field, type catBox, and click the Connect button.
24. Move the mouse pointer over the Birds check box, hold down the Control key, and drag the mouse under the IBOutlet line in the AppDelegate.swift file.
25. Release the Control key and the mouse. A pop-up window appears.
26. Click in the Name text field, type birdBox, and click the Connect button.
27. Move the mouse pointer over the Wrapping Text Field, hold down the Control key, and drag the mouse under the IBOutlet line in the AppDelegate.swift file.
28. Release the Control key and the mouse. A pop-up window appears.
29. Click in the Name text field, type messageBox, and click the Connect button. You should now have four new IBOutlets that look like this:

    @IBOutlet weak var dogBox: NSButton!
    @IBOutlet weak var catBox: NSButton!
    @IBOutlet weak var birdBox: NSButton!
    @IBOutlet weak var messageBox: NSTextField!

30. Move the mouse pointer over the Check Push Button, hold down the Control key, and drag the mouse over the last curly bracket in the bottom of the AppDelegate.swift file.
31. Release the Control key and the mouse. A pop-up window appears.
32. Click in the Connection pop-up menu and choose Action.
33. Click in the Name text field and type checkBoxes.
34. Click in the Type pop-up menu and choose NSButton. Xcode creates an empty IBAction method.
35. Modify this check boxes IBAction method as follows:

    @IBAction func checkBoxes(sender: NSButton) {
        let nextLine = "
    "
        var message : String = ""
        if dogBox.state == 1 {
            message = "Dog check box selected" + nextLine
        } else {
            message = "Dog check box NOT selected" + nextLine
        }
    
        if catBox.state == 1 {
            message = message + "Cat check box selected" + nextLine
        } else {
            message = message + "Cat check box NOT selected" + nextLine
        }
    
        if birdBox.state == 1 {
            message = message + "Bird check box selected" + nextLine
        } else {
            message = message + "Bird check box NOT selected" + nextLine
        }
    
        messageBox.stringValue = message
    }

    This code creates a constant that represents a carriage return “ ” and a new line “ ” character. It declares a message variable that can hold String data types and initially contains “”, which is an empty string. The multiple if-else statements check the State property of each check box to determine if it’s selected (state = 1) or clear (state = 0). Then it displays the results in the Wrapping Text Field, which is represented by an IBOutlet variable called messageBox.

36. Choose Product Run. Your user interface appears.
37. Click on the different check boxes. Notice that each time you select or clear a check box, the Title or Alternate text appears.
38. Click the Check push button. The Wrapping Text Field identifies which check boxes you selected and which ones are clear.
39. Choose CheckProgram Quit CheckProgram.

Using Radio Buttons

Unlike check boxes that allow the user to select multiple options, radio buttons display multiple options but only let the user select one at a time. The moment the user selects another radio button, the currently selected radio button gets cleared.

Radio buttons are defined by the NSMatrix class in the Cocoa frameworks. That means when you create a group of radio buttons, you need to define how many you want by defining the number of rows and columns as shown in Figure 16-3.

To add or remove radio buttons, just adjust the number of rows and columns under the Matrix category in the Show Attributes Inspector pane. If you need to create an odd number of radio buttons, select the radio button you don’t want and select its Transparent property as shown in Figure 16-4.

To identify which radio button a user selected, you need to change the Tag property of each radio button individually. Then you can retrieve the selected radio button by using the selectedTag() method.

To see how to use radio buttons, follow these steps:

1. From within Xcode choose File New 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 RadioProgram.
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 RadioProgram icon to display the window of your program’s user interface.
10. Choose View Utilities Show Object Library. The Object Library appears in the bottom right corner of the Xcode window.
11. Drag a Push Button and a Radio Group on to the user interface window.
12. Click on the Radio Group and choose View Utilities Show Attributes Inspector to open the Show Attributes Inspector pane in the upper right corner of the Xcode window.
13. Modify the Rows and Columns to display three Rows and two Columns so it looks like Figure 16-5.

    

    Figure 16-5. The user interface of the RadioProgram

14. Click on the radio button that appears in the bottom right corner of the Radio Group. Xcode highlights your chosen radio button as shown in Figure 16-6.

    

    Figure 16-6. Selecting a radio button to modify

15. Select the Transparent check box under the Button Cell category in the Show Attributes Inspector pane (see Figure 16-4). Your chosen radio button disappears.
16. Click on the top radio button in the upper left corner and make sure its Tag property in the Show Attributes Inspector pane is set to 0.
17. Click on the middle radio button in the left column and make sure its Tag property in the Show Attributes Inspector pane is set to 1.
18. Click on the bottom radio button in the left column and make sure its Tag property in the Show Attributes Inspector pane is set to 2.
19. Click on the top radio button in the right column and make sure its Tag property in the Show Attributes Inspector pane is set to 3.
20. Click on the middle radio button in the right column and make sure its Tag property in the Show Attributes Inspector pane is set to 4.
21. Choose View Assistant Editor Show Assistant Editor. The AppDelegate.swift file appears next to your user interface.
22. Move the mouse pointer over the Radio Group, hold down the Control key, and drag underneath the IBOutlet line.
23. Release the Control key and the mouse. A pop-up window appears.
24. Click in the Name text field and type radioMatrix. An IBOutlet appears as follows:

    @IBOutlet weak var radioMatrix: NSMatrix!

25. Move the mouse pointer over the Push Button, hold down the Control key, and drag the mouse over the last curly bracket at the bottom of the AppDelegate.swift file.
26. Release the Control key and the mouse. A pop-up window appears.
27. Click in the Connect pop-up menu and choose Action.
28. Click in the Name text field and type whichButton.
29. Click in the Type pop-up menu and choose NSButton. Xcode creates an empty IBAction method.
30. Modify the IBAction method as follows:

    @IBAction func whichButton(sender: NSButton) {
        var myAlert = NSAlert()
        myAlert.messageText = "You clicked the radio button with a Tag (radioMatrix.selectedTag())"
        myAlert.runModal()
    }

31. Choose Product Run. Your user interface appears.
32. Click on a radio button and then click on the Push Button. An alert dialog appears, displaying the Tag number of the radio button you selected.
33. Click the OK button to make the alert dialog go away.
34. Choose RadioProgram Quit RadioProgram.

Using a Date Picker

A Date Picker makes it easy for users to choose a date and/or time in a proper format. The three types of date picker appearances are shown in Figure 16-7:

• Textual – Displays a date in a text field that requires the user to type in a proper date.
• Textual with Stepper – Displays a date in a text field that the user can change by clicking on a stepper to modify the currently selected part of the date.
• Graphical – Displays a calendar so the user can click on a date.

Some of the properties to modify in a date picker are shown in Figure 16-8:

• Style – Determines the date picker’s appearance.
• Selects – Determines whether the user can select a single date or a range of dates.
• Elements – Determines what date and time elements to display such as Month, Day, Year, Hour, Minute, and Second.
• Minimum Date – Defines the earliest date possible.
• Maximum Date – Defines the latest date possible.
• Date – Defines the currently displayed date and/or time.

To retrieve the user’s chosen date from a date picker, you need to access the dateValue property, which represents an NSDate type.

To see how to use a date picker, follow these steps:

1. From within Xcode choose File New 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 DateProgram.
5. Make sure the Language pop-up menu displays Swift and that all check boxes are clear and not 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 on the MainMenu.xib file in the Project Navigator Pane.
9. Click on the DateProgram icon to make the window of the user interface appear.
10. Drag a Push Button and Date Picker on to the user interface.
11. Click on the Date Picker and choose View Utilities Show Attributes Inspector.
12. Click in the Style pop-up menu and choose Graphical to make the date picker look like a monthly calendar as shown in Figure 16-9.

    

    Figure 16-9. The user interface of the DateProgram

13. Choose View Assistant Editor Show Assistant Editor. Xcode displays the AppDelegate.swift file next to the user interface.
14. Move the mouse pointer over the date picker, hold down the Control key, and drag the mouse under the IBOutlet line in the AppDelegate.swift file.
15. Release the Control key and the mouse button. A pop-up window appears.
16. Click in the Name text field, type chooseDate, and click the Connect button. Xcode creates an IBOutlet like this:

    @IBOutlet weak var chooseDate: NSDatePicker!

17. Move the mouse pointer over the Push Button, hold down the Control key, and drag the mouse over the last curly bracket in the bottom of the AppDelegate.swift file.
18. Release the Control key and the mouse. A pop-up window appears.
19. Click in the Connect pop-up menu and choose Action.
20. Click in the Name text field and type showDate.
21. Click in the Type pop-up menu and choose NSButton. Then click the Connect button. Xcode creates an IBAction method.
22. Modify this IBAction method as follows:

    @IBAction func showDate(sender: NSButton) {
                  var myAlert = NSAlert()
        myAlert.messageText = "You chose this date =  (chooseDate.dateValue)"
        myAlert.runModal()
    }

23. Choose Product Run. Your user interface appears.
24. Choose a date on the date picker and click the push button. An alert dialog appears, displaying the date you chose.
25. Click the OK button to make this alert dialog go away.
26. Choose DateProgram Quit DateProgram.

Using Sliders

A slider can appear vertically or horizontally. Sliders visually represent a range of values that the user can select by dragging the slider back and forth (or up and down). One end represents the minimum value (left or bottom) while the other end represents the maximum value (right or top). To help users understand the different values a slider represents, you can also choose to display tick marks as shown in Figure 16-10.

Some of the more important properties to define on a slider include:

• Tick Marks – Defines the position of tick marks and how many tick marks to display.
• Minimum – Defines the smallest value possible.
• Maximum – Defines the largest value possible.
• Current – Identifies the initial value of the slider when it first appears on the user interface.

You can use the integerValue property to retrieve the current value of the slider and display this value in another user interface item such as a text field. To see how to do this, follow these steps:

1. From within Xcode choose File New 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 SliderProgram.
5. Make sure the Language pop-up menu displays Swift and that all check boxes are clear and not 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 on the MainMenu.xib file in the Project Navigator Pane.
9. Click on the SliderProgram icon to make the window of the user interface appear.
10. Drag a Horizontal Slider and a Text Field on to the user interface so it looks like Figure 16-11.

    

    Figure 16-11. The user interface of the SliderProgram

11. Choose View Assistant Editor Show Assistant Editor. Xcode shows the AppDelegate.swift file next to the user interface.
12. Move the mouse pointer over the Horizontal Slider, hold down the Control key, and drag the mouse under the IBOutlet line in the AppDelegate.swift file.
13. Release the Control key and the mouse. A pop-up window appears.
14. Click in the Name text field, type mySlider, and click the Connect button.
15. Move the mouse pointer over the text field, hold down the Control key, and drag the mouse under the IBOutlet line in the AppDelegate.swift file.
16. Release the Control key and the mouse. A pop-up window appears.
17. Click in the Name text field, type sliderValue, and click the Connect button. You should now have these two IBOutlets:

    @IBOutlet weak var mySlider: NSSlider!
    @IBOutlet weak var sliderValue: NSTextField!

18. Move the mouse pointer over the Horizontal Slider, hold down the Control key, and drag the mouse just above the last curly bracket at the bottom of the AppDelegate.swift file.
19. Release the Control key and the mouse. A pop-up window appears.
20. Click in the Connection pop-up menu and choose Action.
21. Click in the Name text field and type getValue.
22. Click in the Type pop-up menu and choose NSSlider. Then click the Connect button. Xcode creates an empty IBAction method.
23. Modify this IBAction method as follows:

    @IBAction func getValue(sender: NSSlider) {
        sliderValue.integerValue = mySlider.integerValue
    }

24. Choose Product Run. Your user interface appears.
25. Drag the slider left and right. Notice that each time you drag the slider and release the mouse button, the slider’s current value appears in the text box.
26. Choose SliderProgram Quit SliderProgram.

Summary

Check boxes, radio buttons, and date pickers let you provide the user with a range of valid options to select. This ensures that the user can’t give a program invalid data by mistake (or deliberately).

Check boxes allow the user to choose zero or more options. A group of radio buttons only allow the user to choose one option. A date picker allows the user to choose a correctly formatted date.

To identify which check boxes a user selected, examine the State property of each check box. If the State value is 1, the check box is selected. If the State value is 0, the check box is clear.

It’s possible to display alternate text on a check box and radio button. That way one text appears when the check box or radio button is selected, and different text appears when the check box or radio button is clear.

To identify which radio button a user may have selected, you need to use the Tag property. Each radio button needs a unique Tag value, which can be an integer. By identifying the Tag value, you can identify the radio button that the user selected.

The date picker makes it easy for the user to choose a date and/or a time. The date picker stores the selected date/time in a special NSDate format that you can access through the dateValue property of the date picker.

Sliders let users choose from a range of valid numeric values. By using check boxes, radio buttons, date pickers, and sliders, a program ensures that users can only choose from a range of valid options.