Requirement: I have an af:inputText component. Now when the user double-click on the af:inputText component it will set some properties like value, contentStyle for the af:inputText.

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

Step 1: Create an Oracle ADF Fusion Web Application.

Step 2: Drag and drop af:inputText and set label=”Name”

Drag and drop af:resource and set type=”javascript”. The af:resource will be inside af:document

Write the below JavaScript function inside the af:resource

function setInputTextProperties(event) {
	var inputText = AdfPage.PAGE.findComponent('it1');
	inputText.setProperty("value", "Susanto Paul");
	inputText.setProperty("contentStyle", "background-color:aqua;font-weight:bold;");
}

Drag and drop af:clientListener inside af:inputText and set method=”setInputTextProperties” and type=”dblClick”

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

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="" version="2.1" xmlns:f=""
          xmlns:af="">
    <jsp:directive.page contentType="text/html;charset=UTF-8"/>
    <f:view>
        <af:document title="demo.jspx" id="d1">
            <af:resource type="javascript">
              function setInputTextProperties(event) {
                  var inputText = AdfPage.PAGE.findComponent('it1');
                  inputText.setProperty("value", "Susanto Paul");
                  inputText.setProperty("contentStyle", "background-color:aqua;font-weight:bold;");
              }
            </af:resource>
            <af:form id="f1">
                <af:inputText label="Name" id="it1">
                    <af:clientListener method="setInputTextProperties" type="dblClick"/>
                </af:inputText>
            </af:form>
        </af:document>
    </f:view>
</jsp:root>

Save and run the application. Thus, the ran application is shown below:

In the above af:inputText component as soon as we double click on the component it will set the properties like the value, contentStyle for the  af:inputText component, 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

 363 total views,  2 views today