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="" version="2.1" xmlns:f=""
xmlns:af="">
<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
548 total views, 2 views today