Good morning and welcome to Interface Builder Core Concepts. My name is Kelly Keenan and I'm going to be stepping you through the first half of this session. Now, what we're going to be doing today is talking about how to get started creating fantastic user interfaces using Interface Builder inside of Xcode. So, the way that we build interfaces in Xcode is by dragging and dropping actual live controls and views, and then configuring them and making connections between those views and controls and your code.

So, it's perfectly normal to write code to design your user interface, and this code does just that. For example, it creates an image, and then it creates a button, and then it adds the image to the button, it sets the buttons target in action and it adds the button to the window.

Now these are really simple things that you're going to do over and over again. And in this case, what this code actually does is it creates that little info button in the corner of the window and so we want to make things like this, something that you're going to do over and over again that's easily repeatable. We want to make this easy for you within Xcode.

So, let's take a little tour of Xcode and what we're going to be talking about today just that we have the same vocabulary when we're speaking of these things. The first thing is going to be our canvas. Our canvas is in the center and this is where we drag and drop our controls and views. And we manipulate them by resizing them or editing the text.

Next is the document outline. Document outline shows you all of the views and controls that are in your interface. Sometimes, you'll notice that some of your views are obscured by other views and they might be hard to just click on them in the canvas. Use the document outline to access these items easily.

The third part are the inspectors, and the inspectors are where you're going to edit the properties of your views and controls. So, there's a lot of step you can do in a canvas but this gives you the fine-grained access to all of the properties of those objects. And lastly is the library, and the library is where we give you a bunch of pre-made views and controls that you can use and just drag and drop on to the canvas.

Now the way we work in Xcode is by using the Model-View-Controller paradigm. You've probably mostly familiar with this and what we're going to be talking today about is mainly the view and how to design your view, but also the view doesn't do much all by itself. It looks pretty but there's nothing behind it, unless you add a controller, and that controller is your personal code that's going to do something when the user interacts with your interface, and it's going to be used to display information back to the user in your view. So the other part we need to talk about is how to connect to these two, how to connect the view to the controller and make your views interactive.

So in Interface Builder, what we use are storyboards, and storyboards are a collection of these views and controls, and I want to remind you, these are actual live objects. These were not writing code behind that's creating these objects later. When this is saved out and compiled, they're actual live objects so that when you load your storyboard, you get an instance of that object and that's important. There is no hidden code that you're going to want to go find. Now, storyboards are made of two pieces, the first being scenes.

Now scenes are like a screen of your iPhone or a portion of the user interface. So, these are two examples of scenes. We have two scenes here. And in order for the scenes to talk to each other, we have something called a segue, and a segue represents how to move from one scene to another scene.

It also allows you to say, "OK, I'm about to move from one scene to another scene, and I need that other scene to get some data. So now is the time I'm going to push that data over to my other scene. OK. So, what I'd like to do is go through-- the best thing to do is a demo application. So, we're going to just create a simple user interface and we're going to change some properties. We're going to learn how to resize and align objects and hopefully give you some tips and tricks that maybe you didn't know about already.

And we're going to learn how to make connections between scenes and between the scenes and your code. And what we're going to make is this application here. You've seen it in previous demos and we're going to start from scratch with it. And we're going to do this welcome screen with the two buttons, the timer and the routes, tomato, it's up to you guys.

We're going to work on the timer button so I don't have to pronounce the other word again. So, then when you press the timer button, it's going to go to this run scene and show you a timer. We can hit the pause button. It's going to change and we're going to make that all happen right now. So, let's get to our demo.

So, we're going to start right from scratch and we're going to create a new Xcode project. Now, in our project, Xcode gives you some really basic templates that you can work with and what we try to do is give you those things that you might want to start your application of with, it's like a Master-Detail Application or a Tabbed Application. But what I want to show you is if you start with a single view, how you can create and expand that into something else.

So let's start with just a single view application. And I'm going to just give it a product name and we're going to call it Jagger and this where you're going to set your company identifier, your organization, and the new devices. In this case we're just going to use an iPhone app for today.

So, click next and we're just going to save it on the desktop. So, the first thing that you see when you create a new project is you're going to see the project settings. And there are some things in these settings that are specific to your user interface, and I want to point those out.

So, specifically, within the deployment info-- oops, sorry, within the deployment info, you can sub the devices but the thing I want to point out is the main interface. Now you might have wondered in the past when you start up an application on your phone, how does it know which storyboard to start with? That's set here in the project settings.

So if you had multiple storyboards, you would be able to change this to a different storyboard if you wanted your application to launch with the different storyboard than the main one that was created with the template. Also, if you might need to load your storyboards based on code. You might need to say is this iOS 6 or 7 or what storyboard do I want to start with.

And so, if you want to load your storyboard from code, you're going to delete this and just leave it blank. OK? Now, you can also set your device orientation, your status bar style, and here are the app icon in the launched images that are used when your application is starting up.

Now speaking of images, we have an image or asset catalogue and that app icon in the launch image are available here in the catalogue. Now these are empty and what I want is my designer actually gave me a bunch of images for me to work with today on stage. So I'm just going to delete the empty ones for now and drag in the images I was given.

Drop them in there. So now these are images that we're going to be able work with today during our project demo. So let's go to the storyboard and I'm going to bring this full screen and hide the project navigator for now because we're not going to need it for a while.

So, what I said earlier was that these are live objects. We can drag them around and we can move them. This is a view controller, this is my first scene. And the way I know that this is the scene that's going to be seen when my app launches is this error right here that points to the RootViewController. Now, I showed you already that I'm going to press the timer button and I'm going to go to another scene and I want that scene to be able to go back to the first scene. So I'm going to need something called a navigation controller.

And so, now that I've decided-- oh, I don't just want single stand, I want a navigation controller. I want to be able to embed this into a navigation controller. So with my view controller selected, I can go to the Editor menu. Now the Editor menu has all of these specific actions that are available to Interface Builder. So these changes depending on what editor you have open whether it's Interface Builder or a source editor. And in this case I want to embed in a navigation controller.

So, now the scene that we're going to work with is inside of this navigation controller and they are connected by a relationship. And if we want to see exactly what's going and we can open up the document outline with the button in the bottom corner, we can see exactly the objects that are in my storyboard at the moment.

Now, that application had a really great background and that was one of those images I was given. So, the first thing I want to do is add that image to our scene and you can find all of the images that we have added to the asset catalog are available here in the media library. So, you'll see these are all the images that I added.

So, we can easily just drag out the background and drop it on to our canvas, move it around a little bit, and we also want to add a title. So I can drag out the title and I'm just going to place it here for now. I'm not going to worry about placement for the moment.

So the next thing we needed are two buttons. So, I'm going to go to the third library here which is the object library and the object library is where you're going to see all those controls and views. So we can scroll through and look for things that way or you could just type in the filer field. So we can type in "button" and I see I have my button here.

Now, I can drag my button out and drop it on to my canvas, and you'll see I have a nice little button here. I can double click it if I want to edit the title. So I could change this to timer if I wanted to. In this case they don't actually want a title.

And so, I'm going to delete this title right now and I want it to have that image of the little clock. So, I can go back to media library and drag out the timer button and drop it in. So, at this point, I need a second button as well. And so, I'm just going to duplicate this with command D and create a second timer button. And you'll notice as I move it around, there are these blue lines.

Maybe I can zoom in a little more so you can see them. There are these blue lines that show up and my button kind of snaps to them as I move it around. These are called guides and they're really useful to be able to get your user interface elements in the correct position. So, this way, I now know these buttons are properly space. If I select both of them at the same time, I can move them around and now center them.

And another thing is that my designer said he wanted these buttons to be 34 points from the bottom. So, how exactly do I get them 34 points from the bottom? Well, there's a little secret, I don't know if you guys know about this yet but hopefully you do, if you hold down the option key while you have something selected and move your mouse around, it will actually show you how far your items are from other items. So, in this case, we're 48 and I want to be 34. And so I can use the arrow keys to just move down to 34 points, great. And the last thing is I want this title to be centered and I want it right above the buttons.

So, that's laid out, but I haven't changed that other timer button, it needs to be a routes button. So, I can just drag the image in, drop that in, and we're good to go. So, this is our welcome screen. Looks great, does nothing at this point. And the first thing we want to be able to do is move from that timer button to our new scene. So, in order to do that, we're going to need a view controller. So, if I go to the objects library, I can just type in view controller and I can drag one out onto my canvas here.

