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