In order to respond to events or change UI objects at runtime, you'll need to make code connections. In this video, learn how to connect those user interface elements to code using the Assistant Editor.
- [Instructor] Let's say we wanted to make an app where the user types in their name, presses a submit button and then there's some kind of message displayed to them. To make that work, we're going to need something to display the message. Let's grab a label from the object library. We'll do it just like we did before. Notice that it didn't drag because I had to hold the option key to make that happen. So put the label right below that button and then drag it out using the right center handle.
This time, instead of making the label, have text on it, I'm going to make it empty. So with the label selected, I'm going to head over to the attributes inspector, which is in the middle of the inspector bar, I'm going to make the text empty by deleting the text in the title field and then pressing return. You can see its done updated in the label. The attributes inspector allows you to modify various properties of the currently selected object. You'll see that here we have a placeholder string we can put in there, the alignment border, et cetera.
There are many more options available in the attributes inspector that are possible to talk about in a course. So I recommend selecting the different user interface objects and experimenting with the different settings in the attributes inspector so that you can see what you can modify straight from the user interface. Our next step is to select these elements and connect them to a code which we can do using the assistant editor as we looked at previously in the course. Simply option click the file that you want to appear on the right side of the assistant editor.
I'm going to hide the right and left areas of the screen and make sure the document outline is hidden so that I have plenty of working space. Our next step here is to connect that name text field and this label here to our code. I'll make the connection with the label first since its already selected. Right-click and drag from the label right underneath your name of your class. You should see connection outlet and type NS text field. If you don't see both of those, it means you clicked and dragged from the wrong element.
So right-click and drag again from the proper label. We'll call this label and then press return or hit the connect button. Let's do the same thing for the text field. Right-click and drag underneath the existing variable we just created. Call it text field and then hit return. So note that we've created two variables with this call out at IB Outlet. When you create an outlet to a user interface object, it makes a variable in code so you can access data from that object or modify it, should you choose.
A button is a little bit different because instead of modifying the button or getting data from the button, we want to respond to the action of the button being pressed. To do that, right-click and drag from the button, below the view to load method. This is actually going to create a method that will handle the button pressed event. Make sure the connection says action and you can leave type at any, but if you ever want to access the object that's triggering an action, you can use the dropdown menu and you can choose the data type there.
That's the type of data that comes into the method that you create when you make this connection. So we'll call this button was pressed and then hit return or connect. And there we go. Button was pressed. Inside of this method, we put the code that we want to happen when the button is pressed. We can actually do this without even closing the assistant editor. I'll go inside of the method and then I'm going to modify the text of the label. Label that string value.
So this changes the text inside of the label. So we set it equal to a string and then what we want here is to say, hello to the person's name that they put in. So if I put in Todd in the name field. Hit the submit button. It should say hello Todd in the label. So type hello and then a space and then an exclamation point to end the phrase. Right before the exclamation point, type a backslash in some parenthesis. If you're familiar with Swift already, you may have used this before.
This allows you to put variable values inside of a string. So inside of the parenthesis here, type text field dot string value. That will grab whatever values inside of this text field and then replace it inside of the string. So now at this point, you should be able to run the application and see that it works properly. Type a name into the text field, hit the submit button and then you have the welcome text. So we've successfully connected user interface objects to code.
- Installing Xcode
- Creating your first project
- Editing code
- Creating snippets
- Prototyping in playgrounds
- Implementing version control with Git
- Building and connecting the interface
- Compiling and debugging apps in Xcode
- Creating workspaces for sharing resources and code