PrimeFaces Extensions Showcase

DynaForm

This example demonstrates how to use nested model. You can picture it as a table contained in a cell. This is very useful when your control is a combination of pe:dynaFormControl. Note, XHTML code with pe:dynaForm stays the same, only Java model gets changed. Main steps:

Create parent model instance: DynaFormModel model = new DynaFormModel();
Add row, label, control and set relationship as you would do in normal case,
Create nested model instance: DynaFormModel nestedModel = new DynaFormModel();
Add row to regular grid: DynaFormRow nestedRow = nestedModel.createRegularRow();
Add label, control and set relationship as usual,
Add nested model: nestedRow.addModel(data, type, colspan, rowspan);

Search area

Firstname*	Lastname*

Date from

till

Located from

Source


<h:panelGroup id="dynaFormGroup">
    <p:messages id="messages" showSummary="true"/>  
    
    <pe:dynaForm id="dynaForm" value="#{nestedDynaFormController.model}" var="data" >
        <pe:dynaFormControl type="input" for="txt">
            <p:inputText id="txt" value="#{data.value}" required="#{data.required}"/>
        </pe:dynaFormControl>
        
        <pe:dynaFormControl type="date" for="cal" styleClass="calendar">
            <p:calendar id="cal" value="#{data.value}" required="#{data.required}" showOn="button"/>
        </pe:dynaFormControl>

        <f:facet name="headerRegular">  
           <div><h:outputText value="Search area" /></div>
        </f:facet>
        
        <f:facet name="buttonBar">
            <p:commandButton value="Submit" action="#{nestedDynaFormController.submitForm}"
                             process="dynaForm" update=":mainForm:dynaFormGroup :mainForm:inputValues"
                             oncomplete="handleComplete(xhr, status, args)"/>
            <p:commandButton type="reset" value="Reset" style="margin-left: 5px;"/>
        </f:facet>
    </pe:dynaForm>
</h:panelGroup>

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

<h:outputScript id="dynaFormScript" target="body">
/* <![CDATA[ */
    function handleComplete(xhr, status, args) {
        if(args && args.isValid) {
            PF('inputValuesWidget').show();
        } else {
            PF('inputValuesWidget').hide();
        }
    }
/* ]]> */
</h:outputScript>

<h:outputStylesheet id="dynaFormCSS">
    .pe-dynaform-cell .ui-calendar input {  
        width: 100px;  
    }
    .pe-dynaform-headerfacet div{  
        border: 1px dotted #808080;  
        padding: 10px;  
        text-align: center;  
    }    
    .pe-dynaform-label {  
        text-align: left;  
        padding: 2px 20px 0 0;  
    }
</h:outputStylesheet>


@Named
@ViewScoped
public class NestedDynaFormController implements Serializable {

    private static final long serialVersionUID = 20120423L;

    private DynaFormModel model;

    @PostConstruct
    protected void initialize() {
        model = new DynaFormModel();

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

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

        // 1.1 Nested model
        DynaFormModel nestedModel = new DynaFormModel();
        DynaFormRow nestedRow1 = nestedModel.createRegularRow();

        final DynaFormLabel label11 = nestedRow1.addLabel("Firstname");
        final DynaFormLabel label12 = nestedRow1.addLabel("Lastname");

        nestedRow1 = nestedModel.createRegularRow();
        final DynaFormControl control21 = nestedRow1.addControl(new BookProperty("firstname", true), "input");
        final DynaFormControl control22 = nestedRow1.addControl(new BookProperty("lastname", true), "input");

        label11.setForControl(control21);
        label12.setForControl(control22);
        row.addModel(nestedModel, 2, 1);

        // 2. regular row
        row = model.createRegularRow();
        final DynaFormLabel label31 = row.addLabel("Date from");

        // 2.1 Nested model
        nestedModel = new DynaFormModel();
        final DynaFormRow nestedRow2 = nestedModel.createRegularRow();

        final DynaFormControl control32 = nestedRow2.addControl(new BookProperty("beginDate", false), "date");
        label31.setForControl(control32);

        final DynaFormLabel label33 = nestedRow2.addLabel("till");
        final DynaFormControl control34 = nestedRow2.addControl(new BookProperty("endDate", false), "date");
        label33.setForControl(control34);
        row.addModel(nestedModel);

        // 2.2 Nested model
        nestedModel = new DynaFormModel();
        final DynaFormRow nestedRow3 = nestedModel.createRegularRow();

        final DynaFormLabel label36 = nestedRow3.addLabel("Located from");
        final DynaFormControl control37 = nestedRow3.addControl(new BookProperty("locationStart", "Lane A", false),
                    "input");
        label36.setForControl(control37);

        final DynaFormLabel label38 = nestedRow3.addLabel("To");
        final DynaFormControl control39 = nestedRow3.addControl(new BookProperty("locationEnd", "Lane B", false),
                    "input");
        label38.setForControl(control39);

        row.addModel(nestedModel);
    }

    public DynaFormModel getModel() {
        return model;
    }

    public String submitForm() {
        final FacesMessage.Severity sev = FacesContext.getCurrentInstance().getMaximumSeverity();
        final boolean hasErrors = sev != null && FacesMessage.SEVERITY_ERROR.compareTo(sev) >= 0;

        PrimeFaces.current().ajax().addCallbackParam("isValid", !hasErrors);

        return null;
    }

    public List<BookProperty> getBookProperties() {
        if (model == null) {
            return null;
        }

        final List<BookProperty> bookProperties = new ArrayList<BookProperty>();
        for (final DynaFormControl dynaFormControl : model.getControls()) {
            bookProperties.add((BookProperty) dynaFormControl.getData());
        }

        return bookProperties;
    }
}


public class BookProperty implements Serializable {

    private static final long serialVersionUID = 20120521L;

    private String name;
    private Object value;
    private boolean required;

    public BookProperty(String name, boolean required) {
        this.name = name;
        this.required = required;
    }

    public BookProperty(String name, Object value, boolean required) {
        this.name = name;
        this.value = value;
        this.required = required;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Object getValue() {
        return value;
    }

    public Object getFormattedValue() {
        if (value instanceof Date) {
            SimpleDateFormat simpleDateFormat = new SimpleDateFormat("d MMM yyyy");

            return simpleDateFormat.format(value);
        }

        return value;
    }

    public void setValue(Object value) {
        this.value = value;
    }

    public boolean isRequired() {
        return required;
    }

    public void setRequired(boolean required) {
        this.required = required;
    }
}