
Another circumstance in which we may prefer to avoid the creation of custom panels is when we want to conditionally display small fragments of markup in a page. 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:*

[source,html]
----
<html>
  ...
<body>
...
    <div wicket:id="contentArea"></div>
    <wicket:fragment wicket:id="fragmentId">
       <p>News available</p>
    </wicket:fragment>
</body>
</html>
----

*Java code:*

[source,java]
----
Fragment fragment = new  Fragment ("contentArea", "fragmentId", this);
add(fragment);
----

When the page is rendered, markup inside the fragment will be inserted *inside div element*:

[source,html]
----
<html>
  ...
<body>
...
    <div wicket:id="contentArea">
        <p>News available</p>
    </div>
</body>
</html>
----

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:*

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

*Java code:*

[source,java]
----
Fragment fragment = new  Fragment ("contentArea", "formFrag", this);
add(fragment);

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