Reuse Aplikasi ADF dengan Menggunakan Bounded ADF Taskflow

Salah satu fitur dari ADF adalah Task Flow. Daripada membangun sebuah aplikasi web raksasa dalam sebuah halaman JSF, kita dapat membagi fitur-fitur dalam JSF tersebut menjadi beberapa fragment yang disebut Task Flow. Taskflow dapat di-reuse dan dapat juga dipisah pengerjaannya sehingga memungkinan pengembangan aplikasi yang modular.

Sebagai contoh: Anda diminta untuk membangun aplikasi ADF untuk kebutuhan Human Resource (HR) dan Finance. Aplikasi HR akan menampilkan data karyawan dan jadwal cuti, sedangkan aplikasi Finance akan menampilkan data karyawan dan claim. Kedua aplikasi tersebut sama-sama memerlukan interface yang menampilkan data karyawan. Akan lebih baik apabila data karyawan tersebut dibangun menjadi aplikasi tersendiri yang dapat di-consume oleh module HR dan Finance sehingga menghemat waktu pengerjaan dan mencegah duplikasi.

Langkah-langkah pembuatan dan cara meng-consume task flow saya contohkan dalam guide berikut:

1. Create New Project ADF. Kemudian pada ViewController anda, klik kanan -> New -> ADF Task Flow

 2. Beri nama task flow anda (sesuaikan dengan functionality task flow tersebut). Pilih Create as Bounded Task Flow dan Create with Page Fragment (2 opsi ini akan saya jelaskan pada blog lain).

3. Setelah task flow anda terbentuk, masukkan 2 komponen View dalam task flow tersebut. Selain itu, tambahkan juga 2 komponen Control Flow Case sehingga hasil akhir task flow adalah seperti di bawah ini:

 4. Untuk masing-masing view, double click kemudian buat jsff yang sesuai untuk setiap view. Dalam jsff tersebut, saya membuat output text dan button untuk masing-masing page sehingga hasil akhirnya kira-kira sebagai berikut:

 5. Untuk masing-masing button, buka Component Properties. Dalam button action, tambahkan go/back sesuai dengan Control Flow Case pada Step no 3.

6. Setelah Task Flow anda selesai, klik kanan pada Project View Controller Anda. Buka Project Properties.

7. Buka tab Deployment -> New -> ADF Library JAR file. Ini akan membuat deployment profile baru yang memungkinkan anda untuk men-deploy aplikasi menjadi Library ADF yang dapat di-reuse di project lain.

8. Hasil Deployment profile baru adalah sbb:

9. Setelah selesai, klik kanan ViewController Project anda, lalu deploy sebagai jar sesuai dengan deployment profile yang telah dibuat pada step nomor 8

 10. Next dan Finish untuk step berikutnya.

11. Anda dapat melihat lokasi dimana file .jar anda terbentuk. Dalam contoh saya, file tersebut ada pada directory: /Users/darwincuputra/jdeveloper/mywork/ADFTaskFlow/ADFTaskFlowViewController/deploy. Anda dapat mengakses file tersebut dari directory ini.

12. Buat aplikasi baru, dimana aplikasi ini merupakan aplikasi yang akan meng-consume/ me-reuse Task Flow yang sudah anda buat pada step nomor 1-11. Di Resource Palette, buat New Connection -> File System

13. Masukkan Connection Name, lalu pada Directory Path, masukkan directory dimana file .jar yang berisi task flow berada.

14. Setelah selesai, anda dapat meng-expand directory tersebut untuk melihat task flow apa saja yang ada dalam sebuah library.

15. Pilih task flow yang anda inginkan, Drag and Drop pada page yang anda buat. Pilih Region

16. Add Library untuk meng-include semua library yang dibutuhkan untuk menjalankan Task Flow yang anda include.

17. Hasilnya adalah sbb:

18. Klik kanan -> Run -> buka pada browser anda. Page akan muncul beserta task flow yang anda include.

Selamat, Anda berhasil membuat task flow dan me-reuse task flow tersebut dalam aplikasi lain.

Pada blog berikutnya akan saya jelaskan secara lebih mendetail tentang task flow (bounded, unbounded, region, dsb). Semoga membantu!

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.

ADF - Method call di taskflow

Pada blog kali ini, saya akan mendemontrasikan  penggunaan method-call dalam adf task-flow. Anda bisa menggunakan method-call di ADF task flow memanggil sebuah method di managed bean sebelum page di render atau bisa jg menggunakan invokeAction di pageDefinition.

Langsung aja, silahkan ikuti langkah - langkah dibawah :

1. Anda sudah membuat project ADF di Jdev.
2. Klik adfc-config.xml, dan design seperti gambar dibawah:
   
3. Buat file .jspx pada activity input dan output, nama file disesuaikan dengan nama activity
4. Buka file input.jspx dan output.jspx lalu desain seperti ini:

   

   output.jspx

   

   input.jspx

5. Buat class java dengan nama ProsesBean
   
   
   
   
   
6. Buka adfc-config.xml, klik tab overview dan pilih managedbean. 
   
7. Ubah properties method-call.
   
8. Ubah properties router.
   
   

Nah saatnya kita melakukan testing, klik kanan dan run di adfc-config.xml. 

• Kondisi nama tidak valid
• Halaman Input:
  
• Kondisi nama valid
• Halaman Input:   
  
  
  
• Halaman Output: 
  

ADF - Passing parameter di task flow

Posting kali ini saya akan menjelaskan bagaimana passing paramter antara view dalam task flow dan penggunaan Page flow scope. Page flow scope digunakan untuk berbagi data antara activity dalam task flow.

Langsung saja, pertama - tama buat project ADF

1. Buat ADF Task Flow dan pilih bounded taskflow. Seperti gambar dibawah sehingga di jdev kita sudah memliki 2 buah taskflow yaitu bounded dan unbounded taskflow
   
   
   
   
2. Lalu buka task-flow-definition.xml (bounded taskflow) seperti gambar dibawah.
   
3. Nah langkah selanjutnya buka adfc-config.xml (unbounded taskflow). Task-flow-definition merupakan bounded taskflow yg kita buat pada step 2.
   
4. Buka task-flow-definition dan pilih tab overview. Lalu isi parameter seperti gambar dibawah :
   
5. Lalu buka kembali adfc-config.xml dan klik task-flow-definition. Setelah itu buka property inspector lalu isi parameter seperti gambar dibawah :
   
6. Buka hal1.jspx dan design seperti ini.
   
   Input text "Data dari index" isi value dengan "#{backingBeanScope.data}"
   Input text "Data dari halaman 1" isi value dengan "#{pageFlowScope.dataHal1}"
7. Buka hal2.jspx dan desgin seperti ini.
   
   Input text "Data dr halaman 1" isi value dengan "#{backingBeanScope.data}"
8. Buka halaman index.jspx dan desgin seperti ini.
   
   

Yang kita buat diatas bagaimana  mengirim parameter dari halaman index.jspx(unbounded) ke task-flow-definition (bounded). Dan didalam bounded task-flow terdapat dua buah view, yaitu hal1.jspx dan hal2.jspx yang saling berkomunikasi menggunakan pageFlowScope "#{pageFlowScope.dataHal1}" dimana hal1 sebagai  setter dan hal2 getter. Berikut hasil pada saat di run :

Index.jspx, isi dan klik go

hal1.jspx, isi dan klik "ke halaman 2"

hal2.jspx