Tuesday, 26 January 2016

Get component ID in bean based on the component clicked in Oracle ADF

 Requirement: I have a demo.jspx page. On demo.jspx page I have five af:button named as “button 1”, “button 2”, “button 3”, “Display My Name”, and “Display Wife Name

When I click on any of the af:button I should get some value printed in the bean corresponding to the af:button I clicked. For example, if I click on button 1, it should display "Button 1 Clicked", if I click on button 2, it should display "Button 2 Clicked", if I click on button 3, it should display "Button 3 Clicked", if I click on Display My Name, it should display " Susanto Paul and if I click on Display Wife Name, it should display "Moumita Deb".

For the solution first I need to get the clicked af:button id in the bean. Then based on the button Id I get in the bean I will display the corresponding message.

Also just to show how we can use different javascript function, I will be using the two different javascript functions: methodDescription(event) and displayName(event). Here I will have only two method to write the business logic: buttonClicked and displayNameButtonClicked.

Solution: For solution to the above requirement followed the steps as shown below:

Step 1: Create an Oracle ADF Fusion Web Application. Name the application as: GetClickComponentId.

Step 2: Create a demo.jspx page. On demo.jspx page drag and drop five af:button named as “button 1”, “button 2”, “button 3”, “Display My Name”, and “Display Wife Name”.

Step 3: Drag and drop af:resource from the component palette inside the af:form. Select the type of the af:resource as type=”javascript”. Inside the af:resource write two functions methodDescription(event) and displayName(event) as shown below:
Step 4: Drag and drop af:clientListener and af:serverListener from the component palette inside the button 1, button 2, and button 3. Set the af:clientListener properties as method="methodDescription" type="click" inside all the three buttons: button 1, button 2, and button 3. And set the type and method of the af:serverListener as type="MethodDescriptionEvent" method="#{pageFlowScope.MyBean.buttonClicked}". Thus the code will look as shown below: Step 3: Drag and drop af:resource from the component palette inside the af:form. Select the type of the af:resource as type=”javascript”. Inside the af:resource write two functions methodDescription(event) and displayName(event) as shown below:
Step 5: Similarly, drag and drop af:clientListener and af:serverListener from the component palette inside the “Display My Name” and "Display Wife Name" buttons. Set the af:clientListener properties as method="displayName" type="click" inside all the two buttons: button Display My Name” and "Display Wife Name". And set the type and method of the af:serverListener as type= "DisplayNameEvent" method="#{pageFlowScope.MyBean.displayNameButtonClicked}". Thus the code will look as shown below:
Hence, the complete demo.jspx code is shown below:
<?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 title="demo.jspx" id="d1">
                                                <af:form id="f1">
                                                                <af:resource type="javascript">
                                                                                function methodDescription(event) {
                                                                                                var button = event.getSource();
                                                                                                AdfCustomEvent.queue(button, "MethodDescriptionEvent");
                                                                                                event.cancel();
                                                                                }
                                                                                function displayName(event) {
                                                                                                var button = event.getSource();
                                                                                                AdfCustomEvent.queue(button, "DisplayNameEvent");
                                                                                                event.cancel();
                                                                                }
                                                                </af:resource>
                                                                <af:button text="button 1" id="b1">
                                                                                <af:clientListener method="methodDescription" type="click" />
                                                                                <af:serverListener type="MethodDescriptionEvent"
                                                                                                method="#{pageFlowScope.MyBean.buttonClicked}" />
                                                                </af:button>
                                                                <af:button text="button 2" id="b2">
                                                                                <af:clientListener method="methodDescription" type="click" />
                                                                                <af:serverListener type="MethodDescriptionEvent"
                                                                                                method="#{pageFlowScope.MyBean.buttonClicked}" />
                                                                </af:button>
                                                                <af:button text="button 3" id="b3">
                                                                                <af:clientListener method="methodDescription" type="click" />
                                                                                <af:serverListener type="MethodDescriptionEvent"
                                                                                                method="#{pageFlowScope.MyBean.buttonClicked}" />
                                                                </af:button>
                                                                <af:button text="Display My Name" id="b4">
                                                                                <af:clientListener method="displayName" type="click" />
                                                                                <af:serverListener type="DisplayNameEvent"
                                                                                                method="#{pageFlowScope.MyBean.displayNameButtonClicked}" />
                                                                </af:button>
                                                                <af:button text="Display Wife Name" id="b5">
                                                                                <af:clientListener method="displayName" type="click" />
                                                                                <af:serverListener type="DisplayNameEvent"
                                                                                                method="#{pageFlowScope.MyBean.displayNameButtonClicked}" />
                                                                </af:button>
                                                </af:form>
                                </af:document>
                </f:view>
</jsp:root>
Step 6: Go to MyBean.java and write the code as shown below:
package com.susanto;

import oracle.adf.view.rich.render.ClientEvent;

public class MyBean {
            public MyBean() {
            }

            public void buttonClicked(ClientEvent clientEvent) {
                        String methodNameId = clientEvent.getComponent().getId();
                        System.out.println("methodNameId : " + methodNameId);
                        if (methodNameId.equalsIgnoreCase("b1")) {
                                    System.out.println("Button 1 Clicked");
                        }
                        if (methodNameId.equalsIgnoreCase("b2")) {
                                    System.out.println("Button 2 Clicked");
                        }
                        if (methodNameId.equalsIgnoreCase("b3")) {
                                    System.out.println("Button 3 Clicked");
                        }
            }

            public void displayNameButtonClicked(ClientEvent clientEvent) {
                        String methodNameId = clientEvent.getComponent().getId();
                        System.out.println("methodNameId : " + methodNameId);
                        if (methodNameId.equalsIgnoreCase("b4")) {
                                    System.out.println("Susanto Paul");
                        }
                        if (methodNameId.equalsIgnoreCase("b5")) {
                                    System.out.println("Moumita Deb");
                        }
            }
}
Step 7: Save all and run the application. Thus, the ran application is shown below:
Step 8: When I click on button 1, than value in the MyBean.java class is shown below:
When I click on button 2, than value in the MyBean.java class is shown below:
When I click on button 3, than value in the MyBean.java class is shown below:
When I click on “Display My Name”, than value in the MyBean.java class is shown below:

When I click on “Display Wife Name”, than value in the MyBean.java class is shown below:
Thus, the solution to our requirement.
If you like this post please comments, share and like me on Facebook.

Thanks & Regards,
Susanto Paul