Lesson video

Hi, everyone, my name is Mrs. Welsh.

Today we'll be learning about events and interactions.

Don't worry if this is new to you, I'll be guiding you through each step.

So let's get started.

Welcome to today's lesson from the unit Mobile app development.

This lesson is called Events and Interactions.

By the end of today's lesson, you will be able to make an app respond to user actions by using events.

So let's get started.

Keywords we'll be using during today's lesson are: event: an action that happens in the app which the user can respond to.

Event listener: code that waits for a specific event to happen and then runs a set of instructions.

Trigger: the action that causes an event to run.

And function: a named block of code that performs a task when called.

In today's lesson we'll be looking at explaining how events respond to interactions, create a button-based interaction within an app, and implement event listeners to trigger outputs.

But first we'll start with explaining how events respond to interactions.

Think about a light switch.

When you click the light switch on, this is an event.

The light then responds by turning on.

In an app, an event could be when a click is detected.

An event is what the app detects has happened.

Events are like signals.

They tell the app, "Hey, the user just did something." True or false: Touching a button on an app is an example of an event? If you need to pause the video to read through the question and decide your answer, do so now.

What did you decide? Is touching a button on an app an example of an event? If you said true, you would be correct.

Any action a user takes, like touching or clicking, is an event that the app can notice.

Moving on.

The app does not automatically do something when an event happens.

If the light switch is not connected to the light, it will not turn on.

For an app to respond to an event, it needs something called an event listener.

An event listener is a monitor in the app's code.

It listens for a specific action, like the click of a button.

When it notices the action, it runs a function.

The function tells the app what to do when that action happens.

So for example, we'll have when a button is clicked, the event listener will say that button has been clicked, and then the function is the piece of code telling the app to, say, maybe go to a different screen or to run a search or something along those lines.

Let's have a look at another question.

What is the job of an event listener? A: to press buttons for the user? B: to wait for user actions and to tell the app? C: to make the app start? If you need to pause the video now to read back through the question and make your decision, do so now.

What do we think? Is it A, B, or C? If you said B, to wait for the user actions and to tell the app, you would be correct.

That is the job of an event listener.

So, well done.

And let's move on.

Looking at Task A, we are going to be filling in the gaps of the sentences using the word bank below.

And the word bank we've got are: event, event listener, nothing, function and listener, and we've got five sentences to complete.

One: An blank is when the app has detected that something has happened.

Two: An app uses an blank to notice when something happens.

Three: The app will only respond if an event blank is attached.

Four: If there is no event listener, the app will do blank when you click.

Five: Apps respond to events by carrying out a blank.

If you need to pause video now to go back over the sentences and decide which word goes where, do so now.

Let's have a look at the answers.

What did we get? One: An event is when the app has detected that something has happened.

Two: An app uses an event listener to notice when something happens.

Three: The app will only respond if an event listener is attached.

Four: If there is no event listener, the app will do nothing when you click.

Five: Apps respond to events by carrying out a function.

Did you get all the words in the right place? If you did, really good job, you have got a really good understanding of how events and event listeners are used when we develop apps.

Let's move on.

We're now gonna be taking a look at how to create a button-based interaction within an app.

A button is part of the app that users can click or tap.

Buttons can be used for a range of actions, like next, play, start, help.

A button-based interaction means the user taps a button to make something happen.

Let's have a look at how to create a button.

On the screen, we've got the App Lab design screen, and first of all, we are gonna make sure we are clicked into design mode.

If we're not clicked in design mode, you are not gonna be able to drag any of the elements onto the screen itself.

So first of all, we will drag a button onto the screen.

The next thing we're going to do is give the button a unique ID name.

So we can see here, the button has been given the ID: Start Button, so that means that we can identify it from any other buttons or elements we may add to our design.

Let's have a look at a question.

True or false: You must write code to add a button in App Lab? Pause the video now if you need to read back through the question and decide upon your answer.

What do we think? True or false? If you said false, you would be correct.

You can add and move buttons just by adding them to the screen from the toolbox.

You don't actually have to write any code to add the button.

If you want the button to do something, then we need to be looking at code.

But just to add it to your screen, no code is required.

So if you've got that, good job, and let's move on.

To create a good button, you need to make sure that each button has clear text.

