Using Badges And Buttons

Application Badges

The iPhone’s Mail application illustrates using a badge. For instance, in Figure 11-20, I have 39 e- mails in my inbox. Using this functionality is easy. Simply access your application’s applicationBadgeNumber property and set it. A user’s iPhone will remember the value between uses of your program. To clear a badge, simply set its value to zero.

Adding an Application Badge

1. Open the previous task in Xcode.
2. Modify the didDismissWithButtonIndex method to match Listing 11-13.
3. Click Build And Go to run the
4. Click the ―Yes‖ button four or five Quit the application, but keep the simulator running. The application’s icon is adorned with an application badge (Figure 11-21).
5. Start the application again; click the ―No‖ button a few times. Quit the application, but keep the simulator running and notice the application’s badge was decremented.

Figure 11-21 The application has an application badge.

  Listing 11-13 The didDismissWithButtonIndex method modified to use an application badge - (void) actionSheet: (UIActionSheet *) actionSheet didDismissWith ButtonIndex: (NSInteger) buttonIndex { if(buttonIndex == [actionSheet cancelButtonIndex]) [UIApplication sharedApplication].applicationIconBadgeNumber = [UIApplication sharedApplication].applicationIconBadgeNumber - 1; else if (buttonIndex == [actionSheet destructiveButtonIndex]) [UIApplication sharedApplication].applicationIconBadgeNumber = [UIApplication sharedApplication].applicationIconBadgeNumber + 1; }

Controls-Part One

Key Skills & Concepts

• Modifying buttons
• Understanding the UISlider and UISwitch
• Understanding UITextField and UITextArea
• Understanding using a UIWebView

  In this chapter you learn how to use several of the iPhone SDK’s available controls. You also learn about the toolbar and the web browser view. Although this chapter is not comprehensive, it will help you get started understanding the many controls you might use when creating an iPhone 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 created programmatically, and not using Interface Builder.  

 Figure 12-1 Apple’s UICatalog sample application

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

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. The iPhone has several different button styles (Figure 12-02). Implementing a button is not hard. In the next few sections you examine the buttons available when programming an iPhone.

UIButton with a Background Image and Image

Although Apple’s stock button, the rounded rectangular button, sometimes looks nice (Figure 12-3) it is usually rather ugly.You are not limited to plain buttons though, and 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-3 The YouTube App uses plain buttons.

Using a Custom Button Background Image and Image

1. Create a new View-based Name it ButtonsBackground.
2. Add outlets for two UIButtons to ButtonsBackgroundViewController (Listings 12-1 and 12-2).
3. Add an action called disableBut and add the code in Listing 12-2 to the
4. Add the 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. Save and
6. Open xib in Interface builder.
7. Drag three buttons vertically aligned onto the view’s Connect the second button to one of the outlets and connect the third button to one of the outlets.
8. Connect the disableBut action to the top button’s Touch Up
9. Add the text Disable to the top

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

1. For the second button, open the inspector to Buttons Ensure the Shows Touch on Highlight is checked (Figure 12-4).
2. 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 Ensure Default State Configuration is selected.
3. Change Background to png and change Image to power.png.
4. Select Highlighted State Configuration and change Background to butbackbluegray.png and Image to power.png.

Figure 12-5 Selecting a button’s state

1. Select Disabled State Configuration and change Background to png and Image to powerdisabled.png.
2. For the third button, ensure Default State Configuration is selected and add the text "Shock" to Title. Select the butbackgray.png for Background.

3. Select Highlighted State Configuration and add the text "Shocking" to Select butbackbluegray.png as the Background. Note: do not make any changes to the Disable setting.
4. Resize the buttons as necessary so they appear
5. Click Build And Go to run the

  Listing 12-1 ButtonsBackgroundViewController.h #import <UIKit/UIKit.h> @interface ButtonsBackgroundViewController : UIViewController { IBOutlet UIButton * clearButton; IBOutlet 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   Notice the results upon tapping the buttons. The buttons change the background image from grey 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 made above. The button with the title text has this functionality built in. Making the button appear disabled was done automatically for you without you specifying images for the disabled state.             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

Figure 12-9 Info Light button, Info Dark button, and Add Contact 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).

UISwitch

A UISwitch, similar to a toggle button, is on or off. Figure 12-19 illustrates a UISwitch’s appearance. A UISwitch has a property and method for changing its state. The Boolean property is on, when 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 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.  

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 a minimum and maximum image that appears 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 only fires the event when a user lifts his or her finger from the indicator. You can set this property programmatically, or through Interface Builder.