Vaadin and Material Design

Flow
1

Hello,

is it possible to use Vaadin together with Material Design Framworks like Polymer or Materialze?
And how can i use it, is there any tutorial?

2

There are a few different ways you can use Vaadin with Polymer.

We have created bunch of UI components that we have published as Vaadin Elements. These can be used as any other Polymer components:
https://vaadin.com/elements

We also have created GWT bindings for few of the Polymer elements that we have created:
https://vaadin.com/gwt

But if you are looking how to use the normal server-side Vaadin framework and integrate some Polymer UI components in to your application you might want to take a look at this blog post:
https://vaadin.com/blog/-/blogs/using-web-components-in-plain-java
and follow it’s idea on how create custom JavaScriptComponents. More details on server ↔ client communication etc. available at:
https://vaadin.com/docs/-/part/framework/gwt/gwt-javascript.html

3

I am interested in nearly the same thing. But I do not want to use a certain framework for this, the question is more like:

Is there a plan to provide a ready-to-use martial design theme for valo?
Or even a fully featured addon containing stuff like PaperButtons, Cards, Animations, etc.?
Talking about the server-side here.

Or should I code myself something that maybe wraps the https://github.com/vaadin/gwt-polymer-elements to vaadin server-side components?

Thank you already!

4

I don’t think there is any official plans about creating Material Design components for Vaadin. But using the existing GWT bindings it should not be a huge task to implement the server-side and communication layer to be able to use the GWT-Polymer-Elements within a normal Vaadin application.

You might also be interested in the Valo theme that mimics the material design components:
https://github.com/marlonrichert/vaadin-material-design
Not sure about the maturity of that theme however. Also looks like the add-on is not in Vaadin Directory so you will need to build it yourself.

5

Thank you for the quick response.

Would you recommend using


  2. https://github.com/vaadin/gwt-polymer-elements
     and create the Connectors/States/Rpcs and server-side Components

  3. https://vaadin.com/labs-elements
     and create according Components

?

6

I’d go with GWT Polymer Elements. Seems to be more actively developed compared to the Server-side Elements labs experiment.

7

I tried to create such a component for a simple PaperButton:
https://github.com/Juchar/vaadin-md

Unfortunately I get compilation errors in the demo.
Would it be possible that you help me out, just to get started for this one Component?
I do not see where I have an error…

8

I think gwt-polymer-elements requires gwt 2.8, Vaadin 7 only supports gwt 2.7. I’ve tried and also getting compilation errors. You could try the javascript way as suggested.

9

how can i use google material icons with vaadin instade of vaadin icon?
how can i integrate it with vaddin.?

10

“how can i use google material icons with vaadin instade of vaadin icon?
how can i integrate it with vaddin.?” - I have the same questions.

11

If you are interested in material theme only, please try this one: https://vaadin.com/directory#!addon/material

12

Hi,

I am displaying the data in 3 columns & multiple rows using Vaadin Table.
I want to add the delete button (to delete the record) in each row just next to the score.

I have given the code for my buttons and grid below.
Attachment has the current layout of the table.

private Button addNew = new MButton(VaadinIcons.PLUS, this::add);
private Button edit = new MButton(VaadinIcons.PENCIL, this::edit);
private Button delete = new ConfirmButton(VaadinIcons.TRASH,
“Are you sure you want to delete this entry?”, this::remove);

private MGrid list = new MGrid<>(User.class) .withProperties(“id”, “name”, “score”)
.withColumnHeaders(“User id”, “User Name”,“Score”)
.withFullWidth();

33119.png