Erik Lumme
6 years ago
3 changed files with 84 additions and 0 deletions
+ 53
- 0
documentation/articles/AddingASplashScreen.asciidoc
View File
| @@ -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%;}`* | |||
+ 29
- 0
documentation/articles/CreatingMultiTabApplications.asciidoc
View File
| @@ -0,0 +1,29 @@ | |||
| [[creating-multi-tab-applications]] | |||
| Creating multi-tab applications | |||
| ------------------------------- | |||
| Every new request to the server gets a new session and UI instance. | |||
| Having the application open in separate tabs or windows means that the | |||
| instances are totally separate from each others, and thus won't conflict | |||
| and cause any out of sync or similar issues. | |||
| Opening the new tab will open the application into it's start page. Use | |||
| URI fragments if you want to open a specific view into the secondary | |||
| tab. You can read the URI fragments in the `UI.init()` and decide if you | |||
| want to show the main view or a specialized view: | |||
| [source,java] | |||
| .... | |||
| public void init(VaadinRequest request) { | |||
| String person = request.getParameter("editPerson"); | |||
| if (person == null) { | |||
| setContent(new MainView()); | |||
| } else { | |||
| setContent(new EditPersonView(person)); | |||
| } | |||
| } | |||
| .... | |||
| More examples on URI fragments and parameters can be found at: | |||
| * link:UsingURIFragments.asciidoc[Using URI fragments] | |||
+ 2
- 0
documentation/articles/contents.asciidoc
View File
| @@ -90,3 +90,5 @@ are great, too. | |||
| - link:CreatingABookmarkableApplicationWithBackButtonSupport.asciidoc[Creating a bookmarkable application with back button support] | |||
| - link:BroadcastingMessagesToOtherUsers.asciidoc[Broadcasting messages to other users] | |||
| - link:ConfigureInputFieldsToGuideDataEntry.asciidoc[Configure input fields to guide data entry] | |||
| - link:CreatingMultiTabApplications.asciidoc[Creating multi-tab applications] | |||
| - link:AddingASplashScreen.asciidoc[Adding a splash screen] | |||
Loading…