Chapter 12
Controls—Part One: Using Buttons, Sliders, Switches, and Text Fields

Key Skills & Concepts

• Modifying buttons

• Understanding the UIToolbar

• Understanding the UISlider and UISwitch

• Understanding UITextField and UITextArea

• Understanding using a UIWebView

In this chapter you learn how to use several of the iOS SDK’s available controls. You also learn about the toolbar and the web view. Although this chapter is not comprehensive, it will help you get started understanding the many controls you might use when creating an iOS application. Several of the screenshots come directly from Apple’s UICatalog example application (Figure 12-1). You can download this application at Apple’s web site. But note, the controls it illustrates are largely created programmatically, and not using Interface Builder.

Figure 12-1 Apple’s UICatalog sample application

Buttons

The most rudimentary control is arguably the button. What can you say about buttons? You click them, or on an iPhone, you tap them, and something happens. iOS has several different button styles (Figure 12-2). Implementing a button is not hard. In the next few sections you examine the buttons available when programming for an iOS device.

UIButton with a Background Image and Image

Although Apple’s stock button, the rounded rectangular button, is sometimes appropriate (Figure 12-3), it is usually rather ugly.

You are not limited to plain buttons, though; you can make your buttons appear nicer. For instance, you can add a background image or an image. Creating custom buttons by adding an image or background image is not hard, but the artistic effort making the images appear correctly is time consuming. However, the results are usually worth the extra effort.

Figure 12-2 Apple’s UICatalog’s buttons screen

Figure 12-3 The YouTube App uses plain buttons.

Try This
Using a Custom Button Background Image and Image

1. Create a new View-based Application. Name it ButtonsBackground.

2. Add outlets for two UIButtons to ButtonsBackgroundViewController (Listings 12-1 and 12-2).

Listing 12-1 ButtonsBackgroundViewController.h

#import <UIKit/UIKit.h>
@interface ButtonsBackgroundViewController : UIViewController {
UIButton * clearButton;
UIButton * smallButton;
}
@property (nonatomic, retain) IBOutlet UIButton * clearButton;
@property (nonatomic, retain) IBOutlet UIButton * smallButton;
- (IBAction) disableBut: (id) sender;
 @end

Listing 12-2 ButtonsBackgroundViewController.m

#import "ButtonsBackgroundViewController.h"
@implementation ButtonsBackgroundViewController
@synthesize clearButton;
@synthesize smallButton;
- (IBAction) disableBut: (id) sender {
  if(clearButton.enabled == YES) {
  clearButton.enabled = NO;
  smallButton.enabled = NO;
  [((UIButton *) sender) setTitle:@"Enable"
forState: UIControlStateNormal];
  }
  else {
  clearButton.enabled = YES;
  smallButton.enabled = YES;
  [((UIButton *) sender) setTitle:@"Disable"
forState: UIControlStateNormal];
  }
}
- (void)dealloc { [clearButton release];
  [smallButton release];
  [super dealloc];
}
@end

3. Add an action called disableBut and add the code in Listing 12-2 to the method.

4. Add butbackgray.png, butbackbluegray.png, butbackgraydisabled.png, power.png, and powerdisable.png to the Resources folder in Groups & Files. You will find these images in this book’s resources folder.

5. Open ButtonsBackgroundViewController.xib.

6. Drag three buttons vertically aligned onto the view’s canvas. Connect the second button to one of the outlets and connect the third button to one of the outlets.

7. Connect the disableBut action to the top button’s Touch Up Inside.

8. Add the text Disable to the top button.

9. For the second button, open the inspector to Buttons Attributes. Ensure Shows Touch On Highlight is checked (Figure 12-4).

10. Notice the drop-down (Figure 12-5). Here you select the button’s state, and the related field’s values will only apply to that state. Ensure Default State Configuration is selected.

11. Change Background to butbackgray.png and change Image to power.png.

Figure 12-4 Ensure Shows Touch on Highlight is checked.

Figure 12-5 Selecting a button’s state

12. Select Highlighted State Configuration and change Background to butbackbluegray.png. Once an image is set for the default state, it is the default image for the other states as well. Since the image isn’t changing for the highlighted state, we can leave it blank.

13. Select Disabled State Configuration and change Background to butbackgraydisabled.png and Image to powerdisabled.png.

