ajax - JSF: Dynamically change form

Question

I want to build a form that dynamically changes the components visible depending on the state of other components.

For example... There are some text boxes and some check boxes, and if the user activates a certain check box, a bunch of other input elements should appear.

Can I do this with JSF 2.0 + Tomahawk or do I have to get another library to do this? And how can I do it? This won't work without AJAX, will it?

Thanks in advance!

Answer 1

Ajax is a convenient way to do this and JSF 2.0 comes with ajax bundled.

Here is an example:

<h:selectOneRadio value="#{a7.myCheckbox.state}">
      <f:selectItem itemLabel="#{bundle.yes}" itemValue="1"/>
      <f:selectItem itemLabel="#{bundle.no}" itemValue="0"/>
      <f:ajax render="uawGroup"/>
</h:selectOneRadio>

<h:panelGroup id="uawGroup" layout="block">
   <h:outputText value="#{bundle.wichmed}"
        rendered="#{a7.myCheckbox.state == 1}"/>
   <h:inputText value="#{}" id="myInput"
        rendered="#{a7.myCheckbox.state == 1}"/> 
</h:panelGroup>

The h:panelGroup will be rendered when "yes"-option is clicked in h:selectOneRadio (itemValue == 1). Initially it is 0 (set in the bean "a7").

The h:panelGroup acts as wrapper since you can only update components with ajax that are actually rendered on the page (h:outputText and h:inputText are initially not displayed).