Programming for Non-Programmers: iOS 7
Illustration by Don Barnett

Connecting a button to a function


From:

Programming for Non-Programmers: iOS 7

with Todd Perkins

Video: Connecting a button to a function

We've already looked at connecting a variable to a storyboard object. Now, we'll look at connecting a function to a storyboard action. Now, I use the word action instead of object because we're not connecting a function to a visual element, we're connecting a function to something that happens when you click a button. So let's look at how that works. I'm in my ViewController.h file, and you can see I have a label that is connected to a storyboard UILabel.
Expand all | Collapse all
  1. 5m 18s
    1. Welcome
      44s
    2. What you should know before starting this course
      1m 17s
    3. Related courses
      1m 8s
    4. Using the exercise files
      1m 19s
    5. Viewing the finished app
      50s
  2. 10m 24s
    1. Finding and installing Xcode
      35s
    2. Creating an Xcode project
      1m 55s
    3. Understanding the Xcode interface
      3m 54s
    4. Configuring Xcode for app development
      2m 14s
    5. Configuring the iOS Simulator for app development
      1m 46s
  3. 43m 43s
    1. Understanding how programming works
      2m 34s
    2. Understanding variables
      2m 56s
    3. Using primitive variables
      9m 10s
    4. Using pointer variables
      4m 51s
    5. Using instance variables
      5m 19s
    6. Connecting visual objects to variables
      8m 12s
    7. Placing a number variable in a string
      4m 33s
    8. Challenge: Create two variables
      54s
    9. Solution: Create two variables
      5m 14s
  4. 27m 14s
    1. Understanding functions, methods, and selectors
      4m 43s
    2. Using functions, methods, and selectors
      7m 1s
    3. Understanding parameter functions
      2m 10s
    4. Connecting a button to a function
      7m 47s
    5. Challenge: Create a counter app
      43s
    6. Solution: Create a counter app
      4m 50s
  5. 13m 38s
    1. Understanding conditional statements
      2m 35s
    2. Using conditional statements
      5m 21s
    3. Challenge: Build an on/off button app
      39s
    4. Solution: Build an on/off button app
      5m 3s
  6. 44m 59s
    1. Viewing the app's code structure
      2m 11s
    2. Setting up the user interface
      7m 9s
    3. Setting up variables and functions
      5m 8s
    4. Connecting all of the visual elements to code
      2m 59s
    5. Displaying tapped numbers in the calculator
      4m 47s
    6. Controlling when tapped numbers should not appear in the calculator
      3m 27s
    7. Making the Clear button clear all values
      1m 4s
    8. Setting the calculator to add or subtract
      4m 29s
    9. Showing the total when the equals button is tapped
      3m 40s
    10. Formatting a number with commas
      5m 25s
    11. Challenge: Add a multiplication button
      1m 5s
    12. Solution: Add a multiplication button
      3m 35s
  7. 24s
    1. Next steps
      24s

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course Programming for Non-Programmers: iOS 7
2h 25m Beginner Apr 10, 2014

Viewers: in countries Watching now:

iOS app development is actually simpler than you might think—even if you're not an experienced programmer. In this course, Todd Perkins bundles the most important concepts in iOS into a quick course, explaining the development process in a visual way that people of any background can understand. No programming experience required! At the end, you'll have a finished app and a basic understanding of Xcode, the toolset for developing iOS apps; building blocks like variables, functions, and conditional statements; and interface design. You can also figure out if an iOS learning path is right for you, without a lengthy time commitment.

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.

Topics include:
  • 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
Subject:
Developer
Software:
iOS
Author:
Todd Perkins

Connecting a button to a function

We've already looked at connecting a variable to a storyboard object. Now, we'll look at connecting a function to a storyboard action. Now, I use the word action instead of object because we're not connecting a function to a visual element, we're connecting a function to something that happens when you click a button. So let's look at how that works. I'm in my ViewController.h file, and you can see I have a label that is connected to a storyboard UILabel.

Now, below the curly braces, I'm going to declare my function. Now, this is very similar to declaring a variable in our .h file. In that we're not going to declare what the function does. We're just going to say the name of the function, and the type of information that it returns and that it receives. So, we'll type a hyphen and open parenthesis, and then I'm going to type IBAction. And as I type IBAction, you see that Xcode wants to finish this for me.

So, I'm going to press a Return on my keyboard. And now the code that's highlighted says, selector. Remember that selector is synonymous with function, action, or method. So, for selector, I'm going to type in clickedButton, capital B. Then it says colon, then parentheses id. id is a generic data type that can apply to any pointer object. And then the word sender. After sender, I'm going to put a semicolon. Again, we're not putting the curly braces because we're not saying what the function does.

We're just saying that a function will exist in our .m file here. And doing so enables us to connect this function to a button click action. So again, we have IBAction for a function. And IBAction is just a special way of saying void. It's, it's a type of void that says, reveal this function to our storyboard so that we can connect it to a button press. And then, we have IBOutlet which we use for variables.

So we'll see that this has a hollow circle, meaning we haven't connected it to anything yet. So let's connect it to something. Click MainStoryboard.storyboard. And then I'm going to need my utility view on the right side. So I'm going to click the button to reveal the utility view. Just like our label, I'm going to select a button from the Object library. So find the Object library, scroll down till you see Button, it should be right below Label, and then click and drag the button onto the screen.

Now, I'm going to use the guide to drag it to the center of a strain horizontally. In iOS 7, the default buttons do not have a border around them. So it just says button, and of course you could double-click that and change the text if you wanted to. But I'm not going to for now. Now we want to connect the click action of this button to the function that we created. To do that, click on View Controller on the left side of the screen, just like how we set the values for variables and labels, we're going to do the same thing for the button.

So click View Controller. Click in the circle with the arrow. Click the Connections Inspector button, which is the circle with the arrow inside. And then, you won't see it in Outlets actually, you'll have to scroll down and find it in Received Actions. So there's clickedButton and then a colon afterwards. So hover your mouse over that circle, and just like we did with the label, we're going to click and drag over to the button. With the button highlighted, I'm going to release my mouse button, and you're going to notice something different. Here's a list of a whole bunch of different things.

Now, this list contains different actions that we can connect to a function. So the action that we want to connect is when you click on the button, then we can choose whether it's when you finish clicking on the button and lift your finger up, or when you initially put your finger down on the button. And I'm going to chose initially putting my finger down on the button, and that event is called Touch Down. So I'm going to click Touch Down. And now, you'll see in the Received Actions area that I've connected clickedButton to the button.

Alright, let's go back to ViewController.m. Now that I've declared that the clickedButton function exists, I need to define that function inside of my .m file. Until I define it, I'm going to see a warning sign on line 15 next to my @implementation line of code. That warning sign says, you said that a function is going to be inside of this file in ViewController.h, and I don't see the function here, so create it or you're going to have to look at this warning sign.

So let's create that function. I'm going to hide the utilities view and then under viewDidLoad, that is, after the closed curly brace. I'm going to go down a few lines, so I'll type a hyphen and parentheses, IBAction. Now it says selector, again, I'm going to type clickedButton. And then use the code hinting. And now I have all this extra code, so I'm just going to delete everything that I don't need. So I have clickedButton, then a colon, and then parentheses, id, and then sender. So below that, I'm going to write my curly braces.

And now, that warning should go away because I've created the function. And again, I'm seeing this circle that's filled in, saying I've connected this function to some kind of action in my storyboard. In this case, clicking a button. So now, what I want to do is have some kind of visual feedback that shows when I click the button. So we'll type label, that's the name of our label on the screen, .text, that's how we change the text of the label. We'll set it equal to the NSString, which is an at symbol and two quotes, and inside of the quotes, going to type BOOM in all caps.

So I'll run this in the simulator. And remember that clickedButton is not going to run until we actually click the button. So rather than calling the function name, the function is connected to the action of clicking the button. So here's the simulator. And then, you'll see that the label just says Label, but when I click on the Button, the label changes to say BOOM. So to review, here's how you connect a function to an action. In your header file or your .h file, you're going to declare the function.

So hyphen, the return data type is going to be IBAction, the name of the function, colon, the return data type in parentheses, which is going to be just id, and then sender, and then a semicolon. Once you've done that, go to your storyboard, drag a button out. And using the utilities view, you click and drag from the circle onto the button. Choose the event that you want to trigger the function, and then go to your .m file, and then actually define that function there.

Code that you put inside of that function will execute when you click the button.

There are currently no FAQs about Programming for Non-Programmers: iOS 7.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Programming for Non-Programmers: iOS 7.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.