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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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