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.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Rendering client-side to graphics on server-side
Hi Vaadin Forum,
The Use-Case here is to render a layout/component/set of components ultimately to a png file, but purely on the server-side.
This is similar to a headless testbench type scenario, except that the 'client' is created, the relevant UI/view is placed into it, and it is then rendered/exported to a png (or svg or similar) all by a server-side process.
Note: I can already do this quite easily using vaadin charts - for vaadin charts. But for general components (e.g. a table) I can't use SVGGenerator (afaict).
My first thought is to use PhantomJS for this, but phantomjs wants a js file(s), but where would I get these..they're all handled internally within the widgetset code.
Note this isn't for testing, this is for rendering components to a graphics file on the server side.
Any help is greatly appreciated!
Thanks,
Peter
Hey!
I had a similiar requirement two years ago – we had to take ~ 5000 screenshots of an application views, multiplied by 5 language versions. Those were supposed to be used in a user manual. I used TestBench and its screenshot-taking facility. One pattern that might be particulary useful is the so called Page Object. There's a nice article from Martin Fowler about it.
Hi,
Thanks for the link. For screenshotting, this is a nice approach, and wrapping elements in a PageObject is good pattern for insulating changes.
My requirement isn't actually to take screenshots - but rather to render a Component/Container/Table or other UI object with a specified dataset in a headless environment, then export it to a graphics file.
The main differences here from a screenshot are:
1. The rendering is only a specific component (and its children)
2. The drawing context is [sort of] infinite - e.g. a table would keep rendering all rows/columns with no 'screen' margins - no scrollbars
I may be able to use your TestBench/PageObject suggestion to create custom 'pages' (with only the required element) in a controlled 'screen' environment (e.g. infinite height).
Thanks
Hi Peter,
You're welcome. Please remember that you can use TestBench in combination with PhantomJS and PhantomJS allows you to do screen-capture. I believe this is the easiest way to achieve your goals.
Please let us know if it worked for you! :)
Kindest regards