When you hear the word outlet, what do you think of? There are a few different ways that the word can be used, but the one I'd like to talk about is an electrical outlet. Our homes are filled with them, and we use them all the time. The idea is quite simple; a big company does a lot of work to transport the electricity to your home and outlets, and all you have to do is plug your appliance into the outlet and you can begin using it.
Interface Builder operates in a similar manner. IB uses outlets to plug in graphical objects to their corresponding place in code. An IB outlet, or IBOutlet as they are formerly called, function a little bit differently because it isn't exactly a one-size-fits-all solution like our outlets are at home. In code, you setup an outlet for lets say a Button, and then in IB, you make the button, and then you can plug it into the IBOutlet that you made in code. Once your button is plugged into the proper outlet, you can begin to handle the events that happen on the button, like a click for example. It's that easy!
Let's dig into some code and take a look at how we need to setup an IBOutlet for our Label, Button, etc, to plug into. IBOutlets need to be declared in the .h file, so that is where we are going to add the following code:
Your .h file may have more code in it than the picture above. You can leave it there, or make it look just like what I have. Can you see what we are doing with the one line of code that we are declaring here? It should look somewhat familiar. We are in the header file and we are declaring a class variable. This isn't just any type of variable though, it is a class variable that is also an IBOutlet. Adding in that IBOutlet keyword is all we need to do to create the outlet in code that will allow us to plug in the Label in IB. Pretty easy!
Now that we have created this IBOutlet in code, lets go hook it up in IB. If you followed the last step of the last post, your view should have a Label and a Button on it all ready to go. The process of hooking the Label in to the IBOutlet we just created is really easy. Go ahead and right click on the File's Owner thing off to the left, and you should see the name of the Label variable we just made. In my case it is called greetingLabel. If you look to the right of where the variable name is listed, you should see a circle that is hollowed out. Click within the circle that is next to the right variable, and drag to the Label on the view we already have setup. It should highlight blue signifying that it recognizes that the outlet that you are hooking up to the Label is an outlet made for Labels. Let go of the mouse, and you have officially hooked up your first IBOutlet! Way cool!
One other point that I need to stress is the meaning of File's Owner. We made the IBOutlet in code in the .h file, and then it became available/visible in the File's Owner portion of IB. Do you notice any correlation? The File's Owner area can be thought of as a graphical representation of any and all IB objects that are available for hooking into.
Now you may be wondering why that is as cool as I am trying to make it sound. We just connected a graphical, movable, editable IB element to the code portion of our app. We need to go ahead and make the following changes in our .m file to better grasp the point of setting up IBOutlets:
This line of code that we are adding to the viewDidLoad method of our viewController is pretty straight forward. We are accessing the text attribute of the UILabel object that is named greetingLabel, and setting it's value as "IBOutlets are really cool". So if you go ahead and build and run the app, instead of displaying the text that you were displaying in the .xib file, it should now show the text we just set in this viewDidLoad method.
Do you see what we are doing here? We are making these variables, hooking them up to IB, and then we have access to them in code if we need it. Let me remind you that the main point of IB is to have the ability set everything up graphically the way you want it to look. It isn't always the case that you can do everything in IB because sometimes your content is dynamic in nature. This is where IBOutlets come in handy.
In our next post we are going to go over another aspect of IB called IBActions. Fun stuff!
No comments:
Post a Comment