[00:00] In this lesson we'll take a look at how scripting and vision components is typically done using component event handlers. Events are things that may happen to a component such as a property changing or the component gaining focus. And an event handler allows you to write a script, to handle how to respond to that event. To access the event handlers on a component, simply right click on the component and go to scripting. Here in the scripting window, we can see a list of the event handlers for this component on the left. The event handlers that a component has, varies depending on the type of component. The event handlers are split up over these different categories and I'll open them up here. With each one responding to a different type of event. The event handlers are usually pretty self-explanatory as to when they fire, but if you select it, they also have an event description down here at the bottom of the window.

[01:06] You'll notice I've selected the mouseenter event handler, which fires when the mouse enters the space over the source component. Once you have selected an event handler, you can then add a script that runs when that event fires. To make writing scripts a little bit easier, we have what's called script builders for some common actions that you can use to build the scripts for you. You can navigate between the different builders using these tabs up at the top. Things like navigation actions, setting a tag value, doing a SQL update or setting a property value. All available within these builders. The script editor tab over here on the right, will instead let you write your own scripts. If I take a look at one of the builders here, say set tag value, I can make it so that when the event handler for mouseenter fires, I want to set a particular tag and we'll go to our tag browser over here and navigate down to something maybe Ramp0, let's say, and we want to set that to a particular value.

[02:19] Let's say five. Then one of the neat features of script builders is that, I can then navigate over to the script editor tab and the script that the builder has created, will be placed in here. You can then manipulate the script in any way you want providing you with a great tool to get some code started, or to learn more about scripting if you're new to it. For now, I'm going to do something really simple. I'm going to clear out this entire automatically generated script and replace it with a simple print statement, so we can easily see how this event handler works. So just a simple print test for right now. Then I'm going to go ahead and hit okay.

[03:06] And in my console, which I can open if needed from the tools menu, I will be able to see the print commands coming from this particular component. Now keep in mind that the scripts only run within the runtime. So to have them execute here in the designer, I need to put my designer into preview mode for the script to actually fire. So now, you can see that when the mouse enters, the components bounce, the script fires, and I print out the word test in the console down below. And I can do this as many times as I feel like it. I mentioned earlier that different components have different event handlers, and there was one component in particular that I wanted to take a look at. So let's first exit preview mode and return to design mode like so. Now, I have here just a standard button and I'm going to go ahead and right click on it and go to scripting on this component.

[04:07] The button component has a lot of the events we saw earlier on the text field. But it also has an action performed event. The action performed event fires when the action of the component occurs. In this case, when the button is being pressed. Now if you wanted to have a script fire when the user presses a button, you might initially place the script on an event, like mouse clicked or mouse pressed. While these would work in some instances, it is possible to press a button in ways other than using the mouse. For example, you can tab over to the button using the keyboard and then press it using the space bar. Or type in the mnemonic key for the button that has been set up. In those cases, the mouse events would not fire since the mouse was not involved in any way. The action performed event covers all methods of the button being pressed.

[05:05] So it is advisable to use that dealing with buttons. One last thing with these mouse events. I have a text field here that has some scripting already set up on these three events. The mouse clicked, mouse pressed and mouse released events. It simply prints the name of the event that's firing it. And let me close out of this. If I were to test this out, by going back into the preview mode and clicking on the field, you'll notice that I got all three events to fire, mouse pressed, mouse released and mouse clicked. However, the mouse clicked event is special in that it requires a full click. Meaning of press and release in the exact same spot. So if I click again, but this time, move my mouse in between pressing and releasing, you'll notice that the mouse clicked event doesn't fire.

[06:14] Only the mouse pressed and the mouse released events got fired. Since slight mouse movement during the click happens often, we actually recommend using a mouse press or release script over a mouse click script when the action performed event is not available. It's important to keep this in mind when deciding on an event to use, as you want to ensure that the script you have created fires at the appropriate time. So in wrapping up, in this lesson we've seen how simple event handler scripts work and how to add them to some common programs situations such as mouse actions and button presses.