And welcome to Interface Builder Techniques. My name is Kelly Keenan, and today I'd like to officially reintroduce you to Interface Builder. For those of you who are new to our platform, Feel free to applaud at anything you like. Anything you don't like, file bugs later. So for those of you who are new to our platform and don't know what Interface Builder is, Interface Builder is the application that you use in order to create your application's interface.

Easy enough, right? We make it easy for you to drag and drop widgets and controls and windows and build panels and everything that you need for the graphical user interface that your application uses. We support both Carbon and Cocoa. And Interface Builder is over a decade old. And you've gotten used to it over the last few years, and we've all come to love it. And this year, we've decided to give it a little facelift. Thank you.

So we've totally stripped out Interface Builder and built it again from the ground up. You guys all know that every once in a while this needs to happen, and a lot of the requests that you've asked for us to do for features we can now do. We are continuing to support both Carbon and Cocoa.

And some of the new features that we're going to go through today, we're going to see how we've updated the document window. We're going to see the new library that we're using and how we've changed the inspectors to accommodate your custom widgets so that you can add your custom widgets into the library and the inspectors.

And there's a whole session on that on Friday morning at 9 that I highly recommend. I'm going to show you the new connections heads-up display. And Chris is going to come up and show you all about Cocoa animations and how you can use them in Interface Builder, as well as some of the other new Cocoa controls.

So like I just said, we're going to do a quick tour of Interface Builder 3.0. We're going to talk about some tips and best practices, and then how to soup up your interface and use all the new spiffy things that AppKit has provided for us. So let's start with a quick tour of Interface Builder 3.0.

The first thing you see when you open up Interface Builder and your nib is the document window. This is where all of the elements of your interface actually come together. It represents the actual nib file. We now have icon, outline, and browser views. And one of the best features that we've added is that you can now search in here. It's been difficult sometimes.

You know how hard it is occasionally to find the things like, you know, the text fields sell inside of a table column, inside of the scroll view, inside of, you know, your window. And now you can just search for those items. Once you've gotten your nib open, the next thing you're going to want to start doing is adding controls and widgets and everything else to your window. Those controls all live in the library.

We've updated, we've given the old palettes a new look by using the library instead. And now, you can also search. So you don't have to try to guess which little icon to click on to find the palette that had the widget that you used last week but can't remember where it was now. We also have made it so that you can customize groups so that you can create a new group, your favorites, and put all of the controls that you're using for your application into that group so you can easily find them as you're working on your project.

We have all the old controls still, so no worries, we haven't lost anything along the way. Text fields, buttons, tables, windows, all of the old things are still there. And we've added some new ones. This is a trick slide. Number one, toolbars, it's not a new control. It's been there for a while, but we finally now have support for it in Interface Builder.

We've added support now for the predicate editor as well so that you can add that to your application. Core Data Entities, if you saw the core data talk yesterday, you saw how easy it is to add an entity and make an interface from your core data entities. We have the dictionary controller and the grid view, which you'll notice that we used ourselves in the new library.

We've also changed the inspectors a bit. There are now five modes. We have attributes, size, connections, bindings, and animations. And we're going to go through each of those in just a second. One of the things that you've been most asking for, though, we finally have, which is you can do multiple selection and now change attributes for multiple widgets all at the same time.

I thought you'd like that one. So the first, the Attributes Inspector, for those of you, again, who are new, once you've added controls to your window, now you want to change how they work, how they behave. This is how you're going to do that. You're going to use the Attributes Inspector.

They're now organized by inheritance. So instead of us deciding that size should go next to title, next to something else, there's actually an ordered flow to it. This also makes it really easy for you to be able to add your custom widgets and palettes into the library. So now when you subclass, you get everything from the superclass already in the inspector for you. And we've added collapsible slices. So if there's pieces of the attributes inspector that you just never change, just close them and you won't see them again. Or if something's really important, you might want to keep that part open all the time.

We've updated the size inspector a little. One of the biggest changes you'll see is for your main window now, you can dedicate where it's going to land in the desktop space, and it's separate from where the window is when it's opened in IB. I know we've all made that mistake where you suddenly throw the window down in the corner somewhere and then you run your application later and you're wondering where that window is.

Now you don't have to worry about that anymore. The other thing that we've added is we've changed the struts and springs around a little bit and we've added an animation so that you can actually see how it's going to affect that control. You don't have to guess anymore and then resize and figure out what actually happened. It's going to show it for you.

So, three other inspectors. Animations, which Chris is going to show you more about in a little bit. Bindings, one of the changes that we've made in the Bindings Inspector is that now you can have more than one thing open at the same time. So you don't have to keep going back and forth and reopening them. And the Connections Inspector. And now one of the new things that we've added is we've added a new Connections HUD. You can still control drag between controls.

But now you can do Control-Click. And Control-Click will give you a list of all the actions and outlets that are available to you with that control. And once you pick that, you drag it around the window and it's going to show you what will actually receive that action or outlet. So you don't have to do as much guessing anymore.

And we think it's a really slick tool. And it's pretty easy to, you know, get rid of, just click the X and get rid of things that, you know, you hooked up by accident or things like that. And I'm going to show you more about this in our demo.

So many of you might know the controller play example. It's in the developer example code. I'm just going to use this to demonstrate some of the things that I just talked about. So let's go ahead and open up my document.nib. And the first thing that we're going to do is-- Look at the library.

So we have all the Cocoa controls that you're used to and they're all separated out. You can multiply select groups that you're interested in or you can just select them all and you can now search through them. So if I want to find all the buttons, these are all the buttons that we have.

Or maybe I just want the array controller and I don't want to have to go looking around for it. The next thing though is my favorite actually, is making a new category. And with our new category, I'm going to put in all of the controls That I need for my application today. So I'm going to throw in the text field and the label and a button and a color well. And I'm going to need an array controller and maybe a data table.

And some different controls for that. And now if I look, I have all of the controls that I'm going to want to use in my application. I don't have to keep searching around for them. So, over in the document window, I've already opened up my window, so it's here.

And I've pre-configured some stuff already so I wouldn't have to go through the whole rebuilding this. And I want to add, oops, I didn't add a checkbox. So let's go ahead, find the checkbox and throw that in my group. So one of the things that I was missing here was the checkbox for the flag.

I'm not going to line it up very well. There we go. Change this to flag. Now something looks funny. Well, all of these other controls, Mini. And I want them all to be regular, so now I'm just going to go ahead and select them all and change them all to regular at once.

Now, the next thing I want to show you is in the document window. Now you can add more than just controls and windows. You can add any view that you are interested in using. So I've already set up a scroll view with a table in it and just placed it in my document window. And I'm just going to drag that right out.

And what I haven't done though is, you can see by the animation it's stuck up in the left corner. And I really want it to expand and be connected on all sides. So we're just going to change the shocks and the struts. The other thing I need to do is I've set all the bindings except for this flag. And so I want array controller selection and I want that to be flag.

Now, I want to, my array controller has a bunch of received actions and I want to connect these to these buttons up here. And so, All you're going to do now is I control clicked, I got this list, and I'm just going to drag all of my connections all at once. So instead of control dragging each time from the array controller, I'm going to connect them all together.

I can also... Once you've moved this window, it's going to stay up no matter what you do. So if you want to keep track of what's connected, go right ahead and leave the window up and just close it when you're done. Otherwise, if you don't move it and say I just delete something, the next action I do makes it hide again. So let's reconnect that. Insert.

And... Doo-doo-doo. So the last thing I want to show you, well, next to last, is searching in the document window. Now if I want to find all the table columns, it's fairly easy just to say column, select all the columns, and do whatever I'd like to do with them. The other thing that you've asked for and we've given you now is the ability to, if you control click on the title bar here, you can now see the ID and the type. of all of the widgets in your window.

And as a finale, the last thing that we're going to do is there's a new menu called the Build and Go in Xcode. And what this is going to do for us is you might be able to see Xcode building at the bottom. And now it's ready and my application's all ready to go. So I've actually built it in, yeah, it's broken. That's the wrong one. Doo-doo-doo. You know what I didn't do? Save. Funny story, I did that when I was practicing too. So let's try this again. I've saved and now it's build and go.

I didn't quit the application before. Blah, blah. Good stuff. One more time. Third time's a charm, right? And here's our new application. Went out of these. Back to slides, please. So that's a bunch of the new stuff that we've added. We have a lot more. And to show you some of the tips and best practices, I'm going to hand it over to Chris Pavicich.

I'm Chris Pavicich. I'm an engineer on the Interface Builder team. In the first section of my presentation, we're going to talk about tips and best practices. I'm going to go through a little bit more into the new features of IB3. And then we're going to get on to the sexy stuff and talk about core animation support in IB3.

