Errai 3.2.3 Final with Material Design Light problem

[baldram]

Dear Errai community,

hope someone is able to help me. I completly stucked :-/

I could successfuly use Polymer 0.5 with Errai for some time, but now it's deprecated.

So I have to move to Polymer 1.x or other library like Material Design Light and unfortunately some problems appeared.

To test the solution first, I've created a very simply project based on one of the samples: "errai-ui-demo-minimal".

You can see it here:

https://bitbucket.org/baldram/errai-mdl-test/src

It should load the sample page and put it in nice Material Design Light layout like this:

As you can see here, the HTML works correct: https://codepen.io/anon/pen/PNpKNW

Unfortunately when I decorated Errai app with Material Design Light, it doesn't work as expected :-/

Assets files were loaded. No IO errors, but the result looks like material.min.js was ignored or something.

The test app is very simply (all the sources are here: baldram / errai-mdl-test  / source  /  — Bitbucket).

Automatically loaded page:

It refers to the HTML based on the example from MDL documentation (tested on codepen.io here: Material Design Lite components demo).

The project's template source is here: https://goo.gl/q96Jwd .

I had also a problem with Polymer 1.x, but I think the issue can be somehow similar.

I think this simple MDL library should work as Bootstrap works well with Errai.

Could someone help me please?

Any ideas?

Regards,

Marcin

[mbarkley]

Hi Marcin,

I'm not sure what issue you are encountering, but I have recently been testing Errai with web components and thought I would share my experience here.

Currently, I have a branch of errai-tutorial that successfully uses a Polymer 1.0 paper-input and paper-textarea, here. (I will be merging this into the errai-tutorial master branch at our next release.)

I also tried to integrate this material input, but that didn't work because that material-input component added hidden input elements to the DOM. Any web component that relies on DOM manipulation when it is first created won't work with Errai because Errai constructs your template as a fragment before it is added to the document.

Hope that is useful.

[baldram]

Hi Max,

thank you for your answer.

It's a bit outdated question and fixed in the meantime.

To fix the problem with MDL I had to call upgradeDom (once page is loaded) in the way as below:

$wnd.componentHandler.upgradeDom();

The test app Bitbucket code is updated now and works with this workaround.

But we can forget about MDL and approach described above.

The correct solution is to use Polymer 1.0 as in your example.

I think the goal would be to use gwt-polymer-elements: https://vaadin.com/gwt instead of writting jsinterop thin wrappers manually.

There is also other solution - to implement Material Design using: GWT Material Errai. This is alternative implementation of Materlial Design.

It works very well what we can see from the showcase.

Thank you Max again for the example with Polymer!

[baldram]

Hi Max again,

I have tried your example Material Desing integration: errai-tutorial with Polymer paper .

It works great!

For some reason I had to change version of gwt-maven-plugin in pom.xml file from 2.8.0 to 2.8.0-rc3 to get it working.

Without this change I got an error while running the app (mvn gwt:run).

[ERROR] Plugin org.codehaus.mojo:gwt-maven-plugin:2.8.0 or one of its dependencies could not be resolved: Failed to read artifact descriptor for org.codehaus.mojo:gwt-maven-plugin:jar:2.8.0: Failure to find org.codehaus.mojo:gwt-maven-plugin:pom:2.8.0 in http://repo.maven.apache.org/maven2 was cached in the local repository, resolution will not be reattempted until the update interval of central has elapsed or updates are forced -> [Help 1]

Does your pom.xml looks different or you have some additional things in <repositories> section?

Fortunately after the small change mentioned above it worked well.

Now I think it would be good to try to rid of manually created thin wrappers for Polymer emelements like this: PaperInput.java and use gwt-polymer-elements from Vaadin (https://vaadin.com/gwt) instead - if possible.

What do you think?

[mbarkley]

Hi Marcin,

I'm not sure what the problem is off-hand regarding the gwt-maven-plugin version, but I will be cleaning up the versions in errai-tutorial soon to work with the latest releases of GWT, the gwt-maven-plugin, and guava.

[baldram]

I think it's time to close this topic as solved. This is a summary and the correct answer.

If anyone is interested in Material Design for Errai, there are two solutions:

• GWT Material Design for Errai - please see this demo (a lot of ready to use components): https://gwtmaterialdesign.github.io/gwt-material-demo-errai
• An example mentioned by Max which shows how to use Polymer 1.x with Errai: GitHub - errai-tutorial at gwt-con-2016 (PaperInput.java)