Dynamically adding new rows in JSF - jsf-2

Question

I have the following code that allows a user enter some data:
<h:panelGrid columns="2" cellspacing="5">
<h:outputLabel value="#{msg.FrequencyOfSpending}" />
<h:selectOneMenu id="ruleFrequencyOptions" value="#{Rule.ruleControls.ControlOne.controlParams.Period.valueSelected}" styleClass="commonSelect">
<f:selectItems value="#{Rule.ruleControls.ControlOne.controlParams.Period.validValues}" itemLabelEscaped="true" />
<f:ajax event="valueChange" listener="#{Rule.ruleControls.ControlOne.controlParams.Period.valueSelectedChange}" onerror="handleAjaxError" render="rulesGroup" />
</h:selectOneMenu>
</h:panelGrid>
<h:panelGroup id="rulesGroup">
<a4j:repeat value="#{Rule.ruleParams.Action.properties}" var="RuleParamProperty" id="budgetRuleIterator">
<h:panelGrid columns="4" cellspacing="5" columnClasses="ruleParamCheckbox, ruleParamAction, ruleParamActionFrequency, ruleParamActionInput">
<h:selectBooleanCheckbox value="#{RuleParamProperty.selected}" immediate="true">
<a4j:ajax event="click" listener="#{RuleParamProperty.selectedChange}" onerror="handleAjaxError" />
</h:selectBooleanCheckbox>
<h:outputText value="#{msg[RuleParamProperty.name]}" />
<h:panelGrid columns="3">
<h:outputText value="#{msg.Action_1}" />
<h:outputText value="#{msg[Rule.ruleControls.ControlOne.controlParams.Period.valueSelected]}" class="italic-text" />
<h:outputText value="#{msg.Action_3}" />
</h:panelGrid>
<h:inputText value="#{RuleParamProperty.inputValue}" />
</h:panelGrid>
</a4j:repeat>
</h:panelGroup>
<!--******* Link here to generate row with exact same format as all code above ***-->
<h:panelGrid columns="2">
<img id="AddIcon" src="#{facesContext.externalContext.requestContextPath}/images/icons/add.png" alt="#{msg.addControl}" />
<h:link value="#{msg.addControl}" />
</h:panelGrid>
I need to add a link to allow them add different variations of this data i.e. user clicks add new control link and a new row appears that allows them enter more data (of the exact same format). They should be able to add multiple rows of the same data.
What is the best way to approach this with JSF2 and Richfaces4?
Should I put my panelGroups within a table?
Thanks

Answer 1

I used a datatable as suggested by Luiggi:
<h:dataTable value="#{rule}" var="currentRuleItem">
<h:column>
<h:panelGrid columns="2" cellspacing="5">
<h:outputLabel value="#{msg.FrequencyOfSpending}" />
<h:selectOneMenu id="ruleFrequencyOptions" value="#{currentRuleItem.ruleControls.ControlOne.controlParams.Period.valueSelected}" styleClass="commonSelect">
<f:selectItems value="#{currentRuleItem.ruleControls.ControlOne.controlParams.Period.validValues}" itemLabelEscaped="true" />
<f:ajax event="valueChange" listener="#{currentRuleItem.ruleControls.ControlOne.controlParams.Period.valueSelectedChange}" onerror="handleAjaxError" render="rulesGroup" />
</h:selectOneMenu>
</h:panelGrid>
<h:panelGroup id="rulesGroup">
<a4j:repeat value="#{currentRuleItem.ruleParams.Action.properties}" var="RuleParamProperty" id="budgetRuleIterator">
<h:panelGrid columns="4" cellspacing="5" columnClasses="ruleParamCheckbox, ruleParamAction, ruleParamActionFrequency, ruleParamActionInput">
<h:selectBooleanCheckbox value="#{RuleParamProperty.selected}" immediate="true">
<a4j:ajax event="click" listener="#{RuleParamProperty.selectedChange}" onerror="handleAjaxError" />
</h:selectBooleanCheckbox>
<h:outputText value="#{msg[RuleParamProperty.name]}" />
<h:panelGrid columns="3">
<h:outputText value="#{msg.Action_1}" />
<h:outputText value="#{msg[currentRuleItem.ruleControls.ControlOne.controlParams.Period.valueSelected]}" class="italic-text" />
<h:outputText value="#{msg.Action_3}" />
</h:panelGrid>
<h:inputText value="#{RuleParamProperty.inputValue}" />
</h:panelGrid>
</a4j:repeat>
</h:panelGroup>
</h:column>
</h:dataTable>
<!--******* Link here to generate row with exact same format as all code above ***-->
<h:panelGrid columns="2">
<img id="AddIcon" src="#{facesContext.externalContext.requestContextPath}/images/icons/add.png" alt="#{msg.addControl}" />
<h:commandLink value="#{msg.addControl}" action="#{myBean.addRule}" />
</h:panelGrid>
// my bean method
public void addRule()
{
iRuleSet.get("RuleControl1").add(createRule());
}