From the course: iOS 14 Development Essential Training

Handling a button press

From the course: iOS 14 Development Essential Training

Start my 1-month free trial

Handling a button press

- [Instructor] Let's say instead of modifying text inside of a label, when the application runs, let's say we want to modify based on some kind of user generated event. So when a user presses a button, for example, it's important to understand how to do that because there are two types of code connections that we can make with Storyboards, outlets and actions. An outlet from a Storyboard creates a code property that you can modify and change when you want to, like we've done with this label. And action connection from a Storyboard creates some block of code that's going to be triggered based on any event that happens. So that's what we're going to look at now, those actions. We can go back to our Storyboard by hovering over the left side of the screen, and then clicking Main.Storyboard. When I move my mouse button, it slides back. So I'm going to scroll up so I can see my text right here. And if by any chance, the text that you change with code got truncated, and by that I mean it ends with some ellipsis when you see it running in the simulator, you can simply just drag it out like that, extending the bounding box horizontally so it can accommodate more text. So let's say we want this to change when we press a button. Do you remember how we brought the label onto the screen by using the library? We can do the same thing for a button. So open up the library, which you do with the plus button up here in the toolbar, find the button, or you can filter for button by typing it up in the search area, and then click and drag a button onto the screen. Let's say we wanted to change the text on this button. What would you do? We talked about two ways to change the text in a label and that works the same with buttons. We can either double click it and make the change or we can change it via the Attributes Inspector. Let's just double click now and change it to say Click Me and then press return. Remember, you can find the Attributes Inspector by hovering over the right edge of the screen, and then selecting the Attributes Inspector in the Inspector bar. Alright, now we want to connect this button to our code. To do that, we're going to follow the same steps that we did for the label. So we're going to show the navigator, we can hover over it on the left like we did before, and then option click ViewController.Swift. Now we see both our UI. If I scroll over a little bit, and our code. Just like we did before with a label, we're going to right click and drag from the button into the code. Except in this case, we don't want to drag necessarily in the exact same spot, though it will work if we drag it right here. Usually when you write code, you don't put your methods above your properties. But for what we're doing right now, it's not incredibly important. I recommend putting this underneath viewdidload. So you want to get between the close curly brace of viewdidload and the closed curly brace of UI view controller at the bottom. So right about here should be good. I'm between lines 18 and 19, if it's difficult to see, and then I'm going to release my right mouse button. Just like we did before, you want to confirm that everything that you see in this menu is correct before hitting Connect. So you should see connection action. If you don't right click and drag from the button again. Here we're going to put a name and the name is going to be Button Pressed. This is the name that we're assigning to the method that's going to be called in the code when the button is pressed. If you're unfamiliar with programming, a method refers to a section or block of code. Just like we have our viewdidload here. All of this is executed when the view is loaded. So everything we put inside of the button pressed method will happen when the button is pressed. So everything as it is you can hit the Connect button or press Return on your keyboard. Now we're going to make a really simple change here. Just go in between the curly braces, and then just cut and paste label.text equals new text. So select command X to cut and command V to paste inside of this other method. Now what's going to happen is we're going to see this default label value when we run the app and then when we hit the button, this code will be executed and we'll see the label update. Go and hit Command R to run the application in the simulator. After it gets past the large screen, which is the blank white screen, you should see the label and the button on the screen. Click on the button and there you go, it's updated. So now we've successfully modified an object in our user interface when it receives user interaction.

Contents