Auto change color Input Text, using JQuery in ADF

JQuery adalah, antarmuka JavaScript Library yang mendukung sisi Client Scripting HTML dan JQuery itu Opensource software yang berlisensi dibawah MIT.

Disini saya akan menjelaskan bagaimana menggunakan JQuery didalam ADF. dan bagaimana membuat Auto change color untuk inputtext dengan JQuery.


Persiapkan ini semua :

Jdeveloper  : Oracle Jdeveloper 11.1.1.6.0
Menggunakan Jquery : Jquery 1.4.1


Step by Step :

Step 1

• Buka Jdeveloper dan Pilih New Application lalu pilih " Fusion Web Application "
• Buat jspx, di dalam " Web Content "
• Buat Folder ( js ) didalam web content, lalu buat " javascript file " dengan nama inputText.js

dan paste script tersebut ke dalam file ( inputText.js )

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");
        }
    }
}

Step 2

• Drag and Drop " Input Text(ADF Faces.Common Components) " kedalam jspx anda
• Drag and Drop " Client Listener(ADF Faces.Operation) " kedalam inputText

Preview 

• Isi kolom ( Method : changeColor ) dan isi pilih ( Type : OnKeyDown )

Step 3

• Cara menggunakan JQuery di ADF cukup mudah dengan menggunakan tag " <af:resource /> "
• Lalu paste link JQuery didalam - source" paste here " -

<af:resource type="javascript" source="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"/>
<af:resource type="javascript" source="js/inputText.js"/>

• Paste script di atas didalam jspx.

preview step 3 :

Finish..

And Run your jpsx.

Preview After Run.

jadi, si JQuery akan mengubah warna label didalam inputText sesuai " jumlah value " yang sudah saya tentukan di dalam Javascript ( inputText ).


Sample Aplikasi ( Download )


Silakan dikembangkan.
Terima kasih.