PrimeFaces Extensions Showcase

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!

				Clear inputs Remove
				Clear inputs Remove
				Clear inputs Remove

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>


@Named
@ViewScoped
public class ClearDynaFormController implements Serializable {

    protected static final Set<VisitHint> VISIT_HINTS = EnumSet.of(VisitHint.SKIP_UNRENDERED);
    private static final long serialVersionUID = 20130504L;

    private DynaFormModel model;
    private List<Condition> conditions;

    @PostConstruct
    protected void initialize() {
        model = new DynaFormModel();
        conditions = new ArrayList<>();

        // 1. condition and row
        Condition condition = new Condition("model", 2, "eq", "mercedes", 0);
        conditions.add(condition);

        DynaFormRow row = model.createRegularRow();
        row.addControl(condition, "column");
        row.addControl(condition, "offset");
        row.addControl(condition, "operator");
        row.addControl(condition, "value");
        row.addControl(condition, "clear");

        // 2. condition and row
        condition = new Condition("manufacturer", 1, "not", "chrysler group", 1);
        conditions.add(condition);

        row = model.createRegularRow();
        row.addControl(condition, "column");
        row.addControl(condition, "offset");
        row.addControl(condition, "operator");
        row.addControl(condition, "value");
        row.addControl(condition, "clear");

        // 3. condition and row
        condition = new Condition("year", 0, "lt", "2010", 2);
        conditions.add(condition);

        row = model.createRegularRow();
        row.addControl(condition, "column");
        row.addControl(condition, "offset");
        row.addControl(condition, "operator");
        row.addControl(condition, "value");
        row.addControl(condition, "clear");
    }

    public static void clearInputs(final int index) {
        final FacesContext fc = FacesContext.getCurrentInstance();
        final DynaForm dynaForm = (DynaForm) fc.getViewRoot().findComponent(":mainForm:dynaForm");

        // Ids of components to be visited
        final String[] ids = new String[] {"tableColumn", "inputValue", "inputOffset", "valueOperator"};

        final VisitTaskExecutor visitTaskExecutor = new ClearInputsExecutor(fc.getELContext(), ids, index);

        // clear inputs in the visit callback
        final ExecutableVisitCallback visitCallback = new ExecutableVisitCallback(visitTaskExecutor);
        dynaForm.visitTree(VisitContext.createVisitContext(fc, null, VISIT_HINTS), visitCallback);
    }

    public void removeCondition(final Condition condition) {
        model.removeRegularRow(condition.getIndex());
        conditions.remove(condition);

        // re-index conditions
        int idx = 0;
        for (final Condition cond : conditions) {
            cond.setIndex(idx);
            idx++;
        }
    }

    public String getConditions() {
        final StringBuilder sb = new StringBuilder();
        for (final Condition condition : conditions) {
            sb.append(condition.toString());
            sb.append("<br/>");
        }

        return sb.toString();
    }

    public DynaFormModel getModel() {
        return model;
    }
}


public class Condition implements Serializable {

    private static final long serialVersionUID = 1L;
    private String tableColumn;
    private int inputOffset;
    private String valueOperator;
    private String inputValue;
    private int index; // internal index in the list of all conditions

    public Condition() {
    }

    public Condition(String tableColumn, int inputOffset, String valueOperator, String inputValue, int index) {
        this.tableColumn = tableColumn;
        this.inputOffset = inputOffset;
        this.valueOperator = valueOperator;
        this.inputValue = inputValue;
        this.index = index;
    }

    public String getTableColumn() {
        return tableColumn;
    }

    public void setTableColumn(String tableColumn) {
        this.tableColumn = tableColumn;
    }

    public int getInputOffset() {
        return inputOffset;
    }

    public void setInputOffset(int inputOffset) {
        this.inputOffset = inputOffset;
    }

    public String getValueOperator() {
        return valueOperator;
    }

    public void setValueOperator(String valueOperator) {
        this.valueOperator = valueOperator;
    }

    public String getInputValue() {
        return inputValue;
    }

    public void setInputValue(String inputValue) {
        this.inputValue = inputValue;
    }

    public int getIndex() {
        return index;
    }

    public void setIndex(int index) {
        this.index = index;
    }

    @Override
    public boolean equals(Object o) {
        if (this == o) {
            return true;
        }
        if (o == null || getClass() != o.getClass()) {
            return false;
        }

        Condition condition = (Condition) o;

        if (index != condition.index) {
            return false;
        }
        if (inputOffset != condition.inputOffset) {
            return false;
        }
        if (inputValue != null ? !inputValue.equals(condition.inputValue) : condition.inputValue != null) {
            return false;
        }
        if (tableColumn != null ? !tableColumn.equals(condition.tableColumn) : condition.tableColumn != null) {
            return false;
        }
        if (valueOperator != null ? !valueOperator.equals(condition.valueOperator) : condition.valueOperator != null) {
            return false;
        }

        return true;
    }

    @Override
    public int hashCode() {
        int result = tableColumn != null ? tableColumn.hashCode() : 0;
        result = 31 * result + inputOffset;
        result = 31 * result + (valueOperator != null ? valueOperator.hashCode() : 0);
        result = 31 * result + (inputValue != null ? inputValue.hashCode() : 0);
        result = 31 * result + index;
        return result;
    }

    @Override
    public String toString() {
        return "Condition {"
                    + "tableColumn='" + tableColumn + '\''
                    + ", inputOffset=" + inputOffset
                    + ", valueOperator='" + valueOperator + '\''
                    + ", inputValue='" + inputValue + '\''
                    + '}';
    }
}


public class ClearInputsExecutor implements VisitTaskExecutor {

    private static final String INDEX_ATTR = "rcIndex";

    private ELContext elContext;
    private String[] ids;
    private int index;

    public ClearInputsExecutor(ELContext elContext, String[] ids, int index) {
        this.elContext = elContext;
        this.ids = ids;
        this.index = index;
    }

    /**
     * @see org.primefaces.extensions.util.visitcallback.VisitTaskExecutor
     */
    @Override
    public VisitResult execute(UIComponent component) {
        UIInput input = (UIInput) component;
        String id = input.getId();

        // reset UI
        input.resetValue();

        // reset value in bean
        if ("tableColumn".equals(id) || "inputValue".equals(id)) {
            ValueExpression ve = input.getValueExpression("value");
            if (ve != null) {
                ve.setValue(elContext, StringUtils.EMPTY);
            }
        }
        else if ("inputOffset".equals(id)) {
            ValueExpression ve = input.getValueExpression("value");
            if (ve != null) {
                ve.setValue(elContext, 0);
            }
        }
        else if ("valueOperator".equals(id)) {
            ValueExpression ve = input.getValueExpression("value");
            if (ve != null) {
                ve.setValue(elContext, "eq");
            }
        }

        // update the corresponding input during response
        PrimeFaces.current().ajax().update(input.getClientId());

        // delete handled id from the list, so that similar inputs should not be executed again
        ArrayUtils.removeElement(ids, id);

        return ids.length != 0 ? VisitResult.REJECT : VisitResult.COMPLETE;
    }

    /**
     * @see org.primefaces.extensions.util.visitcallback.VisitTaskExecutor
     */
    @Override
    public boolean shouldExecute(UIComponent component) {
        if (component instanceof EditableValueHolder && ArrayUtils.contains(ids, component.getId())) {
            Integer idx = (Integer) component.getAttributes().get(INDEX_ATTR);
            if (idx != null && index == idx) {
                return true;
            }
        }

        return false;
    }
}

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.