Custom Loading screen

Hi,

In a recent discussion with Joonas about application performance and loading time he advised (among other things) to setup a loading screen

Set up a "loading screen". Maybe it could just say "Welcome to xxx", slogan and logo. This could be done by overriding http://vaadin.com/api/com/vaadin/terminal/gwt/server/AbstractApplicationServlet.html#writeAjaxPageHtmlMainDiv(java.io.BufferedWriter,%20java.lang.String,%20java.lang.String,%20java.lang.String)

After having had a look at the javadoc I tried to override the method with a dummy implementation:

protected void writeAjaxPageHtmlMainDiv(BufferedWriter page, String appId, String classNames, String divStyle) throws IOException {
		page.write("<div id=\"" + appId + "\" class=\"" + classNames + "\" "
                + (divStyle != null ? divStyle : "") + "> this is my test </div>\n");
        page.write("<noscript>" + getNoScriptMessage() + "</noscript>");
}

The result I get was strange, the message "this is my test" appears at the top of the screen. Then sometimes it stays, sometines it disappears.

What implementation should I provide to fulfill my needs ? Or is there another strategy to follow to achieve the same goal ?

Nicolas

How about something like this:

protected void writeAjaxPageHtmlMainDiv(BufferedWriter page, String appId,
            String classNames, String divStyle) throws IOException {
        page.write("<div id=\"" + appId + "\" class=\"" + classNames + "\" "
                + (divStyle != null ? divStyle : "") + ">");
        page
                .write("<div id='splashscreen'>Welcome to my fancy application!<br/>"
                        + "Please wait patiently while it is loading...</div>");
        page.write("</div>\n");
        page.write("<noscript>" + getNoScriptMessage() + "</noscript>");
    }

and put the following to the theme:

#splashscreen {
	display: none;	
}

.v-app-loading #splashscreen {
	display: block;	
	background-color: white; 
	margin: 200px auto; 
	width: 300px;
	padding: 100px;
	border: 1px solid #aaa; 
}

To make the splash screen show a bit longer, IView should remove i-app-loading class only until the updateFromUIDL is called for the first time, not in the constructor. Created a ticket for it.

I just migrated to version 6.5.4. It seems the method writeAjaxPageHtmlMainDiv is not present anymore. Is there any replacement ?

Nicolas

Nicolas Brasseur: I just migrated to version 6.5.4. It seems the method writeAjaxPageHtmlMainDiv is not present anymore. Is there any replacement ?

It is there in AbstractApplicationServlet, but has one additional parameter (HttpServletRequest).

There were some changes in 6.5.1 and 6.5.4 related to this. The method writeAjaxPageHtmlMainDiv is still there but the HttpServletRequest has been added as a parameter. Also starting from 6.5.4 the v-app-loading is a div inside the main v-app div and all contents of the main v-app div is removed when the application starts. You should thus be able to add whatever fancy loading screen you like inside the main v-app div (in writeAjaxPageHtmlMainDiv) and it will be removed automatically when the application starts (no need to worry about display:none etc).