14. For the third button, ensure Default State Configuration is selected and add the text “Shock” to Title. Select the butbackgray.png for Background.

15. Select Highlighted State Configuration and add the text “Shocking” to Title. Select butbackbluegray.png as the Background. Note: do not make any changes to the Disable setting.

16. Resize the buttons as necessary so that they appear nice.

17. Click Run to build and run the application.

Notice the results upon tapping the buttons. The buttons change the background image from gray to bluish-gray (Figure 12-6). The bottom button also changes its title. Click Disable, and the buttons are grayed out (Figure 12-7). The button with the image changes its background image and image to the choices you’ve made. The button with the title text has this functionality built in. Making the button appear disabled was done automatically for you without your specifying images for the disabled state. iOS will also manage the disabled state for buttons with images, so it isn’t actually necessary to specify a different background image unless you want a specific look and feel for a disabled image button.

Figure 12-6 The buttons’ background image changes.

Figure 12-7 The buttons are grayed-out when disabled.

TIP
Another way to create a custom button is by setting a button’s type to custom. That technique is not shown here. It is not hard, though. First, add an image to a button. Second, change the button’s type to custom and only the image is visible. Note that you can use different images for different button states, exactly as you did in the previous example application.

Button Types

There are buttons types other than Round Rect and custom that you might use. Figure 12-8 illustrates creating a Detail Disclosure button. To create a Detail Disclosure button, select a Round Rect Button from the library in Interface Builder and then change its type to Detail Disclosure button.

Figure 12-8 Detail Disclosure button

You create the Info Light and Info Dark buttons, like the Detail Disclosure button, by selecting a Round Rect button and changing its type to Info Light or Info Dark (Figure 12-9). You create a Contact button the same way you created the other button styles, by selecting a Round Rect button and changing its type (Figure 12-9).

UIToolBar

Toolbars are for adding buttons of type UIBarButtonItem in a bar, usually along a view’s bottom. With a little ingenuity, you can place just about anything on a toolbar, although some items you are not really adding to a toolbar, but rather you are placing over the toolbar (Figure 12-10). You can add the following controls to a toolbar: Bar Button Item, Fixed Space Bar Button Item, Flexible Space, Bar Button Item, Text Field, Switch, Slider, and Button. Placing other items above a toolbar require using a fixed or flexible spacer (Figure 12-11). Place a spacer on the toolbar at the location on the toolbar you wish to overlay with a control, and then place the control over the spacer.

Figure 12-9 Info Light button, Info Dark button, and Add Contact button

Figure 12-10 You can go crazy with a toolbar.

Figure 12-11 Using spacers to place controls, such as labels on a toolbar

NOTE
For the sanity of your users, Apple may not approve your application if you get too crazy with a toolbar. When in doubt, refer to Apple’s user interface guidelines. If you use controls in a predictable way, your users will know how to use your application without instructions.

Try This
Creating a UIToolbar

1. Create a new View-based Application. Name the application ToolBarProject.

2. Open ToolBarProjectViewController.xib in Interface Builder.

3. Drag a Toolbar from the library window to the view’s canvas. Notice it placed one button on the toolbar for you (Figure 12-12).

4. Drag a Fixed Space Bar Button Item from the library window to the view’s canvas. Enlarge the spacer’s size. Add another Bar Button Item to the spacer’s right (Figure 12-13).

5. Select the toolbar and open its Inspector window. Change the toolbar’s style to Black Translucent (Figure 12-14).

6. Save and click Run. The application displays the toolbar (Figure 12-15).

Figure 12-12 A toolbar on a view’s canvas

Figure 12-13 Adding a spacer to a toolbar

Figure 12-14 Making the toolbar translucent

Figure 12-15 The sample application displaying a toolbar

UISwitch

A UISwitch, similar to a toggle button, is on or off. Figure 12-16 illustrates a UISwitch’s appearance. A UISwitch has a property and method for changing its state. The switch is on when the Boolean property is YES. The switch is off when NO. The following is the declaration for the on property.

@property(nonatomic, getter=isOn) BOOL on

Notice that the getter is entitled isOn, you can use this getter to obtain the on property’s value or the property itself. For instance, the following two statements are equivalent:

if( ((UISwitch *) sender).on == YES)
if( [((UISwitch *) sender) isOn] == YES)

