Disabling ADF Faces UI component on the client-side could be tricky sometimes.You basically need to set unsecure="disabled" and clientComponent="true". But if you use button.setProperty('disabled', true)
on a commandButton, your button will still look like undisabled (though
it won't invoke action event), proper style class and 'disabled'
attribute will not be applied to the button element.
To properly disable button you can use script like this:
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document id="d1">
<af:resource type="javascript">
function disableField(actionEvent) {
var nameInputText = actionEvent.getSource().findComponent("nameFld");
nameInputText.setProperty("disabled", true);
//The following line is for partial refresh, in this case
//its taken care by framework
//AdfPage.PAGE.addPartialTargets(nameInputText);
}
function enableField(actionEvent) {
var nameInputText = actionEvent.getSource().findComponent("nameFld");
nameInputText.setProperty("disabled", false);
}
function setButtonDisabled(actionEvent) {
var button = actionEvent.getSource().findComponent("submitButton");
button.setProperty('disabled', true);
AdfDomUtils.addOrRemoveCSSClassName(true,
AdfRichUIPeer.getDomElementForComponent(button),
AdfRichUIPeer.DISABLED_STYLECLASS);
var buttonDom = button.getPeer().getButtonElement(button);
buttonDom.setAttribute('disabled', 'disabled');
}
function setButtonEnabled(actionEvent) {
var button = actionEvent.getSource().findComponent("submitButton");
button.setProperty('disabled', false);
AdfDomUtils.addOrRemoveCSSClassName(false,
AdfRichUIPeer.getDomElementForComponent(button),
AdfRichUIPeer.DISABLED_STYLECLASS);
var buttonDom = button.getPeer().getButtonElement(button);
buttonDom.removeAttribute('disabled');
}
</af:resource>
<af:form id="f1">
<af:panelGroupLayout id="pgl1">
<af:commandButton text="Disable Name Field" id="disableBtn" clientComponent="true" unsecure="disabled"
>
<af:clientListener type="action" method="setButtonDisabled"/>
</af:commandButton>
<af:commandButton text="Enable Name Field" id="enableBtn" clientComponent="true" unsecure="disabled"
>
<af:clientListener type="action" method="setButtonEnabled"/>
</af:commandButton>
<af:inputText unsecure="disabled" clientComponent="true" label="Name" id="nameFld"/>
<af:commandButton disabled="true" text="Submit" id="submitButton" clientComponent="true" unsecure="disabled">
</af:commandButton>
</af:panelGroupLayout>
</af:form>
</af:document>
</f:view>
</jsp:root>
unsecure:
A whitespace separated list of attributes whose values ordinarily
can be set only on the server, but need to be settable on the client.
Currently, this is supported only for the "disabled" attribute. Note
that when you are able to set a property on the client, you will be
allowed to by using the the .setProperty('attribute', newValue) method,
but not the .setXXXAttribute(newValue) method. For example, if you have
unsecure="disabled", then on the client you can use the method
.setProperty('disabled', false), while the method .setDisabled(false)
will not work and will provide a javascript error that setDisabled is
not a function.
clientComponent:
whether a client-side component will be generated. A component may
be generated whether or not this flag is set, but if client Javascript
requires the component object, this must be set to true to guarantee the
component's presence. Client component objects that are generated today
by default may not be present in the future; setting this flag is the
only way to guarantee a component's presence, and clients cannot rely on
implicit behavior. However, there is a performance cost to setting this
flag, so clients should avoid turning on client components unless
absolutely necessary.