GXT之旅：第二章：GXT组件(5)——加载消息

最新推荐文章于 2012-01-11 16:46:23 发布

茜茜770

最新推荐文章于 2012-01-11 16:46:23 发布

阅读量4.7k

点赞数 3

分类专栏： GWT/GXT GXT之旅文章标签： stylesheet javascript gwt html 浏览器 resources

本文链接：https://blog.csdn.net/miqi770/article/details/7177415

版权

GWT/GXT 同时被 2 个专栏收录

61 篇文章 5 订阅

订阅专栏

GXT之旅

61 篇文章 17 订阅

订阅专栏

加载消息

构建任何一种GUI（graphic user interface图形用户界面），最重要的一点就是一定要让用户知道此时此刻应用程序正在做什么。GWT，尤其是GXT应用程序，会在javaScript和图片加载时候，占用几秒钟。因此，在这一期间，就需要显示一个等待加载的一个消息界面。

大致思路：当浏览器通过url找到此应用程序的时候，也就是JavaScript还没有被加载的时候，我们要在应用程序的html页面一直显式一个等待的消息。当浏览器加载完毕JavaScript和UI被渲染完毕的时候，再把这个等待的消息给隐藏。

打开应用的欢迎HTML页面，RSSReader.html。在<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>

<div>标记的id必须命名为loading，当应用加载完毕的时候，就会马上的，自动的，去隐藏loading标记。large-loading.gif 图片，正好是使用GXT SDK包里面的resources目录里现成的。

接下来，我们要给loading标记，指定一个css样式。所以我们应该编辑RSSReader.css文件，清空里面的内容，然后添加如下的css定义：

#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;
}

此时呢，让我们好好通读一下RSSReader.html。在JavaScript加载区域，毫无疑问的，必须的，要加载GWT生成rssreader/rssreader.nocache.js。但是通常都是把此类的JavaScripte加载的标记片段，放在<head>标记里，可是这样就意味着他们会早与<body>标记被浏览器先加载进来。换句话说，就是当js文件加载后，找不到<body>标签里面的任何内容。这就无法实现：在js加载后替换loading的<div>标签的想法。因此解决这个问题的好方法就是，把js文件的加载片段，写在<body>标签的最后面。经过修改后的RSSReader.html如下：

<!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>RSSReader</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>

如果对于GWT的程序而言，想实现js加载后隐藏loading标记之一功能。我们要在onModuleLoad()方法里加入相关的隐藏功能的代码。但是现在我们是使用GXT，当我们使用了Viewport，她就会自动的去寻找ID为loading的标签，并将他隐藏，不需要我们做任何的操作。事实上，隐藏的过程不是突然的，而是一个逐渐的过程，这样一来界面就会很友好的显示。如果一个加载消息的标签，ID别命名为别的字符串了，我们可以使用Viewport的setLoadingPanelId(java.lang.String loadingPanelId)方法设置一下，照样会达到效果。
下面运行一下应用，我们会发现，当UI被渲染好之后，loading标记会消失的。

茜茜770

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
GXT之旅：第二章：GXT组件(5)——加载消息

加载消息构建任何一种GUI（graphic user interface图形用户界面），最重要的一点就是一定要让用户知道此时此刻应用程序正在做什么。GWT，尤其是GXT应用程序，会在javaScript和图片加载时候，占用几秒钟。因此，在这一期间，就需要显示一个等待加载的一个消息界面。大致思路：当浏览器通过url找到此应用程序的时候，也就是JavaScript还没有被加载的时候，我们要在应
复制链接

扫一扫