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 7: Now go to the MyBean.java 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 MyBean.java 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