Question

我今天开始学习GWT，因为我有java背景，所以已经做了很多。我的下一步是从后端服务器加载JSON数据，但在加载完成后，我想显示进度轮，原因很明显。

我期待一个“开箱即用”的小部件，但似乎没有（如果我错了，请纠正我）。由于我是GWT的新手，我不想通过其他框架增加复杂性，只需要简单的GWT。

似乎我必须编写一个代码，因为我还没有找到一些第三方代码。有人能指出我正确的方向吗？步骤是什么？我应该创建一个图像然后在动画中旋转它，还是创建多个图像然后以圆形方式替换它们？还是我完全离开这里？

Answer 1

好吧，对于一个没有显示实际进度的简单进度轮（只是你的应用程序正在做某事），我建议一个简单的动画图像（例如在http://www.ajaxload.info/生成一个）。

如果动画图片/ gif不是一个选项：

一个简单的解决方案是创建多个图像并以循环方式替换它们。我最近用过这个，基本上你做了一个自称的计时器：

Timer updateAnim = new Timer() {
    @Override
    public void run() {
        currentImage = (currentImage + 1) % NO_IMAGES;
        setVisibilities();
        this.schedule(UPDATE_TICK);
    }
};

private void setVisibilities() {
    img1.setVisible(false);
    img2.setVisible(false);
    switch (currentImage) {
    case 0:
        img1.setVisible(true);
        break;
    case 1:
        img2.setVisible(true);
        break;
    }

}

setVisibilities()只是将当前图像设置为可见，而将其他图像设置为不可见。我觉得这比切换图像URL要快（只使用一个图像，调用img.setURL(String url);）。

现在你只需拨打updateAnim.schedule(UPDATE_TICK);即可运行。

我想最快（因为浏览器可以优化）将使用CSS动画（创建一个图像并旋转它），但也可能是最复杂的（没有那么多，所以不妨因为它实际上比我想象的更简单;）。查看有关CSS旋转动画的this帖子。

如果你想创建一个真正的进度条（实际显示进度），你需要一个在进度上调用的回调。只需更新此进度回调中的图像/ CSS过渡。

Answer 2

在我看来，最好是获取动画图像（例如gif）并在加载数据时显示它。

有几个用于生成“预加载器”图像的网站： http://www.preloaders.net/ http://www.ajaxload.info

Answer 3

一个非常简单的解决方案是使用pace.js。它是javascript脚本，显示从DOM收集事件的进度条。您可以配置为侦听所有GWT-RCP事件以及客户端加载片段时。只需将脚本标记添加到加载了GWT模块的html文件中。

对于GWT活动和常规的ajax，这应该“开箱即用”。

<script type="text/javascript" language="javascript"
    src="js/pace.min.js"
    data-pace-options='{"elements":{"selectors":["body","script"]},"ajax":{"trackMethods":["GET","POST"]}}'></script>

普通gwt进度轮

3 个答案: