Requirement: I have a value “Hello Susanto!” in my Java class. In the user interface (web page) there is a button named “Click Here“. Now when we run the page it should display only the button. When we click on “Click Here” button in the web page, it should get the value “Hello Susanto!” from the Java class and display the value beside the “Click Here” button in the web page.

Solution: For solution of the above requirement follow the below steps:

Step 1: Create an Oracle ADF Fusion Web Application.

Step 2: Create a demo.jsf page in the ViewController project of our application created in Step 1.

Step 3: Drag and drop button from the component palette in the demo.jsf page created in Step 2. Name the button as “Click Here“. Create the actionListener for the button.

To create and actionListener for the button, go to the property inspector of the button. Search for ActionListener and click on the icon beside the ActionListener as shown below:

On click of Edit we will get the below ActionListener popup:

Click on New beside Managed Bean to create the Managed Bean. Then we will get the below Create Managed Bean Popup. Give Bean Name as MyBean, Class Name as MyBean, Package as com.susanto, Extends as java.lang.Object, Scope as backingBean, and rest of the things are shown in the image below:

Click OK to close the Create Managed Bean popup. Now we are back into the ActionListener popup. To create a method, click on the New button beside the Method dropdown list in the ActionListener Popup. We will get the below Create Method popup to create a method. Give the method name as showValue as shown below:

Method popup. Then the ActionListener popup will look as below:

Click OK to close the ActionListener popup.

Step 4: Drag and drop af:outputText from the component palette in the demo.jsf page created in Step 2. Place the af:outputText after af:button. Set the partialTriggers of the af:outputText to the id of the button create in Step 3.

Step 5: Now go to the backingBean MyBean created in Step 3. Declare private String myString = null; and generate the accessors for myString.

Step 6: Go to the demo.jsf page. Locate the af:outputText. Go to the property inspector of the af:outputText. Click on the icon beside Value of the af:outputText, and Click on Expression Builder as shown below.

The Expression Builder popup appears in the screen as shown below. Write the Expression as #{backingBeanScope.MyBean.myString}.

Click OK to close the Expression Builder popup.

Step 7: Now go to the MyBean and under showValue actionListener write the code as this.setMyString(“Hello Susanto!”);

The complete MyBean code will look as below:

The complete demo.jsf code will look as below:

Step 8: Save all and run the Application. The demo.jsf page in the browser will look as below:

Step 9: Click on Click Here button of the demo.jsf page in the browser. Thus, the value Hello Susanto! appears beside the Click Here button of the demo.jsf page as 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

 527 total views,  4 views today