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;
    }
}

Use Cases

Documentation

pe:dynaForm
pe:dynaFormControl

Attributes (move mouse over the names to see data types)

Name	Description
id	Unique identifier of the component in a naming container.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar	Name of the client side widget.
value	Instance of type DynaFormModel representing model of this component.
var	Name of the request-scoped variable for the underlaying object for each iteration.
varContainerId	Name of the request-scoped 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(...).
autoSubmit	Flag whether the form has to be submitted automatically after current page has been loaded. Note: the form can be submitted if it contains at least one submit button. Default value is false.
openExtended	Flag whether the extended grid has to be shown opened on page load. Default value is false.
buttonBarPosition	Button bar position. Possible values are "top" \| "bottom" \| "both". Default value is "bottom".
style	Style of the main container element. Default value is null.
styleClass	Style class of the main container element. Default value is null.
columnClasses	Comma separated list of label and control style classes. Default value is null.

Attributes (move mouse over the names to see data types)

Name	Description
id	Unique identifier of the component in a naming container.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	An EL expression referring to a server side UIComponent instance in a backing bean.
type	Type corresponding to form control. Default value is "default".
for	Provided reference between label and corresponding control like "for" attribute in h:outputLabel or p:outputLabel. Default value is null.
style	Style of the container element for this control. Default value is null.
styleClass	Style class of the container element for this control. Default value is null.