Using jQuery in Oracle ADF

Sharing is Caring
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 the 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
      jQuery in Oracle ADF
    • Now create a javascript (jQuery) file to change the 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 an input text in the page, and call javascript resource using af:clientListener

 

    • See the XML 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 the 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 page-fragments 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

Cheers 🙂 Happy Learning

Related Posts

An Oracle ACE, Blogger, Reviewer, Technical Lead working on Oracle ADF

0 thoughts on “Using jQuery in Oracle ADF”

Leave a Reply

Your email address will not be published. Required fields are marked *