Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Try out Vaadin Elements from our Labs

Leif Åstrand
8 years ago Jan 23, 2015 4:22pm

Hi everyone,

We just published some new stuff to Vaadin Labs. Server-side Elements for Vaadin is a new experimental add-on for Vaadin 7.4 that lets you directly interact with the HTML elements inside the browser, from the server. This can be useful to e.g. easily integrate Web Compnents into your application or just to mess around with normal HTML elements.

You can hav a look at the demo to get an idea about what can be done with Server-side Elements or check the demo sources if you want to see how they are done.

I'm eager to hear what you think about making this kind of flexibility available on the server, so don't hesitate to write your thoughts here or through the Feedback button on the Labs page.

Andrew Spear
8 years ago Feb 10, 2015 4:45am

Hey, 
This is really neat! I got paper-button to work very easily. However I was wondering how to implement the Methods of a polymer component. For instance how would I implement the drawChart() method from here: http://googlewebcomponents.github.io/google-chart/components/google-chart/

Thanks, Andrew

Leif Åstrand
8 years ago Feb 10, 2015 2:56pm

Andrew Spear: However I was wondering how to implement the Methods of a polymer component. For instance how would I implement the drawChart() method from here: http://googlewebcomponents.github.io/google-chart/components/google-chart/
 

To call methods, you can use Element.eval(String script) that runs the provided JavaScript in the context of that element (the e variable in the JavaScript is a reference to the element in the browser). You could thus do something like this:

myElement.eval("e.drawChart();");

 

Andrew Spear
8 years ago Feb 10, 2015 3:24pm

Ok, that sounds easy enough. Should "e" always be used?

Is there any document which describes what's going on under the covers for the Elements AddOn?

Leif Åstrand
8 years ago Feb 11, 2015 9:08am

Yes, "e" is defined to be the JavaScript variable that references the target element when using Element.eval.

The documentation for the Elements experiment is quite sparse (i.e. non-existent). We are mainly focusing on getting feedback for eager adopers that are interested in trying out the technology despite the lack of documentation and tutorials.

Right now the best source for what's going on is to simply dig into the code. The implementaiton for the eval method is basically here.

 

Andrew Spear
8 years ago Feb 11, 2015 3:13pm
Dino Fancellu
7 years ago May 28, 2015 7:17pm
Leif Åstrand
7 years ago Jun 01, 2015 6:34am
Dino Fancellu
7 years ago Jul 13, 2015 1:49pm
Dino Fancellu
7 years ago Jul 13, 2015 1:52pm
Pavel Panchenko
7 years ago Dec 12, 2015 9:17am
Pavel Panchenko
7 years ago Dec 12, 2015 9:22am
Sergey Shubin
7 years ago Feb 10, 2016 9:00am
malcolm davis
6 years ago Jul 12, 2016 11:08pm
Joonas Lehtinen
6 years ago Jul 13, 2016 6:02pm
malcolm davis
6 years ago Oct 11, 2016 9:38pm
Leif Åstrand
6 years ago Oct 12, 2016 6:56am