Let's scroll out a little. So, now I have this new view controller on my canvas, that's going to be that second scene. And in order to connect from the timer to this new scene, the timer button to this new scene, I'm going hold down the con-- I'm going to select the timer and then hold the control key while I'm dragging to the new scene.

And when I release, what I'll see is I'm given three choices for a segue, either a push, a modal, or a custom. And I'm going to choose push and when I do, we have our segue created. So now, when I hit that timer button, there is going to be a push segue to bring out this new scene.

So let's design the new scene. There is some more images I was given, one of them was that circle up at the top that the label for the timer was in. So, I'm just going to center that in here and you can see I'm using the guides. I need a button down at the bottom, so I'm just going to copy and paste the button that I have already and then change it.

So, do paste. Now, again, I want this button instead of 34, the designer said this one has to be 56. So again, I can hold the option key down. I can-- to make sure it's centered first. OK, hold the option key and I can check, and I can move it exactly to where I was told that should be.

And it's not going to be that button; this one is going to be a pause button, so I just drag my image in. OK, so the next thing I need is to change the background color. So, my view, I can't change the background just by editing it on the canvas. So far, everything we've done has been on the canvas and just dragging and dropping and manipulating things. But I need to change the background color for this view. So I'm going to open up the Attributes Inspector up here.

And when I do, you'll see that these are all the attributes that are specific to view. And in this case, we can let the tool tip come up. This is the background color. The tool tips will give you some related method information which can be useful if you're just getting used to this. So, I'm going to click on the background color. Now, I've already set one up and I've left it in my color swatches, so, ready there.

And the next thing we want to do is add a label. So I'm going to go back to the object library, select the Label, and let's drag this in a little bit so you can see better. So, when I drag this out, one of the nice things is that as soon as I move the label on to this dark background, it's going to change color to light knowing that you don't really want a dark label on top of a black background. Now, this label is really small so I'm going to make it a lot bigger right now.

And I need to change the font size so that, you know, it's easily seen. So, I'm going to go to the inspector or the Attributes Inspector again, and now you'll see in addition to View, I have Label. So, all of the controls in the Attributes Inspector, all of the properties are separated by hierarchy. So you're going to see the things that are specific to UILabel first and then its super class UIView will come next. So, in this case, I want to change the font and I can click on the font picker, change to system bold, and I want 36.

OK, great. Now, I wanted to default to looking like this, and I want to center it inside of my circle. Now, you'll notice it's not really centering correctly and that's because the label is much bigger than the text that's inside it. Now, we could resize by moving around and trying to get just the right size, but I don't really know what the right size is.

Now, it's possible I might know how this-- like I might know the pixels for it, so I could go to the Size Inspector, and if I click there, that's going to show me the position of my object as well as the width and the height, and some other information.

So, I could set it specifically here, but one of the things I really want to tell you about right now is in the Editor menu which is Size to Fit Content. And I use this all the time, command equals. And when I click on that, it just resizes the label to fit the title that's inside of it. So, now when I drag it around, it'll center properly to the actual label.

Great. So now we have all these-- we have our views laid out, I think I have all the buttons I need and the label that we need, but it's not going to do anything. The timer is not going to run, if I press the Pause button, nothing is going to happen unless I've put some code behind this.

And so, the next thing we need to do is create a class to control this view controller, so, well, to control this view. So right now, if I click on the view controller, I can go up here to the Identity Inspector, you'll see that this view controller is a UIViewController but we really want our own subclass where we can do our custom work inside of it.

So, back in, I'm going to close the document outlines so we have a little RIM, and back in the project navigator, I'm going to go ahead I'm going to add a new file, and in this case, I want to add an Objective-C class, we're going to call it RunViewController and it's going to be a subclass of UIViewController 'cause we just want to add on to the UIViewController.

I click Next, and I want to make sure that it ends up in the target for my project and I can create. So now you'll see I have some-- when I create this new file, I've given-- I've been given some code to start with specifically and it wouldn't have name.

So, when you-- the nib that's created when you compile, this is where you do any custom initialization. You can also access viewDidLoad and didReceiveMemoryWarning. So these are places where if you needed, you custom things, you can do them right here. So I'm going to leave that and go back to our storyboard.

Close the project navigator 'cause we don't need that any longer. And-- sorry, this view controller, I want to make sure that instead of a UIViewController, I want it to be a run view controller. So now, when this object is archived out when we save it, when it's instantiated later it's going to come back as an actual run view controller instance.

So, I can open up my Assistant Editor now and we're going to make a little RIM for our code and then show just our view. Now, I want to be able access this user interface items within my code itself. And the first I want to be able to access is this time label.

So, I need something in my controller that says, "Hey, this is a time label, UILabel." So, I'm going to make a connection between my view to my controller, and to do that, it's the same way you make a connection using the segue to create a segue. Just hold down the control key and drag over to your code.

And when I drop, what you'll see is I'm creating a new outlet, I can name it time label, and connect it. And when I do, what I get is I get a property that's a UILabel named time label. So now in my controller, anytime I want to access that time label I just use time label, the time label property to access it. For the same thing, I want to do with the pause button.

So I'm going to control-drag in, call this Pause/Run button, and now I have a UIButton called Pause/Run button that I can access. The same thing when I click the Pause button, I want the Pause button to change to a different image. I also want the circle to change to a different image. So I can control-drag from that image over here and call this Pause/Run image.

So now I have a connection to that UIImageView so that when my action happens, I can actually change that image. Now, there's a couple other properties that I need that aren't specific to my demo, and I've created the code for it already. And what I've done is I've stored it down here in the Code Snippet library.

So down here, we have-- I have demo properties. Now, I've dragged and drop to this code into the Code Snippet library given it some information, and then anytime I want this code I can just drag it right out and drop it into my document. So, one of the other things I want to do is we want to be able to deal with the action of hitting the pause button. So we really need a method.

We need something where we can make things happen like change the Pause/Run button, stop the timer and change that circle. So I'm going to make a connection again from the Pause button down here and this time, instead of an outlet, I'm going to make an action connection which will connect to a method and I'm going to call that method "Pause or Run".

Now, you'll see I have a step for my new method. And once again, I have a pause or run method. I have the code for it, all ready to go. So I'm just going to drag that in and close the library. Now, what this method is doing is we're going to determine whether or not we need to set the image to the pause button or that-- and the circle to the timer running, or switch it to the start button and the timer stop.

Now it also calls a method called update time and we don't have that yet. I'm going to add it in here. One of the cool things about Code Snippets is you can give it a shortcut, so I can just type in "Helpers" and it'll add my code right in there for me.

It's great for like reusable code that you write all the time and use all the time. So, in update time, what we're actually doing is setting the time label, so that property, we're using it to update the time, and we're getting that from time string for interval which is up here which really just a setting, creating a formatted string for us.

And in view will up here we're determining whether we're going to show the Pause or the Run buttons when we load this view. So, with any luck, I believe we're done with this part of the demo so let's try it and see if it works. So we're going to run, filled in Run and we should see those images that were pre-populated. We'll see that launch image that shows up and then we should see our Welcome screen.

So launch image or welcome screen. And now as I click on the timer button, we'll see that the timer starts. We click the Pause button and because we have access to those elements in our user interface from our code, we can change the buttons based on the action that happens from the user, OK? So, let's stop this and go back to slides. One thing that I want to be more specific about is making outlets.

Now, I showed you how to make an outlet from your view to your code and create a new property when you did it. Now, you might already have code that you want to connect to your views. And in this case, we have a special keyword that we use because in your user interface when you're designing it, you don't want all of your properties to show up.

You might have a lot of properties in your project and you don't need to see all of them 'cause they're not all relevant to your view. So what we use is the keyword IBOutlet and what this says is this is relevant to my user interface design and I want you to show this property when I'm designing. I want to be able to have access to it.

Now, the same thing is happens with actions. So with an action, this is really just a connection from your controls to your methods and you'll have a lot of methods in your projects and not all of them are relevant to your views. So what you're going to use is a special keyword called IBAction, and those actions are going to-- that's going to let Xcode know that this is relevant to your user interface. So, with that, I would like to invite Alex up to talk more about what's next with storyboards. [applause]

