Theme
arya
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga
vela
DynaForm
This example demonstrates how to use ExecutableVisitCallback - PrimeFaces Extensions' implementation of the JSF API's interface VisitCallback. ExecutableVisitCallback uses any class which implements the interface VisitTaskExecutor (this interface is defined in the PrimeFaces Extensions). This approach allows to visit all controls within pe:dynaForm and to execute any task on them. By this way, we can implement inter-control (inter-cell) communication within pe:dynaForm.

In this example, we will implement the interface VisitTaskExecutor by the class ClearInputsExecutor which clears all inputs / selects related to one row in pe:dynaForm. The ClearInputsExecutor is instantiated and and set into the ExecutableVisitCallback. That happens in the ClearDynaFormController (see the action method clearInputs).

This example also demonstrates how to remove rows at runtime. Rows can be removed by the following methods in the DynaFormModel:
  • removeRegularRow(DynaFormRow row)
  • removeRegularRow(int index)
  • removeExtendedRow(DynaFormRow row)
  • removeExtendedRow(int index)

You see here an imaginary filter mask with three rows and four input / select components in each row. Click on "Clear inputs" and "Remove" links to see this example in action!
Source

<pe:dynaForm id="dynaForm" value="#{clearDynaFormController.model}" var="condition">
    <pe:dynaFormControl type="column">
        <p:selectOneMenu id="tableColumn" value="#{condition.tableColumn}">
            <f:selectItem itemValue="" itemLabel=""/>
            <f:selectItem itemValue="model" itemLabel="model"/>
            <f:selectItem itemValue="manufacturer" itemLabel="manufacturer"/>
            <f:selectItem itemValue="year" itemLabel="year"/>
            <f:attribute name="rcIndex" value="#{condition.index}"/>
        </p:selectOneMenu>
    </pe:dynaFormControl>
    <pe:dynaFormControl type="offset">
        <p:spinner id="inputOffset" value="#{condition.inputOffset}" min="0" max="99">
            <p:keyFilter mask="num"/>
            <f:attribute name="rcIndex" value="#{condition.index}"/>
        </p:spinner>
    </pe:dynaFormControl>
    <pe:dynaFormControl type="operator">
        <p:selectOneMenu id="valueOperator" value="#{condition.valueOperator}">
            <f:selectItem itemValue="eq" itemLabel="equal"/>
            <f:selectItem itemValue="not" itemLabel="not equal"/>
            <f:selectItem itemValue="gt" itemLabel="greater"/>
            <f:selectItem itemValue="lt" itemLabel="lesser"/>
            <f:attribute name="rcIndex" value="#{condition.index}"/>
        </p:selectOneMenu>
    </pe:dynaFormControl>
    <pe:dynaFormControl type="value">
        <p:inputText id="inputValue" value="#{condition.inputValue}">
            <f:attribute name="rcIndex" value="#{condition.index}"/>
        </p:inputText>
    </pe:dynaFormControl>
    <pe:dynaFormControl type="clear" styleClass="clearLink">
        <p:commandLink value="Clear inputs" process="@this"
                       action="#{clearDynaFormController.clearInputs(condition.index)}"
                       global="false"/>
        <p:commandLink value="Remove" process="@this" update="dynaForm"
                       action="#{clearDynaFormController.removeCondition(condition)}"
                       global="false" style="margin-left:10px"/>
    </pe:dynaFormControl>
</pe:dynaForm>
    
<p:commandButton value="Submit form and show current values" process="dynaForm" update="conditions"
                     style="margin:15px 5px 0 0" oncomplete="PF('condValuesDlg').show()"/>
<p:commandButton value="Show current values without submit" process="@none" update="conditions"
                 style="margin-top:15px;" oncomplete="PF('condValuesDlg').show()"/>
    
<p:dialog header="Condition Values" widgetVar="condValuesDlg">
    <h:panelGroup id="conditions" layout="block" style="margin:10px;">
        <h:outputText value="#{clearDynaFormController.conditions}" escape="false"/>
    </h:panelGroup>
</p:dialog>

<h:outputStylesheet id="dynaFormCSS">
    .pe-dynaform-cell {
        vertical-align: top;
    }
    
    .clearLink {
        vertical-align: middle;
    }
    
    .pe-dynaform-cell .ui-spinner input {
        width: 60px;
    }
</h:outputStylesheet>
            
Components and more
Documentation
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.
PrimeFaces Extensions Showcase - © 2011-2023,PrimeFaces: 14.0.5,PrimeFaces Extensions: 14.0.5,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: jetty/9.4.36.v20210114,Build time: 2024-09-10 21:01