diff options
| author | Erik Lumme <erik@vaadin.com> | 2017-09-13 15:07:25 +0300 |
|---|---|---|
| committer | Erik Lumme <erik@vaadin.com> | 2017-09-13 15:07:25 +0300 |
| commit | 9ebc0be4e7d3bc6811ba3e86bc6a2da270bdcb76 (patch) | |
| tree | f8a60658ac3916b3180bf44d4499f2bb2cb47176 /documentation/articles/AddingASplashScreen.asciidoc | |
| parent | faf7bddfcdfc12463e52fc2f84751a2afa3f75ae (diff) | |
| download | vaadin-framework-9ebc0be4e7d3bc6811ba3e86bc6a2da270bdcb76.tar.gz vaadin-framework-9ebc0be4e7d3bc6811ba3e86bc6a2da270bdcb76.zip | |
Migrate AddingASplashScreen and CreatingMultiTabApplications
Diffstat (limited to 'documentation/articles/AddingASplashScreen.asciidoc')
| -rw-r--r-- | documentation/articles/AddingASplashScreen.asciidoc | 53 |
1 files changed, 53 insertions, 0 deletions
diff --git a/documentation/articles/AddingASplashScreen.asciidoc b/documentation/articles/AddingASplashScreen.asciidoc new file mode 100644 index 0000000000..400241433e --- /dev/null +++ b/documentation/articles/AddingASplashScreen.asciidoc @@ -0,0 +1,53 @@ +[[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%;}`* |