Thank you Kelly. Hello everyone. So, Kelly gave us a good introduction to how to set up your project and do some of the basic interactions with interface builder. But what do you need to do next? Well, the interface is really your first step but there's a lot of ways that those user interface elements may want to interact with your application and you're going to need to write some code to do that.

So I want to show you some of that special code that you're going to be writing on a fairly regular basis. To do that, I'm going to add a couple of views to our application. First, I'm going to add a map view and on that map view, I'm going to put some route information about your runs.

I'm then going to have a segue to a detail view, and importantly, I have some data inside of my map view and I want to pass that data through the map view and into the detail view. And I'm going to show you how you can take that little pocket of data pass it through and have the detail view show up.

So, what I want to do is show you how to use gesture recognizers, this is how we're going to do interactions from the map. I want to show you how to activate segues from code rather than just from user interface elements. I'm going to talk about how to pass data from one view controller to the next view controller. I also want to talk about two special connections that many views have called a delegate and a data source. And finally, I want to show you how to use reusable table cells and how to add custom UI elements to your application.

So, with that, let me give you a quick demo. So, unlike Kelly who was starting off showing you how to create an application from scratch, I didn't want to spend a lot of time up here copying and pasting code around just to get the underlying behavior that we desire. So, I-- before the demo, I wrote a number of additional view controller classes that we can use. Now, I'm not going to show you every method in those but I'm going to show you some of the more important methods that you'll need to implement.

So to start off, let's go to our storyboard and here you'll see the storyboard pretty much where Kelly left it. And the first thing I'm going to do is set up so that we can show the map. So like Kelly did, I'll use the object library, filter down to the map view, of course I'm getting ahead of myself. First I need to add a view controller to put the map view into.

So I'll drag that out here and I'll go to the identity inspector as Kelly did up here and I will set this to be a map's route view controller. Now, I can down to my object library, filter down to a map, and add that in. I also want to be able to make a segue so I'm going to control drag from my routes button and I'm going to add a push segue just like Kelly did for the timer button.

Now you'll notice when I did that, it shrunk down my map view, and with iOS 7, I really want my map view to be hinting through the top navigation bar. To do that, I'm going to select the MyViewController, I'm going to go to its properties, and over here, you'll see that there's a section called extend edges.

And on this case, I want to be able to extend under the top bars and bottom bars. And even though I don't have bottom bars now, if I were to add one, I'd want to extend underneath it. And you'll see now that my map view extends all the way up to the top of the view controller.

Now, I need to make a couple of connections and you saw that I changed my view controller from a UIViewController to our map route view controller. So now I can just control drag from my little mini doc to my map view and I can connect to the map view outlet.

But just as important of that connection is I need to make a connection from the map view and drag down back to my view controller. In here, you'll see that there's an outlet on the map view called the delegate. So, what is a delegate? A delegate for a user interface item is an object that can get special notifications from that user interface element and it can also intervene at special times for the user interface element and make decisions on how data should be presented.

So, for example, a map view can send notifications when it's starting to load map data and when it's done loading map data. In our case, since we're going to be adding overlays to the map view, we want the map view to tell us when it's ready to receive those overlays. And with that-- and we'll do that via the delegate outlet.

So, at this point, we could run the application, tap the routes button and we could see that we'd load a map view. But we want to do a little bit more. We want to be able to interact with the map view as well. And to do that, I'm going to use a object called the gesture recognizer.

A gesture recognizer is a way that you can add additional interaction to controls especially controls that don't necessarily support the type of interaction you need to start with. So on this case, I'm going to drag a tap gesture recognizer and drop it on to my map view. What this will allow me to do is that when the user taps into the map view, I'll be able to take that tap and send it to my view Vontroller.

And to do that, you'll see that it added down here in my doc, the tap gesture recognizer, I can control drag between that and my view controller, and you'll see that one of my sent actions I can do is tap in map view. So let's take a quick look at some of the code that backs this up.

So, the first method we have here is a method you get with every view controller. Kelly showed at you briefly when she created a new view controller and what is, is the ViewDidLoad. ViewDidLoad is called immediately after the view controller loads its interface but before it's displayed to the user. Because of that, it's a great place where you can do some initial set up with your view controllers before the user sees anything.

