CRUD in ADF Web Application

Kali ini akan saya bahas bagaimana caranya membuat ( Create, Read, Update, Delete ) di ADF Web Application.

Persiapkan ini semua :

Jdeveloper  : Oracle Jdeveloper 11.1.1.6.0
Oracle DB Express : Oracle DB Express 11g ( Only for Windows and linux )
Unlock sample HR Oracle DB : Unlock


Step by Step.

Step 1

• Buka Jdeveloper dan Pilih New Application lalu pilih " Fusion Web Application "
• Setelah selesai membuat new aplication, show tab ( Application Resources )

• Klik kanan pada folder ( Connection ) lalu buat New Connection. dan pilih ( Database )
• Lalu akan tampil screen, ( Create Database Connection )

• Isi ( Connection Name ), dan untuk ( username dan password ) , gunakan username dan password yang anda buat setelah selesai instal oracle db express
• Jika sudah lalu Test Connection jika sukses , lanjutkan dan klik OK

Step 2

• Selanjutnya membuat Entity Object, View Object, dan Application Module
• Pada Folder Model klik kanan , dan pilih new lalu akan tampil screen New Gallery
• Search Entity Object, lalu pilih " Entity Object ( ADF Business Components ) "

• Selanjutnya akan tampil screen Intiliaze Business Components Project

• pada Drop Down Connection pilih koneksi yang sudah anda buat di awal step 1 dan klik OK.
• Selengkapnya step by step dalam membuat EO, VO, dan AM 
• Setelah selesai membuat EO, VO, dan AM lanjut ke Step 3

Preview Step 2:

Step 3

•  Buka Task Flow ( adfc-config.xml ) lalu drag and drop component " View(ADF Task Flow.Components " kedalam taskflow tersebut dan klik 2x pada view lalu buat page ( jspx ), page ini akan kita jadikan sebagai index si aplikasi tersebut.

• buka page karyawanView.jspx dan drag and drop 4 component button " Button(ADF Faces.Common Components) " kedalam page tersebut.
• lalu buka tab data controls, drag and drop VOkaryawan kedalam page tersebut. pilih table -> ADF Read Only Table

• lalu centang ( Single Row ) dan klik OK.

Step 4

• Pada Task Flow ( adfc-config.xml ), drag and drop component " View(ADF Task Flow.Components " kedalam taskflow tersebut dan klik 2x pada view tersebut. page tersebut saya beri nama ( karyawanForm ) page ini saya jadikan untuk " create data baru dan update data ".
• Buka karyawanForm.jspx dan drag and drop VOkaryawan dari data control kedalam page tersebut. pilih Form -> ADF Form

• Centang Include Submit button dan klik OK

• Drag and Drop Component " Button( ADF Faces.Common Component ) dan beri value ( cancel ) lalu pada properties immidiate kondisi menjadi ( true )

Step 5

• Pada Task Flow ( adfc-config.xml ), drag and drop component " View(ADF Task Flow.Components " kedalam taskflow tersebut dan klik 2x pada view tersebut. page tersebut saya beri nama ( karyawanDetails ) page ini saya jadikan untuk " page untuk melihat details data karyawan ".
• Buka karyawanDetails.jspx dan drag and drop VOkaryawan dari data control kedalam page tersebut. pilih Form -> ADF Read Only Form

• Tidak perlu centang apapun, cukup klik OK.

• Drag and Drop Component " Button( ADF Faces.Common Component ) dan beri value ( back )

Step 6

• Kembali ke Task Flow , dan buka tab data control.
• lalu expands VOkaryawan, dan buka folder Operation didalam VO tersebut.

• Lalu drag and drop operation ( createInsert dan delete ) ke dalam taskflow.
• Selanjutnya buka folder Operation diluar VO tersebut. dan drag and drop operation ( commit dan rollback ) kedalam Task Flow.

Step 7

• Desain Task Flow Seperti ini

• Terakhir pada properties Button, Beri Action pada Button sesuai variable yang sudah dibuat pada control flow

Page karyawanView.jspx

1. Button Create Action ( create )
2. Button View Action ( view )
3. Button Edit Action ( edit )
4. Button Delete Action ( delete )

Page karyawanView.jspx

1. Button Back Action ( back )

Page karyawanForm.jspx

1. Button Submit Action ( save )
2. Button Cancel Action ( cancel )

• Run ( karyawanView.jspx )

Preview

Sample Aplikasi ( Download )

Silakan dikembangkan.
Terima kasih.

Read More

Open ADF Bounded TaskFlow in Modal Dialog (popup)

Tugas dari sebuah Taskflow adalah salah satu elemen kunci dari setiap pengembangan Aplikasi ( Oracle Application Development Framework " ADF " ). 

Untuk lebih lanjut mengenal taskflow bisa melanjutkan disini ( Introduction to ADF Task Flows )
Kali ini saya akan menjelaskan bagaimana, membuka ADF Bounded Taskflow menggunakan modal dialog ( pop up ).


Persiapkan ini semua :

Jdeveloper  :  Oracle Jdeveloper 11.1.1.6.0


Step by step :

Step 1

• Buka Jdeveloper dan Pilih New Application lalu pilih " Fusion Web Application "
• Pada " ViewController " kita buat sebuah taskflow lalu uncheck ( Create as Bounded Task Flow )
• beri nama taskflow tersebut ( home ) atau apa saja yang menurut anda baik.
• selanjutnya drag and drop component " view(ADF Task Flow.Component) " kedalam taskflow tersebut. klik 2x pada component view tersebut. dan akan muncul ( create jsf page )

• Selanjutnya check si radiobutton ( QuickStartLayout ) dan klik " Ok "

Step 2

• Buat 1 taskflow lagi di ViewController, tapi dengan type ( bounded )

caranya seperti ini

• Agar taskflow menjadi type ( bounded ) karena itu untuk " Create as Bounded Task Flow " jangan di uncheck dan beri nama taskflow tersebut " popup "
• Selanjutnya, untuk " Create with Page Fragments " harus di ceklis, karena kita akan membuat suatu pop up dialog yang tidak membutuhkan sebuah fragments. jika sudah klik " OK "

Step 3

• didalam taskflow drag and drop 3 " view(ADF Task Flow.Component) " dan 1 " return(ADF Task Flow.Component) "

preview

• klik 2 kali pada setiap view, dan akan muncul ( Create JSF Page ) dan untuk setting didalam  ( Create JSF Page ) lihat di gambar di atas. jika sudah klik OK.

• Jika semua jspx sudah jadi, lalu Drag and Drop component seperti didalam jspx ( index, profile, address, dan company )

Preview

Step 4

• buka taskflow ( popup ) dan buat aliran flow seperti ini

• menggunakan " Control Flow Case(ADF Task Flow.Component) "
• Selanjutnya pada taskflow home, drag and drop taskflow " popop " kedalam taskflow " home " dan buat aliran flow seperti ini

• lalu pada behavior taskflow " popup " ubah ( run as dialog menjadi true ) dan ( display type menjadi inline-popup )

Step 5

• pada setiap button , pada properties " action " arahkan ke nama ( control flow case ) masing masing.
• dan pada button " register " di properties untuk ( useWindow ) dibuat true.

Finish.

And Run ( index.jspx )

and Preview

Sample Aplikasi ( Download )

Terima kasih.

Silakan dikembangkan.

Read More

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.

Read More

" 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.

Read More