Hello, everyone. Hello, WWDCers. How are you guys doing? Enjoying your conference so far? I'll take most silence as a good thing. All right, well, my name is Kevin, and I'm one of the Interface Builder engineers. And today, I get the privilege of getting to show you guys Interface Builder, which is now integrated into Xcode 4, and to show you why this integration is going to make your lives as developers much easier by allowing you guys to create your applications faster and simpler than ever before. So let me start out with a question. You can raise your hands on this one. How many of you would say that you're familiar, even relatively, with Interface Builder? Awesome. There's a lot of hands out there. Well, great. Well, this session is for you guys.

You guys are familiar with all these different concepts of Interface Builder, but you might not know where they are in Xcode 4. And so it's going to be my job to show you them. Now, for those of you who didn't raise your hands, don't run to the session next door. Stay here. We want a good turnout. This session is for you guys, too. Interface Builder in Xcode 4 is new for everyone.

So as I walk through all the different features of Interface Builder in Xcode 4, you guys will get to see how these apps, or how you build interfaces with Interface Builder at the most fundamental level. So Interface Builder in Xcode 4. So how am I going to show you guys this integration today? Well, today's session is really going to be about demos, two in particular. First, we're going to start by just walking through Interface Builder.

We're going to look at each piece, and you guys can match what you know in Interface Builder 3 with what you guys see on screen in Xcode 4. Then I want to talk, in particular, about what it means to make connections between your interface and your source code in Xcode 4. And we have some exciting things to show you there. So with both of these demos, we're going to be building an interface for an application.

So I'm going to ask another question. This is quiz question number two. How many were at the Interface Builder session yesterday where we were talking about iPhone applications given by my colleagues, Rob and Barry? Anyone out there? A few hands. Well, if you weren't, don't worry. This is the app. It's really simple.

We just have a table view with a bunch of recipes. And when you tap on one, it will show a detail. Our job is we're going to build that detail View Controller. Really, really simple. All right, does that sound good? Awesome. Well, let's get to work looking at Interface Builder in Xcode 4. Okay, so I hope that you guys have had a chance to look at Xcode 4. With this session, I'm not so much going to cover every feature of Xcode 4.

But rather, we're going to be looking, in particular, at the Interface Builder editor. So feature number one. To open a NIB file, I just click it. And now we're working in Interface Builder. So for the sake of the demo, I'm just going to go ahead and close the navigator area so that we can focus on Interface Builder.

So Interface Builder's layout is pretty standard with the rest of Xcode 4. On the left, we have areas that show structure. In the middle, our working area. And then on the right, we have our utilities area, which includes our inspectors and our libraries. So we're going to start with this gray strip over here, and we call it the Dock. The Dock represents the highest level looking at your document. And it's the top-level objects.

For those of you familiar with Interface Builder 3, this would be akin to the icon view that was in the document window. But there's an important distinction, if you look at this, and it's really subtle. It's this line. Now, what does this line mean? There are objects above it and objects below it.

One of the things that we've tried to do with Xcode is make it really clear which objects are in your NIB file and which objects aren't. Objects that are in your NIB file, for example, would be like your views, your sliders, your text fields, those things that at runtime every time your View Controller, for example, is instantiated, you get new copies of those objects every time. The second category of objects are those above the line. And these are objects that don't actually exist in Interface Builder.

Rather, they're just placeholders or proxies. At runtime, the actual values of these objects will get filled in. So when you edit, for example, the custom class on one of these objects, you're not actually changing the class of this object. But rather, just promising to Interface Builder that, hey, at runtime, this object is going to be of this class. And I'll talk more about Files Owner and Custom Classes later on in the talk.

So the Dock is the springboard to quickly open objects in your document. So I'm going to go ahead and open up this view. So I've got an empty view here right now. Well, I kind of want to add some stuff to it. So to do this, I'm going to go over and use the Xcode 4 libraries.

Again, if you're familiar with Interface Builder 3, or some of our other developer tools, these libraries will already be familiar to you. However, you'll notice that we've made a few nice improvements, just to simplify the libraries to make it easier for you to find what you're looking for. In all of our libraries, file templates, code snippets and objects, we've organized the items in that library by flat form.

You can see, for example, in file templates, we separated out between iOS and Mac OS X. Sweet. With Interface Builder, we do the same thing, only we go a step further and actually show you only the platforms that apply to the document that you're working with. So, for example, Cocoa Touch versus your own custom objects. Pretty simple.