You can change the switch’s value programmatically using the setOn method. This method’s signature follows.

-(void) setOn: (BOOL) on animated: (BOOL) animated

UISlider

Sliders are a horizontal bar with a small round indicator that a user can move to the right or left to change the slider’s value. Figure 12-16 contains a slider example.

Figure 12-16 A view with a switch and a slider

Appearance

The UISlider class has several properties and methods you might use to modify a slider’s appearance. You can modify the indicator using the setThumbImage method.

- (void) setThumbImage:(UIImage *)image forState: (UIControlState) state

This method allows you to provide the slider an image in place of the round indicator. Interface Builder does not provide a means to set this value, so you must do so programmatically when first loading the view containing the slider.

You can also specify minimum and maximum images that appear directly to the slider’s left and right. Set a slider’s image appearing to the right using the maximumValueImage property.

@property(nonatomic, retain) UIImage *maximumValueImage

Set a slider’s image appearing to the left using the minimumValueImage property.

@property(nonatomic, retain) UIImage *minimumValueImage

The next Try This example sets both properties using the Inspector pane in Interface Builder. There are more modifications you might make to a UISlider; refer to the UISlider Class Reference for a complete listing.

Values

By default, a UISlider’s values begin with minimum of 0, a maximum of 1.00, and a .50 initial value. The slider’s values are floats, and you can set the value programmatically using the setValue method or the value property.

- (void) setValue:(float) value animated:(BOOL) animated

The minimum, maximum, and initial values are all properties that you can set programmatically or through Interface Builder.

Continuous Property

A slider changes its values continuously as a user adjusts the indicator. For instance, as a user moves the indicator from left to right, the slider is continuously firing value-changed events. You can change this behavior by changing the continuous property to NO. If the value is NO, the slider fires the event only when a user lifts his or her finger from the indicator. You can set this property programmatically, or through Interface Builder.

Try This
Using a Switch and a Slider

1. Create a new View-based Application. Name the application SwitchSlider.

2. Drag the edit_add.png and edit_remove.png images from the resources folder to the Resources folder in Groups & Files.

3. Open SwitchSliderViewController.xib in Interface Builder.

4. Add a Slider and a Switch from the library. Resize the slider to be larger and set the edit_ remove .png as the minimum image and edit_add.png as the maximum image (Figure 12-16).

5. Notice that the Slider’s minimum value is zero and maximum is one. Leave the values unchanged.

6. Save your changes.

7. Open SwitchSliderViewController and implement a method named handleSwitch and a method named handleSlider (Listings 12-3 and 12-4). Also implement a property for the UISwitch named mySwitch.

Listing 12-3 SwitchSliderViewController.h

#import <UIKit/UIKit.h>
@interface SwitchSliderViewController : UIViewController {
  UISwitch * mySwitch;
}
@property(nonatomic, retain) IBOutlet UISwitch * mySwitch;
- (IBAction) handleSwitch: (id) sender;
- (IBAction) handleSlider: (id) sender;
@end

Listing 12-4 SwitchSliderViewController.m

#import "SwitchSliderViewController.h"
@implementation SwitchSliderViewController
@synthesize mySwitch;
- (IBAction) handleSwitch: (id) sender {
  if( [((UISwitch *) sender) isOn] == YES) {
     NSLog(@"It's on");
  } else {
    NSLog(@"It's off");
  }
}
- (IBAction) handleSlider: (id) sender {
  NSLog(@"value: %f", ((UISlider *)sender).value);
  [mySwitch setOn: ([((UISlider *) sender) value] == ((UISlider *)
sender).maximumValue)];
}
- (void)dealloc {
  [mySwitch release];
  [super dealloc];
}
@end

8. Save and open SwitchSliderViewController.xib.

9. Connect the mySwitch outlet to the switch on the canvas.

10. Connect the handleSlider action to the slider’s Value Changed event.

11. Connect the handleSwitch action to the switch’s Value Changed event.

12. Save and exit Interface Builder.

13. Save and click Run (Figure 12-17). Click the switch and it logs to the Debugger Console. Change the slider’s value to the far right. The switch’s value changes to ON (Figure 12-18).

Figure 12-17 The application running in the iPhone Simulator

Figure 12-18 Moving the slider to the maximum value changes the switch’s value.

