{"id":5,"date":"2010-03-13T19:55:10","date_gmt":"2010-03-14T03:55:10","guid":{"rendered":"http:\/\/bynomial.com\/blog\/?p=5"},"modified":"2010-04-24T15:42:38","modified_gmt":"2010-04-24T23:42:38","slug":"iboutlet-and-ibaction","status":"publish","type":"post","link":"http:\/\/bynomial.com\/blog\/?p=5","title":{"rendered":"IBOutlet and IBAction"},"content":{"rendered":"

One of the first big confusions I confronted when learning to work with xcode and Interface Builder was the connection between things in my code (particularly those marked as IBOutlets or IBActions) and corresponding things in Interface Builder. \u00c2\u00a0In many languages, you expect every file you work with to be explicitly mentioned by name somewhere in the code base – with xib files, this isn’t always the case \u00e2\u20ac\u201c at least not in any obvious way.<\/p>\n

The problem<\/h1>\n

To illustrate the confusion and its solution, let’s explore a quick example:<\/p>\n

\"\"<\/a>

MainViewController.h<\/p><\/div>\n

\"\"<\/a>

MainViewController.m<\/p><\/div>\n

This view controller will set up a screen according to its xib file (MainViewController.xib), and modify the label’s text to match the text of any buttons which are pressed.<\/p>\n

This is a relatively easy piece of code for a newbie. \u00c2\u00a0If you’re new to Interface Builder (IB), though, you might not know how to correctly connect the UIButtons and UILabel in IB to the instance variable (label<\/em>) and method (toggleLabel:<\/em>) for use at runtime. \u00c2\u00a0Below are the steps to do that.<\/p>\n

The Solution<\/h1>\n

1. Make sure you’ve already created the pieces that need to be connected:<\/p>\n

    \n
  • The instance variables, such as label<\/em> here, marked with IBOutlet in your header file,<\/li>\n
  • the methods that need to be activated by controls, such as toggleLabel:<\/em> here, marked with the IBAction return type, and<\/li>\n
  • the objects, such as UIButtons or UILabels, in Interface Builder that will be connected.<\/li>\n<\/ul>\n

    2. Right-click on “File’s Owner” in the MainViewController.xib window, which brings up a list of assignable properties of that object which IB knows about (see the figure below).<\/p>\n

    3. Click the open circle to the right of label<\/em>, and drag the blue line that appears over to the UILabel in your working xib area. \u00c2\u00a0This ensures that the instance variable label will point to this UILabel when it’s created for you at runtime.<\/p>\n

    \"\"<\/p>\n

    4. Next connect buttons to actions. \u00c2\u00a0Drag from the open circle next to toggleLabel:<\/em> over to one of the UIButtons (e.g. the tree<\/em> button in the figure).<\/p>\n

    \"\"<\/p>\n

    5. A UIButton generates many events, although the primary one is called “Touch Up Inside” (insert dirty joke here), which essentially means the user pushed the button. \u00c2\u00a0Interface Builder doesn’t complete the connection between the button and your method until you specify which action you mean \u00e2\u20ac\u201c and 99% of the time with buttons, you just care about the Touch Up Inside action, so choose that one.<\/p>\n

    \"\"<\/p>\n

    6. Repeat the same process for any other buttons you want to connect with this method (toggleLabel:). \u00c2\u00a0Note that you can connect as many controls as you want to a single method (IBAction), although you can only connect a single control to an instance variable (IBOutlet), which makes perfect sense from the perspective of the code.<\/p>\n

    \"\"<\/p>\n

    7. Celebrate! \u00c2\u00a0Good job.<\/p>\n

    How it works<\/h1>\n

    From the compiler’s point of view, an IBAction is just the void return type, and IBOutlet is ignored. \u00c2\u00a0The compiler more-or-less doesn’t know about those terms.<\/p>\n

    But they are very significant for Interface Builder. \u00c2\u00a0IB knows about your code, and it recognizes those terms as marking variables and methods that can be connected to objects in a xib file, just as we’ve done here.<\/p>\n

    How does it work at runtime? \u00c2\u00a0Essentially, UIViewController, as the superclass of MainViewController, knows to look for a file named “MainViewController.xib.” \u00c2\u00a0Yes, the correspondence is actually determined by matching a filename against the name of the class (and, yes, this feels a little hacky to me, although I admit it’s very convenient). \u00c2\u00a0If that xib file exists, the view in it is created with all the properties (positioning, fonts, strings, colors, connections, etc) at runtime. \u00c2\u00a0If you have many UILabels in your view, and many instance variables pointing to UILabels, then the code that creates these views for you will need to know which pointers are meant to point to which objects \u00e2\u20ac\u201c that’s why we need to provide these connections. \u00c2\u00a0The information for those connections is stored in the xib file, which the UIViewController code handles for you.<\/p>\n

    There are a lot more interesting details behind the curtains, but that is the subject of another post.<\/p>\n","protected":false},"excerpt":{"rendered":"

    One of the first big confusions I confronted when learning to work with xcode and Interface Builder was the connection between things in my code (particularly those marked as IBOutlets or IBActions) and corresponding things in Interface Builder. \u00c2\u00a0In many languages, you expect every file you work with to be explicitly mentioned by name somewhere […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[5,4,3],"tags":[38,39,102],"_links":{"self":[{"href":"http:\/\/bynomial.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/5"}],"collection":[{"href":"http:\/\/bynomial.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/bynomial.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/bynomial.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/bynomial.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5"}],"version-history":[{"count":0,"href":"http:\/\/bynomial.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/5\/revisions"}],"wp:attachment":[{"href":"http:\/\/bynomial.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/bynomial.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/bynomial.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}