JavaScript Errors trying to integrate Vaadin spreadsheet with existing Stri

Flow
1

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:

[code]

<?xml version="1.0" encoding="UTF-8"?> [/code]I included the widgetset in the web.xml:[code] VaadinServlet com.vaadin.server.VaadinServlet UI com.solterbeck.pc.spreadsheet.SpreadsheetUI Application widgetset widgetset com.solterbeck.pc.widgetset.PCIWidgetset [/code]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:

[code]
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();
}

}
[/code]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

2

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:

[code]
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);
}

}
[/code]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

3

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

4

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.

5

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?

29108.png

6

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:

[code]
<%@taglib prefix=“vaadin” uri=“/vaadin”%>
<%@include file=“…/shared/taglibs.jspf”%>
<%@ attribute name=“title” type=“java.lang.String” required=“true”%>
<%@ attribute name=“currentModuleId” required=“true”%>

${title}-

<… SOME CSS STUFF OMITTED >

[color=#FF0000]
[b]

[/b]
[/color]

${title}
[/code]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?