Requirement:  I have an demo.jspx page. On that demo.jspx page, I have an af:commandButton named as “Change Image”. Also I have an af:image (displaying Kawasaki). On click of the af:commandButton it should change the image from Kawasaki to Suzuki. Internally we will be using the same af:image component. The only change that we will do because of which it will show the Kawasaki image is changing the source of af:image from Kawasaki to Suzuki.

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

Step 1: Create an Oracle ADF Fusion Web Application. Named the Application as        .

Step 2: Create an demo.jspx page. Drag and drop af:commandButton from the component palette on the demo.jspx page. Set the text as text=”Change Image”.

Drag and drop af:image from the component palllete.

Set width:448px; height:336px; shortDesc=”kawasakiImg”  source=“#{resource[‘images:Kawasaki.png’]}” for the af:image.

Create the bindings of the af:image as binding=”#{backingBeanScope.MyBean.imgBinding}”

Place the image of the Suzuki in the images folder as shown below:

Set action listener for the af:commandButton as actionListener=”#{backingBeanScope.MyBean.swapImage}”

Step 3: Thus, the code for the swapImage actionListener is shown below:

Thus, the complete MyBean.java code is shown below:

Thus, the complete demo.jspx page is shown below:

Step 4: Save All and run the application. Thus the ran application is shown below.

Click on the Change Image button. Thus the Kawaski bike gets changed to Suzuki bike 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

 496 total views,  3 views today