GWT進度條

Question

有沒有可以用於GWT的進度條小部件，還是我必須自己做？我試圖在google-web-toolkit-incubator，gwtupload和upload4gwt中使用進度條，沒有任何運氣。

Answer 1

一些代碼：

import com.google.gwt.i18n.client.NumberFormat; 
import com.google.gwt.user.client.DOM; 
import com.google.gwt.user.client.Element; 
import com.google.gwt.user.client.ui.Widget; 

public class ProgressBar extends Widget { 
    private static final String PERCENT_PATTERN = "#,##0%"; 
    private static final NumberFormat percentFormat = NumberFormat.getFormat(PERCENT_PATTERN); 

    private final Element progress; 
    private final Element percentageLabel; 
    private double percentage; 
    private final double max; 

    public ProgressBar(double value, double max) { 
     assert max != 0; 
     this.max = max; 

     progress = DOM.createElement("progress"); 
     progress.setAttribute("max", Double.toString(max)); 
     progress.setAttribute("value", Double.toString(value)); 

     percentageLabel = DOM.createElement("span"); 
     percentage = value/max; 
     percentageLabel.setInnerHTML(percentFormat.format(percentage)); 
     progress.insertFirst(percentageLabel); 

     setElement(progress); 
    } 

    public void setProgress(double value) { 
     progress.setAttribute("value", Double.toString(value)); 
     percentage = value/max; 
     percentageLabel.setInnerHTML(percentFormat.format(percentage)); 
    } 

} 

Answer 2

我不知道您的要求，但HTML5支持進度條標籤。下面是一個簡單的例子：

下面是HTML：

<progress id="bar" value="0" max="100"> 
    <span id="fallback"> 
     <p>Your browser does not support progress tag.</p> 
    </span> 
</progress> 

和腳本，看看它是如何加載

<script> 
    window.onload = function() { 

     var bar = document.getElementById("bar"), 
     loaded = 0; 

     var load = function() { 
      loaded += 10; 
      bar.value = loaded; 

      if(loaded == 100) { 
       clearInterval(dummyLoad); 
      } 
     }; 

     var dummyLoad = setInterval(function() { 
      load(); 
     } ,1000); 
    } 
</script> 

其他信息：http://www.w3.org/wiki/HTML/Elements/progress 來源：http://www.onlywebpro.com/2011/09/09/html5-progress-bar/

Answer 3

這裏有一個HTML5進度條例如：

在你ui.xml：

<progress ui:field="loadingProgress" style="width:100%" value="0" max="100"></progress> 

在您的代碼：

@UiField Element loadingProgress; 

loadingProgress.setPropertyInt("value", 50);