1. #1
    Sencha User
    Join Date
    Nov 2012
    Location
    Germany
    Posts
    13
    Vote Rating
    0
    Stetograph is on a distinguished road

      0  

    Default Unanswered: Change ProgressBar color in GXT 3.0.1

    Unanswered: 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

  2. #2
    Sencha Premium Member
    Join Date
    Jul 2012
    Location
    New York, NY (Manhattan)
    Posts
    33
    Vote Rating
    -10
    rsilver is infamous around these parts

      0  

    Default


    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
    }

  3. #3
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,717
    Answers
    109
    Vote Rating
    88
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Nov 2012
    Location
    Germany
    Posts
    13
    Vote Rating
    0
    Stetograph is on a distinguished road

      0  

    Default


    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

  5. #5
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,717
    Answers
    109
    Vote Rating
    88
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    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.

  6. #6
    Sencha User
    Join Date
    Nov 2012
    Location
    Germany
    Posts
    13
    Vote Rating
    0
    Stetograph is on a distinguished road

      0  

    Default


    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

  7. #7
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,717
    Answers
    109
    Vote Rating
    88
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    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.

Thread Participants: 2

Tags for this Thread