Navigate to another page on value change event of ADF input component

Recently I have seen a thread on OTN forum in that user want to navigate from one page to another on valueChangeListener of input component.

First Method-
This is a simple piece of code to perform navigation to specific page , Use it in ValueChangeListener directly

 FacesContext facesContext = FacesContext.getCurrentInstance();
 facesContext.getApplication().getNavigationHandler().handleNavigation(facesContext, null, "controlFlowName");

Second Method-
ValueChangeListener fires when value of input component changes but it is not meant for navigation, For navigation we use buttons and links with Action property
But for this requirement we have to be a bit tricky, We can queue button Action on value change listener of inputText to navigate to another page
Now first value change listener will be executed and then it'll queue button action to execute and as final outcome user will be able to navigate

ADF Basics: Using f:attribute to pass parameter in ActionEvent

f:attribute tag (JSF Tag supported in ADF Faces) is used to pass some additional attribute value to associated component
Sometimes using f:attribute simplify a complex piece of code, this tag has very simple structure. It has two properties

name- Name of tag attribute
value- Value or an EL reference of value

Here in this post we will see how to use this tag with ADF Faces, I am using Departments table of HR Schema and requirement is to delete departments with attribute DepartmentId  greater than 100

Update page component in between of event processing in ADF Faces using JavaScript

This post is not about any specific topic of framework, recently i was working in an application, requirement was like this
There is a button on page that uploads a large file to server and it takes some time . So as soon as user press this button it's text should be changed to 'Processing..' and after upload is complete it should be 'Done'




In this post i am sharing same - How to update page component while an event is processing ?
First i have tried it using java means in same button action listener but in this case button text was changed only after event processing is complete
So for this purpose i have used some javascript function, this is quite simple (see the implementation)

• Drop a button on page and create a ActionListener , it will change button text to 'Done' after event processing (used Thread.sleep() for some long processing)



    private RichButton buttonBind;

    /**Method to process Action Event
     * @param actionEvent
     */
    public void processValueAction(ActionEvent actionEvent) {
        // Sleep for some time (Event Processing time)
        try {
            Thread.sleep(10000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        //After processing set button text to 'Done'
        buttonBind.setText("Done");
        AdfFacesContext.getCurrentInstance().addPartialTarget(buttonBind);
    }

    public void setButtonBind(RichButton buttonBind) {
        this.buttonBind = buttonBind;
    }

    public RichButton getButtonBind() {
        return buttonBind;
    }



• Now question is how to change button text to 'Processing..' immediately after clicking button. So for this purpose i am using javascript



function changeButtonText(event) {
                  var comp = event.getSource();
                  comp.setText('Processing..');
              }



• Calling this javascript function using af:clientListener in button like this (See XML source of page)



 <af:document title="UpdatePageComponent.jspx" id="d1">
            <af:resource type="javascript">
              function changeButtonText(event) {
                  var comp = event.getSource();
                  comp.setText('Processing..');
              }
            </af:resource>
            <af:form id="f1">
                <af:spacer width="10" height="10" id="s1"/>
                <af:panelGroupLayout id="pgl1" layout="horizontal" halign="center">
                    <af:panelBox id="pb1" showDisclosure="false">
                        <f:facet name="toolbar"/>
                        <af:button text="Click to process" id="b1"
                                   actionListener="#{viewScope.UpdatePageComponent.processValueAction}"
                                   clientComponent="true" binding="#{viewScope.UpdatePageComponent.buttonBind}"
                                   inlineStyle="width:250px;text-align:center;padding:5px;font-weight:bold;">
                            <af:clientListener method="changeButtonText" type="action"/>
                        </af:button>
                    </af:panelBox>
                </af:panelGroupLayout>
            </af:form>
        </af:document>



• As soon as button is clicked this javascript function will be invoked and set new text in button and after event processing button text is again set by managed bean actionListener.




After Clicking button (Event is processing)-



Processing complete-

Thanks, Happy Learning :)

Invoking Button Action Programmatically,Queuing ActionEvent

Sometimes we need to invoke any button's action in bean without pressing that button,
as you have to call button action on any component's value change Listener- So how to do this in ADF managed bean.
ADF provides facility to queue action one after another, means you can perform multiple action by queuing 

I am using bounded task flow with page fragments(.jsff)-

• Create a button in page fragment and define ActionListener in managed bean
• Now I have created a input text and its valueChangeListener in managed bean
• I wish to call button' ActionListener in my input text valueChangeListener .





• we can do this by writing this code snippet on valueChangeListener 


public void callAceVCE(ValueChangeEvent vce) {
if (vce.getNewValue() != null) {
//Code to call ActionEvent
FacesContext facesContext = FacesContext.getCurrentInstance();
UIViewRoot root = facesContext.getViewRoot();
/**Pass cb1(buttonId) if page is not in taskflow, else if page is inside region then pass rgionid:buttonId*/
RichCommandButton button = (RichCommandButton)root.findComponent("r1:cb1");
ActionEvent actionEvent = new ActionEvent(button);
actionEvent.queue();
}
}

•  Now run your page and when you will change input text value - button actionListener will be called