Video details

Execute a JavaScript Function from Java and a Java Method from JavaScript


In this video, Alejandro Duarte shows how to connect Java and JavaScript using the Vaadin open-source Java web framework. 👇
0:00 Intro 0:17 Implementing a simple example app 1:29 Adding and loading a .js file
2:04 Implementing a JavaScript function 3:22 Calling a JavaScript function from server-side Java 4:44 Using a function return value in the server 6:25 Calling a Java method from a JavaScript function 10:25 Outro
PUBLICATION PERMISSIONS: Original video was published with the Creative Commons Attribution license (reuse allowed). Link:


In this video, I'm going to show you how to call a JavaScript function in the browser, but from Java running on the server side and the other way around, how to call a Java method in the server from a JavaScript function. All right. So I have this project here. And in fact, there are many projects because this is part of my upcoming book on adding. But this is the important one is just a value project with one class with one view that extends vertically out, and it's this mapped to this route. So let's create a new button here that says toggle let's assign this to a new variable and a new image as well. So I guess this requires this source on that. Okay. So I'm gonna grab the link from here from the open JDK page copy image link. Very cheerful, Duke. And maybe we want to make this image with full. Maybe that's a good idea. Of course, we need to add the button on the image to the vertical layout. So let me open up what browser over here and let's request that view. Dont show this again. Yeah. So it's working. Now. What we want to do is we want to call a JavaScript function from here. This is server side Java. And so for that, we need to create first a new JavaScript file here in front end. So I'm going to call it script. At is make sure that you are adding it here. There we go. Let me move this over there. So we can see the Java code at the same time. And we need to load that with JSON. And what's called scripted is. Okay. So now we can define a function here. So you might think it's a good idea to just go ahead and create a function like this function. Let's say toggle and rep of the element. Right. But in fact, what we want to do is add a new object to the window scope if you wish. And let's move this over here. And so the notation should change to this because this an object in. So the subject is going to be a function. And now we can implement the the functionality to toggle the visibility. Let's say if these image and I'd like to use Jquery. So we need to load query the way you do it is the same. It's fluctuate script, and I'm gonna get it from here. I have the page ready. Let's copy this link that is Jquery. And now we can use query here. So it mean select the element. And I think it's a fate toggle I hope that's the correct one. I think it is. Well, we can just try here. So I want to call that function when we click this button. So button that add click listener event. And here we're going to call that that function. So how to do that UI that get current get page execute JS. And here we can put any JavaScript expression, so we need to use this namespace toggle and we pass the parameter. So the parameters we specify them here. I need to pass what we need to toggle, which is the image. And I need to specify the position here, starting with zero the position here in this list of parameters. So you of course, can use one, two, three. If you have more parameters here. Right. Like this would be the parameter one, two, etcetera. Okay. Very good. I think this should work. Let's see if this restart it automatically. There we go. Now. We can tell cheerful Duke. Very good. What else can we do here? How about returning something if we want to return, for example, a new date dot. Alexis, I guess this that should be a string. How can we use that value here in the on the server side? So if you have a look at this method, it returns a pending JavaScript result. That means we need to use the then method. Let me format this a little bit and we have the result here result that we can use. For example, notification lot show result as string. Let me form this again. Okay. So that's how you use the return value from the function. But there's a problem still. So let me refresh this to reload everything. You will see that this is no, it's not really taking that because this result is the return value from this expression and this is not returning anything we need to say return some value. Right. So remember to put this return here. Now let's try that again toggle now we see that it shows the the date. Very good. Okay. How about the other way around? How can we call a Java method from JavaScript? So let's explore that. For example, let's say we want to add a click listener to this. Of course you can add it just we'd add create listener, but we wouldn't learn to match if we do it that way. So I want to add a click listener here in JavaScript to the element and and then call call the server. Okay. So for example, we want to call a new function. Sorry. Method here show or let's say click notification, and we can pass the coordinates of the click event and we can show the notification here. It shows. Actually, it's a nicer way. Message equals string dot format clicked, and then some number and another number X y. And we show that message. So we want to call that that method from here. In order to enable that, we need to Mark this with a client callable. Otherwise we won't be able to do it. And let's create for example, we can create a new unit function here that receives the element that's going to kind of receive the clicks. But we need also something to be able to call this show click notification method. And so that's going to be the view because it's in the view after. All. Right, in this class. So it makes sense. Now we want to take this element on click. We're going to say that the JavaScript. We're going to say that we want to call the server. Want to call this way to do that is we take the view and bad in adds something special here. We should call server with that notation. So dollar sign, money sign and then server. Then we can call this method right there and pass. For example, event dot, client X, event client y and and yeah, I think that should work. We need to add a coma here because these are it's kind of a map, right? It's a JavaScript object. And I think that should be. Let's try it out. Okay. It's not working. Let's investigate. Of course we're creating this function, but we're not calling the function too in it to initialize the logic here to add this click listener. So we need to do it. So we already know how to do that. Get current get page execute namespace in it. And then this time we need two parameters. So zero and one and the first one was the element. I forgot to close this string. The one is the image and the view is this so that should do the trick. Let me format this maybe and click now it works. Alright. That was fun. Thanks for watching. And I'll see you in the next video.