我如何在wicket框架中使用html5颜色输入类型

Question

In the wicket application, I want to apply some style and color in my form. So for that I want to use < input wicket:id="fillColorField" class="input" type="color"/> instead of input wicket:id="fillColorField" class="input" type="text"/> in .html file.

Is there any attribute or element for html5 Color input type in the wicket framework like for type= "text" we have TextField<~> ?

If there is no such attribute then please suggest me the alternative way to do this but it should be html5 color input type, not others like javascript color picker, etc.

Answer 1

Color as Hex-String

The simplest way is to use a normal TextField<String> and overwrite the getInputTypes method which tells wicket to accept your type="color" in your HTML for the input.

IModel<String> colorModel = new Model<>();
queue(new TextField<String>("colorpicker", colorModel) {
            @Override
            protected String[] getInputTypes() {
                return new String[] {"color"};
            }
        });
queue(new Label("colorlabel", colorModel));

With this you will have the string representation of the color in your model, like the browser sends it, so for example #FF33AA .

You might also want to add a validator or some other safeguard to the TextField which checks the format, as it's not guaranteed that the submitted value will always be a nicely formatted color hex-string (browsers not supporting type="color" , a malicious user sending arbitrary values, etc.)!

---

Color as Java Object

Additionally you could also register a custom IConverter in your wicket Application that converts the String value to something more useful, for example a java.awt.Color object, which would give you direct access to the RGB values.

For this add a new converter for the Color class in your wicket Application class by overwriting the Application#newConverterLocator() method:

@Override
protected IConverterLocator newConverterLocator() {
    ConverterLocator defaultLocator = new ConverterLocator();

    defaultLocator.set(Color.class, new IConverter<Color>() { 
        @Override
        public Color convertToObject(String value, Locale locale) throws ConversionException {
            try {
                return Color.decode(value);
            } catch (NumberFormatException e) {
                throw new ConversionException("Illegal color format", e);
            }
        }

        @Override
        public String convertToString(Color value, Locale locale) {
            return String.format("#%02x%02x%02x", value.getRed(), value.getGreen(), value.getBlue());
        }
    });

    return defaultLocator;
}

And then use a Model with the Color class instead of String.

IModel<Color> colorModel = new Model<>();
queue(new TextField<Color>("colorpicker", colorModel, Color.class) {
            @Override
            protected String[] getInputTypes() {
                return new String[] {"color"};
            }
        });
queue(new Label("red", colorModel.map(Color::getRed)));
queue(new Label("green", colorModel.map(Color::getGreen)));
queue(new Label("blue", colorModel.map(Color::getBlue)));