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 | |
| parent | faf7bddfcdfc12463e52fc2f84751a2afa3f75ae (diff) | |
| download | vaadin-framework-9ebc0be4e7d3bc6811ba3e86bc6a2da270bdcb76.tar.gz vaadin-framework-9ebc0be4e7d3bc6811ba3e86bc6a2da270bdcb76.zip | |
Migrate AddingASplashScreen and CreatingMultiTabApplications
| -rw-r--r-- | documentation/articles/AddingASplashScreen.asciidoc | 53 | ||||
| -rw-r--r-- | documentation/articles/CreatingMultiTabApplications.asciidoc | 29 | ||||
| -rw-r--r-- | documentation/articles/contents.asciidoc | 2 |
3 files changed, 84 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%;}`* diff --git a/documentation/articles/CreatingMultiTabApplications.asciidoc b/documentation/articles/CreatingMultiTabApplications.asciidoc new file mode 100644 index 0000000000..1c04f77d81 --- /dev/null +++ b/documentation/articles/CreatingMultiTabApplications.asciidoc @@ -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] diff --git a/documentation/articles/contents.asciidoc b/documentation/articles/contents.asciidoc index 18c1bf8f60..84cec17eed 100644 --- a/documentation/articles/contents.asciidoc +++ b/documentation/articles/contents.asciidoc @@ -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] |