Try out Vaadin Elements from our Labs

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.

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

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();");

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?

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
.

That worked flawlessly. That eval method is encapsulated nicely in the interface extending Element using the new “default” method.

Would really be nice to see something in the way of docs.

Hard to judge something if you don’t know how it works.

BTW, Scala example code here

https://github.com/hezamu/elements-examples

The documentation is unfortunately very lightweight since we don’t yet know whether this is a concept that we want to invest into. The best sources of documentation are the code examples on
https://vaadin.com/labs-elements
or then just by looking at the source code of the implementation.

I’m having some issues. Using Scala.

I have a button, I’m just trying to get the class, but the first time I do it I get null.

val elem = ElementIntegration.getRoot(animatedLabel.p) elem.fetchDom(null) println(elem.getAttribute("class")) println(elem.asHtml()) First click I get

null

Second click I get the truth, i.e.

v-button v-widget huge v-button-huge

Animate.CSS

What am I doing wrong?

Thanks.

I’m trying to use Elements as an alternative to server push (using it here to use animate.css)

https://vaadin.com/forum#!/thread/128732
https://daneden.github.io/animate.css/

Basically I want to set the class to “” then to the desired class, to get the animation to fire

It works fine via server push, but was hoping to see if Elements would do it without requiring server push

Is there any possibility to attach vaadin components to my markup, created with Elements API? I want to make all hard work to markup page with elements, and put vaadin components inside it.

Indeed I want to know how do Vaadin guys make such an amazing web pages like this… Is there a lot of GWT components here and there, which I will never find in default vaadin kit when downloading from maven?

I’m eager to hear what you think about making this kind of flexibility available on the server
its great!
This kind of flexibility makes possible to freeze hard widgetset with 1-2 universal widgets for Polymer components manipulations on clientside; and where other application widgets are organized only on server. But for implementation this scheme we need nesting functions of components.
For example: our complex html element declares element A, A includes C1 and C2. On serverside i want to have reflected A as abstract container and [C1, C2]
childrens of A as serverside mirrors.

I really like the concept. There are technical issues with gwt dom that we are hoping that polymers shadow-dom will fix.

However, there does not seem to be any activity on the serverside-elements project at https://github.com/vaadin/serverside-elements.

Is Vaadin moving forward with serverside-elements? Is there any scheduled release date?

Replacing Vaadin-GWT with Vaadin polymer seems fantastic.

Thanks,
Malcolm

Yes we are busy building server-side elements in the core of Vaadin Framework. Right now there is no release date for this work yet, sorry. We’ll open the work as soon as it is in such a consistent state that it could start to use some feedback. I would expect that to happen early Q4.

Meanwhile, feel free to use
the elements add-on
. It has proven to be useful as is. Or you can of course use the stable
AbstractJavaScriptComponent
built-in the framework.

I did not see polymer specifically listed in the Vaadin 8 release, nor on roadmap at the https://vaadin.com/roadmap, but did see Vaadin support of Angular 2 APIs.

Are there still plans to release a version of Vaadin with polymer integration?

Thanks,
Malcolm

Vaadin Framework 8 is all about utilizing Java 8 to provide better APIs for data binding.

Vaadin Core Elements is a separate product that provides component implementations that are currently mainly intended for applications built using e.g. Polymer or Angular 2. Core Elements initially only provided components that are already available as part of Vaadin Framework, but there are nowadays also some completely new component implementations.

We are planning to make the component implementations from Core Elements function as fundamental parts Framework in version 9. Please read
Framework roadmap: Connecting the dots
for an overview of what we are planning for various versions.

If there is some specific component in Core Elements that you’d like to use in your Framework project, then you can use e.g. the approach described in
this blog post
to create a server side API for that component.