Fri. Apr 23rd, 2021

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 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, then value in the MyBean.java class is shown below:

When I click on button 2, then value in the MyBean.java class is shown below:

When I click on button 3, then value in the MyBean.java class is shown below:

When I click on “Display My Name”, then value in the MyBean.java class is shown below:

When I click on “Display Wife Name”, then value in the MyBean.java class is shown below:

Hence, the solution to our requirement.

If you like the post please comment, share, and do join me on Facebook. Please subscribe to my YouTube Channel for video tutorials.

Thanks & Regards,
Susanto Paul

 262 total views,  1 views today

By Susanto Paul

Susanto is an Oracle ACE, a qualified MCA, MBA, and a highly-skilled Senior Oracle Specialist. He is an enthusiastic Blogger and YouTuber who helps learners to solve their complex problems more efficiently. He has 9+ years of experience in multiple technologies like AWS, Oracle ADF, Oracle APEX, Oracle JET, Oracle VBCS, Oracle IDCS, Oracle PL/SQL, Oracle Integration Cloud, Java, JDBC, Servlets, JSP, Spring, Hibernate, HTML5, CSS3, JavaScript, TypeScript, NodesJS, Angular, MySQL, Oracle WebLogic Server, JUnit, JMeter, Selenium Web Driver, etc. He is a certified: Oracle Certified Professional Java SE 6 Programmer, Oracle ADF 11g Certified Implementation Specialist, Oracle Cloud Platform Application Integration 2020 Certified Specialist, Oracle Cloud Infrastructure Foundations 2020 Certified Associate, and Oracle Cloud Infrastructure Developer 2020 Certified Associate

Leave a Reply

Your email address will not be published. Required fields are marked *