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

Name	Description
autoSubmit	When true, form is submitted automatically on change.Default is false.
binding	An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
buttonBarPosition	Position of the button bar: 'top', 'bottom', or 'both'.Default is bottom.
columnClasses	Comma-separated CSS classes for label and control columns.
id	Unique identifier of the component in a namingContainer.Default is generated.
openExtended	When true, extended rows are shown by default.Default is false.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
style	Inline style of the component.
styleClass	Style class of the component.
value	The dynamic data model (e.g. DynaFormModel).
var	Name of the request-scoped variable that exposes the current row/control data.
varContainerId	Name of the request-scoped variable that exposes the current container client id.
widgetVar	Name of the client side widget.

Name	Description
binding	An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
for	Search expression for the input component this control wraps (for label 'for' and validation).
id	Unique identifier of the component in a namingContainer.Default is generated.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
style	Inline style of the component.
styleClass	Style class of the component.
type	Control type identifier; must match a DynaFormControl type in the model.Default is default.