UITextField

iOS uses the UITextField class to render text fields. A text field is associated with a keyboard that appears when a user taps in the text field. Keyboard styles include Number Pad, Phone Pad, URL, and several others. You can set the keyboard style programmatically or using Interface Builder (Figure 12-19).

Figure 12-20 illustrates several other text field properties you might set. You can specify how text should be capitalized. Valid choices are None, Words, Sentences, and All Characters. You can also specify if the text field should attempt to correct spelling errors by setting the correction property to YES. If you want the text field to behave like a password, then check the Secure check box in Interface Builder. Other properties you might want to change are the text field’s border, background, font, and return key for the keyboard. Figure 12-20 shows the valid choices for a keyboard’s return key. For a complete listing of properties and methods available to you, refer to the UITextField Class Reference.

Figure 12-19 Setting a text field’s keyboard type

Figure 12-20 Valid choices for a keyboard’s return key

Try This
Using UITextField (with a Number Pad)

1. Create a new View-based Application named TextField.

2. Open TextViewController.xib in Interface Builder. Drag two UITextField controls from the library to the view’s canvas and resize the text fields.

3. Select the second text field and in its inspector, change its Keyboard to Number Pad.

4. Select the first text field and change its Return Key to Done.

5. Save your changes.

6. Open TextFieldViewController and implement the textFieldDone action (Listings 12-5 and 12-6). Also, add an IBOutlet for the second text field and implement the numberFieldDone method.

Listing 12-5 TextFieldViewController.h

#import <UIKit/UIKit.h>
@interface TextFieldViewController : UIViewController {
 UITextField * numberField;
}
@property(nonatomic, retain) IBOutlet UITextField * numberField;
- (IBAction) textFieldDone: (id) sender;
- (IBAction) numberFieldDone: (id) sender;
@end

Listing 12-6 TextFieldViewController.m

#import "TextFieldViewController.h"
@implementation TextFieldViewController
@synthesize numberField;
- (IBAction) textFieldDone: (id) sender {
    [sender resignFirstResponder];
}
- (IBAction) numberFieldDone: (id) sender {
    [numberField resignFirstResponder];
}
- (void)dealloc {
   [numberField release];
   [super dealloc];
}
@end

Figure 12-21 The number pad has no Done key.

7. Save and then open TextFieldViewController.xib. Connect the textFieldDone action to the first text field’s Did End on Exit event.

8. Save and click Run. Notice that when finished editing the first text field, upon clicking Done, the text pad disappears. The number pad, though, has no Done key (Figure 12-21).

9. Reopen TextFieldViewController.xib and drag a button onto the view’s canvas. Resize the button to cover the entire canvas.

10. In the Document window, expand the View and ensure the newly added button is behind the two text fields (Figure 12-22).

11. In the Inspector’s Button Attributes pane, change the button’s Type to custom and uncheck any checked drawing check boxes (Figure 12-23).

12. Connect the numberField outlet to the second text field. Connect the numberFieldDone action to the Touch Up Inside event for the button added to the canvas (Figure 12-24).

13. Save and then click Run. Click the second text field and the number pad appears. Tap anywhere outside the two text fields to close the number pad. Tapping in the first text field causes the number pad to switch to the keyboard (Figure 12-25).

Note that in textFieldDone and numberFieldDone we are calling the resignFirstResponder method. This is an essential step that actually dismisses the keyboard.

Figure 12-22 Button is under two textfields.

Figure 12-23 Changing button’s type to Custom

Figure 12-24 Connecting the numberFieldDone action to the button

Figure 12-25 The number pad appears and disappears from the application.

UITextView

Use a UITextView to capture multiple lines of text in a scrollable, multiline text area. It’s generally used for entering paragraphs of text rather than a single line. There are several properties you can set to customize the control’s appearance, including the font, textColor, editable, and textAlignment properties. You can also check if it has text using the hasText method. Figure 12-26 illustrates several properties you might want to set for a UITextView in Interface Builder. For more information on the UITextView, refer to the UITextView Class Reference.

Figure 12-26 UITextView properties you might want to set in Interface Builder

UISegmentedControl

A segmented control groups together two or more segments, where each segment acts as an independent button. The next task illustrates a segmented control.

Try This
Using a UISegmentedControl

