Question

My class attribute has two CSS class values. The HTML starts out like this:

<input type="button" wicket:id="rowButton" class="jelly-button greenGradient"/>

And I want to dynamically change it to this:

<input type="button" wicket:id="rowButton" class="jelly-button redGradient"/>

Currently I am doing this:

component.add(new SimpleAttributeModifier(“class”, “jelly-button redGradient”));

What is the best way to do this in Wicket? There must be a more ‘proper’ way to do this than what I have done above.

Answer 1

Instead of using an attribute modifier with fixed text you could use an attribute appender with the text retrieved from a model. To change the class, just change the model’s value. For example:

Model<String> gradientModel = new Model<String>("greenGradient");

…

component.add(AttributeModifier.append("class", gradientModel));

in the markup just have

<input type="button" wicket:id="rowButton" class="jelly-button"/>

Then when it is time to change the gradient use

gradientModel.setObject("redGradient");

or

gradientModel.setObject("greenGradient");