So it's the little things in life that make a big difference. Working with IB, you can create really complicated user interfaces. So know your nib. At the bottom of the object inspector, there's a slice in a text field that will let you name your user interface items. And this is particularly handy when you've got a lot of the same element as a top level item over and over again in your nib. So, yeah.

We had a bunch of array controllers in that nib that weren't named very well. We had three different array controllers, and array controller just isn't the most descriptive of labels. So using the inspector, I can go ahead and name the controllers, and you see that. There, now I know. That one does users and that one does groups. Super. Clear to me and clear to anyone else who works with my nibs. There's a new feature in IB3 that will let you add notes to any top-level item in your nib. That's also at the bottom.

That's also at the bottom of the Object Inspector, and it's just a free-form text field. Put as much text as you'd like. And if you tick the Show with Selection button at the bottom of the Inspector, anytime you have your mouse over that element in the document window, your notes will show up as a tooltip. So keep yourself organized, keep your team organized, and get the most out of IB.

So the next hallmark of good design is that simple is beautiful. Small nibs are easier to manage. People new to Interface Builder and sort of new to OS X development have a tendency to create these really convoluted, complicated nibs. I have 7,000 views and 19 windows because I'm not sure how nib loading works. I should keep it all in one because I got one working, so we'll go with that strategy. Avoid that. Keep your nibs as simple as you can.

Work towards, as you would create reusable code, create reusable nibs. If you think a view or a window that you're working on has some potential for reuse, design towards that. There's a new menu item if you dig yourself into the hole where you've got an overly complicated nib and you'd like to break things up.

People would dig themselves into the situation in the past where they would say, I've got this huge nib and it had thousands of hours of work in it and if I went to break it up now, it would just take me forever. We've done the work for you. There's a new decomposed nib menu item in Interface Builder that will break out all of the views and windows in your document into separate nibs and will maintain as much of the document state as we can. So decompose menu items, take your complicated nibs, break them up.

OK, so one of the complaints we hear most about Interface Builder is I'm not sure how to select this thing. I've got this table, and I'm not sure how to get to the table column. As we started working on Interface Builder 3, one of the things we focused on was getting selection to be natural.

So the first thing to remember when you're working with IB3 is click where you mean, and most of the time, it's going to give you the user interface element you wanted. Clicking in a table view won't give you the scroll view around it. It'll give you the table view. Clicking in a column will generally give you the column.

Working with complicated NIBs where you've got a lot of user interface elements in a container can get tricky as well, especially if it's a complicated view. You've got a box inside a tab view, inside a scroll view. So the gesture to drill into those containers in IB3 is just click, wait, click, and that'll let you select into the container at the top level.

And there's also a new gesture in IB3 that we call pop and drag. So if you want to move things out of a container, say you've laid out your user interface and you've gone to design review and said, oh, this is great, but we want it in a box.

So you lay your things out, you embed them in a box, go through a few more iterations, and say, ah, the box was a bad idea. We want to go ahead and take that out. Well, if I copy and paste those things out, it's going to blow away all my connections, and that's bad.

So there's a gesture to help you around that, and that's pop and drag. So select the user interface items you want to remove from the container, and click and hold, and you'll see your UI elements pop up. And then you can safely move them out of the container that they're in, off to another view, off to another window.

I just want to reiterate it again because it's really important to us. Click where you mean when you want to select something. Really, really, 90% of the time, clicking once will get you what you want. If it doesn't, there are some interesting navigation techniques in IB3 to get what you want, and we're going to talk about those in just a second.

Okay, so you can use the inspector to track your selection. I think most people's workflow is to leave the inspectors up all the time. If you're not sure what you have selected, the great place to refer to is the top of the inspector window because it'll always show you your current selection. And there's two modes for selection in IBE3. One is in the document window, the other is in the editor window, both shown on screen here. On the editor window, the cancel button is selected, and the same button is shown selected in the document window.

So we talked about using the inspector to track your selection. And as Kelly mentioned earlier, the inspectors now support multiple selection. And the multiple selection model is that we will show you all of the fields or properties for the UI element selected that we can that make sense.

Kelly Keenan, Chris Pavicich So we talked about using the inspector to track your selection. And as Kelly mentioned earlier, the inspectors now support multiple selection. And as Kelly mentioned earlier, the inspectors now support multiple selection. It's going to be a particular property might be disabled. If you're not sure how to get to the next item in IB, use the tab key, tab, cycle, selection, hold it down and it'll cycle through and you'll actually go all the way through your entire document.

So there are some new menu items in IB3 for navigating around if you want to inspect the current selections, parent or child or sibling. Those are in the top level menu. And there's a pop-up on the right-hand side of the HUD, the Connections HUD that Kelly talked about earlier, that'll let you change your selection. Say you selected a button, and what you really meant to edit was the button's cell.

On the right-hand side of the HUD, there'll be a small pop-up that will appear that'll let you go about three user interface elements up or down in the tree. So if you bring up the HUD and you found, oh, I've selected the wrong thing, you don't necessarily have to go back, bring up the HUD again, select what you wanted to. It's right there on the right-hand side. There's a small pop-up menu.

So I want to talk about the effects of moving versus copying in Interface Builder. Moving things, as I mentioned earlier, preserves all their attributes and all their connections, whereas copy, cut, and paste preserves the attributes but not the connections. So to tie this back to what I was talking about earlier, the pop and drag gesture, since it's a move, will retain your connections.

And this is important after you've spent quite a bit of time designing a nib, and you need to make this major change. You need to move things around. Maybe you need to move a whole section of interface from one view to another. Copy and paste isn't the way to go because you'll hose all of your connections. Pop and drag.

So as I mentioned earlier, there's an embed in menu item now. So you can band select multiple items and then say embed in. And the menu item comes preconfigured with the most popular containers to embed your items in. And most of those will-- you want to use the auto sizing features to lay out your user interface elements correctly once they're in the container.

I mentioned earlier click, wait, click to drill into a view. So this is great for selecting the content of a container. Like the box view has a content view. And that has its own set of properties that can be set aside from the box. So click, wait, click will select, in that case, the content view of the box. And as I mentioned before, pop and drag to pull things out of a container once they've been embedded, and that preserves connections because it's a move operation.

So there's a new tool in IB3 called Lift and Stamp. And Lift and Stamp is useful for--

Other UI elements in the same view or nib file. So as an example, imagine you're designing a UI with a bunch of table views and a bunch of buttons to add and remove items from that table view.

You go through a couple cycles of development, decide the standard Cocoa buttons aren't what we want. We want to change everything to this bezeled style button. But I've got everything wired up. All my connections are made. All my bindings are set up. I don't want to go and recreate all those buttons.

I could multiple select and try to change the style on all of the buttons at the same time. Or I could work with one button, get it exactly the way I want, exactly the style I'm looking for, and then use the lift and stamp tool to copy the attributes from that button to all the other ones that need to look just like it.

So the way you use the lift and stamp tool is tweak your user interface until you're happy with it. Select the UI element that you want to copy the properties from. Bring up the inspector, and then in-- That's not a piece of art. That's actually the lift and stamp tool.

So grab it from... I heard someone in the back, oh. Just to share a story, the first time I saw it, I also went, oh. So the, and then you drag the wheel from the lift and stamp tool off to your new, your other UI elements that you want to change, and it'll apply the settings from the source.

That was the lift and stamp tool. OK, so the next thing I want to talk about while you're laying out your interface is sizing. These are simple sort of beginnerish tips, but they're still important, even if you used IB since version 0.8, the first version ever released. When you're designing a window, set the minimum and max sizes where they're appropriate.

No one wants, if you design a window with three buttons and a table view, to be able to make that full screen and show 90% screen area with the nice striped Cocoa background. So set minimum and maximum sizes. No one also wants to take your window and make it three pixels by two pixels wide and it doesn't have any meaningful content on screen.

So the place in IB that you size windows is in the size inspector. Remember, once you set the width and height to actually-- Tick the box that says has minimum and maximum size. And remember to position your window on screen where you'd like it to show up. The same thing goes for NSViews. They have heights and widths. We've got the new Springs and Struts interface Kelly talked about earlier and the animation. It'll show you how things are sizing.

Remember to set up your springs and struts. No one wants to launch your app, resize your window, and see this table view slink off to the left and not resize with the rest. So make sure your springs and struts are set appropriately so that your user interface looks good.

If you're not sure what you've done with the springs and struts, the animation is there to help you figure it out. It'll show you the exact behavior you're going to get. So, useful tool. And there's still a Cocoa Simulator in Interface Builder 3. You access it with Command-R, and that'll actually just launch your user interface as it would if it were your app running, and you can test out your resizing behavior there as well. So there's a property on NSView called AutoResizeSubviews, which is on by default.

