André's Blog

PHP, Zend Framework, Mac/Cocoa Programming

NumberStepper Tutorial for Dummies(Xcode 3.1.3)

with 4 comments

Introduction

This tutorial will show you how you can combine a NSTextField and a NSStepper to create a control that can both be typed into and stepped up/down.

NumberStepper Tut Step 4

Getting Started

Create a new project and open the MainMenu.xib in IB. Drag a Text Field and a Stepper right next to it. (Both can be found in Library->Cocoa->Views & Cells->Inputs & Values) so that it looks like this:

NumberStepper Tut Step 1

Also drag an Object to the Document Window(Library->Cocoa->Objects & Controller->Object) and change the Class Identity(Identity tab) to WindowController. In the same tab add two outlets: “input” (NSTextField) and “stepper” (NSStepper) and one action “stepperAction”.

NumberStepper Tut Step 2

Go to File->Write Class Files.. to create the WindowController.m/h.

Open the WindowController.h in Xcode and set the superclass to NSWindowController. Then reload the classes files in IB and connect the textfield, the stepper and the window to the Window Controller. Also connect the stepper to the stepperAction of the WindowController.

NumberStepper Tut Step 3

Search for the Number Formatter (Library->Cocoa->Views & Cells->Formatters) and drag it right on the textfield. Set the standard value of the textfield to 0 by clicking on it twice.

Back to the WindowController.m:

#import "WindowController.h"

@implementation WindowController

- (IBAction)stepperAction:(id)sender {
	[input setIntValue: [stepper intValue]];
}

@end

This updates the textfield value whenever you click the stepper. Run it and give it a try.

But what happens when you change the number in the textfield and then click on the stepper? Right. It takes the old value and increases/decreases it.

To avoid that we’ll need to update the stepper value whenever the value in the textfield is changed. This only works via delegates. A look at the reference entry for NSTextfield gives us the name of our delegate: textDidChange. So open up the WindowController.m and add the following things:

- (void) awakeFromNib {
	[input setDelegate:self];
}

- (void)controlTextDidChange:(NSNotification *)aNotification {
	if ([[aNotification name] isEqualToString:@"NSControlTextDidChangeNotification"]) {

		if ( [aNotification object] == input ) {
			[stepper setIntValue:[input intValue]];
		}
	}
}

That should do it. Try it out!

Additional Informations

Just as a side note: The Number Formatter makes sure that only valid numbers can be entered into the textfield. If you enter invalid characters it will prevent you from clicking somewhere else until you made the input valid. (To try that you’d have to add any other controls that you could click on, as there is currently only one on our view)
If you’d want to change the interval or the increment rate you’ll have to change both the settings of the NSStepper and the Number Formatter. The formatter can be accessed by clicking onto the textfield and then on the symbol on the lower right.

I hope this helps someone.

About these ads

Written by andrehoffmann

August 29, 2009 at 10:19 pm

4 Responses

Subscribe to comments with RSS.

  1. [...] the original post: NumberStepper Tutorial for Dummies(Xcode 3.1.3) « André's Blog Share and [...]

  2. Thank you so much! I just spent the last few hours trying to figure out how to do this. You have saved me a lot of time!

    Alicia

    September 23, 2009 at 12:24 am

  3. Thank you for the tutorial! This was perfect! I wish there were more like this covering other such things(like I’ve been wondering how to make a Cancel button that closes a window without having “Close” enabled on the window and linking performClose: to a button). But I have a question regarding to this tutorial: How do I make it so that pressing the up and down keys, while in the textField, increases/decreases the value?

    RootBeerKing

    May 10, 2010 at 12:44 am


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: