How to use a native JS library in Vaadin?

Hello,

I would like to use a native JavaScript library in Vaadin.
It’s a library for SVG graphics called “Snap” (http://snapsvg.io/).

I have created a new class “TestWindow” derived from Window and added a “JavaScript” annotation that includes the library’s JS code (see below).

However, to use the library, I have to make some calls to the JS code.

For example, I have to make a call to a JS method called “Snap”. which creates a DOM element that should be added to window’s client area.

How can you do this?

Thanks
Magnus

[font=courier new]
package com.example.first_vaadin_project;

import com.vaadin.annotations.JavaScript;
import com.vaadin.ui.Window;

@JavaScript (“lib/snap.svg.js”)

public class TestWindow extends Window
{
public TestWindow ()
{
super ();
// call JS code
}
}
[/font]

Look at this page: https://vaadin.com/book/vaadin7/-/page/advanced.javascript.html

Thank you! This page shows how you can make a single call to JS. In my case this would be:

JavaScript.getCurrent().execute(“var e = Snap(‘100%’,‘100%’);”);

Then, “e” contains the newly created SVG element (“”).

But I also need to embed this element into the DOM of the current window.

How can I do this?

Thanks
Magnus

hi, how I saw SVG objects are added automatic in the page, but if you want to control this(placement) more easily simply add an SVG tag in the page with a suitable id (or any selector):
(I think this tag is added also with js)
and then use :
var paper=Snap(“#svg”);

Hello,

thank you, but I am totally new to Vaadin.
Could you please show me how to add the SVG tag to the window?

Besides that, I believe that I need a mechanism to pass things from JS to Java and vice versa.

For example,the “paper” variable in your example may be needed again later. So I need to pass this variable to my TestWindow class.

For example, in GWT I can do something like this:


public native JavaScriptObject createGraphics ()
/-{
var paper=Snap(“#svg”);
return (paper);
}-
/;

At a later point in time, I can refer to this object again.

How can I do this with Vaadin?

Thanks
Magnus

yes, you are right about gwt, and if I know correct Vaadin 7 is a fully compatible drop-in replacement for GWT, but I not sure cause I still use vaddin 6+, about how to add with vaadin new tegs in DOM see this link:
bootstrap listener
, more one idea is use pure js, you can try this one :
window.onload = function () {
var myWindow = document.getElementById(“there id window”);
myWindow.innetrHTML(‘’);
}

Hi,

I’m sorry, but I am not making any progress. I also cannot make use of your helpful hints, because I am standing at the very beginning.

The bootstrap listener you mentioned focuses on the “startup page” of the application. So you can insert some tag somewhere in the startup page.But what I want to do is to insert the SVG tag into the window’s client area.

What I need is something like this:

[font=courier new]
public class TestWindow extends Window
{
private JavaScriptObject paper;

public TestWindow ()
{
super ();
paper = createPaper();
}

protected JavaScriptObject createPaper()
{
// call “Snap()” and return the result
}

protected void drawRect (int x,int y,int width,int height)
{
// use the member “paper” in JS, e. g. "paper.Rect(x,y,width,height)
}
[/font]


}

I need a simple working example to get started in Vaadin…

Thanks
Magnus

What’s means ‘JavaScriptObject’ ? it’s not so easy to transform an javascript object to java object, as usual for do this in vaadin is used add-on or wrapper provided by vaadin

JavaScriptObject is used in GWT to represent a variable that can be passed from JS to Java.

When you call “Snap” in JS, it returns a variable that must be available to subsequent calls to the JS library.
There must be something equivalent in Vaadin.

Magnus

ok if you think try to find out, but don’t think this is present in the core of vaadin, like as I said above for to do what are you want you must use gwt, not vaadin.

Does this mean that you cannot create a Vaadin application that shows SVG graphics in a browser?

Or is there a different method to do this?
(I found that there are several SVG* interfaces in the Vaadin library.)

Magnus

Hello,

it would be nice if someone could tell something relating to my last questions.
I would really like to give Vaadin a try…

Thank you
Magnus

If you want to create some object in javascript and work with it (or modify) later you probably need to create your own component (vaadin widget) and you can work with GWT as you give example.

If you need help of creating this kind of component you can contact me: mario.korcak@gmail.com and i can help you with it.

Hi Mario,

thank you. Before creating a custom JS component: What about the SVG* interfaces in the Vaadin API (https://vaadin.com/api/7.1.12/elemental/svg/package-summary.html)?

Magnus

I think i never work with svg… but i’m playing for a while on client side of vaadin and i’m able to help with it.

Maybe there is already a builtin solution?
elemental.svg is a package contained in Vaadin and the only use case I can imagine is display SVG graphics in a browser…