Friday, 25 September 2015

Change outputText value inside Popup dynamically based on button clicked

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 ViewControllerBundle.properties and inside the ViewControllerBundle.properties write the values that we want to display for the af:outputText as shown below:
Step 6: Now go to the MyBean.java and declare private String myMsg = ""; and generate the accessors for myMsg.

Step 7: 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 8: Go to MyBean.java and write the code as shown below:


Step 9: 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

If you like this post please like, share and comment.



Thanks & Regards,
Susanto Paul