
Our data are rarely displayed alone without a caption or other graphic elements that make clear the meaning of their value. For example:

[source,html]
----
<label>Total amount: </label><span wicket:id="totalAmount"></span>
----

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:

[source,html]
----
<wicket:enclosure> 
    <label>Total amount: </label><span wicket:id="totalAmount"></span>
</wicket:enclosure>
----

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:

[source,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>
----

_child_ attribute supports also nested components with a colon-separated path: 

[source,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>
----

WARNING: _<wicket:enclosure>_ is nice and prevents that users have to add boilerplate to their application. But it is not without problems. The child components are children in the markup, but the auto-component generated for the enclosure tag will not magically re-parent the child components. Thus the markup hierarchy and the component hierarchy will be out of sync. The automatically created enclosure container will be created along side its "children" with both attached to the very same parent container. That leads to a tricky situation since e.g. _onBeforeRender()_ will be called for enclosure children even if the enclosure is made invisible by it controlling child.
On top auto-components cannot keep any state. A new instance is created during each render process and automatically deleted at the end. That implies that we cannot prevent _validation()_ from being called, since _validation()_ is called before the actual render process has started.
Where any of these problems apply, you may replace the tag and manually add a https://ci.apache.org/projects/wicket/apidocs/9.x/org/apache/wicket/markup/html/basic/EnclosureContainer.html[EnclosureContainer] which basically does the same. But instead of adding the children to the Page, Panel, whatever, you must add the children to this container in order to keep the component hierarchy in sync. 
