Add a Number Formatter

If you move the slider, the text field displays all the digits of the corresponding float value—for example, 3.141592653589793. Typically, all these digits are unnecessary—3.14 would probably suffice. You can use a formatter object to display a rounded representation of the number. Using a formatter has two additional benefits:

• A formatter can impose maximum and minimum values on the number entered.

• A formatter presents the number appropriately for the user’s locale. For example, if the locale is French, users see 3,14 instead of 3.14.

To add a number formatter

1. In the project navigator, select the MainMenu.xib file to display the TrackMix window.

2. Drag a number formatter from the Object Library into the text field.

   

3. To configure the formatter, click the disclosure button at the bottom left of the canvas to show the outline view of the nib file.

   

4. If necessary, select the number formatter (use the disclosure triangles to drill down to it under the text field).

5. Show the Attributes inspector to configure the number formatter.

   

   Normally, you should choose one of the standard formats—short, medium, or long—because these standard formats take the user’s preferences into account. In this case, you want a custom formatter that shows just two decimal places.

6. Use the defaults, except for the following settings:

   • Behavior: OS X 10.4+ Custom

   • Minimum: 0

   • Maximum: 11

   • Allows Floats: Yes

   • Localize: Yes

   • Fraction Digits: Minimum 0, Maximum 2

7. Click the Run button.

   You should find that that the number displayed in the text field is correctly formatted and that the text field does not accept numbers outside of the given range.

Change the Window’s Resize Behavior

Currently, if you resize the window, all the UI elements stay centered, the text field and button remain the same size, and the slider resizes proportionately to the window. Unfortunately, you can resize the window so small that you can’t use the slider. This behavior leads to poor layout, as illustrated in this image.

You can correct this problem by changing the window’s resize behavior. One option is to prevent the window from being resized in order to keep the sliders a constant size. Or you can just set the minimum size of the window.

To change the window’s resize behavior

1. Select the MainMenu.xib file to display the TrackMix window.

2. Select the window.

3. In the utility area, show the Size inspector by clicking the icon that looks like this:

4. Select the Minimum Size checkbox in Constraints.

   

Test the App Using the Cocoa Simulator

To save time, you can test the changes you’ve made directly without having to build and run the app. Using Cocoa Simulator, you can test whether the UI elements behave as you expect. Note, though, that only the UI elements are recreated. Cocoa Simulator doesn’t create an app delegate for you or simulate any of your app logic. So although you can test the resizing behavior and click (for example) the button, the slider and text field do not set the volume to zero.

To test the user interface using Cocoa Simulator

1. Choose Editor > Simulate Document.

   Xcode launches Cocoa Simulator. This loads the nib file and allows you to interact with it directly.

2. To quit the simulator, choose Cocoa Simulator > Quit Cocoa Simulator.

If the interface didn’t behave as you expected, review the Autosizing settings you made and try again. Otherwise, test the actual app.

To test the app

• Click the Run button.

  Make sure that the user interface resizing behavior is the same as it was in Cocoa Simulator.

Recap

You added a number formatter to the text field, fixed a problem when resizing the window, and learned how to use Cocoa Simulator to test the user interface without having to compile any code.