Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- DownloadDownload
- PrintPrint
Chapter 2. The Building Blocks > Time for action - adding a loading message
Time for action - adding a loading message
1. Open the application's HTML file, war\RSSReader.html, and add the following code to the body of the HTML:
Code View: Scroll / Show All<div id="loading"> <div class="loading-indicator"> <img src="gxt/images/default/shared/large-loading.gif" width="32" height="32"/>RSS Reader<br /> <span id="loading-msg">Loading...</span></div> </div>
This creates a new div with the ID loading. This name is important, as it makes hiding the loading message when the application has loaded straightforward. The div itself contains an animated gif from GXT's standard resources with a familiar AJAX loading animation together with the loading message itself.
2. We now need to add the styling for the loading indicator, so open up the war\RSSReader.css file, remove the previous styling, and add the following:
Code View: Scroll / Show All#loading { position: absolute; left: 45%; top: 40%; margin-left: -45px; padding: 2px; z-index: 20001; height: auto; border: 1px solid #ccc; } #loading a { color: #225588; } #loading .loading-indicator { background: white; color: #444; font: bold 13px tahoma, arial, helvetica; padding: 10px; margin: 0; height: auto; } #loading .loading-indicator img { margin-right:8px; float:left; vertical-align:top; } #loading-msg { font: normal 10px arial, tahoma, sans-serif; }3. At this point, it is also a good idea to revisit the HTML and look at the area where the JavaScript is loaded. At the moment, the script tag that loads the GWT-generated rssreader/rssreader.nocache.js is in the head of the document, meaning that its loading is started before the body loads. We want to make sure our loading message is displayed before the JavaScript starts loading so that our user is not looking at an empty page for any noticeable time. So we need to move the script tag from the head of the document to the end of the body so that the HTML file looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF- 8"> <link type="text/css" rel="stylesheet" href="RSSReader.css"> <link type="text/css" rel="stylesheet" href="gxt/css/gxt-all.css"> <title>RSS Reader</title> </head> <body> <div id="loading"> <div class="loading-indicator"><img src="gxt/images/default/shared/large-loading.gif" width="32" height="32" />RSS Reader<br /> <span id="loading-msg">Loading...</span></div> </div> <script type="text/javascript" language="javascript" src="rssreader/rssreader.nocache.js"></script> </body> </html>
4. If we were using this technique in a conventional GWT application, we would now need to add code to our onModuleLoad method to hide or remove the loading div when the application is loaded. However, as we are using a GXT Viewport panel, this is taken care of for us. If there is a div with ID loading, it will automatically be hidden. In fact, it will nicely fade away once the viewport is attached. If we had wanted to call our loading div something different, we would call the Viewport's setLoadingPanelId(java.lang.String loadingPanelId) method where loadPanelId is the ID of our loading div.