All right, so when I find the object that I want to add to my document, I can get additional information about the object by clicking and just sitting having it come up and show me detail. I can also bring it up immediately by hitting the spacebar. These little library detailed pop-ups will give you additional information about how to use the objects in the library. And this pop-up is present in all of our libraries. File templates, code snippets, objects and in media to give you additional detail about the item you have selected.

Okay, so we're building our recipe detail View Controller. That's the NIB file that I have open right now. So the first thing I want to add is an image view, so we can see a picture of what kind of food we will be cooking. So I'm just going to use the filter field and search for image view. Now, when I add it, and then I'll just drag it out of the library, and there's something I want to point out here.

As I drag this object around, you can see it's kind of changing appearances as I drag it around. What Interface Builder does is as you are adding objects from the library, we will automatically customize the objects that you're dragging, so that when you drop them, they fit the best in the place that you're dropping them in.

So pay attention. As I drag it into my view, it resizes to fill the whole thing. Now, this doesn't just work with sizing objects, but also, for example, as some of you may have noticed, if I drag out like a bar button or a bar button item into my interface, the style of that will automatically change based upon where I'm dropping it. Something small, but it really helps you be productive.

Okay, so I've just added something inside of view already existing in my interface. But I kind of want to add a top-level object. So we're going to add a tab bar controller. I can just click it and drag it out into my interface and drop it. Very easy. And for the first time with Xcode 4, I can actually add multiple objects at the same time.

So we want to add a slider that adjusts the font size of the recipe steps. So if you're blind like me and need glasses, you can actually adjust the font size when you're cooking. We also want to add the recipe steps themselves as a TextView. And then finally, we all want to make money, and making money from the stage is awesome, so I'm going to drag out these three objects; an Add Banner View, TextView and Slider.

You can see, Interface Builder allows me to drag out all three objects at the same time, and I can just drop them right into place. So I've got quite a mess of objects right now in my design canvas, so let me take a minute and talk about that. The design canvas in Interface Builder for Xcode 4 is an infinite canvas. And I can arrange objects in that canvas how I feel they make sense. So I can drag this object off here and say, I want this over here and this down here.

And this is a pretty big monitor, so you can't really see the power of a scrollable canvas. But I can arrange these objects how I want them. With an infinite scrollable canvas, we're ensuring that you can always see the interface that you're working on, regardless of its size and your monitor size, which is a really big win.

Also, with the design canvas, some more improvements that we've made is something small, but I can resize objects from any side, which is nice if you have particular-- thanks. And this is nice if you have particular constraints that you haven't set up yet, but you just want to resize it real quick.

Okay, so there's something else that has to do with clutter, and just if you're like me, you might not always want graph paper, so we've just allowed you to change your background color. So I can change it to checkers or white or gray. And we considered adding a marble color, but our HI resident Genius didn't think that would make sense in this context, so we had to jackhammer that out. But anyway, you can change the color to be whatever you want. And that's just something small and nice.

So because Interface Builder is an editor inside of Xcode 4, we also have the jump bar. And for Interface Builder, this is particularly great, because I can see the entire structure of my document and make precise selections regardless of what's visible or how things are layered. So I can go ahead and click on the jump bar, and you can see the entire hierarchy of all those toppable objects, and I can even dig down inside of objects themselves. Now, it's really great if I select an object. You can see it's selected in the design canvas. And I can do the same thing with other objects, which is just a nice way to do-- to jump around.

You're going to hear me talk about a couple of different messages about Xcode 4 throughout this session. One of them is we want, in Xcode 4, we want you to be able to get to where you need to go as quick as possible. And we think the jump bar, especially in Interface Builder, really fulfills that.

All right, so I'm going to go ahead and close up some of these views on screen to help with clutter. And just to be clear, when I'm clicking those Xs, they're not deleting them, I'm just hiding them. And there's actually-- the Dock has a little indication of which objects are open.

And you can see there's no little dot next to those objects. Okay, so while the jump bar shows structure, there's another place that shows structure in the Interface Builder editor as well, and that's called the document outline view. To open that up, I'm just going to bring my mouse down to the bottom of the Dock, click on it, and now I have an outline view showing me the structure of my document. Now, the first thing you're going to notice right off the bat is we use the same distinction between placeholder objects and objects, as we do in the Dock.

Again, we want this to be really clear to you, as you're working with your objects, which ones are in your NIB file and which ones aren't. Now, this outline view works just the same as the outline view from Interface Builder 3. So I can drill down into objects. There's that image view that we created earlier. And here's the different pieces of my tab bar controller.

If I click on one, you can see it selects it in the design canvas, and it opens it up. Now, this is the same behavior as the other navigators in Xcode 4. If you make selections, they open in the design area. You'll also notice, however, that we also selected in the jump bar.

