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.

" Image Zoom Effect " using JQuery in ADF Faces

Jquery merupakan library yang paling populer, digunakan untuk menyediakan desain ui baik dari sisi Animations dan Client side events.

Disini saya menggunakan sebuah jquery untuk zoom sebuah foto. mungkin anda pernah liat beberapa e-commerce websites dimana mereka menggunakan teknik zoom untuk memperjelas kualitas product mereka.

Persiapkan ini semua

Jdeveloper   : Oracle Jdeveloper 11.1.1.6.0

Download Jquery    : ddpowerzoomer.js

Untuk gambar disarankan menggunakan size yang HD , bisa di download di sini ( Wallpaper HD )

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 ) di dalam " Web Content "
• dan didalam Folder ( js ) buat ( javascript File ) lalu ddpowerzoomer.js paste didalam folder ( js )

Contoh susunan hirarki project saya :

Step 2

• Drag and Drop " image(ADF Faces.Common Components) " kedalam .jspx
• Cara input gambar kedalam ADF dengan " image(ADF Faces.Common Components) "

• Cari di directory anda, dimana letak gambar yang akan anda pakai, setelah itu klik " OK "
• Jika menemukan Eror Message seperti ini

• Klik saja " Yes " dan masukan gambar itu didalam directory aplikasi ADF yang sedang anda buat. lalu klik OK.
• Saat gambar sudah ada didalam jspx, pasti gambar itu sangat besar sesuai resolusinya. cara untuk mengatur size gambar sesuai keinginan kita, setting gambar tersebut di dalam properties.

• Setting Width and High gambar tersebut, dan ingat gunakan tipe ( px ) agar mudah dalam mengatur size gambar tersebut.

Step 3

• Tambahkan Library Jquery didalam jspx,

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

• Tambahkan Script ini didalam didalam jspx, letakan setelah script di atas.

<af:clientListener type="load"
                               method="jQuery(document).ready(function($){   $('#i1').addpowerzoom({  defaultpower: 2,  powerrange: [2,5],  largeimage: null,  magnifiersize: [75,75]  }) })"/>

preview Step 3 :

Finish ..
And Run Your jspx..

Preview After Run

Sample Aplikasi ( Download )

Silakan Dikembangkan..

Terima Kasih.