Xcode 4: Interface Builder

[?music?] 0:00 [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com] 0:02 [iOS: Xcode 4: Interface Builder with Amit Bijlani] 0:07 In this video, we're going to learn about Interface Builder and Xcode 4. 0:13 Interface Builder is no longer a separate application 0:16 which makes development a lot easier. 0:19 Let's open up the ZoneClock app that we built in our last video. 0:22 We will open up the zip file, the ZoneClockViewController.zip. 0:25 As you can see, Interface Builder is built right into Xcode 4 0:30 so it does not open up a separate application like it did in Xcode 3. 0:35 One of the windows being your document window, 0:40 which was the main window in Xcode 3, 0:43 is now basically here in the sidebar, 0:45 so you have access to your view, your first responder, and your file's owner. 0:49 So I'm going to show you the various parts of Interface Builder 0:55 by building the ZoneClock application, 0:58 so here is our view. 1:00 Previously in Xcode 3, we had an Inspector window 1:03 which is no longer there--it's part of the Utilities area 1:06 which you can bring up by actually pressing Command+Option+0 1:09 or you could click on this little icon over here. 1:14 So you can notice you can have your Identity Inspector, 1:19 you have Attributes, Size, and Connections. 1:22 All of those are now in the Utilities area over here. 1:26 Let's go ahead and get rid of the Navigation area, 1:32 which is the pane on your left, by hitting Command+0 1:35 so that now we have more screen real estate to work with. 1:38 So what the ZoneClock app will do is it will take input as Eastern Standard Time 1:42 and then spit out Central Standard Time and Pacific Standard Time. 1:47 So what we first need is a text field. 1:52 Down here, you will notice that it says Code Snippets Library. 1:55 We're going to click on the tab that says Object Library. 1:59 This is where all your control objects are now. 2:03 What we need is Text Field, which is right here. 2:06 I'm going to click and drag that up here. 2:10 So I want to put some placeholder text, which I'm going to do 2:20 by clicking on the Attributes Inspector, 2:24 so Enter Eastern Standard Time. 2:29 Next, I will need two labels that will hold a Central Standard Time 2:38 and the Pacific Time, so the label object is right here, 2:42 which I can drag. 2:46 I need another one. 2:53 So as you've seen in the previous videos 2:57 where we wired up controls and Interface Builder with your code in Xcode, 3:00 in Xcode 4, this becomes a lot easier. 3:06 You can Command+Enter, which will bring up the editor, 3:09 or you can just click on this icon right here, 3:13 which will bring up the Standards Editor. 3:15 So what it does is it brings up the editor for you. 3:18 In mine over here, it says manual, but if I set it to automatic, 3:21 what it does is it will automatically show you the controller or the header file 3:26 of the controller that's related to the view 3:32 because in your File's Owner--if I click here right on the File's Owner-- 3:35 and I go to Identity Inspector, 3:41 you will see that it says that the class over here that it specifies 3:45 is ZoneClockViewController 3:50 which is basically the controller that owns this view. 3:53 So if you click on File's Owner, it will actually tell you in the Identities tab 3:58 which class owns this view. 4:03 Over here, as you can see, it says ZoneClockViewController 4:06 is the owner of this particular view, or this particular zip file. 4:10 So next, what we need to do is we need to wire up our controls 4:13 that are in the view with our header file. 4:17 Basically, the file that we have over here on our right pane. 4:20 So there are a few ways you can do this. 4:26 One way is you can actually click on the Control 4:29 and then go to the Connections tab in your Utilities pane 4:32 and if you scroll down, you can see that it says New Referencing Outlet, 4:38 so I can actually click and drag from there, 4:42 and it says Insert Outlet, 4:45 so I can specify the Outlet name and then it will wire it up. 4:48 The other way I could do it is I could hold down the Control button 4:52 and then just drag from here into my header file. 4:58 Once again, it brings up the same little popup. 5:04 And the last way is I can right-click, which will bring up this little heads-up display 5:06 or this little popup here, 5:12 and then I can drag it over here. 5:14 So as you can see, there are several different ways to wire up your control. 5:18 Basically, what we need to do is give this a name, 5:24 so I'm going to say estTextField 5:27 and I will click on Connect. 5:31 And the beauty of this is that it declares the field 5:36 and it creates the property for you. 5:42 I love this new feature in Xcode 4 because it really simplifies a lot of the declarations 5:45 of IB outlets and IB actions. 5:50 So let's go ahead and do the same thing for the labels. 5:53 I'm going to just do it using the Utilities View and the Reference Outlets over here, 5:56 so I'm just going to create that and we will say CSTLabel and hit Connect. 6:02 The same token, we're going to do that with this label over here. 6:11 We're going to say PSTLabel. 6:20 Voila--that was a lot easier than what you had to do in Xcode 3 because Xcode 3 6:24 because Xcode 3 made this a little more complicated because you had 6:32 two separate apps, like your Xcode 3 app and the Interface Builder was a separate app 6:35 and you had to do all this funky wiring using two different windows and all that stuff. 6:40 Here we have wired up three controls very, very easily. 6:45 I'm just going to push these up a little over here. 6:49 So next we need a button, so when I enter the date, 6:54 I am going to need a button that I can click that will show me the time 6:58 so I'm going to go back down here and use a round red button 7:01 and just drag it to my view. 7:06 As you can see, this makes life so much simpler 7:14 because in Xcode 3, you had to juggle around with several sets of windows 7:17 and here I have everything encompassing in one single window 7:22 and the workflow is so much more seamless. 7:26 So I'm going to give a title to my button 7:29 so I would do that by clicking on the Attributes tab 7:32 in your Utilities area over here on the right. 7:36 I will say Show Time, and I hit Enter. 7:40 The other thing you probably remember from Xcode 3 7:44 is that in your Documents window, you had a hierarchical view 7:47 of all the different objects that were there in your view 7:50 or they were subviews of your view. 7:54 That's not gone; that's just down here all the way to your left bottom, 7:57 and if you click on that, it will show you the placeholders 8:01 and it will show you the objects, and if I expand on that, it will show me all the subviews 8:06 that are part of this view. 8:11 The hierarchical view is still there and you can also search for different things 8:13 inside that hierarchy, so if I say label, it will filter all the labels and show me. 8:18 So finally what I need to do is I need to wire up this button that I just created. 8:26 Basically,what I'm going to go to the Connections tab of my Utilities area. 8:30 I'm going to go to Touchup Inside because that's the event that I want to capture. 8:37 As you remember from previous videos, 8:42 that when you want to capture a touch event on a button, 8:45 it's usually done using Touchup Inside. 8:47 So I'm going to drag the little circle next to Touchup Inside 8:50 and go over here and it automatically says Insert Action. 8:54 So you can see it asked me for the name of the action, so I'm going to say Show Time; 8:59 Type ID event Touchup Inside. 9:05 Argument--usually what it does is it sends the sender object to your message. 9:08 I'm not going to need that for this because we're just going to have one button, 9:14 so I'll just say None. 9:18 I say Connect, 9:20 and there you go--it chose the IB action 9:23 and on the right-hand side, you can see that it's wired up. 9:26 If you also click on the File's Owner over here, 9:28 it will show you all the wired up outlets that are there inside your view, 9:33 so that's a quick way to look at all the objects that are wired inside your view.. 9:37 So next, what we need to do is we need to add a little meat to our code. 9:43 Basically, now that we've done all the wiring, we need to actually 9:48 add some functionality behind the button. 9:50 The one part that I love about Xcode 4 is that you can have all these different areas-- 9:53 editing areas--without actually having to create a new window. 9:59 So what I'll do is I will click on this tiny little + button that you have here 10:03 which says Add Assistant Editor, 10:06 so I'm going to add the Assistant Editor 10:12 and what I need to display down here is my implementation of the View Controller, 10:15 so I'll click on the counterparts 10:21 and I will ask it to show me the implementation file. 10:25 So in one place itself, we have the view, we have the header, and the implementation, 10:30 which is fantastic. 10:36 Now I'm done with the Utilities area, so I'm going to get rid of it. 10:38 Either I can click on this little icon here 10:42 or I can just hit Option+Command+0. 10:45 If I click that, you can see it toggles the Utilities area. 10:50 So finally, I'm going to add the functionality into my button action. 11:00 If you scroll down inside your implementation file, 11:04 you can see that it's already synthesized all the text fields and labels 11:09 and it's also deallocated them because as you can see in the header, 11:14 we have retained these text fields and labels. 11:18 And finally, it's created our IB action, 11:22 which is all the way down here. 11:25 I've already built this code, so I'm not going to go into it; 11:28 I'm just going to copy and paste it. 11:31 You can download it from the description section of the video. 11:34 So I'll briefly go through this piece of code that I just copied here. 11:38 I'm declaring an NS date formatter 11:42 and I'm defining the type of formatting that I'm going to enter into my text field. 11:46 After that, I'm actually getting the date from the text field 11:53 and eventually, I'm setting the Central Standard Time and Pacific Standard Time 11:58 as time zones before I actually copy them into the labels. 12:03 So if we can build this, you'll see that it builds successfully. 12:09 And then, I'm going to hit Command+R 12:12 and you can see that it'll actually run this application. 12:16 So here we go--here's our view, 12:20 so I'm going to enter a time--let's say 3:30 p.m. 12:23 and if I hit Show Time, as you can see, it shows me 12:28 the Central and Pacific Standard Time. 12:32 I hope now you see the power of Xcode 4 single window interface 12:35 which makes the development workflow seamless. 12:39 [?music?] 12:42 [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com] 12:43

You need to sign up for Treehouse in order to set up Workspace

Sign up