Use polymer paper-dialog

Flow
1

Hi,

I would like to have a dialog with a header, scrollable content and a footer. The default dialog has no support for a header and a footer.
I found this one in the vaadin directory: [https://vaadin.com/directory/component/polymerelementspaper-dialog]
(https://vaadin.com/directory/component/polymerelementspaper-dialog)

I don’t get it how I can use it in my server side java code. Can anybody tell me how I could use is and is it compatible with vaadin 14 +?

Thanks

2

Hi Olaf,

it’s a webcomponent built with polymer 3. So it should be an easy task to write a Java adapter for the backend side.

You can see a howto in the Vaadin doku: [Creating a Simple Component Using the Template API]
(https://vaadin.com/docs/v14/flow/polymer-templates/tutorial-template-basic.html).

You simply create an adapter class with a few annotations:

@Tag("paper-dialog")
@NpmPackage(value = "@polymer/paper-dialog", version = "3.0.1")
@JsModule("./src/paper-dialog.js")
public class PaperDialog extends Component {
[...]

I also did it in this way to include the [@polymer/paper-fab-speed-dial]
(https://www.webcomponents.org/element/Collaborne/paper-fab-speed-dial).
You can see the working and published addon here:
https://github.com/TobseF/vaadin-speed-dial

There is also an starter project to create an adapter component:
[Add-on Starter for Flow]
(https://vaadin.com/start/lts/component)
This is also the prefered way for Vaadin 14