Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum1. Vaadin Flow - Java

JavaScript Errors trying to integrate Vaadin spreadsheet with existing Stri

Admin PerformanceCentre
5 years ago Nov 22, 2016 6:46am

I am trying to intergrate Vaadin spreadsheet into an existing Stripes application, and I got pretty far already. The Vaadin UI is starting up, but I don't see a spreadsheet. All I see is what looks like three textboxes. In the Chrome console I can see the following errors:

Tue Nov 22 17:01:12 GMT+1100 2016 com.vaadin.client.ApplicationConnection
INFO: Starting application myui
com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129 Tue Nov 22 17:01:12 GMT+1100 2016 com.vaadin.client.ApplicationConnection
INFO: Using theme: valo
com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129 Tue Nov 22 17:01:12 GMT+1100 2016 com.vaadin.client.ApplicationConnection
INFO: Vaadin application servlet version: 7.7.4
com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129 Tue Nov 22 17:01:12 GMT+1100 2016 com.vaadin.client.communication.Heartbeat
INFO: Setting hearbeat interval to 300sec.
com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129 Tue Nov 22 17:01:12 GMT+1100 2016 com.vaadin.client.communication.MessageHandler
INFO: JSON parsing took 0.235ms
com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129 Tue Nov 22 17:01:12 GMT+1100 2016 com.vaadin.client.communication.MessageHandler
INFO: Handling message from server
com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129 Tue Nov 22 17:01:12 GMT+1100 2016 com.vaadin.client.communication.MessageHandler
INFO:  * Handling resources from server
com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129 Tue Nov 22 17:01:12 GMT+1we100 2016 com.vaadin.client.communication.MessageHandler
INFO:  * Handling type inheritance map from server
com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129 Tue Nov 22 17:01:12 GMT+1100 2016 com.vaadin.client.communication.MessageHandler
INFO: Handling type mappings from server
com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129 Tue Nov 22 17:01:12 GMT+1100 2016 com.vaadin.client.WidgetSet
INFO: Loading bundle __deferred to be able to render server side class com.vaadin.addon.spreadsheet.Spreadsheet
com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129 Tue Nov 22 17:01:12 GMT+1100 2016 com.vaadin.client.communication.MessageHandler
INFO: Handling resource dependencies
com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129 Tue Nov 22 17:01:12 GMT+1100 2016 com.vaadin.client.ApplicationConnection
INFO:  * Loading widgets completed: 59 ms
com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129 Tue Nov 22 17:01:12 GMT+1100 2016 com.vaadin.client.communication.MessageHandler
INFO:  * Handling meta information
com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129 Tue Nov 22 17:01:12 GMT+1100 2016 com.vaadin.client.communication.MessageHandler
INFO:  * Creating connectors (if needed)
com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129 Tue Nov 22 17:01:12 GMT+1100 2016 com.vaadin.client.communication.MessageHandler
SEVERE: Error handling type datacom.google.gwt.core.client.JavaScriptException: (HierarchyRequestError) : Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Unknown.p6b(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.QId(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.TId(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.mhd(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.QBd(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.V5d(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.ABe(com.solterbeck.pc.widgetset.PCIWidgetset-2.js)
    at Unknown.yv(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.xv(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.ww(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.zw(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.eval(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.anonymous(com.solterbeck.pc.widgetset.PCIWidgetset-2.js)
    at Unknown.com_solterbeck_pc_widgetset_PCIWidgetset.__installRunAsyncCode(http://localhost:8080/VAADIN/widgetsets/com.solterbeck.pc.widgetset.PCIWidgetset/com.solterbeck.pc.widgetset.PCIWidgetset.nocache.js?1479794470650)
    at Unknown.__gwtInstallCode(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.Uw(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.jx(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.gy(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.eval(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.ww(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.zw(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.eval(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.anonymous(http://localhost:8080/VAADIN/widgetsets/com.solterbeck.pc.widgetset.PCIWidgetset/deferredjs/635653F231D396AA268CD95ED710DF46/2.cache.js)
j9b @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129o9b @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129Dbc @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129Cbc @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129lAh @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:211QId @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:142TId @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:142mhd @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:136QBd @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:140V5d @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:146ABe @ com.solterbeck.pc.widgetset.PCIWidgetset-2.js:5yv @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:80xv @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:78ww @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:80zw @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:81(anonymous function) @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:80(anonymous function) @ com.solterbeck.pc.widgetset.PCIWidgetset-2.js:7com_solterbeck_pc_widgetset_PCIWidgetset.__installRunAsyncCode @ com.solterbeck.pc.widgetset.PCIWidgetset.nocache.js?1479794470650:11__gwtInstallCode @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:1Uw @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:86jx @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:87gy @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:88(anonymous function) @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:88ww @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:80zw @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:81(anonymous function) @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:80(anonymous function) @ :8080/VAADIN/widgetsets/com.solterbeck.pc.widgetset.PCIWidgetset/deferredjs/635653F231D396AA268CD95ED710DF46/2.cache.js:1
com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129 Tue Nov 22 17:01:12 GMT+1100 2016 com.vaadin.client.communication.MessageHandler
INFO:  * Updating connector states
com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129 Tue Nov 22 17:01:12 GMT+1100 2016 com.vaadin.client.communication.MessageHandler
INFO:  * Handling locales
com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129 Tue Nov 22 17:01:12 GMT+1100 2016 com.vaadin.client.communication.MessageHandler
INFO:  * Updating connector hierarchy
com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129 Tue Nov 22 17:01:12 GMT+1100 2016 com.vaadin.client.communication.MessageHandler
INFO:  * Sending hierarchy change events
com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129 Tue Nov 22 17:01:12 GMT+1100 2016 com.vaadin.client.communication.MessageHandler
INFO:  * Running @DelegateToWidget
com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129 Tue Nov 22 17:01:12 GMT+1100 2016 com.vaadin.client.ApplicationConfiguration
SEVERE: (TypeError) : Cannot read property 'cssRules' of nullcom.google.gwt.core.client.JavaScriptException: (TypeError) : Cannot read property 'cssRules' of null
    at Unknown.p3c(com.solterbeck.pc.widgetset.PCIWidgetset-2.js)
    at Unknown.R7c(com.solterbeck.pc.widgetset.PCIWidgetset-2.js)
    at Unknown.Nfd(com.solterbeck.pc.widgetset.PCIWidgetset-2.js)
    at Unknown.YDe(com.solterbeck.pc.widgetset.PCIWidgetset-2.js)
    at Unknown.iIe(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.SId(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.RId(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.TId(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.mhd(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.QBd(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.V5d(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.ABe(com.solterbeck.pc.widgetset.PCIWidgetset-2.js)
    at Unknown.yv(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.xv(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.ww(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.zw(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.eval(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.anonymous(com.solterbeck.pc.widgetset.PCIWidgetset-2.js)
    at Unknown.com_solterbeck_pc_widgetset_PCIWidgetset.__installRunAsyncCode(http://localhost:8080/VAADIN/widgetsets/com.solterbeck.pc.widgetset.PCIWidgetset/com.solterbeck.pc.widgetset.PCIWidgetset.nocache.js?1479794470650)
    at Unknown.__gwtInstallCode(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.Uw(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.jx(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.gy(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.eval(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.ww(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.zw(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.eval(com.solterbeck.pc.widgetset.PCIWidgetset-0.js)
    at Unknown.anonymous(http://localhost:8080/VAADIN/widgetsets/com.solterbeck.pc.widgetset.PCIWidgetset/deferredjs/635653F231D396AA268CD95ED710DF46/2.cache.js)
j9b @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129o9b @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129Dbc @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129Cbc @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:129lAh @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:211rid @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:137Jw @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:85ft @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:74yv @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:80xv @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:78ww @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:80zw @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:81(anonymous function) @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:80(anonymous function) @ com.solterbeck.pc.widgetset.PCIWidgetset-2.js:7com_solterbeck_pc_widgetset_PCIWidgetset.__installRunAsyncCode @ com.solterbeck.pc.widgetset.PCIWidgetset.nocache.js?1479794470650:11__gwtInstallCode @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:1Uw @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:86jx @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:87gy @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:88(anonymous function) @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:88ww @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:80zw @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:81(anonymous function) @ com.solterbeck.pc.widgetset.PCIWidgetset-0.js:80(anonymous function) @ :8080/VAADIN/widgetsets/com.solterbeck.pc.widgetset.PCIWidgetset/deferredjs/635653F231D396AA268CD95ED710DF46/2.cache.js:1
5http://localhost:8080/myui/HEARTBEAT/?v-uiId=0 XHR finished loading: POST "http://localhost:8080/myui/HEARTBEAT/?v-uiId=0".

I compiled my widgetset with the spreadsheet widget using the Gradle plugin vaadinCompile task. My widgetset GWT file looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Vaadin//DTD Vaadin 7//EN" "https://raw.github.com/vaadin/gwt/master/distro-source/core/src/gwt-module.dtd">
<!-- WS Compiler: manually edited -->
<module>
        <inherits name="com.vaadin.DefaultWidgetSet" />
        <inherits name="com.vaadin.addon.spreadsheet.Widgetset" />
        <set-configuration-property name="devModeRedirectEnabled" value="true" />
        <set-property name="user.agent" value="ie8,ie9,gecko1_8,safari,ie10" />
        <source path="client" />
        <source path="shared" />
        <collapse-all-properties />
        <set-property name="compiler.useSymbolMaps" value="true" />
</module>

I included the widgetset in the web.xml:

<servlet>
        <servlet-name>VaadinServlet</servlet-name>
        <servlet-class>com.vaadin.server.VaadinServlet</servlet-class>
        <init-param>
            <param-name>UI</param-name>
            <param-value>com.solterbeck.pc.spreadsheet.SpreadsheetUI</param-value>
        </init-param>
        <init-param>
            <description>Application widgetset</description>
            <param-name>widgetset</param-name>
            <param-value>com.solterbeck.pc.widgetset.PCIWidgetset</param-value>
        </init-param>
    </servlet>

I am using the Vaadin JSP integration taglib to render the UI in one of our JSPs:

<vaadin:ui url="/myui" widgetset="com.solterbeck.pc.widgetset.PCIWidgetset"/>

My Ui class looks like this:

public class SpreadsheetUI extends UI {
    private Spreadsheet spreadsheet = null;
    @Override
    protected void init(VaadinRequest request) {
        log.info("init()");
        final VerticalLayout layout = new VerticalLayout();
        setContent(layout);
        
        initSpreadsheet();
        layout.addComponent(spreadsheet);
    }
    
    private void initSpreadsheet() {
        spreadsheet = new Spreadsheet();
    }
}

Can anybody see why it is not rendering properly? I tried compliing the theme using gradle vaadinThemeCompile but that deleted the VAADIN/widgetset directory and didin't create anything in VAADIN/themes. I went back to running gradle vaadinCompile to get the widgetset back. 

Cheers

Marc

 

Admin PerformanceCentre
5 years ago Nov 23, 2016 4:09am

I have since continued debugging, and I can get other components to render properly in my app. I used this for my UI and that worked fine:

public class SpreadsheetUI extends UI {
    
    @Override
    protected void init(VaadinRequest request) {
        Layout content = new VerticalLayout();
        Layout components = new HorizontalLayout();
        content.addComponent(components);
        setContent(content);
        
        Label label = new Label("Click the button");
        components.addComponent(label);
        
        Button button = new Button("What is the time?", new Button.ClickListener() {
            
            @Override
            public void buttonClick(Button.ClickEvent event) {
                Notification.show("The time is " + new Date());
            }
        });
        button.setDescription("This is the tooltip");
        components.addComponent(button);
        
        Button notVisibleButton = new Button("Not visible button");
        notVisibleButton.setVisible(false);
        components.addComponent(notVisibleButton);
        
        Button disabledButton = new Button("Disabled button");
        disabledButton.setEnabled(false);
        components.addComponent(disabledButton);
        
        Link link = new Link("Source code", new ExternalResource("https://bitbucket.org/sw-samuraj/vaadin-workshop/src"));
        link.setTargetName("_blank");
        content.addComponent(link);
    }
}

I assume that I need to complie the Theme as well as the widgetset? When I use the Gradle plugin and run gradle vaadinThemeCompile I get no error, but the VAADIN directory only contains an empty folder "themes". The widgetset is deleted. 

Cheers

Marc

Alejandro Duarte
5 years ago Nov 23, 2016 9:34am

Try setting a theme in your UI implementation @Theme("mytheme"), and in the tag: <vaadin:ui ... theme="mytheme"/>

Admin PerformanceCentre
5 years ago Nov 24, 2016 10:27pm

Hi thanks for the tip but that didn't help. I decided to build from scratch: I built a sample app with mvn archetype=
vaadin-archetype-application and added the spreadsheet add-on to it. That works. 

Now I am trying to figure out what the differences are between my integrated solution and the example.

Admin PerformanceCentre
5 years ago Nov 24, 2016 10:42pm

I am able to get the Vaadin Excel spreadsheet to run within our application on a naked JSP, but not when I use it in an existing JSP. In that case I see some parts of the spreadsheet UI, but not the cells. There should be an Excel sheet rendered there. See attached screenshot.

It seems like it is colliding with our tags, CSS, or JavaScript. We use Apache Stripes taglib, Bootstrap 3, jQuery 1.11. Any known issues with that?

 

Admin PerformanceCentre
5 years ago Dec 05, 2016 12:04am

I got it to the point where it renders correctly in our app, but it was a painful process getting there. The last bit that is puzzling me: If I use our Stripes template and put the Vaadin JSP tag as the content it does not render (see above message), but if I remove an HTML comment it does:

<%@taglib prefix="vaadin" uri="/vaadin"%>
<%@include file="../shared/taglibs.jspf"%>
<%@ attribute name="title" type="java.lang.String" required="true"%>
<%@ attribute name="currentModuleId" required="true"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" class="no-js">
<head>
<!-- BEGIN HEAD -->
<meta charset="utf-8" />
<title>${title}<c:if test="${not empty title}">-</c:if> <fmt:message key="application.name" />
</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<... SOME CSS STUFF OMITTED >

[color=#FF0000][b]<!-- END HEAD -->[/b][/color]
</head>
<body class="page-header-fixed page-boxed">
    <div class="container pc-container">
        <!-- BEGIN CONTAINER -->
        <participant:navBar currentModuleId="${currentModuleId}" />
        <div class="page-container">
            <participant:menu currentModuleId="${currentModuleId}" />
            <!-- BEGIN CONTENT -->
            <div class="page-content-wrapper">
                <div class="page-content">
                    <div class="page-title">${title}</div>
                    <!-- BEGIN PAGE CONTENT-->
                    <vaadin:ui url="/spreadsheet" widgetset="PerformanceCentreWidgetset" theme='pcitheme' />
                    <!-- END PAGE CONTENT-->
                </div>
            </div>
            <!-- END CONTENT -->
        </div>
        <participant:footer />
        <!-- END CONTAINER -->
    </div>
    <participant:javascripts currentModuleId="${currentModuleId}" />
</body>
</html>

It seems like it is not actually related to the comment, but maybe the size of the JSP? Reducing the size by taking out the comment allows the page to render, but with the comment it is too large. HAs anybody experienced anything like this?