That's in the inspector for NSVU. Most of the time, you're going to want to leave it checked. Take advantage of that. The AppKit folks worked hard on it, and it generally does the right thing. There's also a size to fit command in IB. It's command equals. When you make a selection, a button, a text field, a label, and you hit command equals, it'll automatically size that view so it best fits the content it's displaying. So good layout, use size to fit.

So I want to talk for just a second about first moving things around. If you've never used Interface Builder before and you're completely new to OS X, you move things with the mouse. And the mouse is great for course movement. So when you're dragging things into your nib, you're first creating your document.

It's great. When you're down to that end of the cycle and you're almost ready to ship and everything's got to be just so, making a selection and using the arrow keys will move things a pixel at a time so you can get just the right alignment and layout you're looking for.

So there's guides provided in IB to make sure you're following the Apple Human Interface guidelines. These blue dashed lines that you see are those Apple Aqua HIG layout guides. And those will pop up automatically as you drag a UI element around. The Aqua guides pop up and show you that you've got things aligned correctly.

We've also got custom guides in IB. This is especially useful if you're working with a team and you've got a custom layout that everyone needs to follow. You can drag a guide on, use it for your alignment, and... If you use the new Nib 3.0 format, those guides will be retained with your document. And new in Interface Builder 3, you can now place the custom guides inside of containers. So there's an example on screen of a custom guide placed inside a container. Thank you.

One of the things that's useful to keep track of while you're laying out is what are the bounds of my view? In the Layout menu in IB3, you'll find a menu item to show the bounds rectangle. The bounds is defined by Cocoa and AppKit. And there's also another option that a lot of people may not quite get, and that's layout rectangles.

And layout rectangles are what IB uses to do snapping for laying out two controls side by side. So if you need to know how two elements are going to snap together, you can turn on the layout rectangles, and you'll possibly understand a little bit better why IB is showing the snapping behavior that it is.

OK, so let's talk about connections for a minute. This is, I think, one of the coolest features of IB3. We're going to talk about the HUD. It seemed to be, making connections in previous versions of IB seemed to be something that people would get caught up on. Do I drag from the table view to the button or the button to the table view and how does it work and people would stumble over it.

You can go either which way now. Drag in the direction that makes sense to you. You can still do control drag for people who are old school. And control clicking, as Kelly mentioned earlier, will bring up the new connections HUD, showing you the nice list of outlets and actions that are available.

So a couple quick tips on the HUD. Kelly mentioned a few of these earlier. There's a selection pop-up on the right-hand side. So if you've brought up the HUD and you've selected the wrong element, you don't have to dismiss the HUD, remake your selection, bring the HUD back up. It's there on the right. Just change the selection and the HUD will update.

You can use hover and pop. Say you're working with a nib with two custom views in it, and you'd like to connect a button in one to a table view in the other. And you realize as you start connecting that, oh, that other view is closed. You can actually drag from the HUD to the document window to the viewer window that you want to connect to that contains the element you're looking for. And it'll pop that viewer window open for you, and then you can complete the connection.

And as Kelly mentioned earlier in the presentation, if you move the HUD when it's popped up, it'll become sticky. And that's really useful when you're going to do a bunch of connections from one item. You've got a bunch of stuff to wire up. You can make the HUD stick on screen. And then you simply dismiss it with the X on the left-hand side of the window.

All right, so two things we'd like to get everyone to adopt as much as they can as you're developing your next great application is accessibility and scripting support. There are a lot of users, and OS X provides a lot of facilities for users with special needs. Some of that is expressed in Interface Builder. If you use the Attributes Inspector, there's an accessibility slice that will let you set accessibility properties on your UI elements. There are some also accessibility connections within the Connections HUD. So please take advantage of those features. It opens your app to a wider market.

There's no good reason to limit yourself and not use the accessibility features that the OS provides. And the other thing is scripting support. It's becoming more and more popular to automate your applications. Automator has been a huge success. And when you're developing your tool, it's important to keep in mind the fact that someone might want to use your tool not as standalone, but as part of a workflow. And the better scriptable your tool is... The easier you're going to make that for people.

And there are lots of, it has positive repercussions for you as a developer as well because there are lots of automated testing tools coming out that rely on that scripting interface. So let's talk about integration with Xcode. You guys all know Xcode. You've met the new IB, and I hope you like it. And they love each other.

Okay, so Xcode and IB were both designed to work together. Xcode, of course, manages all your source code and resources for your project, and IB is, of course, the premier design tool for user interfaces under OS X. So I want to talk a little bit about how the two are integrated. There's a slight change in IB3 as to how things work from Interface Builder 2.

Say you write a class in Xcode and you'd like to use that class in your Nib file. The way you get IB to register that that class exists is just to drag it from Xcode or from the Finder into your document window. From that point on, if both IB and the Xcode project are open at the same time, IB will notice any changes that are made to the header file.

So IB is automatically going to notice that you made changes to the header file in Xcode once you save it, and those will be reflected immediately. And then the other new thing we've added to IB3, Kelly showed earlier, is the Build and Run menu. So if you've got your nib open in IB3, there's no need to switch back to Xcode as long as it's got your project open.

Just use the Build and Run menu, or I believe the keyboard shortcut is Command-Shift-R, and it'll automatically build and run your project in Xcode. Do your design work. You want to test it out. Use some live data. See your app running. Command-Shift-R, and it's going to fire up your Xcode build and start running for you.

The next way we improve the integration between IB and Xcode is searching. Nib files are now indexed by the Xcode indexer. And using definitions searches, not free text searches from Xcode, you can actually search into your nibs. You can search for outlets, actions, and certain key paths. Thank you.

I don't know how many of you have seen the Xcode presentations about its new refactoring support, but refactoring now works across nib files as well. The Xcode rename refactoring is the only one that's supported right now, and if you rename an outlet, an action, or a key path, that change can also be automatically refactored in your nibs as well.

Can I get the demo machine, please? Okay, so the first thing I'd like to show you guys in this demo is the refactoring support I talked about earlier. So I'm going to bring up the HUD and show you the outlets and actions defined on this nib's files owner. So we've got a window here. An image view and we've got a toggle action that's connected up to a button here. And I'm going to go into Xcode, open that source up.

And I am going to refactor this window. I called it Core Animation Window, and I'd like to change the name of that. It's not very well named. So it brings up the refactoring interface in Xcode, and I'm going to rename the Core Animation Window to typing. My window.

I'm going to hit preview. So the refactoring window, if you guys haven't seen this, is going to show me all of the files in which this refactoring will actually make a change. I can bring up a diff here that will show me what's going to change. And I'm happy with that change, so I'm going to go ahead and hit Apply.

This code is going to work on the refactoring. I'm going to go ahead and save all the files I just changed. I'm going to bring up the HUD on my nib. And it renamed my window. So refactoring support in Xcode. Show you a quick demo of the searching.

I'm going to do a definition search. I need to know, I know somewhere in this nib, this project, I've got something defined called my window. I need to know where. There we go. It's an instance variable in the header, and it's a modeled property in my nib file. And if I double-click the nib, back to IB. So the last thing I'd like to show you is the integration of the build and run.

I'm going to say build and go in Xcode. It's going to build my project. And there it is running. Can we go back to the slides, please?

How many of you have seen Core Animation this week? How many of you were psyched by it? How many of you are hoping that I'm going to say IB3 supports it? And you're right.

All right, so quick agenda for this part of the talk. I'm going to talk a little bit about the architecture of how Interface Builder works and show you where we get some of the effects that we expose in IB3. And then we're going to move right on to the meat and talk about the new visual effects that are available in IB3 today.

Okay, so do you know that guy? Hopefully you'll come to love him. That's IB3. IB3 is built on top of the Interface Builder kit, which gives us all of our functionality for editing live UIs. Built on top of the app kit, which gives you all the great Cocoa controls you know and love.

Which is in turn built on top of Quartz Core, which gives you lots of high-powered imaging API, and on top of Core Graphics, which does all of our low-level drawing. There's a new sub-framework that you've heard talk about this week called Core Animations as part of Quartz, and we've exposed that in IB3.

So two of the new visual effects that we've added are available directly from AppKit without doing anything. All you have to do is run your application and target it for Leopard or later. Those two visual effects are alpha transparency. So if you watch the alpha slider and the text, as I crank the slider down, it gets more and more alpha. So I can go from fully transparent to fully opaque.

The next effect that we're-- the app kit supports that we're now offering up in IB3 is frame center rotation. So every view has a frame. And the frame center rotation is just, how can I spin that view around its center point? So as the slider moves for the rotation, there's 180 degree rotation and your UI is upside down.

Okay, so as I mentioned before, those two effects, alpha transparency and rotation, are available without doing anything special. There's nothing you have to turn on. They're just provided by the kit. Works in Leopard or later. The core animation effects I'm about to talk about need to have layer rendering turned on, and that's available to any NS view or subclass thereof.

