Overlapping progressbar in Vaadin 8

user_1631306 0
Viewed 65

I am wondering if I can achieve something like this in Vaadin 8:

overlapping progressbar

The orange bar represents one progress and the green represents another one, which is subset of the orange. Basically, the green bar can be smaller or equal to the orange.

Right now, I have only

simple progressbar

Following is the code:

        AbstractLayout progressBarInformationLayout = 

        VaadinLayoutUtility.getInstance().generateHLayout();
        progressBarInformationLayout.setStyleName("dashboard_progress_bar_info_layout");
        layout.addComponent(progressBarInformationLayout);

        float progressBarValue = actualIncludeTotal / (float) predictedInclude;
        ProgressBar progressBar = new ProgressBar(progressBarValue);
        progressBar.setId("dashboard_progress_bar");
        progressBar.setWidth("230px");
        progressBar.setStyleName("progress_bar");
        progressBarInformationLayout.addComponent(progressBar);

        Label progressLabel = new Label(df2.format(progressBarValue * 100) + "%");
        progressLabel.setStyleName("progress_label");
        progressBarInformationLayout.addComponent(progressLabel);
vaadin8 vaadin progress-bar java
1 Answers

I haven't tried this, but I'd assume it's semi-easily doable by extending/overriding ProgressBar and its related classes to have two or more progress indicators.

See the handling of indicator variable in VProgressBar, calling of getWidget().setState(getState().state); in ProgressBarConnector, variable state in ProgressBarState, and the getValue and setValue handling in ProgressBar -- you are going to need to duplicate all of those. You'll also need styling for the extra indicators (see Valo styles for ProgressBar).

Given that three of the above are client-side classes, take a look at the Client-Side Development documentation if you aren't familiar with it from before, and remember to recompile your widgetset after every change.

If you ever want a version where the second bar isn't a subset of the first one but a completely different progress, and don't know upfront which task is slowest, I suppose you'll also need extra logic for determining which bar is underneath (otherwise the faster one might hide the slower one), and possibly for swapping the colors of the bars if their relative speed changes. Or you could tweak the design so that both bars are always visible.

user_158615710
Related