You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

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="$

Unknown macro: {val}

"/>
</c:if>

Wicket:
code:
add(new TextField("comp",...) {
boolean isVisible()

Unknown macro: { return blah; }

}

template:
<input type="text" wicket:id="comp"/>

Extended version:

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

Unknown macro: {val}

"/>
</c:if>

Wicket:
code:

WebMarkupContainer blahRow = new WebMarkupContainer ("blahrow") {
public boolean isVisible()

Unknown macro: { return blah; }

}
blahRow.add(new TextField("comp",...));

template:
<span wicket:id="blahrow">
Answer me: <input type="text" wicket:id="comp"/>
</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 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.
  • No labels