ScreenDump

Takes a screen dump of the HTML in browser

View larger

Close

The ScreenDumper is an invisible component that, when requested with takeDump(), takes the entire HTML tree in the browser and sends it back to the server. You can use a ScreenDumpListener to receive the dump.

This could be used for various purposes, such as generating PDF from HTML on the server-side, replacement for taking screenshots, for debugging, support purposes, etc.

You can view a dump almost directly in a static HTML page by putting it inside a element. You have to 1) remove the Vaadin loader scripts from the beginning of the element, and 2) put all the application and Vaadin themes to the proper location in the server.

Experimental, tested so far only on Firefox 4, but should work in others as well.

Works only in Vaadin 6. Taking screen dumps is so much easier in Vaadin 7 that the add-on is probably not even needed. See the code example below.

Sample code

// Add an invisible dumper component
final ScreenDumper dumper = new ScreenDumper();
mainWindow.addComponent(dumper);

// Initiate a dump
Button takeDump = new Button("Take a Dump");
takeDump.addListener(new ClickListener() {
    
    private static final long serialVersionUID = 2613016819047484879L;

    public void buttonClick(ClickEvent event) {
        dumper.takeDump();
    }
});
mainWindow.addComponent(takeDump);

final Panel dumpResult = new Panel("Dump Result");
dumpResult.setWidth("100em");
dumpResult.setHeight("40em");
dumpResult.setVisible(false);
dumpResult.addStyleName("dumpresult");
dumpResult.getContent().setSizeUndefined(); // To get horizontal scrollbar
mainWindow.addComponent(dumpResult);

// Receive a dump
dumper.addListener(new ScreenDumpListener() {
    private static final long serialVersionUID = -8856181654249953320L;

    public void screenDump(ScreenDumpEvent event) {
        dumpResult.getContent().removeAllComponents();
        Label dumpLabel = new Label(event.getDump(), Label.CONTENT_PREFORMATTED);
        dumpLabel.setSizeUndefined();
        dumpResult.addComponent(dumpLabel);
        dumpResult.setVisible(true);
    }
});

// ScreenDump probably won't be ported to Vaadin 7 as it's so easy to take a screen dump
// without the necessity of a widget.
// Note though that the dumped HTML contains the Vaadin Client Engine loading code, which
// must be stripped out if you want to view a dump in a browser.

// Panel to display HTML of dumped content
final Panel panel = new Panel("Dumped Content");
panel.setWidth("640px");
panel.setHeight("400px");
final Label dumpContent = new Label();
panel.setContent(dumpContent);
layout.addComponent(panel);

// Handle dump content from server-side
Page.getCurrent().getJavaScript().addFunction("dumpcontent",
    new JavaScriptFunction() {
    @Override
    public void call(JSONArray arguments)
            throws JSONException {
        // Display the dumped HTML as text
        dumpContent.setValue(arguments.getString(0));
    }
});
       
// Button for dumping the content
Button takeadump = new Button("Take a Dump");
takeadump.addClickListener(new ClickListener() {
    @Override
    public void buttonClick(ClickEvent event) {
        Page.getCurrent().getJavaScript().execute(
            "dumpcontent(document.documentElement.innerHTML)");
    }
});
layout.addComponent(takeadump);

Links

• Author Homepage
• Online Demo
• Source Code
• Taking a Dump in Vaadin 7

Compatibility