CODEWITHSUNDEEP
polymervaadin
ResidentSleeper
ResidentSleeper

Reputation: 93

Using the new Vaadin 8 feature "HTML Imports" to import polymer WebComponent - Only works in Google Chrome not in other Browsers

We are trying to use the new Vaadin 8 Feature "HTML Import". Using Vaadin 8.14 and Polymer 2.

An example is provided by vaadin in "Whats new in Vaadin 8"

It is pretty straight forward and easy to implement. I followed the steps and it worked in Google Chrome right away. Basically you can't do much wrong.

However it doesn't seem to work in any different browser.

For example in firefox the console.log prints it is loading the script but then nothing happens and the page stays stuck in loading.

I included the most relevant code.

MyUI.java:

@Theme("mytheme")
public class MyUI extends UI 
{
    @Override
    protected void init(VaadinRequest vaadinRequest) 
    {
        final HorizontalLayout layout = new HorizontalLayout();
        layout.addComponents(new GameCard("♣", "k"), new GameCard("♥", "q"));
        setContent(layout);
    }

    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

GameCard.java:

@JavaScript("vaadin://bower_components/game-card/game-card.js")
@HtmlImport("vaadin://bower_components/game-card/game-card.html")
public class GameCard extends AbstractJavaScriptComponent 
{
    public GameCard(String symbol, String rank) 
    {
        callFunction("setCard", symbol, rank);
    }
}

game-card.js:

is2_GameCard = function () {
    var element = this.getElement();
    this.setCard = function (symbol, rank) {
        element.set("symbol", symbol);
        element.set("rank", rank);
    };
};
is2_GameCard.tag = "game-card";

Upvotes: 0

Views: 602

Answers (1)

ResidentSleeper
ResidentSleeper

Reputation: 93

Ok I found it out. Firefox needs to use the WebComponents Loader to work with WebCompnents at all. including it in the UI is enough to make it work!

@Theme("mytheme")
@JavaScript("vaadin://bower_components/webcomponentsjs/webcomponents-loader.js")
public class MyUI extends UI 
{
    @Override
    protected void init(VaadinRequest vaadinRequest) 
    {
        final HorizontalLayout layout = new HorizontalLayout();
        layout.addComponents(new GameCard("♣", "k"), new GameCard("♥", "q"));
        setContent(layout);
    }
    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

Upvotes: 2

Related Questions