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>

Clarification on defining component visibility

Based on the user mailing list, here are some things to keep in mind when dealing with conditional visibility.

If the component itself controls its own visibility the best way is to override onConfigure() and call setVisible() inside.

If an outside component controls another’s visibility the best way is to override the controlling component’s onConfigure() and call controlled.setVisible()

If you have a simple state toggle, like “when i click this link i want this component’s visibility to change” then calling component.setVisible() is fine.

If you have a cross-cutting concern (authorization strategy, configure listener, before render listener, etc) overriding component’s visibility then call component.setVisibilityAllowed(). Wicket ands this bit with the visible bit to determine final visibility; this way the cross-cutting concern won’t dirty component’s visibility attribute.

If all of these fail, as a last resort override component.isVisible() but be warned that this has a few pitfalls: it is called multiple times per request, potentially tens of times, so keep the implementation computationally light this value should remain stable across the render/respond boundary. Meaning if isVisible() returns true when rendering a button, but when the button is clicked returns false you will get an error

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.