Another circumstance in which we may prefer to avoid the creation of custom panels is when we want to conditionally display in a page small fragments of markup. In this case if we decided to use panels, we would end up having a huge number of small panel classes with their related markup file.

To better cope with situations like this, Wicket defines component @Fragment@ in package @org.apache.wicket.markup.html.panel@. Just like its parent component @WebMarkupContainer@, Fragment doesn't have its own markup file but it uses a markup fragment defined in the markup file of its parent container, which can be a page or a panel. The fragment must be delimited with tag @<wicket:fragment>@ and must be identified by a @wicket:id@ attribute. In addition to the component id, @Fragment@'s constructor takes as input also the id of the fragment and a reference to its container.

In the following  example we have defined a fragment in a page and we used it as content area:

*Page markup:*

{code:html}
<html>
  ...
<body>
...
	<div wicket:id="contentArea"></div>
	<wicket:fragment wicket:id="fragmentId">
	   <!-- Fragment markup goes here -->
	</wicket:fragment>
</body>
</html>
{code}

*Java code:*

{code}
Fragment fragment = new  Fragment ("contentArea", "fragmentId", this);
add(fragment);
{code}

Fragments can be very helpful with complex pages or components. For example let's say that we  have a page where users can register to our forum. This page should first display a form where user must insert his/her personal data (name, username, password, email and so on), then, once the user has submitted the form, the page should display a message like “Your registration is complete! Please check your mail to activate your user profile.”. 

Instead of displaying this message with a new component or in a new page, we can define two fragments: one for the initial form and one to display the confirmation message. The second fragment will replace the first one after the form has been submitted:

*Page markup:*

{code:html}
<html>
<body>
	<div wicket:id="contentArea"></div>
	<wicket:fragment wicket:id="formFrag">
	   <!-- Form markup goes here -->
	</wicket:fragment>
	<wicket:fragment wicket:id="messageFrag">
	   <!-- Message markup goes here -->
	</wicket:fragment>
</body>
</html>
{code}

*Java code:*

{code}
Fragment fragment = new  Fragment ("contentArea", "formFrag", this);
add(fragment);

//form has been submitted
Fragment fragment = new  Fragment ("contentArea", "messageFrag", this);
replace(fragment);
{code}