How can I make components inside a FlowBox to be selectable?

Support
#1

Or, how can I customize items in a

OptionsList

and make them horizontal? I know only

OptionsGroup

supports horizontal.

Or, how can I make a container datasource-aware?

If I planned to integrate Vaadin Blueimp Image Gallery, how can I bind a FileDescriptor datasource collection to it?

I’d like to create a File Browser in icon view, with image file could show thumbnails.
Tried two days but no clue.

#2

Well, thanks for clues, though it’s a little complex.

I think CUBA should really provide some kind of gallery component? or at least a selectable flow layout could implement every listeners. It’s very common for having to build file/image explorer ui.

#3

Hi,

In order to make components inside FlowBoxLayout selectable, you need to use something like com.vaadin.event.LayoutEvents.LayoutClickListener and when a user clicks on some item layout inside FlowBoxLayout you will add some CSS styles for selected/non-selected state for each item inside the container. Currently, there is no such API in CUBA and you have to use Vaadin API directly. You can find an example of using Vaadin with CUBA here: Working with Vaadin Components - CUBA Platform. Developer’s Manual

OptionsList cannot be customized since it uses native browser component to show items. You need to create your own component in order to show items horizontally. Another option is to customize OptionsGroup and hide radio buttons using CSS rules. (See Extending an Existing Theme - CUBA Platform. Developer’s Manual)

Example:


<optionsGroup id="testOptionsGroup"
              stylename="hide-radio"
              orientation="horizontal"/>

CSS rules - hide radio buttons and highlight selected item using background colour:


.hide-radio {
  .v-radiobutton.v-select-option {
    padding-left: 0;
  }
  label:after,
  label:before {
    display: none !important;
  }
  input:checked + label {
    background: red;
  }
}

Note: OptionsGroup does not support custom UI components for options, it shows only simple caption of each item.

You can implement custom data binding using data source event listeners: ItemChangeListener, ItemPropertyChangeListener and CollectionChangeListener. They are described here: Datasource Listeners - CUBA Platform. Developer’s Manual.

If you want to integrate some Vaadin add-on you have to implement your data binding from scratch using data source event listeners and there is no generic way to do it since each Vaadin add-on has its own data model.

In case of FileDescriptor entity you can obtain a content of file corresponding to FileDescriptor using com.haulmont.cuba.gui.export.FileDataProvider class.


FileDataProvider fileDataProvider = new FileDataProvider(fileDescriptor);
InputStream fileDataStream = fileDataProvider.provide();

And then you need to use this input stream with your gallery add-on.