BOOK Wiranto Herry Utomo Pemrograman Aplikasi SOA BAB VI

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

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

•

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.

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.

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

Komponen JSF membawa kemampuan dari Java Swing berbasis desktop ke perancangan web UI. Komponen semacam button mempunyai action handlers yang berisi kode yang dieksekusi ketika user berinteraksi dengan

komponen JSF. Kode JSP pada sisi klien untuk melakukan invoke ke kdoe action handler yang berjalan di dalam web container (server- side).

Klien web adalah kode JAX-WS yang dihasilkan untuk melapisi dengan Java / XML marshaling dan unmarshaling yang berkomunikasi antara klien (service consumer) dan server (service provider).

Selanjutnya diperlukan penetapan action handler untuk tombol Calculate sehingga dapat melakukan invoke ke proses bisnis QuoteLoan dan mendapatkan return pembayaran bulanan pada field paymentLabel.

Proses bisnis QuoteLoan tersedia sebagai Web service. Karena itu diperlukan beberapa kode sisi klien untuk memanggil web service. Sehingga akan dibuat klien web service.

NetBeans dapat dengan mudah membuat kode sisi klien untuk memanggil proses bisnis QuoteLoan sebagai web service. Hanya perlu tahu dimana endpoint web services berada. Dengan kata lain, bagaimana proses BPEL “mendengarkan” request SOAP/HTTP?

Untuk menjawabnya, dengan melihat LoanQuoteWSDL yang dibuat untuk melakukan “wrap” proses BPEL sehingga dapat dipanggil via SOAP? WSDL ini dapat berjalan karena telah ditest melalui HomeLoanTestCase.

Kemudian, klik-double pada LoanQuoteWSDL.wsdl pada Process Files untuk QuoteLoan sehingga dapat dilihat endpoint address:

Lihat gambar diatas bahwa soap:address ditetapkan sebagai :

http://localhost:${HttpDefaultPort}/LoanQuoteWSDLService/LoanQuoteWSDLPort

6.3 Menemukan Port JBI Binding Component

Perhatikan bahwa walaupun mengacu pada port tertentu, WSDL masih menggunakan environment variable (${HttpDefaultPort}) yang dibuat Netbeans secara otomatis. LoanQuoteUI merupakan aplikasi web stand-alone dan bukan bagian dari aplikasi komposit. Sehingga, LoanQuoteUI won't mengambil manfaat dari substitusi variabel lingkungan. Karena itu hanya perlu dijawab pertanyaan : Apa port aktual tempat endpoint “mendengarkan” ?

Untuk menjawab pertanyaan tersebut, maka akan ditanyakan pertanyaan lainnya. Dimana kontainer JBI yang mendeploy endpoint SOAP? Jika diketahui nomor port untuk komponen JBI yang menjadi tumpangan endpoint, maka akan diketahui nomor port aktual untuk mengantikan $ {HttpDefaultPort}.

Klik-double Service Assembly pada QuoteLoanApplication untuk menampilkan service assembly pada CASA Editor:

Endpoint direpresentasikan oleh port SOAP WSDL yang dilabeli LoanQuoteWSDLPort. Klik-kanan pada port ini dan pilih Properties:

Dapat dilihat dalam property Component Name bahwa port WSDL port (SOAP endpoint) dideploy pada sun-http-binding JBI component. Komponen binding HTTP merupakan salah satu dari lebih 40 komponen JBI dalam proyek Open ESB.

Setelah diketahui port dari komponen sun-http-binding maka akan diketahui nomor port untuk endpoint web services untuk memanggil proses QuoteLoan.

Untuk menemukan port sun-http-binding component maka pindah ke panel Services dan akses Properties nya:

Perhatikan bahwa Default HTTP Port Number adalah 9080. Sehingga untuk mengakses endpoint SOAP web service: http://localhost:$

{HttpDefaultPort}/LoanQuoteWSDLService/LoanQuoteWSDLPort digunakan URL:

Tambahkan ?wsdl pada bagian akhir the URL dan gunakan web browser untuk melihat endpoints WSDL:

http://localhost:9080/LoanQuoteWSDLService/LoanQuoteWSDLPort?wsdl

Akan terlihat dokumen WSDL yang memverifikasi bahwa endpoint ke QuoteLoan adalah port 9080:

Dengan URL dari endpoint WSDL endpoint, maka akan siap dibangun klien web service.

Pada panel Projects, klik-kanan pada proyek LoanQuoteUI dan pilih opsi New / Other / Web Services / Web Service Client. Klik Next untuk memulai wizard.

Klik radio button WSDL URL. Kemudian paste dalam URL untuk WSDL yang akan ditampilkan:

http://localhost:9080/LoanQuoteWSDLService/LoanQuoteWSDLPort?wsdl

Klik Finish untuk mulai membuat sisi klien

WSDL diakses dan klien Web service muncul pada proyek dibawah Web Service References:

{Perhatikan bahwa web service reference tidak dapat diklik-double. Yang dikerjakan NetBeans adalah mengumpulkan yang diperlukan untuk menghasilkan kode sisi klien JAX-WS untuk melakukan marshal dan unmarshal XML dan Java object.

NetBeans memudahkan dalam menggunakan kode sisi klien tanpa kawatir cara melakukan marshaling dan unmarshaling.}

Akhirnya telah berhasil dibuat kode button handler yang menggunakan klien Web service.

Pada mode Design Page1.jsp, klik-doublepada tombol Calculate untuk menampilkan kode untuk handler yang masih kosong:

Akan ditambahkan beberapa kode untuk memproses klien web service yang baru saja dibuat.

Klik pada bagian kode setelah komentar. Tekan Enter untuk membuat baris kosong.

Pada baris kosong, klik-kanan dan pilih Web Service Client Resources / Call Web Service Operation. Pada window pop-up pilih LoanQuoteWSDLOperation dan pilih OK.

{Web Service Client Resources merupakan opsi terakhir dalam menu pop-up.}

Kode klien untuk mengakses proses QuoteLoan BPEL sebagai web service per interface WSDL akan ditambahkan pada button handler:

Ini akan memberikan kerangka kode yang memungkinkan button handler untuk menangani proses QuoteLoan BPEL melalui panggilan web services. Sekarang perlu diketikkan rincian kodenya.

Ganti keseluruhan button handler dengan mengkopi-paste statemen berikut ini sehingga kode pada button handler akan tampak seperti ini:

// Get port

org.netbeans.j2ee.wsdl.quoteloan.loanquotewsdl.LoanQuoteWSDLPortType port = service.getLoanQuoteWSDLPort();

// Retrieve values in text fields on UI

String loanType = (String) typeTextField.getText(); String amountString = (String) amountTextField.getText(); String periodString = (String) periodTextField.getText(); double amount = Double.valueOf(amountString); int period = Integer.valueOf(periodString);

org.netbeans.xml.schema.loanquoteschema.LoanQuoteInput inputPart = new org.netbeans.xml.schema.loanquoteschema.LoanQuoteInput();

// Populate inputs inputPart.setLoanType(loanType); inputPart.setAmount(amount); inputPart.setPeriod(period);

// Call web service org.netbeans.xml.schema.loanquoteschema.LoanQuoteOutput result = port.loanQuoteWSDLOperation(inputPart);

System.out.println("Result = " + result); // Update UI with web service result

double monthlyPayment = result.getMonthlyPayment();

String monthlyPaymentString = String.valueOf(monthlyPayment); paymentLabel.setValue(monthlyPaymentString);

} catch (Exception ex) { paymentLabel.setValue("Error");

System.out.println("****** " + ex.getMessage()); System.out.println("****** " + ex.getCause()); }

return null; }

{Statemen yang di-bold menunjukkan langkah-langkah sbb :

1. Membangun channel komunikasi

2. Mendapatkan data yang dimasukkan melalui field user interface

3. Bangun data structure yang digunakan komunikasi melalui channel

4. Panggil Web service provider melaluii channel 5. Bangun user interface widget dengan hasil dari

Web service call}

Gunakan reformat Alt-Shift-F to untuk merapikan Java code. Lakukan Save All.

6.4 Deploying Proyek

Lakukan build proyek dengan klik-kanan pada node LoanQuoteUI dan pilih Clean and Build.

{Untuk melakukan deploy aplikasi web, gunakan cara yang sudah dilakukan (klik- kanan dan pilih opsi Deploy).}

Kemudian akan dilakukan deploy aplikasi web sehingga dapat dilakukan test. Untuk deployment sebelumnya, lakukan klik-kanan dan pilih opsi Deploy. Sementari itu, pindah ke GlassFish Admin Console. Hal ini akan memberi kesempatan untuk melihat integrasi antara NetBeans IDE dan GlassFish Enterprise Server.

Pastikan server GlassFish telah aktif.

Untuk memulai deployment, pindah ke panel Services dan invoke GlassFish Admin Console dengan klik-kanan GlassFish V2 dan pilih opsi View Admin Console:

Akan muncul halaman web yang memerlukan otentifikasi. Untuk User Name, ketik: admin

Untuk Password, ketik: adminadmin

Aplikasi LoanQuoteUI merupakan sebuah aplikasi web, sehingga dibawah hirarki aplikasi pada sisi kiri, klik pada node Web Applications. Perhatikan bawha CalculateLoanPayment adalah aplikasi web yang telah dideploy.

Untuk mendeploy aplikasi LoanQuoteUI, klik pada tombol Deploy. Display Deploy Enterprise Applications/ Modules akan muncul.

Pada field Location lakukan browse ke direktori C:\MyTutorial\LoanQuoteUI\dist dan pilih file LoanQuoteUI.war:

Klik pada tombol OK untuk mendeploy file.war. Setelah deployment berakhir, maka daftar aplikasi web yang dideploy akan muncul:

