How do i retrieve a JSF component value by using EL ?

Question

Hi,

Before going on, see this question

Its JSF form is shown again as follows

<f:view>
    <h:form>
        <div>
            <label>Id</label>
            <input type="text" name="accountId"/>
        </div>
        <div>
            <label>Amount</label>
            <input type="text" name="amount"/>
        </div>
        <h:commandButton value="Withdraw" action="#{accountService.withdraw(param.accountId, param.amount)}"/>
    </h:form>
</f:view>

Notice i have used <input type="text" name="amount"> instead of <h:inputText id="amount">. In order to retrieve its value by using Seam EL resolver, i use param.amount.

It happens that if i use <input type="text" and something goes wrong on server side, i need to show the page again. So its submitted value is not retrieved because it is a plain html code. Because of that, i need to use a <h:inputText JSF component instead.

So the question is: how do i retrieve a <h:inputText JSF component value by using Expression Language ?

regards,

Answer 1

The JSF client ID's are prepended by the cliend ID of parent UINamingContainer components (e.g. h:form, h:dataTable, f:subview). If you check the generated HTML source in your webbrowser (rightclick, view source), then you should see them. The id and name of the generated input elements are prepended with the id of the parent form. You need to use the same name as key in the parameter map. As the separator character, the colon :, is an "illegal" character in EL, you need to use the brace notation param['foo:bar'] to retrieve them.

<f:view>
    <h:form id="account">
        <div>
            <label>Id</label>
            <h:inputText id="id" />
        </div>
        <div>
            <label>Amount</label>
            <h:inputText id="amount" />
        </div>
        <h:commandButton value="Withdraw" 
            action="#{accountService.withdraw(param['account:id'], param['account:amount'])}"/>
    </h:form>
</f:view>

Without Seam-EL-like method parameters (you apparently don't want/have it), you can also access them in the request parameter map using the client ID's as keys:

public void withDraw() {
    Map<String, String> map = FacesContext.getCurrentInstance().getRequestParameterMap();
    String id = map.get("account:id");
    String amount = map.get("account:amount");
    // ...
}

Needless to say that this is nasty. Just do it the normal JSF way, bind the values with bean properties.

Edit: as per the final question which you have edited:

So the question is: how do i retrieve a <h:inputText JSF component value by using Expression Language ?

This is already answered before. Use the JSF-generated name as parameter name. This is usually in the pattern of formId:inputId where formId is the id of the parent UIForm component and the inputId is the id of the UIInput component. Check the generated HTML output for the exact name of the generated <input type="text"> field. To obtain the parameter value, use the brace notation ['name'], because you cannot use the colon : in EL as in ${param.formId:inputId}.

Thus:

#{param['formId:inputId']}

Answer 2

The parameter names/ids for inputText are encapsulated by the control renderer and are, ultimately, an implementation detail. In practice, they use the clientId. There should be no need to read these directly from the parameter map; use value binding to push them into the model and read them from there.

You can read values directly from the component using EL by binding the component to a managed bean. For simplicity, here's one bound to the request scope:

<!-- bind a UIComponent to the request map as "foo" -->
<h:inputText binding="#{requestScope.foo}" />
<!-- read value from a UIComponent that implements ValueHolder -->
#{requestScope.foo.value}

But, generally, there is no advantage to this over:

<!-- bind a value to the request map as "foo" -->
<h:inputText value="#{requestScope.foo}" />
<!-- read value from the request scope -->
#{requestScope.foo}

To avoid polluting the request map (which might result in collisions across views), use a managed bean to namespace/encapsulate your values rather than using the request scope directly.

Answer 3

Hi,

Although i can retrieve JSF component value through its client identifier, There are some drawback as follows:

1. According to McDowell's answer, The client identifier is an implementation detail
2. The client identifier can differ from the component identifier when there is more than one naming container in the control hierarchy. (JSF in Action book)

So if you do not want rely on client identifier, you may implement your own ElResolver as follows:

public class ComponentIdResolver extends ELResolver {

    public Object getValue(ELContext context, Object base, Object property) {
        if (base instanceof UIComponent && property instanceof String) {
            UIComponent r = ((UIComponent) base).findComponent((String) property);

            if (r != null) {
                context.setPropertyResolved(true);

                return r;
            }
        }

        return null;
    }

}

Now i can use something like (Notice withdraw method)

<h:inputText id="accountId" />
<h:inputText id="amount" />
<h:commandButton value="Withdraw" action="#{accountService.withdraw(view.accountId.value, view.amount.value)}"/>

view is a implicit JSF object (similar to FacesContext.getCurrentInstance().getViewRoot())

Then register your ELResolver as shown below (faces-config.xml)

<application>
    <el-resolver>br.com.view.resolver.ComponentIdResolver</el-resolver>
</application>

If you want to know a good insight about ElResolver see Extending the Java EE Unified Expression Language with a Custom ELResolver

regards,