1. EEC-492/693/793 iPhone Application Development
Lecture 4
Wenbing Zhao & Nigamanth Sridhar
9/22/2018
EEC492/693/793 - iPhone Application Development

2. Outline Objective-C: delegates and protocols Control Fun App (part I)
Revisit Button_Fun App
Getting documentation from Xcode
Delegates and protocols
Control Fun App (part I)
9/22/2018
9/22/2018
EEC492/693/793 - iPhone Application Development
EEC492/693/793 - iPhone Application Development 2

3. Revisit Button_Fun App
In Groups & Files pane, there are two additional files
Button_FunAppDelegate.h
Button_FunAppDelegate.m
#import <UIKit/UIKit.h>
@class Button_FunViewController;
@interface Button_FunAppDelegate : NSObject <UIApplicationDelegate> {
UIWindow *window;
Button_FunViewController *viewController; }
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet Button_FunViewController *viewController;
@end
9/22/2018
9/22/2018
EEC492/693/793 - iPhone Application Development
EEC492/693/793 - iPhone Application Development 3

4. What’s New Here?
@interface Button_FunAppDelegate : NSObject <UIApplicationDelegate> {
We know Button_FunAppDelegate inherits from NSObject, but what about <UIApplicationDelegate>?
Answer: it means that Button_FunAppDelegate conforms to a protocol called UIApplicationDelegate
9/22/2018
9/22/2018
EEC492/693/793 - iPhone Application Development
EEC492/693/793 - iPhone Application Development 4

5. Getting Documentation from Xcode
Want to know how UIApplicationDelegate is defined?
You can get documentation from Xcode:
Hold down the option key
Move your cursor over the word UIApplicationDelegate, the cursor should turn into crosshairs, then double click
Documentation pane will show up. There, click the book icon in upper right, you can see the full documentation of the protocol
Click the “.h” icon, you will see the UIApplication.h, with the protocol declaration highlighted
9/22/2018
9/22/2018
EEC492/693/793 - iPhone Application Development
EEC492/693/793 - iPhone Application Development 5

6. Delegates Cocoa Touch make extensive use of delegates
Delegates are classes that take responsibility for doing certain things on behalf of another object
How does the object communicates with the delegates?
Via Protocols
9/22/2018
9/22/2018
EEC492/693/793 - iPhone Application Development
EEC492/693/793 - iPhone Application Development 6

7. Protocols A protocol is a set of rules that govern communication
In Objective-C, a protocol is a set of methods
Classes conforming to the (formal) protocol must implement all mandatory methods defined in the protocol
Starting Objective-C 2.0, a protocol can specify optional methods as well. A delegate class conforming to a protocol can choose to implement any optional method or none
9/22/2018
9/22/2018
EEC492/693/793 - iPhone Application Development
EEC492/693/793 - iPhone Application Development 7

8. UIApplicationDelegate Protocol
@protocol UIApplicationDelegate<NSObject>
@optional
- (void)applicationDidFinishLaunching:(UIApplication *)application; …
- (void)applicationDidBecomeActive:(UIApplication *)application;
- (void)applicationWillResignActive:(UIApplication *)application;
@end
As we can see, all methods defined in this protocol are optional
That is why only one method is implemented in Button_FunApplicationDelegate.m
(void)applicationDidFinishLaunching:(UIApplication *)application {
[window addSubview:viewController.view];
[window makeKeyAndVisible]; }
9/22/2018
9/22/2018
EEC492/693/793 - iPhone Application Development
EEC492/693/793 - iPhone Application Development 8

9. So, What Does Our Delegate Do?
(void)applicationDidFinishLaunching:(UIApplication *)application {
[window addSubview:viewController.view];
[window makeKeyAndVisible]; }
The method implemented: applicationDidFinishLaunching:
It adds our view controller’s view as a subview to the application’s main window and makes the window visible
This ensures that the view we have designed gets shown to the user
This method fires as soon as the app has finished all the setup work and is ready to start interacting with the user
9/22/2018
9/22/2018
EEC492/693/793 - iPhone Application Development
EEC492/693/793 - iPhone Application Development 9

10. More User Interface Fun
We are going to build an app with many different UI controls
Image view
Slider
Two different text fields
Segmented control
A couple of switches
A better iPhone button
Action sheets and alerts
We’re going to break our application into pieces, implementing one piece
at a time and bouncing back and forth between Xcode, Interface Builder, and
the iPhone simulator and testing each piece before we move on to the next.
9/22/2018
EEC492/693/793 - iPhone Application Development

11. Overview of the New App: A Screen Full of Controls
When right side of the
Segmented control is tapped
Use an action sheet to
Solicit response from user
Alerts are used to notify user
9/22/2018
EEC492/693/793 - iPhone Application Development

12. Active, Static, and Passive Controls
Active controls: when tapped, will trigger action methods
Example: button in our app
Static controls: the user could not do anything with it (e.g., nothing happens when you tap it)
Example: label in our app
Passive controls: don’t trigger action methods, but the user can interact with them and change their values
Example: text field
Many Coca Touch UI controls can be used in all three ways
9/22/2018
EEC492/693/793 - iPhone Application Development

13. Creating the App: Step 1 – Image View
Create a new project called Control Fun (view-based application)
Create or find an image file with the .png extension
Up to 100 pixels tall, and up to 300 pixels wide
Import into Xcode
Add the image to the Resources folder by dragging the image from the Finder to the Resources folder
9/22/2018
EEC492/693/793 - iPhone Application Development

14. Implementing the Image View and Text Fields
Determining outlets
Image view: a static image => no outlet needed
Two labels: they are there to display text but won’t be changed at runtime => no outlet needed
Two text fields: need to get to the data they contain => need an outlet for each
nameField and numberField
9/22/2018
EEC492/693/793 - iPhone Application Development

15. Implementing the Image View and Text Fields
In Control_FunViewController.h
#import <UIKit/UIKit.h>
@interface Control_FunViewController : UIViewController {
UITextField *nameField;
UITextField *numberField; }
@property (nonatomic, retain) IBOutlet UITextField *nameField;
@property (nonatomic, retain) IBOutlet UITextField *numberField;
@end
In Control_FunViewController.m:
#import "Control_FunViewController.h"
@implementation Control_FunViewController
@synthesize nameField;
@synthesize numberField;
...
- (void)dealloc {
[nameField release];
[numberField release];
[super dealloc]; }
9/22/2018
EEC492/693/793 - iPhone Application Development

16. Implementing the Image View and Text Fields
Building the Interface
Double-click Control_FunViewController.xib to launch Interface Builder
Adding the image view: drag an image view onto the View window
Bring up the inspector, and select the image file you added a while ago in the topmost item
Resize and align the image view
Layout => Size to Fit: auto resize
Layout => Align Horizontal Center in Container: center it
What about actions? We will work on that later
9/22/2018
EEC492/693/793 - iPhone Application Development

17. EEC492/693/793 - iPhone Application Development
Image View Inspector
The Mode attribute:
Alignment of image inside the view
Whether it will be scaled to fit (should avoid to reduce processing overhead)
The Alpha slider
Defines how transparent your image is
Should avoid setting < 1.0 value to reduce processing overhead unless necessary
The Tag attribute
Developer supplied numeric value, as a way of identifying objects on your interface
Tags never change
9/22/2018
EEC492/693/793 - iPhone Application Development

18. EEC492/693/793 - iPhone Application Development
Image View Inspector
The drawing checkboxes:
Select Opaque label: tells iOS that nothing behind your view should be drawn
Hidden: if checked, the user can’t see this control
Clear Context Before Drawing: if checked, iPhone will draw the entire area covered by the control in transparent black before it actually draws the control (rarely needed)
Clip Subviews: if checked, only the portions of subviews that lie within the bounds of the parent will be drawn
The Interaction checkboxes:
User Interaction Enabled: whether the user can do anything with this object (labels and image views default to unchecked)
Multiple Touch: whether this control is capable of receiving multitouch events
9/22/2018
EEC492/693/793 - iPhone Application Development

19. Implementing the Image View and Text Fields
Adding the text fields
Drag two text fields to the view
Learn to follow guideline
Adding labels for the text fields
Drag labels to the left of each text field, use guidelines
Double-click 1st label, and change it to Name:
Double-click 2nd label, and change it to Number:
Alignment: click Name: label, then shift-click Number: label, then Layout=>Alignment=>Align Right Edges
9/22/2018
EEC492/693/793 - iPhone Application Development

20. The Text Field Inspector
Text (1st field): content in this field will show up in the text field when your app launches
Placeholder: content here will be displayed in gray inside the text field when the field has no value=> tells user what they should provide
For our app: “Type in a name” in the placeholder for Name field
“Type in a number” in the placement holder for Number field
Background, Disabled: rarely used
Alignment: choose left-aligned (default value)
Color of the text field: leave it as default color (black)
Border: the way the text field’s edge will be drawn: use default
Clear When Editing Begins checkbox: uncheck this checkbox
Adjust to Fit checkbox: shrink the size of text if text field is reduced in size, if checked
Text fields are one of the most complex controls, therefore, the settings in the inspector are complicated as well
9/22/2018
EEC492/693/793 - iPhone Application Development

21. The Text Field Inspector
Text Input Traits section: Defines how the keyboard will look and behave when this text field is being used
Change Capitalize drop-down to Words
Keyboard type:
Choose default for Name field
Choose Number Pad for Number field
Change Return Key pop-up to Done for Name field
Auto-enable Return Key checkbox: if checked, return key is disabled until at least one character is typed into the text field.
Leave this unchecked for our app
Secure checkbox: specifies whether the characters typed are displayed in the text field
Leave it uncheck for our app
Check it if the field is for password
The Return Key is the key on the lower right of the keyboard,
and its label changes based on what you’re doing. If you are entering text into Safari’s
search field, for example, then it says Google. In an application like this, where there text
fields share the screen with other controls, Done is the right choice.
9/22/2018
EEC492/693/793 - iPhone Application Development

22. Implementing the Image View and Text Fields
Connecting outlets
Control-drag from File’s Owner to each of the text fields
Connect them to their corresponding outlets
Save the nib file
Build and run
We got a small problem: how to get rid of the keyboard?
9/22/2018
EEC492/693/793 - iPhone Application Development

23. Making Keyboard Go Away When Done is Tapped
When the user taps the Done button, a Did End On Exit event will be generated
We need to tell the text field to give up control so that the keyboard will go away
We can do this by adding an action method to our controller class
In Control_FunViewController.h, add:
- (IBAction)textFieldDoneEditing:(id)sender;
In Control_FunViewController.m, add:
- (IBAction)textFieldDoneEditing:(id)sender{
[sender resignFirstResponder]; }
We tell any control that triggers this action to give up first responder status
9/22/2018
EEC492/693/793 - iPhone Application Development

24. Making Keyboard Go Away When Done is Tapped
Save the changes, then go back to Interface Builder
Single-click the Name text field, then bring up the connections inspector (⌘2)
Choose Did End On Exit
Drag from the circle next to Did End On Exit to the File’s Owner icon
Connect it to the textFieldDoneEditing: action
Repeat with the other text field, and save
Build and run again
Now the keyboard can go away, what about the Number Pad?
9/22/2018
EEC492/693/793 - iPhone Application Development

25. Making the Number Pad Go Away
What we want: tapping anywhere in the view where there’s no active control will cause the number pad to go away
Our view controller has a property (inherited from UIViewController): view
It points to an instance of UIView in the nib that acts as a container for all the items in our user interface
It has no appearance in the user interface, but it covers the entire iPhone window (often referred to as a nib’s container view)
To be able to trigger an action when tapped, we need to change the type of view to UIControl (which is a subclass of UIView)
9/22/2018
EEC492/693/793 - iPhone Application Development

26. Making the Number Pad Go Away
Adding the action, in Control_FunViewController.h
- (IBAction)backgroundTap:(id)sender;
In Control_FunViewController.m, add
- (IBAction)backgroundTap:(id)sender {
[nameField resignFirstResponder];
[numberField resignFirstResponder]; }
Go back to Interface Builder, change the type of our nib’s view
Single-click the view icon, press ⌘4 to bring up the identity inspector
Change the field labeled Class to UIControl
Bring up the connections inspector (⌘2), drag from the Touch Down event to the File’s Owner icon, and choose the backgroundTap: action
Save, build, and run again
9/22/2018
EEC492/693/793 - iPhone Application Development