Join Todd Perkins for an in-depth discussion in this video Connecting all of the visual elements to code, part of Programming for Non-Programmers: iOS 7.
With all of our variables and functions declared, it's time to connect the appropriate code elements to our visual elements. So, let's go to main.storyboard, and we'll start with a label. I'm going to expand View Controller Screen on the left side of the center view, and I'll click View Controller. Now I'll click the Connections Inspector, and then in the outlet section I'll drag the circle from label on to my text label, and now I'm going to start associating my actions.
Scroll down to received actions and then I'm going to associate tapped clear with the appropriate button, that's the c button, then I'll choose Touchdown. Let's repeat this process for each our buttons, remembering that tapped number is going to connect to multiple buttons. And you can do that by doing the same process multiple times. So, I'm dragging from tapped number to number seven. Choosing Touchdown, and then I'll drag again from tapped number to eight, and then I'll choose Touchdown. And now it's connected to both seven and eight.
So, let's connect all of the buttons to the appropriate functions. So, now all my buttons are connected to the appropriate functions. In the received actions section, I can confirm that by hovering over the function name and seeing the button highlighted. So, I'm going to make sure every button is accounted for. When I hover over tappedNumber, all of the numbers should be highlighted. And finally, tappedPlus highlights the plus button. And since we're using tappedNumber to handle button presses for all of the numeric buttons, we need some way of associating each button with the appropriate number.
Now, of course, each button says the number on it, and it's buried deep within it's text label. But if we had a numeric value to associate with it, it would be much faster on our code to handle that. iOS has a feature called tags that are perfect for handling this situation. So, all we want to do again, is associate each button with it's appropriate numeric value. So I'll click on button number seven here, and then I'm going to click the Attributes Inspector and scroll down into the view section.
In the view section, you'll see a field called Tag. In here, type the number that corresponds to the number on the button, in this case, seven. So, you should have seven, eight, nine, et-cetera. So, once you've entered all of the tags for the buttons, just click on each button and look in the tag area to make sure that they're all correct. That looks good. So, now we've successfully made all of the connections from our code to our storyboard.
If you find you'd like to learn more, see iOS App Development Essential Training, Foundations of Programming: Fundamentals, or any of the other programming courses in our library.
- Installing Xcode
- Creating an Xcode project
- Configuring the iOS Simulator
- Understanding variables
- Connecting visual objects to variables
- Understanding functions, methods, and selectors
- Connecting a button to a function
- Using conditional statements
- Setting up the user interface
- Connecting code elements to build an app