How to switch between different HTML blocks at runtime

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:

<html>
  ...
<body>
...
    <div wicket:id="contentArea"></div>
    <wicket:fragment wicket:id="fragmentId">
       <p>News available</p>
    </wicket:fragment>
</body>
</html>

Java code:

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

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

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

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

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

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