So whether I select something in the jump bar or in the outline view, the selection stays synchronized. With a unified selection pattern, you're always able to see what you're working on. And this is the second big message that I want to get across as you guys use Xcode 4. The first one was you can get to where you want to go.

The second one is, once you've gotten there, you can focus on what you're working on. So whether jump bar, outline view or design canvas, we're always making sure you know what you have selected. And also because it's an outline view, I can select multiple objects and drag them around. So I can drag these objects and add them to my view. And I can delete objects. I really didn't want to have this tab bar controller, so I can just delete it.

Now, before I move on, I want to give you guys a little tip. I'm going to give you guys a few little tips and tricks as we go through this session. And the first one is, every object in Interface Builder has a name. That is just inside of your NIB file when you're working with it. To edit that label, I can use the outline view, just click once, and now I can rename the object. Now, this is a small thing, but really nice when you're working with a NIB file with multiple people.

So you might have a bunch of controls, and you can label them so that people who aren't as familiar with the project, when they come onto the project, can see exactly what each control is for. So image view is not as descriptive as I want it, so we're going to call this the recipe image.

Horizontal slider, well, it is a slider, but it's also my font size slider. And our TextView, yes, it's a TextView, but it's also for my recipe steps. So that way, I can just know what I'm working on. Okay, I think I'm done working with the structure of my document, so I can go ahead and close her on up.

Okay, so once again, I have a mess of objects in my view. So let's go ahead and start arranging objects and working with them within my view. Again, those of you who are familiar with Interface Builder 3, this is going to act the same way as you guys know and are familiar with. So I can select an object and resize it. Now, my colleague, Rob, told me to make it 105 pixels for those images, so you see that little measuring indicator. I can see exactly how big to make it. And I can drag objects around.

And what are those blue lines that keep showing up? Each of our platforms, Mac OS X and iOS have a set of Human Interface Guidelines that determine how you guys should be laying out your interfaces, and in particular, how far objects should be from each other, how far a UI slider should be from a TextView, and how far a TextView should be from an add banner view, and different things like that. We've built these interface guidelines into Interface Builder in the form of these guides.

And we've also added additional guides that you can snap your objects to align them, center align them, and other things like that. So that's what these blue guides are. And I'm going to go ahead and snap my money-making tool down in the corner in the bottom of my view. And, of course, I can resize my TextView, as well.

And you can see those guides popping up and showing me exactly how far things should be from the sides and from other objects. And that way, you don't have to worry about pixel perfection. Rather, we're handling the pixel perfection for you, and your apps can look as best as they can.

Where did my slider go? That's the question. And this is an excellent example where we can use the jump bar to find something that is being hidden by something else. And thankfully, since I named it in the outline view, I know exactly what this view is for. This is my font size slider. When I select it, you can see it's hiding behind my TextView.

I can either drag the object, or, of course, I can use key commands. So we're just going to bring this guy down, center him and resize him. Just make sure our TextView is also resized correctly. And awesome. Our interface is laid out, and we're ready to go with the next step.

So the next thing I want to talk about are actually changing and modifying some of the attributes of our objects. And for this, we're going to use the inspectors up in the right corner. Now, there are a couple of, a number of Interface Builder specific inspectors, and they start with the third one, the Attributes Inspector.

So I can click on it right now. I have my mouse over it. But I want to show you another little tip and trick of using Xcode 4. All of our navigators, inspectors and libraries have key equivalence that you can use to jump to the thing that you need.

So the pattern is some sort of modifiers, and then a number to indicate which sequentially, which navigator or inspector or library you're talking about. So our Attributes Inspector is the third one. And I'm going to hold down command and option and hit the 3, and it's going to jump right to my Attributes Inspector. So it's a great way to just navigate very quickly.

Okay, so inspectors work the way that you would expect them to work. But we've made a few improvements with Xcode 4. First of all, our inspectors are resizable.

In addition, if I have it smaller and I'm working with this text field, we actually resize the text field based upon how much text is in it. So you can see, as I type here and add more text, this is a text field that resizes. It will automatically resize to fit my content. A really nice way to always be seeing what you're working on.

And, of course, I can change other attributes like the text alignment. And as I make these changes, you can see they're reflected immediately in the design surface. I can also change attributes that modify the behavior of the object I'm working with. So, for example, I can turn on data detection for links.

Now, something subtle just happened. And bonus points for the person who can figure out what that was. Let me show you again. So I'm going to uncheck links and recheck it. Something really subtle just happened. Did anyone see it?

[ Inaudible ]

Ah, I heard it. This little warning icon appeared. What's up with that? It's very common for you, as developers, to be targeting multiple versions of iOS or Mac OS X as you're developing the interfaces for your applications.

Now, as you all know, we're constantly bringing out new APIs for each interface element that only apply for certain versions of those operating systems. For Interface Builder, we always show those for you. So if you happen to be targeting let's say iOS 3.0, and you're using iOS 4 features, Interface Builder will say, hey, that's not supported.

This way, you can see in the editing tool versus that runtime when things don't work. Now, I want to see exactly what this warning is. And so I can jump right to it by just clicking on the warning icon, and it takes me right to the issues navigator.

Again, we're trying to help you get to where you need to go as quick as possible. So clicking on this and going to the issues navigator doesn't just work for Interface Builder warnings, but it works for any sort of warnings or errors you have. So if you're working with your source code and you build, you get an error, you can jump quickly to the issues navigator just by clicking in the activity view. So the warning that I'm given is unsupported configuration, data detection and editability. Oh, that's right, I forgot. UI text fields that are editable can't have data detection. I should have remembered that. But that's okay.

If I just uncheck editable, you can see our issue goes away. And I'm going to go ahead and re-close that. So Interface Builder, because it's a part of Xcode 4, uses the Xcode 4 issues infrastructure to present the issues that come up in your interface side by side with all the other issues that are in your workspace or project.

Okay, so these are pretty common attributes that I'm setting, but there are a few special ones to Interface Builder. So if I have this image view selected, I might want to make sure that I have the properties on this image view set correctly. So I want to add an image to this image view to preview these to make sure I've got it all right.

If I go in the inspector and right click in this comma box, I can see a list of all the images in my project. Another place that I can see this same data is in the Media Library. The Media Library will show me all media resources in my project, and particularly which ones apply to the editor that I'm working with.

For Interface Builder, this is images. Now, I want to add a steak image, because I really like steak, and I'm looking forward to enjoying one later today. And so I can search for my steak image and just drag it on out and drop it in my image view.

Now, I'm really glad I did that, because, as you can see, the scaling isn't quite right. So I'm going to go up here to my scale mode and go to aspect fill. So the Media Library presents you an opportunity to add resources, either directly, to your interfaces, or inside of other objects that accept resources, like image views and buttons. All right, so that's pretty much the Attributes Inspector. Let's move on to inspector number two, which is the Size Inspector.

The Size Inspector will show me different attributes about the geometric characteristics of the object that I have selected. For example, size, position. With Xcode 4, we've added a little helpful menu in the Size Inspector, so you can quickly do basic geometric operations. So, for example, I can fill the container horizontally, and you can see that text field then takes up the whole space of my container horizontally.

We've also brought over the same sort of controls that were present in Interface Builder 3, like auto resizing rules. What are auto resizing rules? A lot of time, we have containers that have sub views. And in this case, we have that exact thing, we have some containing view for our View Controller, then a bunch of sub views inside of them.

Now, we can rotate the phone or we can rotate our iPad or we can, you know, change the attributes about it and make this view smaller or larger, and as the view changes its size, its containing view, we want all of our sub views to change accordingly and automatically. To do this, we use auto resizing rules. Let me show you how they work in Interface Builder. With this control, I can see-- I can actually set the auto resizing rules and see a preview of what they're going to be like.

On the outside, we have these little beams, and we call them anchors. And this simply means be a certain number of pixels from one of the edges. So, for example, I want this TextView to always be a certain number of pixels from the top and bottom, whatever I have laid out. I'm going to show you a third little tip and trick.

One way that you can see exactly how many pixels you are away from other objects is, if I hold down the option key, something is selected, and I move my mouse over other objects, it will actually show me little indicators of how far away I am from other objects. So this was present in Interface Builder 3, but it's even better in Xcode 4. And you can see that I'm, you know, a certain number of points away from other objects. So this is what these anchors mean. It's just be that number of pixels away.

So for the TextView, it would be, okay, be 113 from the top and 80 from the bottom and 0 from the sides. These arrows, of course, indicate growing vertically or horizontally as my superview changes its size. So we're going to want to change these for all of our objects. So for the image view, I want it to stay along the top and stay 105 pixels. And for the banner view, our moneymaker, I want to keep it in the bottom there. And then our slider, we'll also want to keep it in the bottom, as well.

So I've edited my auto resizing rules. And one way I can preview them is to launch my app and see what they look like. But I can actually preview them right in Interface Builder. And for this, I'm going to go back to the Attributes Inspector and explain another set of attributes for our iOS objects.

