Main Content

Magnolia Community Forums: Get help with Magnolia: Vaadin color picker in component dialog


  • Stefane81
    Stefane81
    Full name: Stefán Einarsson
    Posts: 3
    Last post: Feb 2, 2016 4:11:08 PM
    Registered on: Feb 2, 2016
    Vaadin color picker in component dialog
    #1 by Stefane81 on Feb 2, 2016 11:43:45 AM

    I am trying to add this color picker (http://demo.vaadin.com/sampler/#ui/data-input/other/color-picker) to a component dialog.
    I created a definition class and a factory class based on these instructions here (https://documentation.magnolia-cms.com/display/DOCS/Custom+fields#Customfields-Usingafieldinaform).
    However when i start my local magnolia server I get this error:

    2016-02-02 10:21:12,110 ERROR gnolia.jcr.node2bean.impl.Node2BeanTransformerImpl: Can't convert property. Class for type [class java.lang.Class] not found.
    2016-02-02 10:21:12,111 ERROR gnolia.jcr.node2bean.impl.Node2BeanTransformerImpl: Can't set property [factoryClass] to value [is.godo.magnolia.site.form.field.factory.ColorPickerFactory] in bean [info.magnolia.ui.form.fieldtype.definition.ConfiguredFieldTypeDefinition] for node /modules/ui-framework/fieldTypes/colorPickerField due to info.magnolia.jcr.node2bean.Node2BeanException: java.lang.ClassNotFoundException: is.godo.magnolia.site.form.field.factory.ColorPickerFactory
    2016-02-02 10:21:12,113 ERROR gnolia.jcr.node2bean.impl.Node2BeanTransformerImpl: Can't set property [factoryClass] to value [is.godo.magnolia.site.form.field.factory.ColorPickerFactory] in bean [info.magnolia.ui.form.fieldtype.definition.ConfiguredFieldTypeDefinition] for node /modules/ui-framework/fieldTypes/colorPickerField due to org.apache.commons.beanutils.ConversionException: Default conversion to Class failed.
    2016-02-02 10:21:12,114 ERROR gnolia.jcr.node2bean.impl.Node2BeanTransformerImpl: Can't convert property. Class for type [class java.lang.Class] not found.
    2016-02-02 10:21:12,114 ERROR gnolia.jcr.node2bean.impl.Node2BeanTransformerImpl: Can't set property [definitionClass] to value [is.godo.magnolia.site.form.field.definition.ColorPickerDefinition] in bean [info.magnolia.ui.form.fieldtype.definition.ConfiguredFieldTypeDefinition] for node /modules/ui-framework/fieldTypes/colorPickerField due to info.magnolia.jcr.node2bean.Node2BeanException: java.lang.ClassNotFoundException: is.godo.magnolia.site.form.field.definition.ColorPickerDefinition
    2016-02-02 10:21:12,115 ERROR gnolia.jcr.node2bean.impl.Node2BeanTransformerImpl: Can't set property [definitionClass] to value [is.godo.magnolia.site.form.field.definition.ColorPickerDefinition] in bean [info.magnolia.ui.form.fieldtype.definition.ConfiguredFieldTypeDefinition] for node /modules/ui-framework/fieldTypes/colorPickerField due to org.apache.commons.beanutils.ConversionException: Default conversion to Class failed.

    Here is the definition class:
    package is.godo.magnolia.site.form.field.definition;

    import info.magnolia.ui.form.field.definition.ConfiguredFieldDefinition;
    /**
    * Created by stefane81 on 1/29/16.
    */
    public class ColorPickerDefinition extends ConfiguredFieldDefinition{
    private String colorPicker;

    public String getColorPicker() {
    return colorPicker;
    }

    public void setColorPicker(String colorPicker) {
    this.colorPicker = colorPicker;
    }
    }


    Factory class:

    package is.godo.magnolia.site.form.field.factory;
    import com.vaadin.shared.ui.colorpicker.Color;
    import com.vaadin.ui.AbstractColorPicker;
    import com.vaadin.ui.ColorPickerArea;
    import com.vaadin.ui.Notification;
    import com.vaadin.ui.components.colorpicker.ColorChangeEvent;
    import com.vaadin.ui.components.colorpicker.ColorChangeListener;

    /**
    * A class that defines default (button-like) implementation for a color picker
    * component.
    *
    * @see ColorPickerArea
    * @since 7.0.0
    */
    public class ColorPickerFactory extends AbstractColorPicker {
    protected AbstractColorPicker select;
    /**
    * Instantiates a new color picker.
    */
    public ColorPickerFactory() {
    super();
    }

    /**
    * Instantiates a new color picker.
    *
    * @param popupCaption caption of the color select popup
    */
    public ColorPickerFactory(String popupCaption) {
    super(popupCaption);
    }

    /**
    * Instantiates a new color picker.
    *
    * @param popupCaption caption of the color select popup
    * @param initialColor the initial color
    */
    public ColorPickerFactory(String popupCaption, Color initialColor) {
    super(popupCaption, initialColor);
    setDefaultCaptionEnabled(true);
    }

    protected AbstractColorPicker createFieldComponent() {
    select = new ColorPicker();
    select.setSwatchesVisibility(false);
    select.setHistoryVisibility(false);
    select.setTextfieldVisibility(false);
    select.setHSVVisibility(false);

    select.addColorChangeListener(new ColorChangeListener() {
    @Override
    public void colorChanged(final ColorChangeEvent event) {
    Notification.show(
    "Color changed: " + event.getColor().getCSS(),
    Notification.Type.TRAY_NOTIFICATION);
    }
    });

    return select;
    }

    @Override
    protected void setDefaultStyles() {
    setPrimaryStyleName(STYLENAME_BUTTON);
    addStyleName(STYLENAME_DEFAULT);
    }

    @Override
    public void beforeClientResponse(boolean initial) {
    super.beforeClientResponse(initial);

    if (isDefaultCaptionEnabled()
    && ((getState().caption == null || ""
    .equals(getState().caption)))
    && "".equals(getState().width)) {
    getState().width = "100px";
    }
    }
    }


    Can someone point me in right direction?

  • mgeljic
    mgeljic
    Full name: Mikaël Geljić
    Posts: 70
    Last post: Sep 22, 2017 4:11:20 PM
    Re: Vaadin color picker in component dialog
    #2 by mgeljic on Feb 2, 2016 4:01:49 PM

    Hi Stefán,

    The trace indicates that your definition and factory classes were not found for their respective properties. You might check your webapp setup/dependencies or server deployment.

    There's one more thing too: your ColorPickerFactory should implement info.magnolia.ui.form.field.factory.FieldFactory (or extend the AbstractFieldFactory).

    Cheers,
    Mika

  • Stefane81
    Stefane81
    Full name: Stefán Einarsson
    Posts: 3
    Last post: Feb 2, 2016 4:11:08 PM
    Registered on: Feb 2, 2016
    Re: Vaadin color picker in component dialog
    #3 by Stefane81 on Feb 2, 2016 4:07:21 PM

    I found the issue, it was due to misconfiguration in the server setup that caused said java files to not be included in the jar file.

  • Stefane81
    Stefane81
    Full name: Stefán Einarsson
    Posts: 3
    Last post: Feb 2, 2016 4:11:08 PM
    Registered on: Feb 2, 2016
    Re: Vaadin color picker in component dialog
    #4 by Stefane81 on Feb 2, 2016 4:11:08 PM

    Thank you, it was exactly a dependency issue and I have updated the ColorPickerFactory to extend AbstractFieldFactory.

  • pedro
    pedro
    Full name: Pedro
    Posts: 11
    Last post: Sep 26, 2017 12:51:35 PM
    Registered on: Jul 27, 2017
    Re: Vaadin color picker in component dialog
    #5 by pedro on Sep 22, 2017 1:15:40 PM

    Hi Stefán and Mikaël,

    I know it's a old post, but someone could help me how to display this custom field on component a template component? This is a example of one component that I use for tests:

    @Controller
    @Template(id = "module:components/article/test", title = "test")
    @TemplateDescription("")
    public class Test{

    @RequestMapping("/test")
    public String render() throws RepositoryException {
    return "components/article/test.ftl";

    }

    @TabFactory(" ")
    public void addDialog(UiConfig cfg, TabBuilder tab, DamConfig dam) {


    tab.fields(
    cfg.fields.text("test").label("test")
    );

    }

    }

  • pedro
    pedro
    Full name: Pedro
    Posts: 11
    Last post: Sep 26, 2017 12:51:35 PM
    Registered on: Jul 27, 2017
    Vaadin color picker in component dialog
    #6 by pedro on Sep 22, 2017 1:26:15 PM

    Hi,

    Refering to this post, someone could help me how to display this custom field on component a template component? This is a example of one component that I use for tests:

    @Controller
    @Template(id = "module:components/article/test", title = "test")
    @TemplateDescription("")
    public class Test{

    @RequestMapping("/test")
    public String render() throws RepositoryException {
    return "components/article/test.ftl";

    }

    @TabFactory(" ")
    public void addDialog(UiConfig cfg, TabBuilder tab, DamConfig dam) {


    tab.fields(
    cfg.fields.text("test").label("test")
    );

    }

    }

  • mgeljic
    mgeljic
    Full name: Mikaël Geljić
    Posts: 70
    Last post: Sep 22, 2017 4:11:20 PM
    Re: Vaadin color picker in component dialog
    #7 by mgeljic on Sep 22, 2017 4:11:20 PM

    Hi Pedro,

    You're trying to use a Vaadin component in a template; that's not gonna work, unless you create a custom Renderer to bootstrap a Vaadin app on your frontend page.
    It works in dialogs, because the Magnolia Admincentral is built with Vaadin.

    Probably not worth the overhead, you might have better luck reusing a color-picker on the pure JS side.

    Cheers,
    Mika

    PS: no need for the double-posting, and title of this post should be "Vaadin color picker in component template", not dialog ;)

  • pedro
    pedro
    Full name: Pedro
    Posts: 11
    Last post: Sep 26, 2017 12:51:35 PM
    Registered on: Jul 27, 2017
    Re: Vaadin color picker in component dialog
    #8 by pedro on Sep 26, 2017 12:51:35 PM

    Hi there Mikael,

    First of all, thanks for trying to help me. Probably I miss some explanation on what I want to archive.
    I want that the magnolia user (the one who create the website) could chose a color, for example, to use as background color, for that I need to add a ColorPicker Field in my component. At the moment I have a custom field in my component fully working where the user picks the color and it saves the hexadecimal code to jcr as a String value, the problem is that I can't see the previous color as default in the next component edition, so I'm trying the code in the previous post to update mine.
    So, I'm trying to make something like this:
    ...
    tab.fields(
    new ColorField("color").label("Background color")
    )
    ...



    Best regards,
    Pedro

    Ps.: I'm quite new to this forum :P I'm learning to use it.

You don't have the permission to post on this thread

Sign in

To login on this forum, you can use your Magnolia Forge, Support or Partner account, or, below, your Google, Yahoo! or OpenID account. If you have trouble logging in, or any other sort of issue, please let us know in the Meta forum, on the user-list, or simply by email at forum-admin at magnolia-cms dot com.

* Required

... or sign in with:

  • icon http://{your-openid-url}
  • icon
  • icon https://me.yahoo.com/