Enhancing dashboard functionality

In the dashboard example, you have a bunch of charts and tables in vbox tags in the ext-mainwindow.xml.
In the Vaadin version of a dashboard demo, they have the charts and tables in panels that can be expanded or have a menu for each panel. How might one implement similar functionality in Cuba-Platform?

I’m envisioning a wrapper panel that can hold another ui object like a chart or table and you set the title and menu options of the wrapper?

panel

Hi,

you can easily implement composite layout that will look like Vaadin panel with buttons: Valo Theme Test.

Halo theme from CUBA extends Valo from Vaadin thus you can use all the styles from Valo in your application.

Vaadin dashboard cards use additional styles from Valo: card, v-panel-caption, borderless-colored. You can use them in CUBA:


<cssLayout height="300px"
           stylename="card"
           width="300px">
    <hbox stylename="v-panel-caption"
          width="100%">
        <label value="Widget caption"/>
        <button align="MIDDLE_RIGHT"
                icon="font-icon:EXPAND"
                stylename="borderless-colored"/>
    </hbox>
    <vbox height="100%">
        <label value="Panel content"/>
    </vbox>
</cssLayout>

And result will be the following:

If you want to implement expand feature for widget, you can simply hide all the panels instead of one programmatically or even remove all the components and insert only one. See Component.setVisible(boolean visible) method and Container.remove(Component child).

cuba-panel-widget