Monday, 17 August 2015

Show Popup programatically in ADF

Requirement: I have a button named "Show Popup". When I click on this button it should display a Popup. Inside the Popup I will have Dialog. The Dialog should display message "Hello Susanto". The Dialog should also have an Cancel button and a close icon.


Solution: To achieve the above functionality follow the below steps:

Step 1: Create and Oracle ADF Fusion Web Application.

Step 2: Create a progPopup.jsf page in the ViewController project of the created application.

Step 3: Drag and drop a button on the progPopup.jsf page from the Components Pallete. Name the button as "Show Popup".

Step 4: Drag and drop a Popup on the progPopup.jsf page from the Components Pallete.

Step 5: Drag and drop a Dialog from the Components Pallete on the Popup just created in step 4. From the Dialog-Properties, change the Type as "cancel". Also create the binding for the Popup. To do show go to binding from the Property Inspector and click on Edit. We will get the below Popup window. Here we will create a New Managed Bean by clicking on New beside Managed Bean as shown below:

                        













Then we will give the bean name as "PopupBean" , class name as "PopupBean", and scope as "backingBeanScope" as shown below.

                  


Then we will give the Property Name as "popupBinding" as shown below.


                  

Step 6: Drag and drop an outputText from the Components Pallete inside the dialog created in step 5. From the OutputText-Properties, change the Value as "Hello Susanto". Save the application

Step 7: Create and action listener for the button "Show Popup" created in step 3 inside the "PopupBean". Name the action listener as "showPopup" as shown below.



                  

Thus the complete progPopup.jsf page code is shown below:

                  


Step 8: Inside the "showPopup" method in "PopupBean" write the below code.
                  


Step 9: Save and run the application. 

Step 10. The application on the browser looks as below:

                 


Step 11:  On click of the "Show Popup" button we get the popup displayed with the message  "Hello Susanto" as shown below:
                                 


Thanks & Regards,
Susanto Paul