Sealyu

--- 博客已迁移至: http://www.sealyu.com/blog

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  618 随笔 :: 87 文章 :: 225 评论 :: 0 Trackbacks

The Problem

When a GWT application loads, nothing is actually displayed by your application until all the generated JavaScript has been downloaded by the browser. I was looking for way to display a loading screen while my GWT application was loading, and then remove it once the GWT application is loaded.

The Solution

Since every GWT application has to be embedded in an HTML Host Page, an easy way to display a loading message is to place the loading message in a <div> in the HTML Host Page. Once all the GWT application JavaScript is done loading, we can have the GWT application remove the loading message by doing some DOM manipulation on the HTML Host Page.

Here is a sample HTML Host Page. The loading message, along with a loading animation image is contained in a <div> named “Loading-Message”.

   1: <html>
   2:  
   3: <head>
   4:   <title>GWT Application</title>
   5:   <link rel="stylesheet" href="style.css">
   6: </head>
   7:  
   8: <body>
   9:  
  10: <script type="text/javascript" language="javascript" src="gwtapp.nocache.js"></script>
  11:  
  12:   <h2>GWT Application</h2>
  13:  
  14:   <!-- The loading message div -->
  15:   <div id="Loading-Message">
  16:     <img src="loading-animation.gif"  alt="loading"> Loading GWT Application, please wait... 
  17:   </div>
  18:  
  19:   <!-- The Application's UI elements will be placed in this div by the Application module's -->
  20:   <!-- entry point class when it is loaded                                                  -->
  21:   <div id="GWT-Application-Panel">
  22:   </div>
  23:  
  24: </body>
  25:  
  26: </html>

The “Loading-Message<div> can be removed from the HTML Host Page using the following line of Java Code:

DOM.setInnerHTML(RootPanel.get("Loading-Message").getElement(), "");

Where would you put this line of code? You can put it anywhere in your GWT application. However, a good place to put it would be in your GWT application EntryPoint class’s onModuleLoad method. You can place it either before or after your application loads the UI elements. Here is an example onModuleLoad method:

   1: public void onModuleLoad() {
   2:   // Remove the loading message
   3:   DOM.setInnerHTML(RootPanel.get(“Loading-Message”).getElement(), “”);
   4:  
   5:   // Get the Application Container div from the DOM
   6:   mainPanel = RootPanel.get(“GWT-Application_Panel”);
   7:   
   8:   // Add GWT UI components
   9:   addWidgetsTo(mainPanel);
  10: }

If you aren’t the artistic type, here is a website you can use to download a customized animation image. Here is another website, where you can select some existing animations to use in your app.

If you haven’t already, please check out our continuing series of GWT Tutorials beginning with Introduction to GWT. You can find the rest of our GWT tutorials here.

posted on 2010-02-02 15:15 seal 阅读(341) 评论(0)  编辑  收藏 所属分类: GWT

只有注册用户登录后才能发表评论。


网站导航: