Join Todd Perkins for an in-depth discussion in this video Making interface connections to code, part of Xcode 7 Essential Training.
- So now let's look at building a simple user interface and connecting those elements to code. We're going to click and drag a label on the screen, and that label's going to say "Click to Change Me". And under that label, I'm going to put a button. So, I'm going to search for a button in the object library. What I'm looking for is a simple push button. I'm going to put the button right there, change the text on the button by double-clicking the text. I'll type in "Click" and press return on my keyboard.
I'll just move the button a little bit more there. So, we want to click the button and change the text. To do that, I'm going to hide the utilities area, and I'm going to change to the Assistant editor. Remember that you can change the code file using the jump bar at the top of the screen. So, I can click the button where it says Manual. Go to my project and then choose the appropriate file. In this case, it's going to be AppDelegate.swift. So, I'm working in that file and now what I want to do is connect my label to my code.
I'm going to deselect everything by clicking in the white area away from the window inside of Interface Builder. And I'm going to hold the control key on my keyboard or right-click and drag while holding right-click or the control key. I'm going to drag right below that window declaration. So, right below line 14 and above line 15. When I've done that, I'll release my mouse button and for connection I'm going to choose Outlet. An Outlet is for a property, an object.
An Action is for, as you'd expect, an action, a button press, something like that. So, I have Outlet selected and I have the name here. And, for the name, I'm going to type myLabel. For the type, I see NSTextField. If you don't see NSTextField and you see some other different type, then maybe you clicked and dragged from the wrong element and you should try again after clicking cancel. But, if everything looks like mine here, just click connect. So, then Xcode adds a line of code that defines a weak variable called myLabel.
It's of the type NSTextField. Now, we'll connect our button to our code. Now here we want to do an Action instead of an Outlet because we want to respond when the user clicks. So, I'm going to right-click and drag from the button in between lines 16 and 17 and I'll release my mouse button. For this connection, we don't want an Outlet. We want an Action. We want to respond when the button is clicked. We'll call this buttonClicked and you should see Connection Action, Name buttonClicked and Type AnyObject is fine.
So, click Connect. The type is the parameter that's sent in as the sender. In other words, the object that received this particular event. In this case, our button. We don't really care about the button itself. We just care about our label because we're going to change the text in the label. So, I'm going to go inside of the curly braces here, and I'm going to change the labels text. So, I'll type "myLabel" (referencing the label variable that we created on line 15) ".stringValue" and then we just simply set the value.
I'll change it to "Hi!". Save the file and then click the run button at the top of the screen. It might take a minute to build your application for the first time, so be patient, but eventually you should see a window pop up on your screen. That's the app that you just created. Okay, there's the application. So, I have this window and I can drag it around just like any other application. And, you'll see that it says Interface Builder which is the name of the app that I created, and it says "Click to Change Me." So, at this point, I should be able to click and then it runs that method setting the string value of myLabel to the string Hi!, and there we have, it's updated on the click event.
So, go back into Xcode and I'm going to click the stop button to stop running the application. So, remember you can connect user interface elements in your code by simply right-clicking and dragging. Use Outlet for properties. Think of a label, some element that you need to access later on. Use Action for events. So, when you want to handle something in a method, you're going to choose Action. That's what you use for button presses. Once you set those up, you can write your code inside of the actions and you can reference your outlets through their variable names.
This Xcode tutorial helps new iOS and OS X developers install Xcode and start writing and editing code. Author Todd Perkins also reviews the version control and storyboard features, as well as the basics of Interface Builder, Xcode's intuitive UI design tool. Plus, learn how to compile and debug apps, test apps in the iOS Simulator, and send your app to Apple to be published in one of its app stores.
- What is Xcode?
- File handling in Xcode
- Exploring the code editor
- Creating snippets
- Adding Git version control to your project
- Making interface connections to the code
- Using Interface Builder
- Creating an iPhone or iPad storyboard
- Compiling code with the LLVM compiler
- Sharing resources in a workspace
- Catching common errors with Analyze and Fix-It
- Using the iOS Simulator
- Preparing an app to be published