Using JQuery in Oracle ADF

This blog we will see how to use JQuery in Oracle ADF.
The below steps we need to follow to use JQuery in ADF.

• Add JQuery library (Jquery Library) into your fusion web application. Add the JavaScript file inside Lib.

• Add a JavaScript file in resource resources.

• Add the below method inside the new JavaScript file for change the color as per the entered text.

         function changeColorText() {
               if ($("input[name=it1]").val() != null) {
                   if (($("input[name=it1]").val() == 'AAA' )) {
                        $("input[name=it1]").css("color", "green");
                    }
                  else if (($("input[name=it1]").val() == 'BBB')) {
                        $("input[name=it1]").css("color", "magenta");
                    }
                   else if (($("input[name=it1]").val() == 'CCC')) {
                        $("input[name=it1]").css("color", "blue");
                    }
                   else if (($("input[name=it1]").val() == 'DDD')) {
                        $("input[name=it1]").css("color", "yellow");
                   }
                  else {
                        $("input[name=it1]").css("color", "red");
                   }
             }
          }

• Now create a jspx page, and call this above JavaScript file as a resource in jspx page, and also add Jquery Lib to jspx page as Resource.

        <af:resource type="javascript" source="/javascript/libs/jquery-1.4.4.js"/>
        <af:resource type="javascript" source="/resources/js/inputTextJScript.js"/> 

• Just see the JSPX Page like the below

      <?xml version='1.0' encoding='UTF-8'?>
         <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"                                xmlns:f="http://java.sun.com/jsf/core"
                   xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
       <jsp:directive.page contentType="text/html;charset=UTF-8"/>
        <f:view>
             <af:document title="JQueryCallADF.jspx" id="d1">
               <af:resource type="javascript" source="/javascript/libs/jquery-1.4.4.js"/>
               <af:resource type="javascript" source="/resources/js/inputTextJScript.js"/>
               <af:form id="f1">
                <af:inputText label="Enter Text :" id="it1" contentStyle="font-weight:bold;">
                    <af:clientListener method="changeColorText" type="keyDown"/>
                </af:inputText>
              </af:form>
            </af:document>
         </f:view>
       </jsp:root>

• Now run the application and enter the value in text box the color change will display.

    You can download the code: Download

Using JSTL in ADF Faces

This blog we will see how to use JSTL in ADF faces.

In some scenario, sometimes it is required to use Java Server Pages Standard Tag Library (JSTL) in JSPX page or page fragment. The below functions can use in regular expression.

JSTL Function	Description
fn:contains()	Tests if an input string contains the specified substring.
fn:containsIgnoreCase()	Tests if an input string contains the specified substring in a case insensitive way.
fn:endsWith()	Tests if an input string ends with the specified suffix.
fn:escapeXml()	Escapes characters that could be interpreted as XML markup.
fn:indexOf()	Returns the index within a string of the first occurrence of a specified substring.
fn:length()	Returns the number of items in a collection, or the number of characters in a string.
fn:replace()	Returns a string resulting from replacing in an input string all occurrences with a given string.
fn:startsWith()	Tests if an input string starts with the specified prefix.
fn:substring()	Returns a subset of a string.
fn:substringAfter()	Returns a subset of a string following a specific substring.
fn:substringBefore()	Returns a subset of a string before a specific substring.
fn:toLowerCase()	Converts all of the characters of a string to lower case.
fn:toUpperCase()	Converts all of the characters of a string to upper case.
fn:trim()	Removes white spaces from both ends of a string.

To use JSTL functions in ADF Faces component, you need to add the JSTL namespace in JSPX page or page fragment. The below namespace manually need to add the name space.
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
                  xmlns:f="http://java.sun.com/jsf/core"
                 xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
                 xmlns:fn="http://java.sun.com/jsp/jstl/functions">
The below expression required in an af:outputText component.
<af:outputText value="#{fn:substring(bindings.userName.inputValue,1,5)}" id="ot1"/>

The below code is required to display the department name if the department name is “IT”.
<af:outputText value=”#{ row.bindings.deptName.inputValue}” rendered="#{fn:containsIgnoreCase(row.bindings.deptName.inputValue,'IT')}" id="ot1"/>
 
Thanks…