GXT之旅:第二章:GXT组件(5)——加载消息
2012-01-05 10:42
239 查看
加载消息
构建任何一种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标记会消失的。
相关文章推荐
- GXT之旅:第二章:GXT组件(3)——事件和监听
- GXT之旅:第二章:GXT组件(4)——容器的布局
- GXT之旅:第二章:GXT组件(6)——定制组件
- GXT之旅:第二章:GXT组件(8)——Popup
- GXT之旅:第二章:GXT组件(9)——Popup位置
- qml学习----------使用Loader来加载组件和处理按键消息
- 关于《创建组件**失败。错误消息为**未能加载文件或程序集**或它的某一个依赖。系统找不到指定文件。》的解决方案
- GXT之旅:第二章:GXT组件(1)——组件层次结构
- GXT之旅:第二章:GXT组件(7)——Button和Tooltip
- 关于《创建组件**失败。错误消息为**未能加载文件或程序集**或它的某一个依赖。系统找不到指定文件。》的解决方案
- GXT之旅:第二章:GXT组件(2)——渲染和容器
- VS2013 RC 此模板尝试加载组件程序集 “NuGet.VisualStudio.Interop, Version=1.0.0.0, Culture=neutral.........
- Unity3d修炼之路:加载一个预制体,然后为该对象添加组件,然后查找对象,得到组件。
- 【记录】VS2012新建项目时,报:此模板尝试加载组件程序集“NuGet.VisualStudio.Interop...”
- jquery 延迟加载组件 lazyload
- c#中异步基于消息通信的完成端口的TCP/IP协议的组件实现(客户端-源代码)
- Yii2.0-图片上传扩展(异步加载缩略图) [扩展组件]
- Mangos源码分析(8):服务器公共组件实现之消息队列
- c#中异步基于消息通信的完成端口的TCP/IP协议的组件实现(源代码) 客户端
- Android Handler 异步消息处理机制的妙用 创建强大的图片加载类