GWT progressbar

[Jayrey]

Hello,everyone.
I'm recently learned GWT ,and I need to add a progress bar in a
popuppanel to show a process of a installation.
Any one can give some suggestions or examples.
Endless thanks.

[Reinier Zwitserloot]

A long time ago I also needed to make one, and what I did was too
simple for words: Create 2 divs in an absolute panel. Anytime I need
to update the progress, I change the styling on these divs (using
DOM.setStyleAttribute(), I guess) so that the one grows by as much as
the other shrinks, and the other is also moved an equal amount of
pixels to the left. Then, make the first one blue and the second one
gray, or whatever seems prudent, and voila: a progress bar.

You should be able to roll your own progress bar widget using that as
a base. You can even employ background-image: whatever; background-
repeat: repeat-y; to create a progress bar that has a shinier look! -
by letting the style for the div itself be defined by a class name,
anyone using the widget can just change it to whatever they think
looks good.

Or.. there's probably at least one GWT extension library out there
that has some sort of progressbar or other.

[darkman97]

On incubator you've got one

http://code.google.com/p/google-web-toolkit-incubator/wiki/ProgressBar

[Jayrey]

Oh, thanks a lot.
I really have got more than I have thought of.
But would you like to show me some sources or examples associated with
progressbar based on gwt-incubator?
Thanks again.

[Jayrey]

[brad.s...@gmail.com]

Hi Jayrey,

I highly recommend using the GWT Widget Library written by Robert
Hanson:

http://gwt-widget.sourceforge.net/

Here is a brief example. I use a timer to progress the bar but you
could easily extend this widget to be moved forward by another
external widget:

import org.gwtwidgets.client.ui.ProgressBar;

import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.Widget;

public class SplashDialogBox extends DialogBox{

private void closeDialog(){
this.hide();
}

public void setWidget(Widget w){
final ProgressBar progressBar = new ProgressBar(73);
final Label statusText = new Label("Loading...");
Timer t = new Timer() {
public void run() {
int progress = progressBar.getProgress()+16;
if (progress>100){
cancel(); closeDialog();
}else if(progress>80){
statusText.setText("Initializing...");
}
progressBar.setProgress(progress);
}
};

t.scheduleRepeating(1000);

AbsolutePanel holder = new AbsolutePanel();
holder.addStyleName("Loader");
HorizontalPanel progressBarHolder = new HorizontalPanel();
progressBarHolder.add(progressBar);
progressBarHolder.addStyleName("ProgressBar");
statusText.addStyleName("LoaderText");

progressBarHolder.setCellHorizontalAlignment(progressBar,HasHorizontalAlignment.ALIGN_CENTER);

holder.add(w,-1,-1);
holder.add(progressBarHolder,-1,-1);
holder.add(statusText,275,300);

super.setWidget(holder);
}

public SplashDialogBox(){
super();
this.addStyleName("Loader");
}

public SplashDialogBox(boolean autoShow){
super(autoShow);
this.addStyleName("Loader");

}
}

Hope this helps.

[Jayrey]

Thanks for your help.
I have tried all of above available widgets,though problem is still
not solved,I really get more development.
recently I have got to find a GWT-EXT jar,maybe it's available and can
make the UI more beautiful than anyone else.
I am trying getting to know it clearly and if you have any suggestion
or helpful experience.I am ready for it thankfully.

[Jayrey]

[Sumit Chandel]

Hi Jayrey,

As darkman97 mentioned, you might be interested in using the ProgressBar widget in the GWT Incubator project. You can check out details on the project page at the link below:

http://code.google.com/p/google-web-toolkit-incubator/wiki/ProgressBar

To use the ProgressBar, you'll need to add the GWT incubator project to your GWT project classpath. You can download the latest GWT incubator JAR at the link below:

http://google-web-toolkit-incubator.googlecode.com/files/gwt-incubator-10-25-07.jar

Also keep in mind that you will need to inherit the GWT WidgetIdeas project in your GWT module XML file. To do this you'll need to add the following line to your <module>.gwt.xml file:

<inherits name='com.google.gwt.widgetideas.WidgetIdeas' />

Hope this helps,
-Sumit Chandel