Good afternoon. That always surprises me. My name's Kelly Keenan, and I'd like to welcome you today to Designing Applications with Interface Builder. The first thing I'd like to talk about is why are you people here? Make money. Great. How many of you are new to our platform? A lot of you. Okay. How many of you have not really ever used Interface Builder before?

Okay. This session, this is for you. The rest of you, hopefully you'll find some secret information that you didn't know about and that, you know, I can give you some pointers that maybe you didn't catch on to before. But this is really for the new people. So all of you probably have some idea in your head of an application you want to build.

And so you want to know, how do I build an interface for that application? Now, your interface might be something that's really simple, very small, not a lot of controls, or it might be something that's very intricate. And the answer to the question, how do I build an interface, is the same for both of these. And it's the same whether or not you're building it on Mac OS X as it is for if you're building it on the iPhone. For both cases, you want to use an application called Interface Builder.

Now, we all know that you can build your interfaces by writing code. And I've written a sample here that just creates an image and creates a button and adds that image to a button, sets some targets and some actions, and then adds that button to a window. And we've probably all done this at some point in some language. This is Objective C. And all of this code that I wrote creates a masterpiece that I would like to call Info Button on a View.

You know, it's very formulaic. And wouldn't it be nice if there was an application that would do some of that formulaic stuff for you? So we have Interface Builder. Interface Builder, if you're new to the platform, has been around for a decade and a half. We've been using it to design Mac OS X applications since Mac OS X started and Next applications before that. So it's not a new application. It's new to using the iPhone platform. Interface Builder itself is an application that we use to design interfaces by dragging and dropping controls and views, configuring the properties for those controls and views, and making connections between those elements and your code.

We use this so that creating something as simple as my info button on a view uses this much code. Because really, you don't want to be writing that code. You want to be writing the code that makes your application unique. Okay? So let us do this kind of stuff. Now, I'm not telling you that you don't have to write any code. You still have to write code.

And Interface Builder works hand in hand with Xcode to create your interfaces and connect it to the code that you've written in Xcode. By the end of today's session, you should have learned how to create and customize an interface. You should have a good understanding of how Interface Builder works with Xcode to give you a full experience. And how to connect your interface to the code in your project.

So let's start by creating and customizing an interface. In Interface Builder, Can we go back to the slides? Thanks. Not quite ready for the demo. There are four components I want to talk about today in Interface Builder. The first is the document window. This is your interface. This contains all of the elements that you're using to create your interface. Okay?

Now, we also provide the library. And the library contains all of these preconfigured controls and views that we provide for you. And you can drag and drop those controls from the library onto the document window or onto the design surface. So the design surface is where you're going to drag around your views and controls so that your interface looks just like it will when you build your application.

This is great for those situations-- I know you've all done this-- where you've changed the pixels for different widgets because they don't quite line up. And then you recompile the code, and you look at it again. And you change the pixels again, and then you recompile, and then look at it again. This way you know that things are lining up because you can see exactly what it's going to look like when you build your application.

Now, we have all those pre-configured controls, and when you're ready to change them to make them more unique, we have the inspectors. And this is where you go to change all the properties and configure your controls and views to look and act the way you expect them to. Okay. So these four components, the document window, the library, the design surface, and the inspectors are the key components to Interface Builder. And the best way to understand them is now to look at them in a demo.

So I'm going to start by creating a new project in Xcode. And for this example today, we're going to create a new iPhone application. Now, everything that I talk about today, even though I'm showing you an iPhone application, is applicable to iPhone applications and Mac OS X applications. All of the concepts are exactly the same in both.

If you look in the Groups and Files view of your project, you'll find our main window. And this is what we're going to work with today to create our interface. So if I double click this, oops, that was a little slow, it opens up Interface Builder. And you'll see two of the components I just talked about, the document window and the design surface.

In the document window, there's the files owner and first responder, and these are things that you need to know about, but they're a little beyond what we're going to talk about today. So I'd like to invite you to come back on Thursday at 9 a.m. And our Mastering Interface Builder session will talk more about the files owner and first responder and how to use them in your application.

What I want to talk about right now is the window. Now, this window here in the document window is the same window that is my design surface. And if I close the design surface, I can always get back to it by double-clicking on my window. Now, kind of like the masterpiece I showed you earlier, this isn't very exciting. So we want to add some controls to it.

To add controls, I'm going to go to the Tools menu and open the library. This is where all of those preconfigured controls and views I told you about, this is where you find them. At the top of the library, you'll see that there's an outline view. Which groups our controls and views and all of our interface elements so that you can easily find what you're looking for. And it groups all the related items together.

In the center, you'll see all of the elements that we need to use. And each one of them has a short description. So you can see exactly what they do. And if you hover over any of the elements, you also find a tooltip that gives you the same short description. At the bottom is a longer description, more detailed.

So if the short description isn't quite enough, you can look here. And if that still isn't enough, don't forget that you can access all of the documentation as well, the full documentation. The very bottom, There's an action menu where you can go to configure how the library looks. So, for example, I like to set it up so that I'm just looking at the icons because I've used this for so long that I know what each of the icons does and what they all represent for elements.

We're going to keep it on icons and descriptions for now. Now, I said icons, and I probably shouldn't have used that word to describe the items in the library because these are actual real controls. They aren't really just pictures of controls. When we drag them and drop them onto our design surface, You're going to see if I select the navigation bar and drag it onto my surface, I get an actual navigation bar. And I can place this wherever I want to place it in the design surface.

The application I want to build for you right now is just a simple web browser. You all have an idea of what a web browser is and the kind of elements we need to create one. For example, in my navigation bar, I'm going to want a text field to be able to enter a URL. So if I use a search field in the library, I can search for text field. And I can drag the text field out and drop it onto my interface.

Another important component to my web browser would be, say, a web view, right? That might be particularly useful. So I can search again for a web view and drag that out. And notice that in Interface Builder we do a lot to try to resize things to exactly the size you need. We also have these things called guides. So if you can see the blue dotted lines as I move the web view around.

The guides are there to help you align all of your elements. Like I said before, if you've tried to do this in code before, it can be somewhat tedious to do in code. Interface makes this really easy for you to be able to align things in the center or align them with other elements that are on your page.

You'll also notice when you do this yourself, you'll feel the elements snap to the guides. And I can't really show that to you here because it's kind of, you know, it's hard to show. But once you try this on your own, you'll see what I'm talking about. Okay, so I have a text field and I have a web view. I'd also like to go back and forward. So let's add some buttons.

Oops. So this is where some of that -- the short description comes in really handy. I have a couple different buttons that showed up when I said button. And in this case, the bar button item is useful for UI navigation item. So I'm going to use that. And if I drag it out, Interface Builder is showing me where I can drop this button. So I'm going to add one to each side.

Now, in my design surface, there are certain things I can do to customize my elements in the surface itself. In this case, with buttons, I can double-click on them and change their titles. And for now, I'm just going to use a less than sign to represent my back button and a greater than sign to represent forward. Okay?

Now, it would be nice if I could get this text field to stretch all the way across. And if you can see, it might be hard in the back. There's two small buttons, one on each side, the resize buttons, that I can select and then resize the text field right here on the design surface. Okay, great. So now I have some of the basic items that I need in my interface. And I can go ahead and simulate my interface, and it brings up the iPhone simulator.

I can click on the buttons and I see that they, you know, act like real buttons. And I can click on the text field and it actually brings up a keypad. Now, in my application, I'd really -- since this is a web browser, I'd like to have that go button that you see like when you use Safari and maybe that .com button that's at the bottom. And there's a special web keyboard that I'd like to use. So, if we go back to Interface Builder, I I want to customize these elements that I have, so I need to go to the Tools menu and open the Inspector.

Now, the inspector is broken up into a couple different pieces. We have the attributes inspector. We have the connections inspector, the size inspector, and the identity inspector. And for this demo, I'm going to talk about the size inspector and the attributes inspector. Now, in the size inspector, you see this little animation. And this is a section on auto-sizing. So one of the things that I need to do is my text field, when I rotate my interface, the text field doesn't stretch all the way across. And I'd really like that to happen. So I can select the text field.

And you'll see in the sample animation that my text field is just staying in one place. Now, on the left-hand side, there's four connections you can make to the outside of your widget, and there's two stretchers, vertical and horizontal. And I want it to stretch horizontally. Now, you see the animation stretching, but it's not going all the way across, And so I need to connect it to the far side.

And now when I rotate my view, my text field is going to stretch to go across the entire top of the view. Great. So what else did I want? Well, I wanted that text field to have the go button and the web keyboard. So if I go to the attributes inspector, The attributes inspector set up hierarchically so that I can see what properties go with what controls. And in this case, there's also some extra controls in the text input traits.

And I want to change the type of my text input to URL. Now, all of these properties that we're setting in the attributes inspector are the same properties that you see when you use the APIs to create these elements programmatically. Okay? So anything that you can do in the APIs, we have matching properties that you can set here.

So in this case, I want to set the type to the URL. And I'd like to set the return key to that blue Go button. And I want it to auto-enable when I start typing. Now, another thing I see is up at the top, I have text field properties, and there's a placeholder text. Now, when my mother gets an application like this, she doesn't necessarily know that's a text field. We all have a good idea it's a text field, but my mom, yeah, not so much.

So I want to put some placeholder text in here so that she knows what she's supposed to do with this text field when she gets my application. So I'm going to type in enter web address. And now you can see that the placeholder text is in my text field.

OK. So my interface is looking better, but I'd really like it that sexy black color that, you know, everybody uses. So I want to change. The first thing I want to change is the window status bar. I'm going to change that to the black. And then I also want to change my navigation bar to black.

Now, this is a good time to tell you about the different modes of the document window. So the document window You can see the top-level elements in the icon view. But when you want to dig deeper into the elements that are on your design surface, you can also use the browser mode. Hi, everyone. I'm Kelly Keenan.

I'm the design engineer at Interface Builder. I'm going to talk about how to use the design interface to look through your design surface or you can use the outline view, which I'm going to use right now. So if I just open the window, I can see that the navigation bar is here and I can double click it to select it in the design surface. And once it's selected in the design surface, my inspector reflects what's selected.

Now I can change the style of my navigation bar to black opaque. Also notice that Interface Builder helped me out by changing the buttons so that they're matching my navigation controller and I didn't have to change anything there. Okay. Looking better. Now I want to add a little more to my interface and I'm thinking I really want to stop in a reload button because this isn't going to do me much at the moment. So there's not a lot of room up in this top toolbar so I want to add a bottom -- a bar at the bottom.

I can use the outline view to navigate through here. I couldn't remember what the bar at the bottom was called. I can scroll through and look and say, oh, it was a toolbar. And now when I drag the toolbar out, notice when I bring it into the design surface that it changed to the black opaque color. So again, Interface Builder does what tries to match some of the properties that are similar in your design surface. And I'm going to set it down here on the bottom.

I have a button that's already there. And I'm just going to duplicate that button. And notice that the two buttons are side by side. I'd really like some space in the center. So if I look for a space, I can drag out a flexible space and put it in between the two buttons to change them.

Now I need to change the properties of these buttons. So if I select the first button, I can go to my inspector again to change properties. And I can change the identifier for this property to refresh. So again, if I select the other button, the properties that are listed here are the same ones that are available if you did this programmatically. So I can set this one to the stop.

And another nice thing about the inspectors is we have something called multiple inspection, where if I select both buttons at once by holding down the shift key, I can now change the style of both of them at the same time. So if you have multiple elements on your design surface that you want to change the properties of, you can select all of them and change any of the common properties. So I'm going to change these both to plain.

Now, great, my bottom bar is looking really good. So if you saw Matthew Furlick's demonstration in the developer tools talk yesterday, he dragged a toolbar that was already configured from the library. Now, how did he get that there to begin with? I have this toolbar I might want to use later in a demo.

And so to do that, all you have to do is select the toolbar and drag it back -- well, sorry, I took it off there. Down to the Down in this section in the library, there's a custom objects section where you can put any items that you've configured already.

And so we can drag this toolbar off and just drop it into the custom objects. Okay. It's going to ask me for a little bit of information. So in this case, I'm going to put in web toolbar as the title. Give it a short description, magically without typing much. And a long description. Because you know if I tried to type this right now, I would misspell everything.

So thank you, demo monkey. and When I press the OK button, you'll now see that my toolbar appears in the library. The title I typed in, Web Toolbars, is listed here as well as the short description. And the long description is down here in the detailed description section.

So anytime you have customized objects that you'd like to reuse later, drag them back into the library and they'll be available to you at any time through your process. Great. So I have this great toolbar at the bottom. Now, I'd really like some custom images for my back and forward buttons. So let's go back to Xcode for this.

Now I need some resources, and luckily I thought about my demo ahead of time. And I have a back and forward button that I already created. So I can drag them into the resources folder of my project. I'm going to have them copy into my destination folder in case I delete the originals later. And I'm going to set this to add to my target.

Great, so I have these resources that are now available in my project. Now if we go back to Interface Builder. Another section of the library that I haven't told you about yet is the media section. And in the media section of the library, you'll find all of the resources that are in your project. So you'll see that the back and forward buttons that I added to my project are now available in the library. And I can drag these images out and drop them onto my buttons.

So all that code I had earlier to put a custom image onto a button, I just did by adding these images to my project and dragging and dropping them onto a button that was on my design surface, which hopefully you'll agree with me is a lot easier than writing the code. So let's just simulate this one more time. But instead of simulating it, I'm going to actually build it in Xcode.

I'm going to save it because I forget to do that sometimes. And we'll see now the custom images that I put in, the buttons that I put at the bottom. And if I click on the text field, I get that web keyboard with the dot com in it. And if I start typing, The Go button turns blue. And if I click on it, nothing happens. So we haven't connected anything to code yet. Okay? And that's part of our next demo. So if we go back to the slides.

Okay, so we've created a custom interface. And I showed you four pieces to Interface Builder that you need to know about today. The first being the document window. And this is the starting point for your interface. It contains all of the interface elements that are part of the interface that you're designing.

It's available in the three views, icon, outline, and browser view, so that you can search -- so that you can go through your interface and find some of those elements that might not be easily clickable. And it's searchable, so that when you know what you're looking for, you can just type it into the search field and easily find it. The second piece is the library. This stores all of the pre-configured controls that we provide for you.

It's divided in such a way that you can -- we've grouped the controls so that you can see controls that are related to each other. There's descriptive documentation so if you don't know what a control or an element does exactly, you can see a short description or a more detailed description about that element. It's searchable.

And the library itself is customizable. So you can change it around a little bit as you get more comfortable with using the library and interface builder. And also it's customizable in that you can add any controls that you've created and configured back into the library for you to use later.

The third piece is the design surface where you drag and drop all of these elements and move them around your interface and they'll snap to the guides that are there to help you lay out your interface. And everything you see on the design surface is what you're going to see when you build and run your application, just like we saw in the demo. The fourth piece is the inspectors.

This is where you customize all of the properties of each of the interface elements that you're adding to your interface. They're grouped by type so that you can easily, you know, we looked at just the size inspector and the attributes inspector. And they're divided by inheritance so you can see what properties go with what controls. And it's done that way to help you learn a little bit about Cocoa and what goes with what.

So what properties go with what elements. And it supports multiple inspections so that if you want to change a common property for, you know, a bunch of elements, you just select them all and change them all at once. And we use these four pieces to create a simple interface. And now I'd like to invite Chris Pavicich to come on stage and explain to you how to make connections.

Hello. Good afternoon. Hope you guys are enjoying the session so far. Great demo so far, Kelly. That was an awesome visual start to how you work with IB. So, I'm here to talk to you about connections, and connections are the way you make relationships between objects. It's how you're going to connect the objects you've been working with in IB to the objects that you're going to be working with in Xcode. So, how do I connect this pre-configured interface that I've set up in IB to the source code I'm writing in Xcode? Before we get into that, I'd like to talk for just a really brief second about MVC.

So all of the applications in OS X on-- OS X and the iPhone OS are built around the model-view-controller paradigm. Show of hands-- it's hard to see you guys, but how many of you are familiar with MVC? All right. A pretty good section of the crowd, but maybe 50/50.

So let me explain MVC really quickly. So it's just a way of partitioning the objects in your application into three slices. You've got the model layer that's really the persistent data of your application. You've got the view layer that's obviously your UI. And you have the controller layer, and the controller layers of specific interest in the rest of this talk, because it's really the glue that binds the model to the view. So when the view is clicked on, someone manipulates a control, moves a slider, presses a button, types in a text field, the controller layer is going to need to respond to that and somehow change the model layer.

And when something updates in the model layer, say you get an over-the-air notification that someone's added a new address book card using MobileMe, we need to reflect that in the address book UI. So it's the controller layer that's, again, responsible for noticing that part of the model layer has changed, and I need to take the appropriate action to go ahead and update the view layer. So it's glue.

Okay, so the rest of the talk is gonna be concerned with how we tie the view layer to the control layer, and we do that in IB Making Connections. Kelly showed you earlier how the resources that she added to her Xcode project automatically showed up in IB when she added them. As you would expect, Xcode and IB work together to communicate about resources that are available in your project, about changes you've made to the source of the objects in your Xcode project.

So one of the most important things you can do when you're working with an object in Interface Builder is make sure that its class is set correctly so that IB knows how to ask the right questions to Xcode and you're working with the correct data for the class you're working with.

So it's pretty simple to set the custom class of an object in Interface Builder. Select it in the document window and we're going to talk about one of the four inspector modes that Kelly didn't touch on earlier. And that's the identity inspector. The identity inspector, you can think of it sort of as a view into your class.

It shows that at the top of the inspector, you see what class this object is. And then beneath that, you see the actions and outlets. I'm not going to explain actions and outlets right yet, but we're going to get into that in just a second because they're an integral part of making connections and tying your UI back to your source code.

So the first thing I've got to do, I'm going to go ahead and do a little bit of a test. Amen. When I'm ready to start working with one of my controller objects and making connections, it's selected in the document window. And be sure that the custom class is set.

Now, since we as developer tools engineers want to make your life easier and do-- we want you to do as little work as you have to and just focus on writing a great app, the projects that come out of the Xcode templates have a lot of the custom classes set up already in Interface Builder.

And this one's-- No exceptions. Since Kelly created the project from an Xcode template, the custom class has already been set. But this is something you guys are going to do a lot when you're working with your own IB files. So it's important that you understand how it works.

So if I just start typing a class name into that combo box, it'll autocomplete because IB and Xcode are communicating. It knows about all the classes in my project. And boom, you should see it autocomplete and your class is set. Now IB knows the class of that object and can start asking it about the actions and outlets that are available from that class.

So as I mentioned earlier, there are connections or how you set Make relationships between the objects in Interface Builder and your source code. There are two kinds of connections you need to be concerned with when you're working with IB. The first of these is an outlet. IB outlet's a pretty simple concept. It's just a way of exposing a property if you're using Objective-C2 or an instance variable if you're not yet using Objective-C2 to Interface Builder.

You can imagine in the controller object for the web browser Kelly started to build earlier that when our URL loads and our user's done typing in a URL into the text field, that we're going to need to go make a socket connection, load some content, and then display the HTML that was returned in the web view that she dragged into the user interface. So somehow the Controller object that we're working with in Xcode needs to know about the web view that Kelly dragged in from IB.

So if you see on the top of this slide, and I apologize if it's hard to read in the back, there's a property declaration for a web view. And as this property declaration is right now, this web view won't show up in IB. See the two inspector modes I've got below the code? There's on the right the connections inspector, and on your left the identity inspector. And you'll notice that there are no outlets in either list. Why? Well, because we haven't told Xcode to please tell IB that this property needs to be exposed.

How do I do that? Well, it's pretty simple. I add one keyword to that property declaration called IB outlet. And IB outlet is nothing more than a hint to Interface Builder that this property is important and should be exposed to IB. So you see when I add the IB outlet keyword, Interface Builder refreshes and I now get a WebView outlet in both my identity inspector and my connections inspector. So great. We've got I-Bean knowing that there's a WebView in source code that's going to be provided by this nib file.

So outlets are how you expose instance variables or properties from your source code to IB. Great. So far, I can talk to this web view, but I can't respond to any user input. When Kelly was doing her demo earlier, she started typing a URL in the text field, hit go on the keyboard, and nothing happened. Well, nothing happened because my controller class in Xcode had no idea what to do. It wasn't wired up. There was no connection between my controller class and my text field in IB that responded to any user input. How do I respond to user input?

I do that with IB Actions. IB Actions are used to connect the methods that you write in code to controls in your user interface. So, I I've already written a load web page method that'll go ahead and do all the magic right things that need to happen to load a web page and show it in my web view. But again, if you look at the inspectors, there are no-- my slides are wrong. I apologize. That should be blank. That load web page should not show up yet. And I did a poor job of reviewing my slides.

Once I add the IB action keyword to the declaration for this method, again, just like IB outlet, it's a hint to Interface Builder that, hey, this method is important and someone will want to connect to it. It shows up in IB, and you see that we now have a load web page action showing up in both the identity inspector and the connections inspector. So you've seen so far how to use IB outlet to expose properties or instance variables to IB and how to use IB action, which is a similar sort of keyword for exposing methods to IB. But we haven't connected anything up yet.

How do I make connections between these objects and my source code? Well, I use the Connections Inspector. Making connections is just a matter of clicking and dragging from the connections inspector to the object you want to connect to. For instance, I want to connect my load or my My web view outlet to the web view that Kelly dragged in earlier.

So how am I going to do that? From the connections inspector, I'm going to click on the connection well, and I'm going to drag over to the web view that is in my design surface. It's going to flash to let me know that this is a valid endpoint for this connection.

And when I When I let go of the mouse, you'll see that the inspector updates and shows me on the right-hand side where previously there was a connection well, that now the WebView outlet has been connected to the WebView in my interface. The same goes for setting up an action.

If I want to connect an action, which represents a method, to a control, I simply drag from the connection well on the right-hand side of the connections inspector to the control that I want to connect that method to. So when the user manipulates whatever control, in my case the URL text field, it's going to send my load web page message to my controller object.

So if we could get the demo machine, the best way to learn is to see. So I'm going to finish the application Kelly started earlier by making two connections. So from looking at the user interface that Kelly started with, there's two things I need to do. I need to respond to a user typing into that text field. Whatever URL they enter, I've got to handle that, and I need my load web page method called.

And Once that URL is loaded, I'm going to need some place to display it. So I'm going to need to connect my controller in source code to my web view so that the user can see the contents of the URL that they loaded. Pretty simple, just two things we need to do today.

So I'm going to go ahead and start in Interface Builder. And I'm going to select my controller. And in the identity inspector, we're going to see that-- yep, we've got the right class for this set. Like I said, it was set automatically from the Xcode template. Just a way to save you time, but should verify that it is the right class, and it is. Now, I need to add IB action and IB outlet keywords to that controller object, and I need to do it in Xcode, or I'm going to do it in Xcode. So I need to jump to the source definition for this object. How do I do that?

Select the object in the document window. And in the Help menu, there's an item called Interface for Selection. This will go ahead and jump me straight to the header for this object in Xcode. There's also a shortcut if any of you are power Xcode users or you have never used Xcode before.

One thing that Xcode provides is for you to command, double-click on any symbol within your source file, and it'll jump you to the definition. Well, the same shortcut works in IB. So again, to jump to the source definition for this, I could either say Interface for Selection, or I could command, double-click.

And you see that Xcode jumped me straight to my controller's header. And I need to expose that web view. This is why you never type on stage, folks. And since I'm using Objective-C2 properties, Remember I need to use the IB outlet keyword in the declaration for this property.

So I'm going to go ahead and add that. And you notice there's also my UI window has the IB outlet keyword in front of it as well. So if you're working with pre-objective C 2.0 and you're not using properties yet, you put the IB outlet declaration straight on the instance variable. If you're using properties, you can either put it on the instance variable or on the property declaration. Either which way works. Just you should know that you can do both.

Load my web page. And again, I mentioned earlier that this method isn't going to be exposed to IB yet because it's missing the IB action keyword. So I'm going to go ahead. And change the return type from void to IB action. And since watching me type source code into Xcode is really painful... Listening to me whistle on stage is much better. Sorry, I thought you weren't going to have to watch me write code, but turns out you are.

Demo Monkey to save the day. Hooray, there's my load web page action. And... Need to do a little cleanup. Got to take care of releasing everything I'm responsible for. So great. I've got my load web page method written. And if we switch back to the header, I've got my web view property declared as IB outlet, so it's going to show up in Interface Builder.

And I've got my load web page method with the IB action keyword in front of it. So both of these, the property and the method, are ready to go and they're going to show up in IB. So we're done with Xcode. Go ahead and save. Switch back to IB, and it's time to make some of those connections we talked about earlier.

I mentioned that Xcode and IB work hand in hand, work together. And if you've got your custom class information set up, you see that-- Now in the class actions section of my identity inspector, my load web page method has shown up. And there's also an outlet for my web view.

So I want to start connecting the actions and the outlets up to the actual objects in my UI so that my app does something. So I'm going to switch from the identity inspector to the connections inspector. And the first thing I want to do is connect my web view. So again, from the right-hand side of the Connections Inspector, I'm going to click and drag, and you see this thin blue line come out.

And I don't know if you can see it in the back of the room because it's kind of hard to see, but when I bring the connection over the web view, it highlights and that lets me know that this is a valid endpoint for this connection. So I'm going to let go of the mouse. You see the inspector updated and my web view is connected.

If you're working with a nib you've never worked with before, an Interface Builder document you've never worked with before, and it's already pre-configured, someone's done some work on it, and you're not sure of how it's all connected together and you need a reminder, if you slide your mouse over the connections in the Connections Inspector, you'll see that it actually highlights the web view, letting me know that's the web view this outlet is connected to.

So great, we can now push changes to the UI, but we can't react to any user input yet because we haven't wired up our load web page method. So connecting actions is just as easy as connecting outlets. I'm going to go ahead and click on the connection well.

Drag over my text field. And again, it highlights to let me know this is a valid endpoint for this connection. Release the mouse. And again, my inspector updates and lets me know that my load web page action is in fact connected to that text field, my round style text field.

Cool. So we've accomplished the two goals we set out for in this demo. From my controller class, I now have a connection to-- I have an IB outlet for my web view. And the web view that I designed in the nib is now connected up to that property of my controller object.

And I've got my UI responding to-- when the user types into the URL text field, it's going to call my LoadWebPage method. So we're pretty much done. I'm going to hit Save. Let's go back to Xcode. Build and run. And if the demo gods are with me today, we should have a working web browser.

All right, so let's take a look at what I just did. I'm not going to go head to head with a mobile Safari team, but that's pretty cool. I just built a web browser. It actually works. And I wrote about-- Seven lines of code maybe? And that's a pretty complicated user interface. We should test to make sure it all works.

So, We know the text field worked, we saw that, but none of my navigation buttons work. So I'm gonna go ahead and quit the simulator and go back to IB. Because there are some connections I forgot to make. I didn't wire up any of those controls in the nav bar or the toolbar at the bottom of the window to my controller object or to any other object.

So I can click them until the cows come home, and as you saw, they won't do anything. We've got to change that. I happen to know that the UI web view has a couple actions that it defines that I can connect objects from my nib to. So I'm going to select my web view.

And I see that WebView has four actions: go back, go forward, reload, and stop loading. Those seem eerily similar to the controls I have in my UI. So I'm going to go ahead and connect those up as well. Go back. Go forward, reload, stop loading. So good. We've got every interface element that the user can interact with in this UI wired to something, so they'll all do something. So I'm going to go ahead and save. Go back to Xcode again, build and run.

And let's actually navigate in this web view and see if back works. There we go. It's a little bit slow, but it did work. And does back work? Awesome. So that actually concludes my demo today. If we could get the slides. All right. So we talked about connections.

Connections are the way you relate objects in either within an Interface Builder document or between an Interface Builder document and your source code. So it's all about making connections and it's all about relating things. And there are two kinds of connections you need to be concerned with. IB outlets, which expose instance variables or properties from your source in Xcode to IB. And IB actions, which expose the methods you've written in your source code to IB so you can hook them up to controls.

That actually brings an end to our presentation today. If you have any questions or need more information, please contact Michael Jurwitz. He's our Developer Tools evangelist. And if you need more documentation about Interface Builder, please visit developer.apple.com/documentation/develop ertools/conceptual/ibuserguide. Wow, that's a long URL. But there's great documentation on the web about IB.

And if we've really wet your whistle today and you want to know more about why I wrote some of the source that I wrote or how to do more advanced things with Interface Builder, I'd invite you to join us to our Mastering Interface Builder session. That's going to be in the marina at 9:00 AM Thursday, and it's going to be jam-packed with a lot of really, really cool content.

So if you like what you saw today, please join us Thursday at 9:00 AM, and we'll have tons more information for you. and all of the Interface Builder engineers will be available in labs throughout the week. So please come and join us if you've got any questions, you need some one-on-one help. Be happy to help you.