Storyboards Managing multiple views

Overview Create a single view application Give the project a name and click “Use Storyboards” and “Use Automatic Reference Counting” Save it somewhere. Do not create a git directory There’s no nib; instead the storyboard represents several views

The storyboard Select the MainStoryboard.storyboard file When you click on View Controller in the doc, you get 3 icons: each View in the storyboard has these icons. This is called a scene No icon view View Controller First Responder Exit This arrow shows which view controller is the initial view controller for this storyboard. Can drag this arrow to another view (if there was one)

The storyboard Select the MainStoryboard.storyboard file When you’re zoomed out you cannot select components or drag new components to the view No icon view Change between iPhone 4 size and iPhone 5 size Zoom buttons Editing conttrols

Testing Add label. Run.

Files CMPViewController.m Very few methods CMPAppDelegate.m Bunch of empty methods Application:didFinishLaunchingWithArguments: Different from previous apps Used to build a UIWindow, viewController, etc.

Files Go to project navigator on left, select topmost file name, make sure the target is selected in next column and summary tab is clicked. Look for iPhone/iPod Deployment Info section. MainStoryboard is configured as the Main Storyboard That’s how the app knows to automatically create a window. All the code is behind the scenes.

Files

app We’ll create an app with three views: a red view, Has count of number of times it has been displayed Has buttons to the green and blue views a green view Has count of number of times it has been displayed Will have a back button a blue view Has count of number of times it has been displayed Will have a back button

Red View First refactor current CMPViewController to redViewController In Xcode 4: Control click or right click on the name CMPViewController.h in the project navigator Choose Refactor=>Rename Enter redViewController. Make sure to check the checkbox for “Rename related files” in the ensuing dialog box choose “enable” then “save” when I did this, redViewController.m was not included correctly. If it shows up in red, delete it (but do NOT move to trash), then add it again. Sometimes Xcode puts the.m file in the wrong folder on your hard drive. Ensure that the redViewController.m file is in the same folder as all of your other.m files. Xcode 5: 1.click on fileName.h in navigator window 2.highlight the name of the class (right after at the top of the file) 3.Choose Edit->refactor->rename

Red View Go to MainStoryboard.storyboard In the dock, click on the Red View Controller Choose the identity inspector. The class should be a redVewController

Red View Change the background color to red Make the label large and the value 0 Add two buttons “blue” and “green”

redViewController.h Add redViewController : (nonatomic) int redCount; // number of times visit red (nonatomic) int greenCount; // number of times visit green (nonatomic) int blueCount; // number of times visit blue (weak,atomic) IBOutlet UILabel

redViewController.m Need to count whenever view appears. Where should we count this? viewDidLoad? − (void)viewWillAppear: (BOOL)animated { [super viewWillAppear:animated]; self.countLabel.text = [NSString ++self.redCount]; } Pre-increment redCount, create a string out of it, set the text of the label.

storyboard Make sure the countLabel property is connected to the label in the storyboard.

run Nothing should happen. Yet. But you should see your red view with the number “1”

More View Controllers Click on the MainStoryboard.storyboard Go to library and drag a viewcontroller to the storyboard (not inside the present view) repeat

More View Controllers Now go to File=>New=>File and choose objective C class. Name it greenViewController but do not include a nib file. We already created the view in the storyboard file make sure it is a subclass of a viewController Make sure it’s not for iPad Make sure the checkbox by Targets is checked. Repeat and name the new file blueViewController

More View Controllers Go to MainStoryboard.storyboard Select one of the new views and change the background color of the view to green. Make sure the viewController is selected. Go to the identity inspector Change the class to greenViewController

More View Controllers Add a label, a “go back” button,.

More View Controllers Add to the greenController.h greenViewController : (weak,atomic) IBOutlet UILabel (nonatomic) int

More View Controllers Adde to the greenController.m file - (void)viewWillAppear: (BOOL)animated { [super viewWillAppear:animated]; self.countLabel.text = [NSString self.viewCount]; } Note that we use viewCount as the variable and we do NOT increment it! Will do this in the redViewcontroller

More View Controllers Make sure that the countLabel property is connected to the UILabel in the storyboard

More View Controllers Repeat this process for the blue controller and blue view.

Run Should see red view with a count of “1” No connections to other views yet In the MainStoryboard.storyboard file, move the big arrow that is on the left side of the red view to the left side of the green view Run Should see the green view with a count of “0” Repeat for the blue view

Segue A segue specifies a transition from one view controller to another These transitions form a stack Just like a navigation controller When a segue is triggered (ours will be by a button), the segue is followed to the next view, That view is pushed on the stack That view is displayed Then the view can be dismissed Popped from stack, top of stack view is displayed Or a new segue can be triggered The new view controller is pushed on the navigation stack The new view is displayed

Segue In our app, when the “green” button is pushed, the green view controller will be pushed on the stack There will be a transition The red view controller will update the greenCount The red view controller will update the label in the green view.

First Segue Go to the MainStoryboard.storyboard Control click on its Green button and drag to the GreenViewController Let go and a menu asks what type of segue to create Select Modal; Our segue is created (see next slide)

Segue 1

Select the segue (click on the circle in the middle of the arrow) Select the attributes inspector Name the identifier “green” Make the transition “Flip Horizontal”

Run Green button should work Green view label does not update yet. Go back button does not work yet.

Segue 2 Repeat with blue button and blue view. It’s identifier should be “blue”

Connecting In greenViewController.h add an IBAction: − (IBAction)handleGoBack:(UIButton *)sender; In greenViewController.m add: − (IBAction)handleGoBack:(UIButton *)sender { [self dismissViewControllerAnimated: YES completion: NULL]; } And connect the Go Back button in the storyboard to this method

Counting Want the redViewController to count for both green view methods and blue view methods So the redViewController needs to know when a segue is done to one of these views And it must be able to change the instance variable in each of them.

Counting The prepareForSegue method in the redViewController is called just before a segue is done. This method passes in a pointer to the segue that is about to be done. We’ll use the identifier that we added to the segue to determine which view we’re going to.

Counting In the redViewController.m file add at top of file: #import "greenViewController.h" #import "blueViewController.h"

Counting In the redViewController.m file add: − (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{ if ([segue.identifier { greenViewController *vc = (greenViewController *) segue.destinationViewController; vc.viewCount = ++self.greenCount; } else if ([segue.identifier blueViewController *vc = (blueViewController *) segue.destinationViewController; vc.viewCount = ++self.blueCount; }

Run Then connect the blue and green views with buttons.

More Control You can create tab controllers and navigation controllers (using tables) with storyboards