1. Create a new View-based Application named Segment.

2. Add the images colorize.png and wizard.png from the resources folder to the Resources folder in Groups & Files.

3. Open SegmentViewController.xib and add a Segmented Control to the view’s canvas.

4. Change the control so that it has three segments. Change the Segment 0’s name to Kids, the first segment’s image to colorize.png, and the second segment’s image to wizard.png (Figure 12-27). Change the control’s style to Bordered.

Figure 12-27 Modifying the segmented control in Interface builder

5. Save your changes.

6. Open SegmentViewController and add an IBAction called handleSegment to SegmentViewController (Listings 12-7 and 12-8).

Listing 12-7 SegmentViewController.h

#import <UIKit/UIKit.h>
@interface SegmentViewController : UIViewController {
}
- (IBAction) handleSegment: (id) sender;
@end

Listing 12-8 SegmentViewController.m

#import "SegmentViewController.h"
@implementation SegmentViewController
- (IBAction) handleSegment: (id) sender {
  UISegmentedControl * myseg = (UISegmentedControl *) sender;
  if(myseg.selectedSegmentIndex == 0) {
    NSLog(@"selected zero index...");
  }
  else if(myseg.selectedSegmentIndex == 1) {
    NSLog(@"selected one index...");
  }
  else {
    NSLog(@"selected two index...");
  }
}
- (void)dealloc {
  [super dealloc];
}
@end

7. Save and then switch to SegmentViewController.xib.

8. Connect the segment’s Value Changed event to the File’s Owner handleSegment method.

9. Save your changes and click Run. Figure 12-28 illustrates the application’s appearance, and Listing 12-9 contains the Debugger Console’s logging.

Figure 12-28 The application running in iPhone Simulator

Listing 12-9 The Debugger Console’s logging for application

2010-09-09 10:47:03.535 Segment[19281:207] selected one index...
2010-09-09 10:47:19.737 Segment[19281:207] selected two index...

The Web View

This chapter wraps up its discussion of controls by discussing the web view. The UIWebView is the class you use to add a web browser to your application. It’s based upon the same code foundation as Safari, and so you can use CSS and JavaScript. Using the web view can be easy or more difficult, depending upon how much you want your application to interact with the browser. In this chapter we keep it simple.

UIWebView

The UIWebView is responsible for the web view’s display. It is an easy means of embedding web content in your application. The loadRequest: method is how you load web content. You can check on the control’s progress loading a resource using the loading property. You might also want to move forward or backward through the user’s browsing history—you do this using the goBack and goForward methods. Of course, you should check first to see if the control can move backward or forward by examining the canGoBack or canGoForward properties.

If you own an iPhone, then you’ve probably noticed that you can tap telephone numbers in the Safari browser and it automatically dials the number. The UIWebView implements this behavior unless you specifically tell it not to by setting the detectsPhoneNumbers property to NO. Another method that is subtle, yet powerful is the stringByEvaluatingJavaScriptFromString: method.

- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script

Why is this method so powerful? The stringByEvaluatingJavaScriptFromString: method lets you evaluate any JavaScript string. You can access a page’s Document Object Model (DOM) through JavaScript, and thereby manipulate an HTML page’s content.

The HTML DOM is a W3C standard for manipulating HTML documents. HTML DOM is outside this book’s scope, but for more information refer to the W3C School’s HTML DOM Tutorial, available online at www.w3schools.com. If you want to do sophisticated programming using the web browser, you would be well served by learning the HTML DOM. The following Try This example, illustrates using the stringByEvaluatingJavaScriptFromString: method to print a page’s HTML content.

You navigate to a specific page by using the UIWebView’s loadRequest method.

- (void) loadRequest: (NSURLRequest *) request

The loadRequest method takes a URL request as a parameter and navigates to the resource represented by the underlying URL. A NSURL class wraps the NSURLRequest’s underlying URL. Both NSURLRequest and NSURL are part of the Foundation framework. You use both in the next Try This example application.

UIWebViewDelegate

UIWebViews can also have a delegate. You create a delegate for a UIWebView by creating a class that adopts the UIWebViewDelegate protocol and then assigning the UIWebView’s delegate property to the custom class. The UIWebViewDelegate handles key events when loading a web page. When an event occurs, the web view calls the appropriate delegate method. For instance, when a web view is about to load a page, it calls the webView:should StartLoadWithRequest:navigationType: method.

