| Our data are rarely displayed alone without a caption or other graphic elements that make clear the meaning of their value. For example: |
| |
| {code:html} |
| <label>Total amount: </label><span wicket:id="totalAmount"></span> |
| {code} |
| |
| Wicket comes with a nice utility tag called @<wicket:enclosure>@ that automatically hides those decorating elements if the related data value is not visible. All we have to do is to put the involved markup inside this tag. Applying @<wicket:enclosure>@ to the previous example we get the following markup: |
| |
| {code:html} |
| <wicket:enclosure> |
| <label>Total amount: </label><span wicket:id="totalAmount"></span> |
| </wicket:enclosure> |
| {code} |
| |
| Now if component @totalAmount@ is not visible, its description (@Total amount:@) will be automatically hidden. If we have more than a Wicket component inside @<wicket:enclosure>@ we can use @child@ attribute to specify which component will control the overall visibility: |
| |
| {code:html} |
| <wicket:enclosure child="totalAmount"> |
| <label>Total amount: </label><span wicket:id="totalAmount"></span><br/> |
| <label>Expected delivery date: </label><span wicket:id="delivDate"></span> |
| </wicket:enclosure> |
| {code} |
| |
| @child@ attribute supports also nested components with a colon-separated path: |
| |
| {code:html} |
| <wicket:enclosure child="totalAmountContainer:totalAmount"> |
| <div wicket:id="totalAmountContainer"> |
| <label>Total amount: </label><span wicket:id="totalAmount"></span> |
| </div> |
| <label>Expected delivery date: </label><span wicket:id="delivDate"></span> |
| </wicket:enclosure> |
| {code} |