BAB 6
Membangun User Interface
Pada proyek terakhir, telah dibangun modul BPEL untuk mengorkestrasi dua web services. Pada saat pengujian digunakan, fasilitas test built-in yang ada
pada aplikasi komposit. Pada proyek ini, akan dibuat user interface berbasis web untuk berkomunikasi dengan proses BPEL.
6.1 Membuat Proyek Aplikasi Web
Pilih File New Project dari menu bar. Window New Project akan muncul.
Pilih Java Web sebagai category dan Web Application untuk project type.
Kemudian klik Next. Untuk Project Name, ketik LoanQuoteUI dan klik Next. {Jika langsung
klik Finish bukan Next maka framework interface web tidak ditambahkan secara otomatis.}
Pada langkah Server and Settings, klik Next bukan Finish
. Pada bagian “Visual Web JavaServer Faces” lakukan cek pada box.
Kemudian pilih Finish. {User interface aplikasi Java atau JavaFX Script dapat digunakan, keduanya didukung oleh NetBeans.}
132
Proyek LoanQuoteUI akan tampak pada panel Projects. Perhatikan bahwa kanvas design Page1.jsp tampak dengan widget palette. Jika palette
tidak tampak maka klik-kanan window, gunakan opsi menu bar Window Palette untuk memunculkan. {Pada proyek ini akan dibangun menggunakan
JSP JavaServer Pages dan JSF JavaServer Faces untuk user interface. } Drag empat Labels dan satu Button dari palette dan drop ke kanvas
Page1.jsp:
Untuk merubah default pada label text, lakukan klik-double dan ketikkan teks yang diinginkan.
Tambahkan tiga Text Fields ke layout di sebelah kanan label.
{Untuk meluruskan teks, klik semua label, kemudian klik-kanan dan gunakan opsi Align. Coba juga gunakan
opsi Align Snap to Grid.}
Gunakan opsi menu bar Window Properties untuk menampilkan panel Properties. Ubah id property dari tiga text fields menjadi :
133
• typeTextField
• amountTextField
• periodTextField
{Ubah nilai id supaya lebih deskriptif dan mudah dalam
pemeliharaan.}
Tambahkan sebuah Label dengan id adalah paymentLabel di sebelah kanan label “Calculated Monthly Payment:”.
Beri nama button menjadi Calculate deengan merubah pada text property pada panel Properties.
Pada tiga data entry textField dan pada label yang menampilkan jumlah pembayaran lakukan, add “binding attribute” dengan klik pada tiap widgets
typeTextField, amountTextField, periodTextField dan paymentLabel dan memilih opsi seperti dibawah ini.
134
Simpan semua pekerjaan dengan klik Save All.
Klik pada kontrol JSP pada bagian panel layout
untuk melihat sintaks JSP yang secara otomatis dibuat didasarkan pada widget yang ditambahkan pada kanvas design. Aksi
“Add Binding Attribute” telah ditambahkan pada sintaks yang disorot berikut ini.
135
Perhatikan bahwa statement binding mengacu pada Page1. Klik pada kontrol Java pada bagian atas panel layout untuk melihat “backing bean” dari
kode Java untuk kelas Page1. Hubungan antara sintaks JSP dan Java backing bean telah dijelaskan oleh spesifikasi JSF.
Klik pada kontrol Design untuk kembali ke mode Design.
6.2 Membuat Web Service Client