In this case, I'm actually going to call the center home region method that I implemented earlier. By default, the map would have come up and displayed a map of the entire world and I'm certainly not that good of a runner that I want to see things on a global scale. So, by calling this method, I'll actually center the map on the San Francisco Bay Area. Likewise, I'm going to go ahead and create my track overlays here so that they'll be ready when the map asks for them.

Next, you'll see that I have my action method, right here called tap and map view. This will be called by the gesture recognizer when the user touches in to the map. And you'll see here that the first thing I'm going to do is ask the gesture recognizer where in the view the user touched.

I can then call a method I wrote earlier that will return the correct map overlay for me for that touch point, and in this If block, if I actually returned a route, I'm going to go ahead and save that selected route so I can use it in just a moment. And then I'm going to call this method performSegueWithIdentifier runs for route.

Now, I haven't shown you the segue yet, I'll show you that in just a moment. But the important thing here is that you don't have to initiates segues from just other views in your higher and your view controller. You can in fact initiate a segue whenever you need to and you can get to that segue by giving it an identifier. So let's see how to give it that identifier.

So I'm going to ahead and drag out my next view controller and it's giving me a detail of view controller. So it's common to have detail views that are in fact table views, and like I did before, I'm going to give it a special class. And now I want to create a segue from my first my map view controller into my detail view controller but because I'm going to call this segue from my view controller, Is'm actually going to link from the view controller to my next segue and do my standard push segment-- my push segue. But this time, I'm going to select the segue, I'm going to come up to its attribute and I'm going to give it an identifier runs for route. And now this segue can be identified from my view controller as we saw.

Now, I'm not quite ready to show you this running because for the detail view controller to be useful, it needs to have some information in it. And so there's two things we're going to need to do to display that information. First, we're going to need to come to the table view and we're going to select the table view cell. Now, I want to be able to reuse the table view cell over and over again and to do that, I'm going to give it an identifier called run summary.

And now for my code, I'm going to be able to populate multiple cells using that identifier. But let's go back first for a moment and look at the map routes view controller. You see this one more method that's very important. This method is called prepareForSegue. prepareForSegue is a method that is implemented by every view controller and it will be called whenever a view-- whenever a segue is about to initiate an action on the current view controller.

This is a great place where you can then interact with the segue. You'll have both ends of the connection. The source-- the source view controller and the destination view controller, and because of that, I can pass information from one view controller into the next view controller. And so you'll see here with the code, I'm doing exactly that.

I check the segue that's been invoked and I checked its identifier to see if it runs for route. Now, in this example, I actually only have one segue coming out on my view controller. So strictly speaking, I don't need to check its identifier, but it's good practice to always do so because you'll probably find in many scenes, you're going to add additional segues and you don't what to be crossing your segues and finding that you're performing the wrong thing just because you didn't check the identifier of the segue.

As I mentioned, the segue has access to the destination view controller, in this case, we know because of the segue identifier that it's going to be a route details view controller. And so I'm going to go ahead and set the title for the next view controller and where we grab that selection earlier when these are tapped in the map, we're going to go ahead and set the route data and the detail view controller from the route data in our selection.

And one last thing I want to touch on before we should see this running is that when I created the detail view controller, I created a table view controller. That table view controller automatically gets a couple of special connections. First, it gets a delegate connection, and in this case, I don't actually need to intervene in the table view in anyway where I'll need the delegate connection, but it also gets a data source connection.

The data source connection is important to a number of views because, you know, for example, a table view has no idea what data you want to display in it. So it's going to need to ask some other object and in this case that would be the view controller, what data needs to be displayed. Because I have a fairly simple table view, I just need to implement two methods. The first method is number of rows in a section and since I only have one section, I know I just need to return the route data runs dot count.

Next, I need to implement a method called tableView: cellForRowAtIndexPath. This is the actual method that will provide table view cells to the table view to be displayed to the user interface. And you'll see the first method I call here is tableView dequeueReusableCell WithIdentifier. And I asked for the identifier run summary and we saw it made that, I selected my table view cell and I gave it the identifier run summary and what the Table View is going to do is it's going to say, "Hey, do I already have a cell named run summary?" And if I don't, it's going-- I'll look in it a new one and return that to me.

