Color picker in CUBA

Support
#1

Hello,

we want to implement the option for the user to choose a color for a business object in the edit screen via a color picker. The color should be persisted as Html hex code (String).

Is there any component in CUBA for this? If not, what component would you recommend? Do you have an implementation example?

Thank you!

#2

Hi,

i’m not 100% sure but i don’t think CUBA has something like this. Nevertheless, there is a native Vaadin component called ColorPicker which works quite well. Information about how to integrate it can be found here: Custom Visual Components - CUBA Platform. Developer’s Manual

Bye,
Mario

#3

Thank you for your answer.

Is there any sample how to integrate a (standard) Vaadin component? I could only find how to integrate Vaadin addons or custom GWT components, but not standard Vaadin components.

#4

I believe in the documentation you can find that information. Search for “companion” and “unwrap”.

#5

Hi Bernd,

this is true, i thought it is a Vaadin Addon. An example of a native Vaadin Component can be found in the timesheets-example. There, the Vaadin Calender component is used in the application - which is also part of Vaadin native but not part of CUBA (although this is a fairly complex example).

Bye,
Mario

#6

You have two options here.
First, if you need the colorPicker only in a couple of screens then you can create the Vaadin component in the screen controller and add it to the screen. See the ColorPickerVaadinDirectly class of the attached demo project.


public class ColorPickerVaadinDirectly extends AbstractWindow {
    @Inject
    private VBoxLayout pickerFieldPanel;

    @Override
    public void init(Map<String, Object> params) {
        super.init(params);
        ColorPicker colorPicker = new ColorPicker();
        ComponentContainer vPickerFieldPanel = (ComponentContainer) WebComponentsHelper.unwrap(pickerFieldPanel);
        colorPicker.addColorChangeListener(event -> {
            Color color = event.getColor();
            showNotification(color.getCSS(), NotificationType.HUMANIZED);
        });
        vPickerFieldPanel.addComponent(colorPicker);
    }
}

Here a CUBA container is unwrapped, and the colorPicker is put into the unwrapped container.

The second option is to integrate the component into the CUBA generic UI. After that you will be able to declare the color picker in the screen xml descriptor like this: .

In this case, you will have to do a bit more work. The GUI integration example is also in the demo project. You can examine the ColorPickerGuiIntegration screen and other files that are listed below.

ColorPicker - a component interface in the gui module. This is the interface you’ll use in screen controllers.
WebColorPicker - an implementation of the interface in the web module. It wraps the Vaadin component.
ColorPickerLoader in the gui module - a class that loads the component from the xml descriptor.
cuba-ui-component.xml - a file that is used for registering the new component and its loader.
ui-component.xsd - an XML schema for the new UI component.

colorpicker.zip (25.8K)

#7

Thanks for all the answers.
I tried to open the colperpicker project in cuba studio, and I get an error:
Unable to open project. The project uses a base project that is not supported by this version of studio or was not found in both local or remote Maven repository.
I updated to the latest cuba version but to no avail. Could you give me a hint?

#8

Max incidentally uploaded the project with the reference to our internal repository. Sorry for this.
I’ve re-loaded the archive, please download it again.

#9

Your sample works fine on my side.
Now I tried to do the data binding to a test entity by following the stepper sample from “5.8.8.2. Integrating a Vaadin Component into the Generic UI” and at the end I realized that the Vaadin ColorPicker does not implement their “Field” interface.
How would you proceed in order to do the data binding in a general way so that we could use the component for different data sources / entities?

I found the following sample where someone implemented the “CustomField” interface :


import com.vaadin.shared.ui.colorpicker.Color; 
import com.vaadin.ui.ColorPicker; 
import com.vaadin.ui.Component; 
import com.vaadin.ui.CustomField; 
import com.vaadin.ui.components.colorpicker.ColorChangeEvent; 
import com.vaadin.ui.components.colorpicker.ColorChangeListener; 
 
/**
 * Color picker form field. 
 */ 
public class ColorPickerField extends CustomField<Integer> { 
 
    final ColorPicker colorPicker; 
 
    public ColorPickerField() { 
        colorPicker = new ColorPicker(); 
        colorPicker.addColorChangeListener(new ColorChangeListener() { 
            @Override 
            public void colorChanged(ColorChangeEvent event) { 
                setColorToField(event.getColor().getRGB()); 
            } 
        }); 
        colorPicker.setHistoryVisibility(false); 
    } 
 
    @Override 
    protected Component initContent() { 
        return colorPicker; 
    } 
 
    protected void setColorToField(final Integer color) { 
        super.setValue(color); 
    } 
 
    @Override 
    public Class<? extends Integer> getType() { 
        return Integer.class; 
    } 
 
    @Override 
    protected void setInternalValue(Integer newValue) { 
        if (newValue != null) { 
            super.setInternalValue(newValue); 
            colorPicker.setColor(new Color(newValue)); 
        } 
    } 
}

Would that be the way to go on, or is there a different approach?
Thanks for your help!

#10

This will work. I played with the ColorPickerField class you provided. Please see the modified demo project attached.
There is a Pencil entity with two color fields. In the pencil editor, the colorPicker component is bound to properties of the pencilDs datasource.

colorpicker.zip (33.1K)

#11

Thanks! I integrated it in or project and it works fine.