I did something similar to this.
I think this works well, especially for Bootstrap(
https://getbootstrap.com/ ) based forms.
A trouble with Bootstrap is that form fields are styled with various
<div> and <span> around the input fields.
That makes these fields compound markup elements i.e. a field is
practically a structure made up of <div> and <span> constructs in
addition to the <input> element itself.
Making Wicket components (Panels) out of them is very useful as it
significantly reduce boilerplate (spagetti) HTML codes used in forms and
fields, especially with Bootstrap.
I swtiched from Spring-Boot Thymeleaf to Apache Wicket mainly as
Thymeleaf (without using 'dialects') evolves to become a huge amount
(mess) of spagetti HTML codes
when forms and tables becomes more complex and larger (e.g. lots of fields).
For the various scripting engines e.g. Thymeleaf - a dialect is needed,
and JSP - custom tag libraries is needed, to rework those clusters of
html tags around fields etc into components.
while for Apache Wicket, components are built-in and helps very much to
reduce those repetitive HTML codes.
On 09/06/2025 17:06, Joel Jabez wrote:
Hi so i recently, made some text field with some wrapper around with some
bootstrap class also. Im using this in alot of places, so for that i
created a component for it. Here is the java class and html page
public abstract class FormComponentTextField extends Panel
{
private final String propertyExpression;
private final Form<?> form;
private final Class<?> resourceClazz;
private final String displayName;
protected FormComponentTextField(String id, Form<?> form)
{
this(id, form, (Class<?>) null);
}
protected FormComponentTextField(String id, Form<?> form, String
propertyExpression)
{
this(id, form, null, id, propertyExpression);
}
protected FormComponentTextField(String id, Form<?> form, Class<?>
resourceClazz)
{
this(id, form, resourceClazz, id, id);
}
protected FormComponentTextField(String id, Form<?> form, Class<?>
resourceClazz, String displayName, String propertyExpression)
{
super(id);
this.form = form;
this.resourceClazz = resourceClazz == null ?
this.getClass().getNestHost() : resourceClazz;
this.displayName = displayName;
this.propertyExpression = propertyExpression;
init();
}
protected void init()
{
add(createTextFieldLabel());
add(createTextField());
}
protected Label createTextFieldLabel()
{
Label label = new Label("fieldLabel", getLabel());
if (isRequiredTextField()) {
label.add(AttributeModifier.append("class", "mandatory-field"));
}
return label;
}
protected TextField<String> createTextField()
{
TextField<String> textField = isRequiredTextField() ? new
RequiredTextField<>("textField") :
new TextField<>("textField");
textField.setLabel(getLabel());
textField.setOutputMarkupId(true);
textField.add(getMaximumLength());
textField.setDefaultModel(new
PropertyModel<>(form.getDefaultModel(), propertyExpression));
getValidators().forEach(textField::add);
return textField;
}
protected boolean isRequiredTextField()
{
return false;
}
protected Model<String> getLabel()
{
return Model.of(getPropertyValue(displayName));
}
public String getPropertyValue(String property)
{
return StringResourceUtils.getString(resourceClazz, property);
}
protected StringValidator getMaximumLength()
{
return StringValidator.maximumLength(255);
}
protected List<IValidator<String>> getValidators()
{
return List.of();
}
}
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"; xmlns:wicket="
http://wicket.apache.org";>
<body>
<wicket:panel>
<div class="mb-3 row">
<span class="col-sm-3 col-form-label" wicket:id="fieldLabel"></span>
<div class="col-sm-9">
<input class="form-control" type="text" wicket:id="textField"/>
</div>
</div>
</wicket:panel>
</body>
</html>
I wanna ask whether this is the best way to do, or is there a better way to
do it
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org