- (BOOL)webView:(UIWebView *)webView
      shouldStartLoadWithRequest:
      (NSURLRequest *) request
      navigationType:(UIWebViewNavigationType)navigationType

When a web view starts loading a page, it calls the webViewDidStartLoad: method.

- (void)webViewDidStartLoad:(UIWebView *)webView

When a web view finishes loading a page, it calls the webViewDidFinishLoad: method, unless an error occurs, when instead it calls the webView:didFailLoadWithError: method.

- (void)webViewDidFinishLoad:(UIWebView *)webView
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)
error

Try This
Creating a Simple Web Browser

1. Create a new View-based Application named MyWeb.

2. Create a new class called MyWebViewDelegate and have it adopt the UIWebViewDelegate protocol (Listings 12-10 and 12-11).

Listing 12-10 MyWebViewDelegate.h

#import <Foundation/Foundation.h>
@interface MyWebViewDelegate : NSObject <UIWebViewDelegate> {
}
@end

Listing 12-11 MyWebViewDelegate.m

#import "MyWebViewDelegate.h"
@implementation MyWebViewDelegate
- (void)webViewDidFinishLoad: (UIWebView *) webView {
  NSLog(@"%@", [webView stringByEvaluatingJavaScriptFromString:
       @"document.documentElement.textContent"]);
}
@end

3. Open MyWebViewController.xib in Interface Builder.

4. Add a Web View from the Library to the canvas. Also add a text field and a button (Figure 12-29).

Figure 12-29 A simple web browser in Interface Builder

5. Change the text field’s keyboard type to URL.

6. Save your changes.

7. Open MyWebViewController and add IBOutlets for the text field and the web view (Listings 12-12 and 12-13). Add an IBAction called changeLocation. Add the MyWebViewDelegate as a property and implement the viewDidLoad method.

Listing 12-12 MyWebViewController.h

#import <UIKit/UIKit.h>
@class MyWebViewDelegate;
@interface MyWebViewController : UIViewController {
  UITextField * myTextField;
  UIWebView * myWebView;
  MyWebViewDelegate * myWebViewDelegate;
}
@property(nonatomic, retain) IBOutlet UIWebView * myWebView;
@property(nonatomic, retain) IBOutlet UITextField * myTextField;
@property(nonatomic, retain) MyWebViewDelegate * myWebViewDelegate;
- (IBAction) changeLocation: (id) sender;
@end

Listing 12-13 MyWebViewController.m

#import "MyWebViewController.h"
#import "MyWebViewDelegate.h"
@implementation MyWebViewController
@synthesize myWebView;
@synthesize myTextField;
@synthesize myWebViewDelegate;
- (void) viewDidLoad {
  myWebViewDelegate = [[MyWebViewDelegate alloc] init];
   myWebView.delegate = myWebViewDelegate;
}
- (void)dealloc {
  myWebView.delegate = nil;
  [myWebViewDelegate release];
  [myTextField release];
  [myWebView release];
  [super dealloc];
}
- (IBAction) changeLocation: (id) sender {
  [myTextField resignFirstResponder];
  NSURL * url = [NSURL URLWithString: myTextField.text];
  NSURLRequest * request = [NSURLRequest requestWithURL:url];
  [myWebView loadRequest:request];
}
@end

8. Save your changes and switch back to MyWebViewController.xib.

9. Connect the button’s Touch Up Inside action to the changeLocation action. Connect the text field and web view to their respective outlets.

10. Save your changes and click Run.

11. Type http://www.apple.com in the text field and tap GO and the web page loads in the web view (Figure 12-30). The web page’s HTML is also logged to the Debugger Console (not provided as a listing due to its length).

Figure 12-30 A simple web browser displaying Apple’s home page

Summary

This chapter discussed some of the controls available to you in the iOS SDK. First you reviewed buttons. After buttons, you learned about the toolbar, followed by switches, sliders, and text fields. Note the subtleties of using the keyboard; you must explicitly release the keyboard using the resignFirstResponder method. Moreover, when using a number pad, if you want to release the keyboard you need to resort to an “invisible button” trick. You then learned about using the text view and segmented control and then finished up with the UIWebView.