PrimeFaces Extensions Showcase

DynaForm

This example demonstrates how to utilize a helpful attribute varContainerId. It is a name of the variable which contains the prefix of the client Id within pe:dynaFormControl. This property allows to get the whole clientId of a component within pe:dynaFormControl. The whole client Id is sometimes required for JavaScript or RequestContext.update(...).

Every input here has an icon to select a single value from a dialog. The selected value will be set into the corresponding input field after a click on the button "OK".

Input 1		Input 2
Input 3		Input 4

Source

XHTML page
Managed bean


<h:panelGroup id="dynaFormGroup">
    <p:messages id="messages" showSummary="true"/>

    <pe:dynaForm id="dynaForm" value="#{containerDynaFormController.model}"
                 var="data" varContainerId="ccId">
        <pe:dynaFormControl for="txt">
            <h:panelGroup style="white-space: nowrap;">
                <p:inputText id="txt" value="#{data.value}"/>
                <p:commandButton icon="pi pi-search" process="@this txt"
                                 update=":mainForm:dialogList" oncomplete="PF('dialogListWdgt').show()"
                                 title="Please choose an item"
                                 style="border:none;">
                    <f:setPropertyActionListener value="#{ccId}"
                                                 target="#{containerDynaFormController.containerClientId}"/>
                    <f:setPropertyActionListener value="#{data}"
                                                 target="#{containerDynaFormController.selectedField}"/>
                    <f:setPropertyActionListener value="#{data.value}"
                                                 target="#{containerDynaFormController.selectedItem}"/>
                </p:commandButton>
            </h:panelGroup>
        </pe:dynaFormControl>

        <f:facet name="buttonBar">
            <p:commandButton value="Submit" process="dynaForm"
                             update=":mainForm:dynaFormGroup :mainForm:inputValues"
                             oncomplete="PF('inputValuesWidget').show()"/>
        </f:facet>
    </pe:dynaForm>
</h:panelGroup>
    
<p:dialog id="dialogList" widgetVar="dialogListWdgt">
    <f:facet name="header">
        Please select an item
    </f:facet>

    <h:selectOneListbox id="selectList" value="#{containerDynaFormController.selectedItem}"
                        style="width:200px;">
        <f:selectItems value="#{containerDynaFormController.list}"/>
    </h:selectOneListbox>

    <h:panelGroup layout="block" style="white-space:nowrap; margin-top:15px;">
        <p:commandButton value="OK" icon="pi pi-save" style="margin-right:5px"
                         process="@this selectList" action="#{containerDynaFormController.updateSelection}"
                         global="false" oncomplete="PF('dialogListWdgt').hide()"/>
        <p:commandButton value="Cancel" type="button" onclick="PF('dialogListWdgt').hide()"/>
    </h:panelGroup>
</p:dialog>    

<p:dialog header="Input values" widgetVar="inputValuesWidget">
    <p:dataList id="inputValues" value="#{containerDynaFormController.values}" var="value"
                style="margin:10px;">
        <h:outputText value="#{value}" style="margin-right: 15px;"/>
    </p:dataList>
</p:dialog>

<h:outputStylesheet id="dynaFormCSS">
    .pe-dynaform-cell input,
    .pe-dynaform-cell[colspan="1"] input {
        width: 150px;
    }
</h:outputStylesheet>


@Named
@ViewScoped
public class ContainerDynaFormController implements Serializable {

    private static final long serialVersionUID = 20130426L;

    private DynaFormModel model;
    private List<SelectItem> list;
    private FormField selectedField;
    private String selectedItem;
    private String containerClientId; // container clientId of the currently handled input field

    @PostConstruct
    protected void initialize() {
        list = new ArrayList<SelectItem>();
        list.add(new SelectItem("Item 1", "Item 1"));
        list.add(new SelectItem("Item 2", "Item 2"));
        list.add(new SelectItem("Item 3", "Item 3"));
        list.add(new SelectItem("Item 4", "Item 4"));

        model = new DynaFormModel();

        // add rows, labels and editable controls
        // set relationship between label and editable controls to support outputLabel
        // with "for" attribute

        // 1. row
        DynaFormRow row = model.createRegularRow();

        final DynaFormLabel label11 = row.addLabel("Input 1");
        final DynaFormControl control12 = row.addControl(new FormField("Some text"));
        label11.setForControl(control12);

        final DynaFormLabel label13 = row.addLabel("Input 2");
        final DynaFormControl control14 = row.addControl(new FormField("Some text"));
        label13.setForControl(control14);

        // 2. row
        row = model.createRegularRow();

        final DynaFormLabel label21 = row.addLabel("Input 3");
        final DynaFormControl control22 = row.addControl(new FormField("Some text"));
        label21.setForControl(control22);

        final DynaFormLabel label23 = row.addLabel("Input 4");
        final DynaFormControl control24 = row.addControl(new FormField("Some text"));
        label23.setForControl(control24);
    }

    public void updateSelection() {
        final FacesContext fc = FacesContext.getCurrentInstance();

        // update selected item value for the currently handled field
        selectedField.setValue(selectedItem);

        // update the corresponding input field in UI
        PrimeFaces.current().ajax().update(containerClientId + UINamingContainer.getSeparatorChar(fc) + "txt");
    }

    public List<String> getValues() {
        if (model == null) {
            return null;
        }

        final List<String> values = new ArrayList<String>();
        for (final DynaFormLabel dynaFormLabel : model.getLabels()) {
            values.add(
                        dynaFormLabel.getValue() + ": " + ((FormField) dynaFormLabel.getForControl().getData()).getValue());
        }

        return values;
    }

    public DynaFormModel getModel() {
        return model;
    }

    public List<SelectItem> getList() {
        return list;
    }

    public FormField getSelectedField() {
        return selectedField;
    }

    public void setSelectedField(final FormField selectedField) {
        this.selectedField = selectedField;
    }

    public String getSelectedItem() {
        return selectedItem;
    }

    public void setSelectedItem(final String selectedItem) {
        this.selectedItem = selectedItem;
    }

    public String getContainerClientId() {
        return containerClientId;
    }

    public void setContainerClientId(final String containerClientId) {
        this.containerClientId = containerClientId;
    }
}