Hi all,

I've got a lot of forms on my app that use tables for layout and generally
look like this after being rendered:
<form>
<table>
<tr>
<th>Name</th> *<< in the original markup it was a <wicket:message
key="name">*
<td><input name="name"></input></td>* <<in the original markup it was a
simple <input wicket:id="name">*
</tr>
<table>
</form>

These form components also use the deprecated IComponentBorder to display
error messages related to the component (no ajax used, just on normal
submit).

I'd like to start using a div layout instead of a table layout, have a
feedback panel for each component and a <label> element, something like
this:
<form>
<fieldset>
<div class="row">
<label for="compId"></label>
<<< input here   id="compId">>>* doesnt just have to be <input>, might also
be <select> or even a <div> with some inputs in it (FormComponentPanel)*
<<< feedback panel herel >>>
</div>
</fieldset>
</form>

My main problem is that I want my original markup to remain pretty much the
same.
I don't want to have to add markup for labels and feedback panels for all of
my inputs.
I'd like the template markup to be like this:
<form>
<fieldset>
 <div class="row">
  <input wicket:id="component"/>
  </div>
 </fieldset>
 </form>

*What is the best practice to achieve this?*

I took a look at Border but this doesn't seem to be the right way for me
because it involves adding <div wicket:id="compBorder"> around each input.
I took a look at AbstractBehavior and it looks better but then it looks like
I have to hardcode the html template into the beforeRender/afterRender.

I'm probably missing something here..
Any help will be appreciated :)

Reply via email to