View Controllers ( second part)

1. View Controllers(second part) Content taken from book: “iPhone SDK Development” by Bill Dudney and Chris Adamson

2. Running Application From last lecture

3. Creating the New View Controller • In Xcode, select the Classes group, Ctrl+click the group, and choose Add > New File from the pop-up menu. • In the wizard that pops up, choose the “UIViewController subclass” item in the iPhone OS > Cocoa Touch Classes group. • Don’t select the “With XIB for user interface” checkbox, because we will be creating our interface shortly. • Click Next, and name the class MovieEditorViewController.

4. Adding outlets/actions to new UI • UI with three text fields and one button • Add the outlets and actions that we will need to interact properly with the UI to our header file • The text fields will allow the user to edit the title, box-office gross, and summary, respectively, and the button will signal the user is done with the edits.

5. MovieEditorViewController.h • Add a declaration at the top inside angle brackets for the UITextFieldDelegate protocol. • That tells the compiler that this class intends to implement all required methods from that protocol. • Make sure to save the file so Interface Builder will know about the new outlets and actions we’ve added.

6. MovieEditorViewController.m • Add the import of Movie.h • Add a @synthesize statement for each of the properties that were declared in the MovieEditorViewController.h file. • Now we need to implement the viewWillAppear: method to place the values from the Movie object into the text fields.

7. viewWillAppear: method • In MovieEditorViewController.m • In the done method, we dismiss the current modal view controller with a call to the dismissModalViewControllerAnimated:

8. UITextFieldDelegate protocol • We will make our view controller the delegate of all the text fields so we can capture the input via the UITextFieldDelegate protocol. • We need to implement two methods of the UITextFieldDelegate protocol. • textFieldShouldReturn: • textFieldDidEndEditing:

9. textFieldShouldReturn: • The textFieldShouldReturn: method is called by the text field when the user presses the Return button on the keyboard. • This is the perfect spot for us to resign first responder status for the field (which in turn will cause the keyboard to animate out) by calling resignFirstResponder.

10. textFieldDidEndEditing: • The textFieldDidEndEditing: method is called when the text field resigns its first responder status. • This method is a great spot to capture the data that the user typed into the field. • We take the values from the fields and place those values into the movie object.

11. Building the new UI • Now we need to add a new nib file to the project • In Xcode, Ctrl+click the Resources group, choose Add > New File, click iPhone OS > User Interface, and then choose the View XIB item. • Click Next, name the file MovieEditorViewController.xib, and then click Finish. • Open MovieEditorViewController.xib in IB by double-clicking it.

12. Modify the new nib • Modify the new nib so that it becomes the user interface for our MovieEditorViewController • Change the class of the File’s Owner • Select this object, and open the Identity inspector with D-4. • Change the Class field to MovieEditorViewController.

13. UI and its connections • Now that IB knows about our outlets and actions, we need to create the UI and make the connections. • Open the view by double-clicking it. • Create UI • Make the connections

14. Connections Inspector • This is what our Connections inspector should look like:

15. Configuring the Text Field • Tap in a text region -> a keyboard • Text field becomes the first responder • We want the correct keyboard to show up, and we want it to be properly configured

16. Text Filed Attributes • Here the text field is configured to capitalize words and take the defaults for correction, type, and appearance. • The Return key is set to Done

17. MovieEditorViewController • We have both view controllers and the user interface set up to display the movie as well as edit the movie. • However, we have no way of getting to the second view where the user can edit the movie data.

18. Making the MovieEditorViewController • Add an outlet to MovieViewController for the instance of MovieEditorViewController we are going to create. • Update MovieViewController’s edit method to modally display the MovieEditorViewController. • Create an instance of MovieEditorViewController in MovieViewController’s nib file, and make the connection from the outlet.

19. Adding Outlet • In MovieViewController.hadd an outlet named editingViewController to the MovieEditorViewController • Make sure to add the forward declaration:

20. Updating the edit method • In MovieViewController.m • Don’t forget to add the import statement to the implementation file for the MovieEditorViewController.hand the @synthesize statements for each property.

21. The Editing View Controller in IB • Open the MovieViewController.xib file. • We need to add a view controller to this nib file. • From the Library, drag a view controller into the document window.

22. Still editing View Controller in IB • We need to change the class of this view controller to MovieEditorViewController. • Select the new view controller, open the Identity inspector, and change Class to MovieEditorViewController. • Next we need to set the nib filename for this view controller, so open the Attributes inspector with D-1, and type MovieEditorViewController into the NIB Name field.

23. Connecting outlet to new view controller • All that remains is to make the connection from the File’s Owner’s editingViewController outlet to the new view controller. • Now hit Build and Go to see your work in the simulator.

24. The View Controller’s View • When the view controller is asked for its view; if it’s not there, the view controller checks to see whether its nib file is set. • If so, then the view controller loads that nib file, passing self in as the File’s Owner.

25. Our View Controller’s View • And since we set the view property in our MovieEditorViewController.xib file, the view gets set. • Here’s the basic picture of what happens once the view is requested but not found: