Transcript
>> Kevin Cathey: 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.
[ Applause ]
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.
[ Applause ]
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.
[ Applause ]
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.
[ Applause ]
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.
[ Applause ]
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.
[ Applause ]
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.
[ Applause ]
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.