But it's only going to do this for enough cells to actually show what needs to be displayed on screen. You can certainly imagine having a Table View with 10,000 rows in it. I mean, who would want to create 10,000 cells upfront, be a horrible ways to memory for something that the user might not even see.

And then, as you scroll through the Table View, as cells are scrolled of the top, they're put into the reuse queue inside of the Table View and those will be recycled to show new data coming in from the bottom. So at this point, we should have enough-- have done enough that we can go ahead and run our application.

It'll launch, I can connect the routes buttons now. You'll see my map view comes up and it's centered on the San Francisco Bay Area and I have a route highlighted. If I go and tap on that route, I go to a detail view and here you see a detail of when I run that route.

So, what else can we do? Well, I told you that I was going to show you how to do some custom content, and to do that, I'm going to go ahead and add one more view controller. This time, I'm going to connect a segue from the table view cell because table view cells can certainly invoke segues, and I'm going to do a push again.

Because I'm going to want to pass some additional information just like I did in the map view controller to the detai view controller, I'm going to give this view controller an identifier as well called Run Details. And just because our designer did such a great job creating images for us, I'm going to add an image to this view.

But now, I'm going to come into my object library and I'm going to add just a UIView object. Now, normally, just adding a UIView to your user interface would be kind of boring. Now, they are useful as a great way to collect other views together by there's going to be times when you're going to want to do some custom display. You're going to have custom controls. You're going to have custom drawing. You're going to show special statuses to the user. In this case, I want to show a graph.

So just like we do with view controllers, I can go to the identity inspector, expand it down, and you'll see here that I have an object called GraphView. And I'm going to go ahead and make this view a GraphView. And so, when your program is running and this view is instantiated, rather than instantiating just a generic UIView, it's going to know to go on there and instantiate a GraphView object for me. Now I'm not going to show you the draw methods and things like that, that's all more UIKit information, but I've already implemented some background information for this so we can actually display something.

But of course I'm going to want to come down to my view controller and drag a connection up to the GraphView and it's good I did that 'cause it shows that I forgot to set my custom class name for my view controller and now I can drag up to my GraphView and I can make an outlet to my GraphView. And we'll use that just like Kelly was doing with her controls.

So now if I run again, I can go to the routes again, click through the map quickly, and I can click on a detail and here you see instead of just a generic view, I get this nice graph that was designed by our designer again. So with that, that's all I've got to demo for you and let's return to the slides.

So, what are some the important methods that we talked about? So, with the UIViewController, a UIViewController is going to be the base of every scene in your storyboard. So certainly it's a very important object. And every UIViewController has a property called storyboard. You can use storyboard to access the storyboard from which your view controller was created.

This is important because you might want to go to-- you may want to skip a scene and you could-- with this method, you can ask the storyboard for another scene via identifier in your storyboard. We also saw the importance of the performSegueWithIdentifier method. This allows you to pick out a segue from your storyboard and then have that segue invoke its action to its next view controller.

We showed a fairly simple case of this but you might do something like build a generic menu, and in that menu, you can put segue identifiers and then you could have a bunch connections coming up from your view controller and you could invoke the correct segue depending on which menu button was tapped on by the user.

And finally, we saw the importance of the prepareForSegue command, our method. This method allows us to-- or is given to us by the segue to notify us that it is about to transition to a new view controller and it lets us to do some additional work such as past data between view controllers.

So, what are some of the other problems you might encounter on storyboards? Well, one, as you build your application, you'll find out that you start off with kind of a simple storyboard, and as you work, it gets more, and more, and more complicated. Well, you might for organizational purposes want to break your storyboard up into two or three storyboards.

In our case here, we might actually want to-- instead of having one storyboard doing both the timer path and the routes path, we could divide that into two storyboards. Not only does it make it a little easier to scroll around your storyboard, but if you're using something like version control, it means one developer can work on the timer path while another developer works on the route path, and if they do separate check ins, they are less likely to cause conflicts in the source control.