And what happens when you turn on the once layer property of a view is that its rendering actually gets handed off from the app kit to core animations. And at that point forward, core animations is responsible for that. So the first thing you need to remember when you start playing with the core animations effects is to bring up the attributes inspector for the view and turn on the once layer tick box.

Okay, so the first effect that we're supporting in IB3 are custom shadows. And I'm going to walk you through really quickly how to set up a custom shadow, and I'm actually going to show a demo of all this as soon as I'm done going through it. So, like turning on the layer hosting, you need to remember to turn on the shadow. You can actually set all the effects up and have the shadow disabled, and you'll wonder, why is it not rendering? It's not rendering because you didn't turn it on.

So, remember to set the enabled checkbox. Then the shadow has a set of offsets behind the view. Negative values are left or down and positive values are right and up. So if you want an offset slightly to the right and slightly down, it's a positive width offset and a negative height offset.

You can also set the blur radius of your shadow from very small values. Zero blur radius is a very tight shadow with a very strongly defined edge. Extremely large blur values will give you an extremely diffuse shadow. and you can pick a color for your shadow and the colors are standard NS color. You can pick using the different sliders and color wheel that you're used to in Cocoa and the color for the shadow also supports alpha transparency.

Okay, so shadows are pretty cool. It's kind of like underlighting on your low-rider car. I think the thing that everyone's really going to dig here are the animation and transition effects. So what can I animate? You can animate any NSView or subclass thereof. So there are three sort of events that can trigger an animation as we're supporting it in IB.

And those are the view ordering in, so when the view comes on screen, when the view orders out, or when it leaves the screen, or when the subview tree of a given view changes. If you want to do more with the animations, please refer to the documentation in NSView and in Core Animations. There's a lot more that you can do with these animations and transitions than we're exposing, so if you need to do more than we're providing, please check out the API.

So now we know when we animate, how do we animate? So Core Animation provides four basic transitions-- a fade in, which is sort of a dissolve; a move in, which is a slide; a push; and a reveal. And if you'd like to write your own custom animation, there's API available in the Core Animations framework.

And the other kind of transition that you can take advantage of is using the Core Image Transition Filters. And for that, you get a lot of really high-powered animation effects for relatively cheap. When you are setting up your animation, you'll see the list provided. When you select custom, you'll be using the Layer Kit or Core Animation provided transitions. And this list at the bottom is all of the Core Animation transitions that are supported.

Okay. Sorry, I don't know how that demo slide snuck in there, but we're not quite ready for the demo yet. There's one more thing I'd like to talk about that Core Animation Support provides, and that's filtering for your views. So you can apply a filter to, again, any NSViewer at subclasses. And there are three kinds of filters we support-- background filters, content filters, and one special kind of filter, which is used for compositing.

When you select from the pop-up what kind of filter you'd like and hit add, you'll be presented with this standard filter selection picker that's provided by Core Image. And you'll see a list of categories of filters on the left and actual filter names on the right. And pick the filter you want.

So the filters for background and content are additive. So the filters can be chained together in a list, and they're applied in the order that you add them. So if you want to get multiple effects, I want to do a sepia tone and a bloom filter. You can use as many filters as you want. Since compositing is a special operation, there's only one compositing filter that you can use at a time. Someone reordered my slides. So can I get the demo machine, please? Because I want to show off the animation support.

Okay, so I've written a very simple : We're going to use the Cocoa application to show off what you can do with zero code in IB3 to support core animation and AppKit effects. So I'm going to go ahead and run the demo. This is without any effects turned on at all. And it failed. Thank you.

All right. Nothing like extemporaneous onstage debugging in front of 800 people and your manager to get your blood flowing. So I've got this really simple Cocoa application, and all it has is an image view and a button. And when I hit the toggle button, hey, it's ordering that view in and out of the content view of the window. Super. Not very spicy.

I think we can do better. So I'm going to go ahead and open the window up and To reiterate the point earlier, you can do all the work in the world on setting up fancy filters and transitions and whatnot if you forget to turn on The Once Layer support, it will be all for naught and you will see nothing. So I'm going to go ahead and turn on Once Layer for the content view of this window because we're going to do some core animation support in all the different elements in this window.

So let's talk about rotation. I'm going to bring up the Animations Inspector. It's Command-5. It's the fifth section of the Inspector. And I'm going to go ahead and rotate this button 180 degrees. So, woo, upside down. And I'm going to go ahead and set its alpha transparency to 50%. And we can see that now it's upside down and semi-transparent. That's cool. Let's add a custom shadow.

A little bit to the right, a little bit to the bottom. And the blur radius of four is pretty cool. So if you look, that's very, very sharp. That's so ridiculously diffusely blurry that you can't see it anymore. So four is pretty reasonable. A little bit fuzzy, but not so much. And I'm going to pick a color. Someone shout out a color. Purple. Thank you.

Is that pink? I'm, like most men, color blind, so is that purple? Is that purple? That's purple. So one of the cool things to note here is like, The core animation support is live. It's really happening. It really drew my shadow there and it's really applying all the effects. So great, that nib looks super. Let's go ahead and build and run that. Again, I'm going to use the IBM Xcode integration, because both the nib and the project are open. So I'm going to hit Command-Shift-R. There's my upside down, semi-transparent, custom shadowed button.

And it still works. So still not enough. Not over the top, not outrageous enough. I think we can do more. So I'm going to go back to IB. And I want to use a custom filter on that image. It was cool, but I think we can make it sharper. So I want to set a content filter on that image.

And for whatever reason, the London Underground is now in the Witness Protection Program, so we need to blur its face. So I'm going to provide a Gaussian blur, and you'll notice there's a preview here that shows you what's going to happen to your image as you change the filter effect. So I'm going to go ahead and Gaussian blur that. See that filter also applied immediately and everything got a little bit more blurry.

Okay, so I want to, we're ordering this view on and off screen, so I want to add a transition to that as well. So I'm going to change the order in transition, and I'm going to use one of the built-in ones provided by Core Animation. So I'm going to select order in.

And I'm going to have a move-in transition. And I'd like it to move in from the right. And these two sliders here, Start Progress and End Progress, are how far into the animation should Should the animation start and how long should it run? So I want it to run the entire duration. So I'm going to set the start all the way to the left, saying the beginning and the end should run the full duration. So move it all the way to the right.

Done setting that up. So cool. That's great. I want to show off what the subviews transition does. I'm going to go ahead and use a core image transition on that. So I'm going to use the rotating cube transition. And when you pick these transitions and when you pick the filters, you saw when I picked the filter it brought up a configuration dialog. If at any time you need to go back and edit the parameters to these filters, there's an edit button off to the right or down below the table view for the filters. Select that and you can change the properties on the transition.

They're all given reasonable defaults to begin with. So if you don't know what you're doing with the transition or you just want to go with what comes out of the box, it's already pre-configured for you. So I'm going to stick with the custom transitions that are there. And I want to give this UI a little bit of an antique look and feel. So I'm going to apply a content filter to the entire window as well. So I'm going to go ahead and... Pick a color effect. And I'd like to sepia tone everything so it looks a little bit old school.

Hit OK. And you see the core image filter applied immediately. So I'm going to go ahead and save this nib. Again, Command-Shift-R. Build and run the application. And you see the sepia tone filter is applying to the entire content view of the window. The image view before where it was sharp has now been Gaussian blurred. The button is still alpha transparent, has a custom shadow. And now for the transition effects.

So what's going on there is that as the image view is ordered in and out of the content view of the window, its subview tree is changing. And we've said when the subview tree of the window changes, it should change using this transition effect. So move things out, move things in, and you get the transition effect. That concludes my demo.

Can you go back to the slides? Excellent. So just to wrap things up, what did we talk about today? We talked about a bunch of new features in IB3. We talked about the new library that contains all the user interface elements, setting up custom groups in the library. There's a session tomorrow morning at 9 by another one of the Interface Builder engineers on integrating your custom controls into IB3. I'm sorry, Friday.

I'm being reminded. Friday morning at 9. We talked about the new connections HUD. We talked about the redesigned inspectors, the slices, how they're laid out. Talked about some of the new controls that we've integrated from the app kit. And we talked about core animation support. Okay, so IB3.

It's the new hotness. It's on your desk. We hope you all use it. Where it breaks, we hope you file bugs. That's the way we... make things better. That's the way we hear your feedback. If you aren't ready to move to IB3 yet, there are actually two interface builders on your Leopard disk today. There's Interface Builder, which is Interface Builder 3, and there's Interface Builder Tiger for people who aren't quite ready to move forward to the new IB3 yet and want to start working with Leopard. So they're both there, hopefully by the time we GM.

We'll have a great IB3 ready to go. So I would like to invite up the Matts and the Johns and the Kelly for QA. And please, if you have more questions we can't get to today or you need more information, contact Matthew Formica. He's our developer tools software evangelist.