For top-level iOS views, we have a property called simulated metrics. Now, what exactly is going on with these simulated metrics? It is often the case that we have a View Controller that we're designing our view for. And that view is going to go inside of some other View Controller, like a navigation controller, a tab bar controller, something along those lines.

We can use the simulated metrics to see exactly what it's going to look like inside of our containing superview. And it also will allow us to make-- also choose the exact right size for us. So you, as developers, don't have to know, well, the tab bar is 52 pixels, and so I need to make my view 300, we just do that for you right inside of Interface Builder.

So, for example, I can add in a top bar, which is the navigation bar, and you can see that our view sizes accordingly. Well, how did it know to resize like that? It looks perfect. This is exactly what I want. And this is us previewing those auto-resizing rules that we set in the Size Inspector. I can also preview those same auto-resizing rules by switching the orientation. So I can switch from portrait to landscape and say, ah, that's exactly what I want my interface to look like when I flip my phone into landscape mode. And we're going to put that back.

All right, so that's the Attributes and the Size Inspector. The next inspector that would be present if we were using a Mac OS X document would be the Bindings Inspector, where you can set the Cocoa bindings for a given object. If you're looking for more help on that, there's plenty of documentation to take a look at, so you can get help with Cocoa bindings. Let me move onto the next inspector, the Connections Inspector. The Connections Inspector will show me all of the different connections that I've made to my different objects.

And I can even make connections directly from here. And you can see that I have this view owl that I made earlier. The last inspector is the Identity Inspector. The Identity Inspector will allow me to set certain Interface Builder-specific properties, like that label I was telling you about, and other things like that. But most importantly, it allows me to set the custom class of an object.

Now, this inspector works just as it did in Interface Builder 3, with a little addition, this arrow. By clicking this arrow, I will be taking to the definition of that class that was typed into the custom class field. So let me go back here. And this doesn't just work inside of the Custom Class Inspector. But this works anywhere inside of Interface Builder.

If I select, for example, UITextView, if I go under the navigate menu, I can do jump to definition and jump right to the definition of the object that I have selected.

And, of course, this also works with my custom classes. So I have my recipe detail View Controller that was created for me, set on the File's Owner, and I can jump right to that, as well.

All right, let's go back and keep looking at some stuff here. So that's the Custom Class Inspector. Now, there's one more thing I want to talk about in relation to custom classes, and that is what does setting the custom class actually mean? Well, it has two meanings. Depending on whether or not the object is in your NIB file or outside of it, your NIB file, like one of those placeholder objects, so let's start with when it's a placeholder object like File's Owner.

When you set the custom class on an object like File's Owner, again, you're not actually changing the class of this object. At runtime, it's still going to be whatever it happens to be. What you're doing, though, is you're indicating to Interface Builder, and promising Interface Builder that at runtime, the File's Owner is going to be of this type. So why would you want to do that? And the main reason is for connections.

With Interface Builder, knowing what class your objects are, we can recommend actions and outlets to you automatically to make sure that you don't accidentally connect something that you didn't mean to connect. So that's the first meaning. The second meaning that setting a custom class has is for objects that are actually physically in your Interface Builder document. So let's say that I have a slider, and I set the custom class to Kevin slider.

Because we're working with real objects in Interface Builder, we don't actually have the code for Kevin slider that's running, executing inside of Interface Builder, but we do have the actual system object, UI slider, inside of Interface Builder. So when I save my document on the UI slider, it's going to call encodeWithCoder, using the NS coding methods. So that's going to save the data for the slider, things like the minimum position, the maximum and other things along those lines. But it's also going to save, along with it, the string that represents the class that I typed into the Custom Class Inspector.

In this case, it's going to say Kevin slider and put that right next to the data for UI slider in the archive. At runtime, when I load up that NIB file, it's going to say, hey, there's a slider, but hey, you've set it up to be Kevin slider. So instead of calling UI slider initWithCoder, it's going to call Kevin slider initWithCoder.

But because Kevin slider is a subclass of UI slider, we'll get all of the customization that we made in our UI slider over in Interface Builder for free, load it up into our own class of Kevin slider. So that's what setting the custom class means for both placeholders.

It's not changing the class, just you indicating what type of class the object is, and then for objects in your interface, it's actually changing the class, and at runtime, it will be that type. So that's what setting the custom class really does mean. All right, so those are the Interface Builder specific inspectors. There are two more inspectors that apply to Interface Builder. The first is the File Inspector, and this will show you all the properties and attributes that are present in the rest of-- for all the other files in Xcode 4.

