Change ProgressBar color in GXT 3.0.1

Hi Community,

i'm quite new to Sencha GXT and really like it.
Though, I'm having a problem concerning the color of a ProgressBar's cell residing inside a grid.
I was not able to find hints in the internet to solve this issue.

Explaination:
To style the progressbar a new Appearance was created. This appearance uses a
CustomProgressBar.css file.
My resources interface, extending ProgressBarResource looks like this:

Code:

---

    public interface ProgressBarCustomizedResource extends ClientBundle, ProgressBarResources {
        @Source("CustomProgressBarCell.css")
        public ProgressBarStyle style();
        @Source("virtualBar.png")
        public ImageResource bar();
    }

---

Here a bar() method is defined. I thought that could be used to change the image of the progressbar to get i.e. a red bar instead of a blue or gray one.

However I have no idea of how to change the bar color with this ImageResource.
Maybe I have to override the render()-method of the default appearance?

Is there an easier way to accomplish a color-change of the progressbar?

any hint is very appreciated


kind regards,
Stefan

Stefan,
Try to setStyleName(styleClass) e.g
ProgressBar pb;
pb.setStyleName("myProgressBar");

then in your project.css file found in the war folder:
Try:
.myProgressBar {
foreground: red;
foreground-color: red;
}
// the the period must be the first character denoting class type of selector which corresponds
to the setStyleName setting
//instead of blue - try that -If not it may help to know the properties
// and use them but background and foreground would be good
// places to start
}

You're on the right track to modifying the ProgressBar appearance by changing the ClientBundle - by taking this approach, you'll replace the existing image and only your own will be present in the compile app. By building your own appearance, you'll also be able to change every instance of the progress bar throughout the app.

The default appearances that GXT ships are generally a collections of styles and images, along with a dom structure, and a bit of logic to tell the real widget/cell how to find important dom elements to update, etc.

Subclass ProgressBarDefaultAppearance, and pass your custom ClientBundle, along with the default template, to the super constructor. Then you can either pass instances of this appearance implementation to specific ProgressBars, or you can wire it up to become the default:

Possible appearance impl, using your modified resources:

Code:

---

public class CustomProgressBarAppearance extends ProgressBarDefaultAppearance {
    public interface ProgressBarCustomizedResource extends ClientBundle, ProgressBarResources {
        //@Source("CustomProgressBarCell.css")// This may not be necessary, since you've also
        //public ProgressBarStyle style();// overridden the bar() method to indicate a new image
        @Source("virtualBar.png")
        public ImageResource bar();
    }

    public CustomProgressBarAppearance() {
        super(GWT.<ProgressBarCustomizedResource>create(ProgressBarCustomizedResource.class),
            GWT.<ProgressBarTemplate>create(ProgressBarTemplate.class));
    }
}

---

Creating a single different ProgressBar:

Code:

---

ProgressBar customBar = new ProgressBar(new ProgressBarCell(new CustomProgressBarAppearance()));

---

Modify all ProgressBars to use your new appearance impl by default:

Code:

---

  <replace-with class="com.example.project.client.CustomProgressBarAppearance">
    <when-type-is class="com.sencha.gxt.cell.core.client.ProgressBarCell.ProgressBarAppearance" />
  </replace-with>

---

Code:

---

ProgressBar customBar = new ProgressBar();

---

If you are only changing one instance, and only modifying one single CSS property, then adding another stylename to the widget may be the easiest way forward. But as more things change, and as more parts of the app will need to take advantage of those changes, the appearance pattern and its ability to define the default instance becomes more and more helpful.

Hi,

thank you for your answers and sorry for the late reply.

It turned out to be a bit more tricky to change the color of the progressbar. Setting Css-styles like

Code:

---

.progressbar {
    color: red;
OR background-color: red;   
}

---

didn't work at all. Maybe it is overriden somewhere else !? I don't know.

My solution to this problem:

Write own CustomProgressBar.html and set respective style and variables as you demand it.
In this way it is also possible to change other things, like setting the text outside the bar-wrap.

Some kind of strange that such a small change requires such a big workaround. However in the end it works fine :)


Greetz
Stefan

Without seeing more details it is hard to say for certain, but my guess is that the rules of CSS are getting in your way - using FireBug on http://www.sencha.com/examples/#ExamplePlace:cellgrid indicated that the color on the progress bar (the part that indicates how much is finished) just needs the background-image removed (set to none) and the background-color set to your arbitrary color. Or use a new image for the bar() image, pointed at your own image of choice.

Just making a new CSS class .progressbar isn't going to do anything - it has to be in the appearance, it has to be called progressBar (note the capitalization), and the existing image needs to be replaced or removed. This is one part how CssResource works, and one part how CSS itself works.

Hello Mr. Alworth,

thanks for your reply. I am quite new to Css und GWT, GXT and so being happy about the kind of information you provided me :)

It turned out to be clear after looking at FireBug. I tried both: Changing background-image and removing background-image and setting another color. Both worked without changing the ProgressBar.html :>. I think this helped me a lot to understand how CSS and CSSResources work.
However, changing the bar() ImageResource had no effect. It needs to be changed directly in the css-file.


Kind regards,
Stefan

Once again, this time with regard to the ImageResource, without seeing the code that doesn't work, I can't offer a lot. Glad you got it to be working though.

All of our various TriggerField subclasses (ComboBox, SpinnerField, DateField, etc) get new icons based on this same principle of extending a ImageResource method. If this didn't work, many of our fields would be broken.