Call Java method/event from Javascript function in template

Flow
1

Hi,

My apologies for the probably basic Javascript question, but for Vaadin 10 Javascript is becoming a necessity.

How do I call a method (or trigger and event) on the Java side from within a Javascript function and pass a variable/data?

Thx.

2

Take a look at [Event Handlers documentation]
(https://vaadin.com/docs/v10/flow/polymer-templates/tutorial-template-event-handlers.html).

3

HI Diogo,

Thanks for the link. I did already check that section and couldn’t find an answer to my use case.

Basically I have a button component that triggers a third party javascript library function, that in turn makes a call to an external service (a payment gateway in my case). Once the payment is verified, a token is returned to a javascript callback function. From this callback function I now need to trigger a Java event with the token data.

So I’m looking for a way to call the Java from within a Javascript function. I couldn’t see a way to do this in the event handlers documentation.

4

There is @ClientCallable which publishes a Java method in a PolymerTemplate class so it can be called as $server.methodName from JS

5

Hi Artur. Thanks, that looks exactly like what I need. But the feature was only introduced in beta9 or 10. I’m still on beta8 and there are spring boot dependency differences between 8 and 9. I will do the upgrade and then post my code for future reference.

6

It is there in earlier versions also, I think it was renamed recently from @ClientDelegate

7

Here’s my working code. I have two different methods of calling the server event. One using @EventHandler and a hidden button and the second using @ClientCallable

<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="payment-stripe-view">

    <template>
        <style>
            .hiddendiv {
                display:none;
            }
        </style>

        <div>Stripe payments</div>
        <div>
            <button id="customButton">Purchase</button>
        </div>
        <button class="hiddendiv" id="doneButton" on-click="doneEvent"></button>

    </template>

    <script type="text/javascript" src="https://checkout.stripe.com/checkout.js"></script>

    <script>
        class PaymentStripeView extends Polymer.Element {
            static get is() {
                return 'payment-stripe-view';
            }

            afterServerUpdate() {
                var doneBtn = this.shadowRoot.querySelector('#doneButton');
                var vaadinServer = this.$server;
                var handler = StripeCheckout.configure({
                  key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
                  image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
                  locale: 'auto',
                  token: function(token) {
                    console.log('Token: ' + token.id);

                    // Method one using hidden element and @EventHandler
                    doneBtn.textContent = token.id;
                    doneBtn.click();

                    // Method two using @ClientCallback
                    vaadinServer.doneCall(token.id);

                    // You can access the token ID with `token.id`.
                    // Get the token ID to your server-side code for use.
                  }
                });

                this.shadowRoot.querySelector('#customButton').addEventListener('click', function(e) {
                  // Open Checkout with further options:
                  handler.open({
                    name: 'Stripe.com',
                    description: '2 widgets',
                    zipCode: true,
                    amount: 2000
                  });
                  e.preventDefault();
                });

                // Close Checkout on page navigation:
                window.addEventListener('popstate', function() {
                  handler.close();
                });
            }
        }

        customElements.define(PaymentStripeView.is, PaymentStripeView);

    </script>
</dom-module>

and the server side

    @EventHandler
    public void doneEvent(@EventData("event.srcElement.tagName") String tag,
                          @EventData("event.srcElement.textContent") String token) {
        log.info("Stripe call is completed on tag: " + tag + " with token: " + token);
    }

    @ClientCallable
    private void doneCall(String token){
        log.info("Stripe call is completed with token: " + token);
    }