But it will also show me a few Interface Builder-specific properties, like development and deployment targets. And this is what I was talking about earlier, where you might be targeting a certain version of iOS. And this is one place you can say that for Interface Builder, to make sure that we present warnings for you when you're doing things that don't make sense for the current target or current OS that you're targeting. And there's other things in here. If you want to know what those are, please take a look at our documentation.

The last inspector is the Quick Help Inspector. With Interface Builder as a part of Xcode 4, we can bring you documentation right to your fingertips. No matter what object I have selected, I can get documentation for that object. I can see where it's declared, an abstract on how to use it. I can even get sample code from right within Xcode to jump to the object that I'm interested in and see how it's used. And I can jump right to the documentation just by clicking on UITextView class reference.

So Quick Help is documentation at your fingertips. All right, so that's just a really brief, high-level look at Interface Builder in Xcode 4. And now we're going to go back to slides and talk about something else. So let's just recap one more time before I jump into what's next what you guys just saw. So you can look at the structure of your Interface Builder document through the Dock or the outline view or the jump bar and quickly jump to what you need to get to.

The design canvas is an infinite scrolling canvas to allow you to see the interface that you're working on all the time and arrange objects how you want to arrange them in your working area. Our inspectors allow you to modify attributes of the objects, and will also bring you documentation right to your fingertips. And finally, you can use the objects and media tab to add new Interface Builder objects and add media to existing objects or directly to your interfaces. All right, so that's a look at Interface Builder.

The next thing I want to talk about is what the integration of Interface Builder into Xcode means when it comes to making connections. With Interface Builder as a part of Xcode 4, we now have unprecedented knowledge about your source code. And I think we've taken advantage of that with Xcode 4.

Before I jump into that, though, I want to take a second and talk about a particular object that often can be very challenging to get right. And once you understand this object, it's kind of the lynchpin of Interface Builder. Once you get it, everything else just kind of clicks.

So let's take our placeholders, and we're going to look at File's Owner. What exactly is File's Owner and how do you use it and take advantage of it? When you save your Interface Builder document, you're just saving bytes to your hard drive, and you're running applications. Some object has to take the bytes of the disc and actually create your interface and insert it into the rest of your object graph.

Now, there are particular classes that are very good at reading bytes off a disc and actually creating these objects and will use those. But the object that says, hey, go and actually instantiate this NIB file is called the File's Owner. Because it creates the NIB file, it's not actually in your NIB file. As I've been saying, it's a proxy object inside of your Interface Builder document that you can reference. And at runtime, the actual instance gets filled in.

Now, what's most often the case is that this object is one of your custom controller classes. If you've got a subclass of UI View Controller, for example, it would be your UI View Controller subclass. So as I said, there are classes that actually are in charge of instantiating the actual NIB file. And it depends on which platform you're on, which class you'll use. For example, on Mac OS X, you'll use NSNib. On iOS, there's a new class, as of iOS 4, called UINib.

Now, both NSNib and UINib are special, because what they'll do is automatic caching of Interface Builder documents as they're loaded in. So let's say, for example, you have a UI Table View Controller and you have a custom cell and you want to load that cell into your table view and use it as the cell for your table view. So one way to do this would be every single time you dequeue a new cell, you call NSBundle, load NIB name, and you give it your NIB name, and you load in your cell.

However, each time you call that, you're actually going to the hard drive and instantiating that NIB file over and over and over again. With UINib, you go to the disc only when it needs to. And the rest of the time, it keeps that Interface Builder document, that NIB file in memory. So as you ask for it over and over and over again, it's actually only coming out of memory and not going to disc. Now, as my colleagues, Barry and Rob, showed yesterday in their demo, this can have really, really drastic increases in performance.

And so we highly recommend that if you guys are loading table view cells, for example, for a Table View Controller from a NIB file, the transition to using UINib, as you'll see drastic performance increases, actually over two times, as good performance. And if you're on either platform, of course, you can always use NSBundle. And there's different methods for each platform to load your NIB file, as well. Each one of these classes has an instance method or a class method for actually calling to instantiate a NIB file.

And it takes an argument. And that argument is called owner. And this is the actual instance of the File's Owner that's going to get filled in. So like I said, you have your UI View Controller subclass. And it's going to use UINib, for example, to load that NIB file. And to set that File's Owner, it's going to pass itself in as that owner argument. Let me show you an example.

So here's my UI application running. And this is just after I've tapped it on the Home screen. And it's going to load in that main window NIB file, and it's going to do something along the lines of NSBundle, load NIB name. And then you can see that owner argument, it's going to pass itself in as the owner.

