Dealing with Conditional Content

Many web frameworks allow you to specify page content that appears conditionally from within the html or template file with a tag or logical instruction of some sort, such as an if tag. In keeping with the seperation of view from the controller, wicket does not offer this functionality.

A common question, then, is how to conditionally render some content. Perhaps you want to display a form element only if appropriate, or a footer only on pages concerning a particular subject.

In wicket, there are two ways of dealing with this situation:

The Visibility Method

• Add all components that may render, and then toggle their visibility.
• This will tell wicket not to render the portion of html associated with that component.
• Basic steps to implement:
  • add all possible components to your page
  • override isVisible on them or call setVisible()

Example:

 JSP: 
   <c:if condition="blah">
     <input type="text" name="comp" value="${val}"/>
   </c:if>

 Wicket:
   code:
   add(new TextField("comp",...) {
       boolean isVisible() {
           return blah;
        }
    }
 
   template:
   <input type="text" wicket:id="comp"/>

Extended version:

 JSP:
   <c:if condition="blah">
     Answer me: <input type="text" name="comp" value="${val}"/>
   </c:if>

 Wicket:
   code:
   
   WebMarkupContainer blahRow = new WebMarkupContainer ("blahrow") {
     public boolean isVisible() {
       return blah;
     }
   }
   blahRow.add(new TextField("comp",...));
 
   template:
   <span wicket:id="blahrow">
     Answer me: <input type="text" wicket:id="comp"/>
   &lt;/span>

The Panel Method

• Create two panels that display either state that you will possibly want shown, and swap them as needed.

• This is usually used for large chunks of page content rather than form elements.

• A detailed tutorial covering this topic can be found under: Create dynamic markup hierarchies using panels

• A good example of this in practice is the tabbed view.
  • When you click a tab the body of the view has to change to show a different tab's body.
  • Each tab's body can be represented as a panel so when a tab is clicked it can swap the panel in the body of the tabbed panel with the panel of its chosing.
  • See the TabbedPanel example in the component reference for example code which does this.