0

is there any oportnunity to use a Vaadin Button in a HTML script?

Id like to use the following button

Button button_login = ew Button();
button_login.setID("buttonlogin");

and this button should be implement in the following script 

<div data-location="buttonlogin"></div>

(Only an idea)

Have so. an idea to bind the button in the html script?

Thank!

Frederik.Wagener
  • 1
  • 4
  • If you want to generate HTML from Vaadin, a simple start to do so is using a `Label` with `Content.HTML` (beware for XSS). If you plan on something else, please add some substance to the question. What is a "html script" and a "html layout script"? – cfrick Nov 22 '17 at 15:47

2 Answers2

3

I am quite unsure what you mean by html script. If it is something you can achieve using JavaScript then here is my try.

Generally to execute JavaScript on button click

Button js = new Button("Do JavaScript");
js.addClickListener( click -> { 
   com.vaadin.ui.JavaScript.getCurrent().execute("alert(´Hello´)");
 });

When in need to use external .js files, for example hello.js, contents below

function hello() {
   alert("Hello JavaScriptWorld!");
}

Assuming hello.js is directly under /VAADIN/ directory, add following annotation to your UI or relevant component class

@JavaScript({"vaadin://hello.js"}) // all paths must be relative to /VAADIN

Then in ClickListener you can refer to function hello() like

com.vaadin.ui.JavaScript.getCurrent().execute("hello()");
pirho
  • 11,565
  • 12
  • 43
  • 70
0

Java @com.vaadin.annotations.JavaScript("vaadin://themes/paastheme/layouts/ui/donut/donut.js") public class BrowsePeopleUI extends UI {}

I put JS file to:

src/main/resources/VAADIN/themes/paastheme/layouts/ui/donut/donut.js

My donut.js is:

Javascript var util = util || {}; util.donut = () => {console.log(document.querySelectorAll("[data-svg]"))};

Serkan KONAKCI
  • 51
  • 6