So there's my NIB file. And the contents of that are going to be my app delegate, my main window, and then some View Controller that I'm going to add to my window. And then, of course, is that File's Owner proxy object. Now, we know that UIApplication has that delegate outlet that is set for you in your main window NIB file. And I'm going to show you how that gets connected at runtime.

All right, so UIApplication is calling on NSBundle, in this case, to load up that main window. So File's Owner becomes the application instance itself. And when it does that, UINib or the other NIB-loading classes will then make those connections for you. So the connection that we made in Interface Builder for the delegate, for our app delegate in main window, will get connected to the exact object that I need to at runtime.

And now you can see that our interface is now grafted into our object graph. Well, let's look at a second example. So we have that Root View Controller, and we're going to say, hey, View Controller, go add your view to our window. Again, the View Controller has a view, a NIB file, has a view inside of it.

And again, it's going to call something like NSBundle or UINib, load NIB name to the name of the NIB, and then it's going to pass itself in as the owner, as well. You can see looking inside of the View Controller NIB file, we have that File's Owner placeholder and the actual view itself.

UI View Controllers and NS View Controllers have an outlet called view that connects to the view that the View Controller is going to be in charge of. So when it gets loaded, you can see that the File's Owner is the View Controller, and it makes the connection at runtime. And once again, our view is now in to our object graph.

Because you have your code that's loading your interface, and you're doing it through File's Owner, the File's Owner really becomes the conduit between your interface and the rest of the object graph. An Interface Builder document by itself is not connected with the rest of your objects. But through File's Owner and through connections, you can access the objects that are in the rest of your object graph at runtime. And that's the role of the File's Owner.

Okay, so now I want to do another demo. As I said, this session is demo-heavy. So for those of you that are familiar with Interface Builder 3, you know that are three different ways of making connections within Interface Builder. First of all, you guys can use the Connection HUD, which is that little panel that pops up that allows me to make connections, I can use the Connections Inspector, which I've already shown. Or third of all, I can hit the control key and drag directly between objects to make connections. With Xcode 4, all those same methods are available, and we've made them just as easy as ever before.

So I need to connect up all the objects here in my interface, and I want to pick up this connect up this add banner view. So I'm going to go ahead and right click on my File's Owner and show you method one of making connections using the Connections HUD. So there's my banner view outlet. I can just click and drag and connect it.

Now, as I'm making this connection, you can see it's not letting me select other objects that aren't add banner views. And so Interface Builder will do automatic validation of where you're dropping to make sure that the connection makes sense given the type of the outlet and the type of the object you're dropping onto.

I can also select File's Owner and go up to the Connections Inspector, and you can see I see the same things as the Connection HUD. I can also delete actions or delete outlets and actions, I can see what they are, and, of course, I can remake them. So those are methods one and two of making connections just as easy as in Interface Builder 3. I can also use control drag to drag directly from an object to another object in my code.

So I'm going to connect up to this font size slider and hold down my control key and drag over to File's Owner, and I can do change font size. Really, really easy to make connections between objects in Interface Builder. Now, I posed this question earlier. Why do we make connections? And the answer is that we want to connect our interface to our code. So I want to see my code.

The Xcode Assistant is the right tool for this job. So I'm going to go ahead and open up to Xcode Assistant by clicking the second editor right here. And now I'm using the Xcode Assistant. And you can see that my interface code, and the rest of my code, is right next to the interface that I'm working with. Okay, so every different Xcode Assistant, whether you're working with Source Code or Core Data or Interface Builder, there's a different set of categories for related content that you can see. Let me explain what Interface Builders are. First of all is the top-level objects.

The top-level objects will show me all of the classes for my top-level objects, starting with the File's Owner, which, of course, is our recipe detail View Controller. But you can also see I have a UI view in there, so it's showing me the UI view class, as well. Now, this particular category does not track with my selection. As I select different objects, you can see that it's not changing over here. And this is to make sure that you can always get to the source code that you're most interested in.

But there are particular categories that do track with your selection. The first one is outlets. Outlets will show you all of the classes of the objects that you have outlets to. Now, in this demo, we've made two outlets. We've made the connection to the add banner view. And, of course, the view for the View Controller.

And so it's showing me both of those classes right there. The second category that tracks with selection is, of course, the class itself. This is just a custom class or the original class of the object that I have selected. And you can see, as I change the selection, it's going to change the class for me.

The third category is sent actions. And this will show me all of the classes that I have sent actions to. We take it a step farther, though, and we not only show you the class, but we actually show you the action that you've connected to directly in your source code.

The same thing works with outlets. If I select this add banner view, I can go up and select the last category here, referencing outlets. And, again, it does not show me just the class that has an outlet to me, but it actually shows me the outlet that I'm connected to selected right there in code.

The last category is called Automatic. Automatic is another one of these selection-tracking assistant modes. What this does is it picks the correct related data that we think is most interesting or most relevant for the object that you have selected. So, for example, I have this add banner view selected.

This recipe detail controller has an outlet to me, so that's a great choice to show here. If I select the slider, it says, well, you have an action that you're sending to it, so I'm going to show that. And then for other things like File's Owner, it will just show me the class. So Automatic will help you see exactly what it most pertinent for the object that you have selected.

Now, as I said earlier, Xcode and Interface Builder are integrated now. And so we have unprecedented knowledge about your source code. So I can just go into my source code right next to my interface, and I want to say, I want to add an outlet for that slider.

So I can just go in here and type in UI slider. And this is my font size slider. I can save the file, go back to Interface Builder, and I can just control drag from File's Owner and connect my slider. Very, very quick and easy with source code right there and interface right next to it.

But we've taken it a step farther, and we think that we can make it even easier to make connections. Instead of having to think about which objects to go through to make my connections, wouldn't it be great if I could just connect right to my source code? It's right there. Well, I haven't yet connected my outlet for this UITextView.

So I can make the outlet by holding the control key, clicking on UITextView, dragging over into my source code and making the connection to my recipe steps outlet in one fell swoop.

But I can make it even easier. I might not have made an outlet yet for this image view, for example, with the tasty image of steak.

So I'm going to hold down the control key and drag over. And you can see I've got an insertion indicator. I can insert an outlet right here. I can insert an instance variable outlet, or I can even insert a property outlet. We're going to do that. When I let go, this little panel pops up, and you can see that I can just type in the name right here. So this is going to be my recipe image view. Hit return.

It inserts the code and makes the connection.

And we feel this is a really easy way to think about your interface right next to your source code. It's the same thing. All right, now, let me be clear about one thing real quick. When you insert property outlets, sometimes based upon the different settings in your project, you still need to do a few more steps. So, for example, I have an iOS project, and I'm going to target, let's just say, 3.0. So I have properties, but I still need to synthesize my property, and I need to clean up after myself.

So I'm going to switch top-level objects over to manual, and just switch to my implementation. So we're going to synthesize that image view I just added, image view, and you can see it's auto completing for me. It helps to hit return. And then I can also clean up after myself.

The recipe image view, release. Now, again, depending on the different settings of your project, you might not have to do any work. For example, if you're on Mac OS X, running under a garbage collection with the new non-fragile ABI, you don't have to synthesize or clean up after yourself. But for most cases, you'll at least have to clean up after yourself in Dealloc. Or if you're targeting not iOS 4, and you're not using the non-fragile ABI, you'll need to actually synthesize your property, as well.

Okay, so I want to insert now one more thing to do, and that's, as I change that font slider, I want to insert the code to change the font size. So driving the source code doesn't just work for .h files. It works for .m too. I can hit cold control, drag from the slider.

Again, I've got an insertion indicator for my action. I let go and I'm going to say change font size. Hit return and we insert the code and make the connection automatically.

And so now I'm ready to go ahead and just start writing my code. And change font size.

So it's very, very easy to have your source code open, drag in and create outlets, switch over to implementation and drag in actions, and you're connected and ready to go faster than you've ever been able to before. Okay, so let's recap what we just saw on this demo.

The Xcode Assistant will show you your source code right next to your interface. And based upon which category you have the Assistant in, or which mode, you can see different types of related content based upon your selection or your top-level objects, so that your source code, again, is not separated from your interface, they're right there next to each other. We make connections to bridge objects and to bridge between our source code and our interface. With new with Xcode 4, we've made it easier than ever to connect interface to source code using the drag to source code method.

You just hold down your control key, drag from an Interface Builder object, and you can insert source code right there. All right, so today we've taken a look at Interface Builder, now a part of Xcode 4, and gone pretty much across the entire app looking at structures and inspectors and libraries and what's new.

And, in particular, we've looked at what this means for you guys in terms of making connections to source code and how easy it is now with Xcode 4. If you want more information, you can always contact our Evangelist, Michael Jurewitz. You can also check out our Dev Forums online at devforums.apple.com. And you can get all kinds of help on there.

As engineers, we actually do look at those, so we encourage you to post your questions, and we'll be on there to answer those. For those of you watching the videos right now, hi. And you might want to check out some related sessions. There is one yesterday in the mission about designing applications for iPhone and iPad using Interface Builder. I encourage you to check that out.