Ashish Awasthi's Blog

Saturday, 1 June 2013

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

Thursday, 30 May 2013

Add Custom Flash Chat in Oracle ADF Application

In this tutorial i am going to show that how can you add a custom flash chat in your ADF application, and use it to chat with friends.
this is very much simple, as no code required to do this.

Go to http://www.everywherechat.com/ , this site provides free custom flash chat rooms, get html code of your custom chat from here
Create an html page using that code

<html>
<body>
<!-- Begin Everywherechat Room Code -->
    
      <br />
     <script src="http://www.everywherechat.com/e.php?defaultRoom=Lobby&roomList=true&fontSize=12&width=600&height=500&theme=night"></script> 

<!-- End Everywherechat Room Code --> 
</body>
</html>

Now create a Fusion Web Application and create a page in it, call this HTML page in an inlineFrame (af:inlineFrame)

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <af:panelGroupLayout id="pgl1">
    <af:inlineFrame id="if1" source="/chat.html" inlineStyle="height:700px;width:700px;"/>
  </af:panelGroupLayout>
</jsp:root>

Now Run your application and see your flash chat room is ready - Happy Coding

Download Sample Application-Sample ADF Application

Tuesday, 21 May 2013

Generate Barcode Image in Oracle ADF using OnBarcode API

In this tutorial we will learn how to generate Barcode Image for any Number(Barcode) in ADF using OnBarcode API, this API provides barcode SDK(Software Development Kit) to generate Barcode. This is paid.
You can get it from http://www.onbarcode.com/ , click on Download to get barcode SDK.

Now create a fusion web application and add barcode.jar to project libraries, you will get this JAR , when you download SDK
Good thing about this API is that it is very simple to use, not much code required to generate a simple barcode image
You can generate multiple type of Barcode as Code 39, Code 128, EAN-8, EAN-13, UPC-A, UPC-E
Suppose i have to generate a Code128 type of Barcode for any barcode number, so for this write this simple code and you are done

Code128 barcode = new Code128();

barcode.setData("122322311");
barcode.drawBarcode();

Download sample application that integrates this API with Oracle ADF Download Sample ADF Application
Unzip and Run this application
I have used a servlet in order to show image on page fragment

Search this blog