Sun. Oct 24th, 2021

Requirement: I have a demo.jspx page. Inside the demo.jspx page I have three af:button: Button 1, Button 2, and Button 3. Also inside demo.jspx page I have af:popup and inside af:popup one af:dialog and inside this af:dialog I have one af:outputText.

When I click any Button, it should open the popup and display the af:outputText with its corresponding value.

The value of the af:outputText will change dynamically, based on the button I clicked. For example, if I click Button 1, then the value of the af:outputText will be Button 1 clicked. If I click Button 2, then the value of the af:outputText will be Button 2 clicked. And, if I click Button 3, then the value of the af:outputText will be Button 3 clicked.

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

Step 1: Create an Oracle ADF Fusion Web Application.

Step 2: Create a demo.jspx page inside the ViewController project of our Application. Inside the demo.jspx page drag and drop three af:button from the Component Palette. Name the af:button as: Button 1, Button 2, and Button 3. Also drag and drop one af:popup inside demo.jspx page. Inside af:popup drag and drop af:dialog from the Component Palette. And inside the af:dialog drag and drop af:outputText from the Component Palette.

Step 3: Drag and drop af:resource with type=”javascript”, and write the below function as shown below:

Step 4: Drag and drop af:clientListener with method=”displayMessage” and type=”click” inside each af:button. Also drag and drop af:serverListener with type=”DisplayMessageEvent” and method=”#{backingBeanScope.MyBean.showMessage}” inside each and every af:button.

Step 5: Create a binding for the af:popup as binding=”#{backingBeanScope.MyBean.myPopup}”.

Step 6: Create a resource bundle and inside the write the values that we want to display for the af:outputText as shown below:

Step 7: Now go to the and declare private String myMsg = “”; and generate the accessors for myMsg.

Step 8: Now go to demo.jspx page and set the value of af:outputText as value=”#{backingBeanScope.MyBean.myMsg}”

Thus, the complete demo.jspx code is as shown below:

Step 9: Go to and write the code as shown below:

Step 10: Save and Run the Application.

Now, when, we click Button 1, the message we got is

Now, when, we click Button 2, the message we got is

Now, when, we click Button 3, the message we got is

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

 514 total views,  2 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 *