Question

我们正在尝试使用新的Vaadin 8功能＆＃34; HTML导入＆＃34;。使用Vaadin 8.14和Polymer 2。

中提供了一个示例

非常简单，易于实施。我按照步骤操作，它立即在谷歌浏览器中工作。基本上你不会做错。

但它似乎无法在任何不同的浏览器中使用。

例如在firefox中，console.log打印它正在加载脚本但是没有任何反应并且页面在加载时仍然停滞不前。

我包含了最相关的代码。

MyUI.java：

YourModel.collection.aggregate([/* pipeline */], {
  cursor: {
    batchSize: /* an appropriate batch size */
  },
  maxTimeMS: 60000
});

GameCard.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 {
    }
}

游戏card.js：

@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);
    }
}

Answer 1

好的我发现了。 Firefox需要使用WebComponents Loader来处理WebCompnents。在UI中包含它就足以使它工作了！

@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 {
    }
}

使用新的Vaadin 8功能＆＃34; HTML Imports＆＃34;导入聚合物WebComponent - 仅适用于谷歌浏览器，而不适用于其他浏览器

1 个答案: