blob: 54d8a00dda47250c43bae04a7c74511c63937643 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
---
title: Adding A Splash Screen
order: 85
layout: page
---
[[adding-a-splash-sreen]]
= Adding a splash screen
When a Vaadin application is loading a loading indicator is
automatically shown so the user knows something is happening. But what
if we want to show something else, like a custom splash screen for our
product? Or just customize the loading indicator? Let's have a look.
During the Vaadin bootstrap there are a couple of div elements added to
the page which we can use for our custom splash screen. The DOM for a
servlet application looks the like the following when starting up:
[source,html]
....
<body scroll="auto" class="v-generated-body">
<div id="splash-895866265" class="v-app splash">
<div class="v-app-loading"></div>
<noscript>
You have to enable javascript in your browser to use an application built with Vaadin.
</noscript>
</div>
....
In this example _splash_ is the name of our theme. The _v-app-loading_
div is meant for styling the loading screen. It will only exist in the
DOM until the widget set has been loaded and the application starts. At
that point the _v-app-loading_ div is removed and replaced by the actual
components for the application.
Styling the loading screen is then as simple as adding some rules for
_v-app-loading_, for example:
[source,scss]
....
.v-generated-body &.v-app .v-app-loading {
height: 100%;
width: 100%;
background-image: url(http://archive.eclipse.org/eclipse/downloads/drops/R-3.3-200706251500/whatsnew/images/splash.png);
background-repeat: no-repeat;
background-position: 50%;
}
....
This will use an Eclipse logo as your splash screen - change the
background image to your own splash screen or redesign the css
completely to your liking.
*Note that Vaadin 7.0 incorrectly does not add the theme name during
bootstrap. You must therefore use a rule without the theme name, e.g.
`.v-generated-body .v-app .v-app-loading` and move it out of the
@mixin. You also need to ensure the v-app div has a height using
`.v-app {height:100%;}`*
|
