Vaadin Panel in CUBA

Support
#1

Hi,

i would like to use the Panel component of Vaadin and since i didn’t found it in the CUBA sampler i was just wondering: why? I know i could probably add it via a custom component, but i’m just curious if you didn’t added intentionally? If yes, what should i use instead - GroupBox or anything else?

bye,
Mario

#2

Hi Mario,

For what purpose do you want to use Panel?

It is very simple component with only one child that is always can be replaced with VBoxLayout. Our GroupBox is more powerful than Panel because it has vertical or horizontal layout inside and it can be collapsed. So I recommend to use GroupBox or custom styled VBoxLayout instead of Panel.

Also I’ve tried to use Panel from Vaadin in CUBA application and for now panels are shown with some errors, e.g. caption is invisible and border has 0 width. Thank you for your attention to integration of Vaadin components in CUBA applications. We will fix problems with look and feel of Panel in one of the next bug fix releases.

We do not plan to add Panel as CUBA component, but you will be able to use it as is from Vaadin as custom component.

#3

Hi Yuriy,

i have no direct use / requirement for it. I just found it appealing from a layout perspective. I just thought that the layout options from Vaadin are available in CUBA out of the box. But i’m fine with the solution of a GroupBox. Could you give me an example XML to define a custom styled VBoxLayout? I’m not really sure - do you just css the vbox element or do you have to put different elements inside the VBoxLayout and style those (like header and content or something)?

Bye,
Mario

#4

In Vaadin only Panel has its own caption element inside component, so It is the simplest way to have Panel with styled caption. We will fix Panel styles in the next minor version.

For now if you want to create something like Panel with caption block I recommend to use VBoxLayout with Label and VBoxLayout layout inside. Since valo is modular theme and halo is based on valo we can reuse valo SCSS mixins to add styles for our synthetic Panel.

Example layout:


<layout>
    <vbox expand="panelContent"
          height="300px"
          stylename="custom-panel"
          width="300px">
        <label stylename="custom-panel-caption"
               value="Caption"
               width="100%"/>
        <vbox id="panelContent"/>
    </vbox>
</layout>

Add styles from valo to your halo-ext.scss (Read more about theme extension here Extending an Existing Theme - CUBA Platform. Developer’s Manual):


@mixin halo-ext {
  @include halo;

  .custom-panel {
    @include valo-panel-style();
  }

  .custom-panel-caption {
    @include valo-panel-caption-style();
    border-bottom: valo-border();
    font-weight: bold;
  }
}

See screenshot with my synthetic Panel.

synthetic-panel