Vaadin 8 中的重叠进度条

发布于 2025-01-16 18:55:27 字数 1273 浏览 7 评论 0 原文

我想知道我是否可以在 Vaadin 8 中实现这样的目标:

overlapping Progressbar

橙色条代表一个进度,绿色条代表另一个进度,它是橙色的子集。基本上,绿色条可以小于或等于橙色条。

现在,我只有

simple Progressbar

以下是代码:

        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);

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);

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

━╋う一瞬間旳綻放 2025-01-23 18:55:27

我还没有尝试过这个,但我认为通过扩展/覆盖 ProgressBar 及其相关类以具有两个或更多进度指示器,这是半容易做到的。

请参阅 VProgressBar,调用getWidget().setState(getState().state); href="https://github.com/vaadin/framework/blob/master/client/src/main/java/com/vaadin/client/ui/progressbar/ProgressBarConnector.java" rel="nofollow noreferrer">ProgressBarConnector< /a>,state href="https://github.com/vaadin/framework/blob/master/shared/src/main/java/com/vaadin/shared/ui/progressindicator/ProgressBarState.java" rel="nofollow noreferrer">ProgressBarState< /a> 以及 getValue 和 setValue 处理href="https://github.com/vaadin/framework/blob/master/server/src/main/java/com/vaadin/ui/ProgressBar.java" rel="nofollow noreferrer">进度条 - - 您将需要复制所有这些。您还需要额外指示器的样式(请参阅 进度条的 Valo 样式)。

鉴于上述三个类是客户端类,请查看 Client -Side Development 文档(如果您以前不熟悉它),并记住在每次更改后重新编译您的小部件集。

如果您想要一个版本,其中第二个栏不是第一个栏的子集,而是完全不同的进度,并且不预先知道哪个任务最慢,我想您还需要额外的逻辑来确定哪个栏是在下面(否则较快的可能会隐藏较慢的),并且可能用于在条的相对速度发生变化时交换条的颜色。或者您可以调整设计,使两个栏始终可见。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文