Aplikasi LoanQuoteUI telah siap dilakukan testing.

6.5 Testing User Interface

Selanjutnya akan digunakan aplikasi web LoanQuoteUI untuk menguji proses QuoteLoan BPEL.

Klik-kanan pada node LoanQuoteUI dan pilih Run. Sebuah halaman web akan muncul yang menampilkan interface yang telah didesain.

Ketikkan data pinjaman pada tiga text box, seperti dibawah dan pilih tombol Calculate:

Setelah menekan tombol Calculate jumlah pembayaran harusnya tampak pada text box Calculated Monthly Payment seperti gambar diatas.

Jika muncul “Error” maka cek pada panel output GlassFish V2 untuk pesan error.

{ Ingat bahwa nilai Loan Type adalah case-sensitive sehingga “AUTO” dan “auto” tidak sama. Ingat pula, tidak seperti halaman testing web service, Amount tidak mempunyai desimal.}

// Get port

org.netbeans.j2ee.wsdl.quoteloan.loanquotewsdl.LoanQuoteWSDLPortType port = service.getLoanQuoteWSDLPort();

// Retrieve values in text fields on UI

String loanType = (String) typeTextField.getText(); String amountString = (String) amountTextField.getText(); String periodString = (String) periodTextField.getText(); double amount = Double.valueOf(amountString); int period = Integer.valueOf(periodString);

org.netbeans.xml.schema.loanquoteschema.LoanQuoteInput inputPart = new org.netbeans.xml.schema.loanquoteschema.LoanQuoteInput();

// Populate inputs inputPart.setLoanType(loanType); inputPart.setAmount(amount); inputPart.setPeriod(period);

// Call web service org.netbeans.xml.schema.loanquoteschema.LoanQuoteOutput result = port.loanQuoteWSDLOperation(inputPart);

System.out.println("Result = " + result); // Update UI with web service result

double monthlyPayment = result.getMonthlyPayment();

String monthlyPaymentString = String.valueOf(monthlyPayment); paymentLabel.setValue(monthlyPaymentString);

} catch (Exception ex) { paymentLabel.setValue("Error");

System.out.println("****** " + ex.getMessage()); System.out.println("****** " + ex.getCause()); }

return null; }

{Statemen yang di-bold menunjukkan langkah-langkah sbb :

1. Membangun channel komunikasi

2. Mendapatkan data yang dimasukkan melalui field user interface

3. Bangun data structure yang digunakan komunikasi melalui channel

6.4 Deploying Proyek

Lakukan build proyek dengan klik-kanan pada node LoanQuoteUI dan pilih Clean and Build.

{Untuk melakukan deploy aplikasi web, gunakan cara yang sudah dilakukan (klik- kanan dan pilih opsi Deploy).}

Kemudian akan dilakukan deploy aplikasi web sehingga dapat dilakukan test. Untuk deployment sebelumnya, lakukan klik-kanan dan pilih opsi Deploy. Sementari itu, pindah ke GlassFish Admin Console. Hal ini akan memberi kesempatan untuk melihat integrasi antara NetBeans IDE dan GlassFish Enterprise Server.

Pastikan server GlassFish telah aktif.

Untuk memulai deployment, pindah ke panel Services dan invoke GlassFish Admin Console dengan klik-kanan GlassFish V2 dan pilih opsi View Admin Console:

Akan muncul halaman web yang memerlukan otentifikasi. Untuk User Name, ketik: admin

Untuk Password, ketik: adminadmin

Aplikasi LoanQuoteUI merupakan sebuah aplikasi web, sehingga dibawah hirarki aplikasi pada sisi kiri, klik pada node Web Applications. Perhatikan bawha CalculateLoanPayment adalah aplikasi web yang telah dideploy.

Untuk mendeploy aplikasi LoanQuoteUI, klik pada tombol Deploy. Display Deploy Enterprise Applications/ Modules akan muncul.

Pada field Location lakukan browse ke direktori C:\MyTutorial\LoanQuoteUI\dist dan pilih file LoanQuoteUI.war:

Aplikasi LoanQuoteUI telah siap dilakukan testing.

6.5 Testing User Interface

Selanjutnya akan digunakan aplikasi web LoanQuoteUI untuk menguji proses QuoteLoan BPEL.

Klik-kanan pada node LoanQuoteUI dan pilih Run. Sebuah halaman web akan muncul yang menampilkan interface yang telah didesain.

Ketikkan data pinjaman pada tiga text box, seperti dibawah dan pilih tombol Calculate:

Setelah menekan tombol Calculate jumlah pembayaran harusnya tampak pada text box Calculated Monthly Payment seperti gambar diatas.

Jika muncul “Error” maka cek pada panel output GlassFish V2 untuk pesan error.

{ Ingat bahwa nilai Loan Type adalah case-sensitive sehingga “AUTO” dan “auto” tidak sama. Ingat pula, tidak seperti halaman testing web service, Amount tidak mempunyai desimal.}