[Tutorial] Getting to know Xcode/Interface Builder PART III: Making connections

Discussion in 'iOS Development' started by SkylarEC, Jan 30, 2009.

  1. SkylarEC

    SkylarEC Super Moderator Emeritus Staff Member

    Joined:
    Sep 19, 2007
    Messages:
    6,642
    Likes Received:
    129
    This tutorial is an extension of [Tutorial] Getting to know Xcode/Interface Buider: PARTS I & II: UITabBar projects. To get the most out of this tutorial, please either follow the linked tutorial, or download the sample project from the first post of the linked tutorial.



    So, we have this beautiful tabbed project, built up in Interface Builder, and all is looking pretty good. But now, you want to do something with it. So let's add a button and a label to our project. We'll start by opening up Xcode and opening our FirstViewController.h. We will be adding a few variables here. A UIButton object, a UILabel object, and an integer called 'count.' Once those are added, we'll set the two objects as properties of our FirstViewController. Make sure to preface the objects with IBOutlets, else Interface Builder will ignore the objects. Properties allow other objects to refer to the variables directly by referring to them within the object that contains them. Specifically, anObject.property. And finally, let's create a method for what to do when our button is pressed. When completed, your finished FirstViewController.h file should look like this:

    Please Register or Log in to view images




    Since we've created the properties within the interface file, we will need to synthesize them within our implementation file. Open up FirstViewController.m and add an "@synthesize" after the "@implementation" and before the "@end." On the same line as synthesize, list your property variables by name, separated by commas.

    Please Register or Log in to view images




    Now, scroll down to the view controller's init method and uncomment it out. Add a line setting 'count' to 0. Now, scroll down and add the method you prototyped in your interface file to this file. Within this method, increment count.** and set the text of out label to a string that reflects the variable count.

    Please Register or Log in to view images


    Please Register or Log in to view images




    Now save, we are done with code once more!





    ** Incrementing and and decrementing is quicker than adding 1 to your variable. Get in the habit of using variable++ and count-- over count += 1 and count -=1. And yes, there is a difference between ++count and count++
  2. SkylarEC

    SkylarEC Super Moderator Emeritus Staff Member

    Joined:
    Sep 19, 2007
    Messages:
    6,642
    Likes Received:
    129
    Now that we have completed out code, let's reopen our FirstView xib. Double click on the view.

    Please Register or Log in to view images




    Well, that's no good. We want to be adding things to them, but we also want to know how the view will look with a tab bar and a status bar, so we place things accurately. To simulate the appearance of these items, tab on the view to expose its attributes in the Inspector and select "Gray Status Bar" and "Tab Bar" from within the simulated metrics section.

    Please Register or Log in to view images




    Much better. Now, go ahead and drag a UILabel out of the Library Window directly onto our view. Make it look about like how it appears in the following screenshot. Also, set the justification to centered. Next, drag a UIButton onto your view from the Library Window. Set it up approximately how you see in the following screenshot and set the text to "Press Me."

    Please Register or Log in to view images


    Please Register or Log in to view images




    Excellent, but so far nothing you see will do anything. Let's fix that and tell the nib that the label and button you just placed are the same as the ones you just defined in the FirstViewController.h. In the main FirstView xib window, click on File's Owner and on its attributes in the Inspector window. You will now see that the IBOutlets and IBAction you created appear in the list now. Excellent! Drag the circle next to each object in the Inspector to the object you want to assign it on your view. Also, drag the action you craeted for countButtonPressed to your count button. Set it to "Touch Up Inside."

    Please Register or Log in to view images


    Please Register or Log in to view images


    Please Register or Log in to view images


    Please Register or Log in to view images




    Now compile and see the results. What's that the app crashed? Something about "this class is not key value coding-compliant?" That is a very common problem when using Interface Builder. I left it in because I know that many of you will run into the problem eventually. Some sooner than later. The problem is common because it is super easy to overlook. Let's fix this now. The root of the problem is actually within your MainWindow.xib. So reopen that now. Select the FirstView controller. Remember when we set the UIViewController to the FirstView nib in the Inspector? Well, that isn't actually good enough. You will have to set its Class Identity to FirstViewController.

    Please Register or Log in to view images




    Save, recompile, and run! Beautiful!

    Please Register or Log in to view images

  3. gojohnnyboi

    gojohnnyboi Well-Known Member

    Joined:
    Jan 25, 2008
    Messages:
    3,339
    Likes Received:
    55

    simple tutorial. but what interests me is not the tutorial, it's what "spinboard.dylib" is on your desktop. =]
  4. Pelaez-1

    Pelaez-1 New Member

    Joined:
    May 5, 2008
    Messages:
    822
    Likes Received:
    0
    Device:
    iPhone
    And you HAD to quote all the images to say that... gosh...

    And the tutorial is simple because the goal is not to teach us to program, but to use the Interface Builder, I just grabbed my dad's Mac and did it, will be useful, now I just need my own Mac, knowing how to make interfaces is just what I needed

    Please Register or Log in to view images



    Thanks Skylar

    Please Register or Log in to view images

  5. Calico210

    Calico210 New Member

    Joined:
    Apr 27, 2009
    Messages:
    3
    Likes Received:
    0
    I was just trying out the tutorial and was stepping through trying to initialize count with a different value. I was thinking of added the ability to save the value of the button presses from prior instances of the program, however I noticed that initWithNibName was not being called and that count=0; was never being called.
  6. SkylarEC

    SkylarEC Super Moderator Emeritus Staff Member

    Joined:
    Sep 19, 2007
    Messages:
    6,642
    Likes Received:
    129
    Good call. If you want, just put the code in loadView.


    What's happening is that initWithCoder is being called as the initialization method. initWithNib... is only called when you initialize the code programatically.

    And yes, I take the blame for that mistake.
  7. Calico210

    Calico210 New Member

    Joined:
    Apr 27, 2009
    Messages:
    3
    Likes Received:
    0
    If I implement loadView, the view is just a blank white view now.

  8. SkylarEC

    SkylarEC Super Moderator Emeritus Staff Member

    Joined:
    Sep 19, 2007
    Messages:
    6,642
    Likes Received:
    129
    Don't forget that you need to call [super loadView] from within loadView.
  9. Calico210

    Calico210 New Member

    Joined:
    Apr 27, 2009
    Messages:
    3
    Likes Received:
    0
    Oh, I see. I forgot.

    Say I wanted to create an object that all the views in the tab bar controller could view, where would I do that?


  10. MountainDew

    MountainDew New Member

    Joined:
    Feb 23, 2008
    Messages:
    194
    Likes Received:
    1
    Device:
    iPod touch
    Nice tut skylar, it really helped.

    Although, I thought you only needed to outlet something if you need to get/set its value? (the button in this case, is it necessary to IBOutlet it?)

Share This Page