Using JQuery in Oracle ADF

JQuery is advance javascript library to support client side scripting of HTML, it is free and Opensource software licensed under MIT.
Jquery is designed to make it easier to create animations, enhance look feel of component, smooth navigation.
Read about Jquery- http://jquery.com/ , https://jquery.org/
here i am showing you, how to add Jquery in oracle ADF application.

• First add Jquery library to your fusion web application, download library file Download
• Add this file to javascript resources, see image
  
• Now create a javascript(Jquery) file to change color of af:inputText, here is javascript code is given






function changeColor() {
    if ($("input[name=it1]").val() != null) {
       if (($("input[name=it1]").val().length > 0) && ($("input[name=it1]").val().length < 3)) {
            $("input[name=it1]").css("color", "magenta");
        }
      else if (($("input[name=it1]").val().length > 3) && ($("input[name=it1]").val().length < 6)) {
            $("input[name=it1]").css("color", "red");
        }
        else if (($("input[name=it1]").val().length >= 6) && ($("input[name=it1]").val().length < 9)) {
            $("input[name=it1]").css("color", "yellow");
        }
         else if (($("input[name=it1]").val().length >= 9) && ($("input[name=it1]").val().length < 12)) {
            $("input[name=it1]").css("color", "maroon");
        }
         else if (($("input[name=it1]").val().length >= 12) && ($("input[name=it1]").val().length < 15)) {
            $("input[name=it1]").css("color", "teal");
        }
         else if (($("input[name=it1]").val().length >= 15) && ($("input[name=it1]").val().length < 18)) {
            $("input[name=it1]").css("color", "blue");
        }
        else {
            $("input[name=it1]").css("color", "green");
        }
    }
}



• Now create a jspx page , and call this JS file as a resource in jspx page, and also add Jquery Lib to jspx page as Resource
  
  
  
  
• Now add a input text in page, and call javascript resource using af:clientListener
  


• See the code of jspx page-



<?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="JqueryADF.jspx" id="d1">
         <af:resource type="javascript" source="/javascript/libs/jquery-1.4.4.js"/>
         <af:resource type="javascript" source="/resources/js/inputText.js"/>
            <af:form id="f1">
            <af:inputText label="Chck JQ" id="it1" contentStyle="font-weight:bold;">
                        <af:clientListener type="keyDown" method="changeColor"/>
                    </af:inputText>
            
            </af:form>
        </af:document>
    </f:view>
</jsp:root>



• Now Run this application and enter value in input text field and see how color is changing with length
  
  
  
  
  
  
  
  
  
  
  
  
  
• You can use this , with your password field, for any kind of alert, to make 'Find and Enter' games
• One more thing , it is difficult to use Jquery with pagefragments because in page fragments component id's are like :t1:cb1, r1:t1:it2. and jquery does not support ':' so you can easily use this with .jspx page
• Sample ADF application -Download