There's another important time when you might want to use additional storyboards as well. For example, say you're doing-- we add social media to our application. And when we do that, we're going to want some kind of a login panel for the user. But in our storyboard, we don't want to hang a login panel scene off of every single scene in the storyboard. Our storyboard will quickly get ridiculous. So instead, I can create a small storyboard that implements a reusable piece of logic, in this case, a login panel and I can call that from anywhere.

So, how do you create a storyboard? Well, there's a UIStoryboard object and it implements a few methods. The important-- the first important one is storyboard with name. This allows you to identify a storyboard you'll save and add it to your project. The method-- the second argument bundle and almost all of your cases will be your application bundle, so you'll just pass an NSBundle mainBundle.

And as I said, this will create and return a storyboard object. Once you have a storyboard object, you have a method instantiateInitial ViewController. The initial view controller in a storyboard is that that scene that had the large arrow pointing to it. And so calling this method means you'll create one of those view controllers, load its interface and display it.

But if you don't want to go to the initial view controller and in fact want to go to a different view controller in your storyboard or different scene, you can do instantiateViewController WithIdentifier. So, a view controller just like we did with our segues and our table view cell can be given an identifier and this allows you to jump right to the view controller without identifier.

For example, you might have-- and when doing a login connection, you may have too slightly different scenes. One might be for doing an initial login for a new user the first time and another one might be to just re-login the second time you started the application. This would allow you to use one storyboard but start from two different points in the storyboard.

So, up to this point, we've always been talking about storyboard files. And the storyboard files are great because they let you see a large flow of your application in one place. It really helps you visualize how the user is going to move to your application and how data is going to flow to the application. But Interface Builder also lets you edit what's called the XIB File.

Now, in this case, I'm showing an application-- an AppKit application rather than an iOS Application because if you're going to do any AppKit development, you're going to be using XIB Files and not storyboards. And in this case though, I showed that you can store much the similar objects. For example, this shows you the main menu of the application as well as an app-- simple application window.

In XIB Files, you'll still use view controllers. You'll still make connections from view controllers to windows and views inside and connections from the controls back into the view controllers. Except that you're going to do a-- when you need to move, say load a new window, you'll actually explicitly load a XIB file like you would load a second storyboard.

So, there's two last objects that I want to talk about real quick and these objects are called NSNib and UINib. Now, you're probably going to ask, what's nib file? Everything we've talked about has been a XIB or a storyboard. Well, a XIB and storyboard are actually just descriptions of your interface and well they are archive representations of the objects, they're not objects that are ready to load like right in the memory and start using.

Instead, when you compile your application, we compile the XIB Files and storyboards into nib objects. And in fact, when we compile your storyboard, rather than having to load the entire storyboard at launch time, we compile the storyboard into smaller nib files and then as you've navigate through your view controllers, we'll instantiate those individual nib files. That way we don't have to have everything in memory again at one time.

And so, when is a place where you might need to that? Well, storyboards also use nibs when you're using table views. And as you do those-- load those prototypes, it's actually loading the nib to load that table view prototype in for me. But what if you wanted to share table view cells across multiple nibs? Well, you could do that.

You can have a simple nib and every time you wanted to load those, you could ask the nib, "Hey, instantiate your objects and then object return would be a table view cell and you could now take that table view cell and register it with a table view to be used in a reusable fashion just like we saw the storyboard do.

So with that, if you have any more technical questions about the information that was presented here, you can contact our evangelist, Dave DeLong. I also appointed you to a couple of useful links here in the documentation. The first one is the human interface guidelines. If you're going to be developing applications, you're going to certainly want to reference those, and also to the interface builder help documentation.

Some related sessions, if you missed it, you're going to want to watch the S code core concepts video. And very important and very much related to how interface builder work is auto layout. Now, Kelly and I didn't show auto layout because in fact, there's a full hour session on how to use auto layout coming up immediately after this.

So we'd like to invite you to go upstairs to Presidio and attend that session. So, just to quickly summarize, we showed you how to create a simple project, we showed you how to work with storyboards, we showed you how to make connections to outlets and actions, we showed you the importance of delegates and data source methods, we showed you how to manually invoke segues, and finally, we showed you how to load storyboards and code. With that, I'd like to thank you for all attending.