So remember something that labels it so it's recognisable that when we click that button we know what's gonna happen.

Keep the layout simple and easy to read.

So again, the button needs to be quite bold, stand out from the rest of the screen, text that we are able to read quite easily.

Use space so the buttons are not close to each other.

And use bold colours so they stand out.

And we've got a little example there that we can see these buttons, whether you like the colour or not, do check all of those things that it has got: Clear text.

The font is very clear.

The button labels themselves tell you exactly what that button is going to do.

The layout is really simple.

There's some nice spacing between the buttons, so you're not going to click the wrong button by mistake and it has got quite a bold colour in relation to the background that they are sitting on.

When we create an app, every element in the app has an ID.

The ID is used to identify an element when coding events.

Always give each interactive element a unique ID.

It helps to make the code clear and it helps the app to work as expected.

So in the example before, we had given an ID to our button, which was called Start Button and that was going to help us when we came to code it, that if we were doing anything with the start button, that is the ID that we would look for.

If we had everything just labelled "Button 1, Button 2, Button 3," that's not very descriptive in terms of what button is doing what action.

Let's have a look at a question.

True or false: It is important to give elements a unique ID if you want the code to control them.

Pause the video now if you need to read back through the question and make your decision.

What do we think? True or false? If you said true, you would be correct.

The ID is how the code knows which specific element to listen to or change.

And as we said before, by giving them a unique ID, that is descriptive to what that element is or what that element is going to do, it's going to make coding it a lot more easy.

Let's have a look at Task B.

Complete the screen creation for the color-changer app.

To start with, you are going to open the starter app at oak.

link/color-changer.

Part one: select the "Make it red" button and change the button colour to red and change the font family to Arial.

Two: Create a new button called "Make it green." Give the button an ID and the button must be green.

And part three: Create a third button and set it to another colour.

Okay, so when we're looking at this, we have the first button that is already created and you've just got to edit a couple of properties.

The second button is asking you to create a whole new button with a specific colour, which is green, giving it an ID.

And then the third part, you are on your own there.

You need to create another button, a colour of your choosing.

And again, you need to make sure that you have gone through and given that button an ID, you've made it the right colour and it has also got a text label that makes it identifiable.

Remembering all the rules about creating buttons.

Clear text makes it easy to use and understand.

If you need to pause the video now to read back through the task and complete it, do so.

Let's take a look at a possible solution.

We have got the "Make it red" button with a red background.

We have got the "Make it green" button that has been created, it has a green background colour, and the ID has been set to something that is sensible and it's called green button, so that makes it really identifiable that anything we do, that is the green button.

And then we've got the third button, which is called "Make it blue," and that is the button that we have created from scratch.

So for that third part of the task.

Okay, so remember the "Make it red" button already existed and we just had to edit it.

The "Make it green" button, we were given specific instructions about how to create it.

And the "Make it blue" button, we were on our own at that point and you had to decide.

So your button may be a completely different colour, but as long as you've got your third button there and it is in keeping with the other two that have been created, excellent job, well done.

And let's move on.

The final part of today's lesson is implementing event listeners to trigger outputs.

A trigger is a user action that the app is programmed to respond to.

Common triggers can include: clicking a button, tapping a screen, typing into a text box, moving a mouse and so on.

And how the interactivity works in an app, we have got the trigger and the trigger is the user action.

As we said, this could be a button click or tapping on the screen.

We have the event and the app detects a trigger has taken place.

The event listener waits for the event to happen and then the function runs the code.

So these are all the different things that are going on when you are using an app.

So if we have a look at the common trigger that's clicking a button, an event listener is attached to a button and when it is clicked, the app runs the function.

So if we have a look at the example, we have the element, in this case it's a button.

So we have our example button, "Let's go!" And what happens is, this is the thing the user is going to click.

The trigger, when we look at the code, is a click.

So that's just clicking the button.

And this is the user action.

So this is what the user does to trigger the event.

We then have the event listener, which is the onEvent command.

And this watches for the action.

And the action in this case is the clicking of the button.

And then we have our function which finally runs our code.

So let's have a look at the question before moving on.

Which of the following is an example of a trigger in an app? A: changing a screen's background colour? B: a user clicking a "Next" button? C: adding an image to the app? Or D: naming a screen? So if you need to pause the video to read back through the question and decide upon your answer, do so now.

What do we think? Which is it? If you said B, you would be correct.

The user clicking the button is an example of a trigger in an app.

All the others are to do with designing the app itself.

Let's have a look at how we are going to create a simple button.

So first of all, we have got on our screen a mockup of an app screen layout.

On here we have got an empty label.

So at the moment we've got a label there, it does not have any text.

And underneath it, we have got a button that reads "Click me." So we've created a button with the correct display text.

And in the properties panel, we have given the label and a button an ID, which helps us to identify them.

So that's our screen design.

When we're looking at our screen code, first of all we have clicked Code.

So we are now in code view and you can see that the toolbox has changed and the workspace has also changed and we've now got the block-based code toolbox.

And what we can do, we will drag and drop our blocks of code into our workspace.

So very similar to other block-based coding you may have done before.

And for this particular example, we have got our "Click me" button, and, as we can see, we have dragged out the onEvent.

So that is us saying an event is gonna take place.

We then selected the element that the event is gonna be attached to.

And in this case it is the "Click me" button.

So we can see the "Click me" button has been selected as the element.

We have then got what trigger we are looking for and that is the click.

And then the function is the code that is going to run when the button has been clicked.

And what we've got here is a command called "setText" and we can suggest that setText means we are going to be updating text that is going to be displayed somewhere.

It is gonna be displayed in the element called "message label." So that is our empty label that we added to the screen.

And the text that is going to be displayed is "You clicked the button." So very, very simple.

We have our onEvent attached to the "Click me" button.

When the button is clicked, it is going to fill the empty label with "You clicked the button" text.

Okay, so if we just go through that again.

We have got our onEvent block dragged out from the toolbox.

We have a dropdown list of elements which have been added to the app by us, the developer, and they will pop up in a little dropdown list.

We have then got, again, a dropdown list for the different triggers that we could use, but as it is a button, we're using click, and then we have got the function, which is going to be the response code.

So the code that runs.

And as I said, what we have got is the "Click me" button selected for the event and the response code, which is the text, is going to appear in the empty message label.

Once again, in the setText, we can click a little dropdown box and that will give us a list of different elements that we can select and the "You clicked the button," we would type in as the display message.

So we will manually type that in.

Let's have a look at a question.

What does the following code do? Does it A: change the button's colour? B: change the label when the button is clicked? Or C: add a new button? If you need to pause the video now to read through the question and decide upon your answer, do so now.

Okay, let's have a look at the answer.

If you selected B, changes the label when the button is clicked, you would be correct.

This is the event listener and it waits for a click on the button and then it changes the label for it to say, "Hello and welcome." So if you selected B, good job, you've definitely understood what this onEvent command means and also what the setText command does.

So excellent job and let's move on.

For Task C, you need to complete the color-changer app by adding the code.

So again, open the starter app link, which is oak.

link/color-changer.

And the first part is you are going to select code view and create the code for each button.

So for this, A: the button must make the screen green when clicked.

B: the new button you added must make the background change colour.

And for the second part of this, you need to test the app by clicking the Run button.

So if you need to pause the video so you can read through the task again and complete the changes to the app, do so now.

Let's take a look.

So what we should have in terms of our code is the first one, we have got the "Make it red" code has been completed with the background colour set to red.

We have got "Make it green" code.

And again this means that the background colour will now change to a green colour.

And we've got the button that you created which will be a colour of your choosing.

In the example, it is blue and again we have got it so it sets the background colour to blue.

And we can see we are using a slightly different command this time from the setText, we are using something called setProperty.

We are selecting screen1 because that's the only screen we have.

We are selecting the background colour for the, or the property that is going to be changed.

And we have then got the colour that we can select or type in.

If you've managed to get it so when you test the app, you can click through all the different buttons and the background colour changes to the colour that has been selected.

So in this place it'll be blue, red, and green depending on which button is clicked, and it all works as you expected, excellent job.

Well done on creating your first interactive app in App Lab.

Another useful trick is to be able to show or hide elements when an event is triggered, because it can make apps less crowded, it could reveal extra content, it could create an interactive journey through the app.

Let's have a look at how we can do that.

We can use show or hide and this can allow us to show or hide a message, maybe show or hide an image.

And what we've got here is a mockup of a screen.

So we've got a button that we can click called Start to show a message.

We have got an image which is controlled by the buttons below, and the buttons below are labelled Show and Hide.

So again, we are using the characteristics of a good app by having buttons clearly labelled with names that make it obvious as to what they do.

So for example, if I click the show button, the image is going to appear, and if I click the Hide button, the image is going to be hidden.

So to do this, again we are using the onEvent command.

We have got, on the first one, we have got our show button as the element that we are coding.

And again we are using click as our trigger.

We have then got showElement and we have selected the magic_8, which is the name of the image.

So when we click the Show button, this means the element, magic_8 or the image will show.

We have then got the second button, which is the hide button.

And again we are using the click trigger.

And this time, we are using the command hideElement with the magic_8 selected.

So we know that the element when we click the hide button is going to be hidden.

And right at the bottom there, we have got hideElement magic_8.

So this means when we first start up the app, the image is going to be hidden from the screen.

So it's only when we click the show button is it going to appear.

So if we have a quick look at the example we have got when we click the hide button, the image will disappear and when we click the show button, the image will appear to the screen.

What we're also gonna do is add a label to the screen because again, we can also show and hide text as well.

So to do this, we have got our onEvent, we are using our start button and we have got our setText.

So we've selected our message box, we have got our label text, which is "Ask the future." So that is the text that's going to be displayed.

And we've got the show element command and we've selected the message box.

So we know that when the start button is clicked, it is gonna set the text in the message box to ask the future and then it is going to show the message box.

Underneath that, we have got hideElement message_box.

So that means that the label is hidden when the app first runs, and it is only when the start button is clicked does the message box show up with "Ask the future." So again, just so we can see this, when the button is clicked, the label will display and this, as you can see here, it says "Ask the Future." And that is the part that will be hidden when the app first starts up.

And it's only when the start button is clicked, will it actually display.

So continuing with Task C.

For part three, you are creating show and hide text.

So the first part you're going to need to click into design view, create a label and give it an ID and then click back into code view.

Part four, for each button you need to do the following: add a setText, select the label ID for the label you've just created and update the text.

And this could be you're just telling it the background has been changed to red or you have clicked to the red button.

The second part of this is you need to add showElement to the function and select the label.

Part five, add the hide element to the bottom of the code and again select the label ID.

So this means that when we first run the app, the label will be hidden and it's only when we click the buttons will the label appear with the correct text for that button.

So whether it's "the background is now red," "the background is now green," the text itself is up to you.

And then part six, test the app by clicking the Run button.

If you need to pause the video now to go back through and read through the task and complete it, do so now.

Let's take a look at a possible solution.

So for each of the button, we have got a setText with the label ID selected and the text updated.

So we can see here that in the blue button, we have got setText message_box.

So that is the label that we have created.

And the text it's going to display is "Background is now blue." And then underneath that we've got showElement message_box.

This has then been repeated for both the red and the green button.

And underneath, the three onEvents, we have got hideElement message_box and this is placed at the end of the code.

So we know that when the app runs, the message box will be hidden until a button is clicked.

Okay, again, yours might be slightly different because you may have called your label something other than message box.

And again, the text you have used in the setText may also be slightly different.

But what happens now is when we first load up the app, we've got a white background with our three buttons and the label is hidden when the app first runs.

And then when we click one of the buttons, in this case we've clicked the red button, the background turns red as it is supposed to, and a label underneath appears telling you the background is now red.

So if your app does all of those things, obviously the text itself may be slightly different, your buttons may be slightly different colours at this point, but if you've got it, so when you run it, the label is hidden and only when you click on the buttons does the background change and the text label now appear, excellent job, really well done utilising events and event listeners within your app.

So in summary, events are things that happen in an app.

An event listener is code that waits for an event to happen and then runs a function.

A trigger is the user's action that starts the event.

A function is a set of instructions the app follows when the event happens.

A good user interface is easy to use and clearly shows the user what to do next.

So thank you for joining me for today's lesson.

I'm hoping you've found it interesting learning about how to add events and interactivity to your app screens and I look forward to seeing you next time.