4.3 Membangun Web Service
4.4.4 Membangun Interface Browser
Dengan menempatkan web service pada akhir proyek, akan dibuat sebuah service yang dapat diakses secara universal. Semua consumer butuh melakukan pengiriman pesan SOAP XML dan mengirim kembali hasil dalam pesan SOAP XML. Pada proyek ini, akan dibangun user interface berbasis browser yang menyediakan client universal untuk menjalankan web service.
{Kita akan menaruh user interface dalam proyek baru sebab jenis proyek yang berbeda dari proyek Java dan EJB telah dibuat diawal. Pada saat ini, akan dibuat proyek apalikasi web. }
Buat proyek baru untuk client berbasis browser dengan memilih File / New Project. Jendela wizard New Project akan muncul.
Untuk Categories, pilih Java Web dan untuk Projects, pilih Web Application dan klik Next
Untuk Project Name, ketik GreeterWebProject dan klik Next.
Klik Next lagi untuk menerima default pada Server dan Context Path.
Klik pada check box untuk memilih Visual Web JavaServer Faces. Klik Finish. Wizard akan lengkap dan GreeterWebProject akan tampak pada panel Projects.
{NetBeans membuat miudah dalam menggunakan teknologi JavaServer Pages (JSP) JavaServer Faces (JSF) untuk membuat user interface berbasis browser. JSP adalah komponen yang menghasilkan halaman user interface untuk aplikasi web. Komponen JSF diguankan dalam halaman JSP untuk menyediakan visual widgets (seperti text fields dan buttons).}
Buat user interface berbasis dengan klik-kanan pada GreeterWebProject dan pilih New / Visual Web JSF Page. Jendela wizard akan muncul.
Untuk File Name, ketik GreeterWebUI dan pilih Finish. Jendela wizard akan tertutup, file GreeterWebUI.jsp akan ditambahkan ke hirarki proyek dan kanvas desain akan muncul.
Dari palette, lakukan drag-drop widget Label ke kanvas. Ubah label menjadi Name:
Drag-drop widgetText Field dari palete ke kanvas. Tempatkan di sebelah kanan Name:
Pada panel Properties, ubah property id menjadi nameTextField Atur property columns menjadi 30
Drag-drop widget Button ke kanvas, dan tempatkan dibawah text field.
Ubah label tombol (Text property) menjadi Greet Drag-drop Text Field lain ke kanvas dibawah tombol.
Ubah property text field – untuk id, ketikkan greetingTextField dan untuk columns, ketik 120
Atur ulang komponen sehingga layout akan tampak seperti ini:
Simpan dengan melakukan Save All.
Klik pada pilihan JSP pada bagian atas kanvas untuk melihat kode JavaServer Pages yang dibuat NetBeans didasarkan pada layout.
Sintaks JSP akan menetapkan bagaimana HTML dihasilkan dan dikirim ke browser.
{Perlu dilakukan klik-kanan pada kanvas dan mengeksplorasi pilihan Align. Snap to Grid juga berguna. Jika tidak menginginkan text field dapat diubah, maka lakukan disabled property untuk greetingTextField.}
Klik pada pilihan Java view (sebelah JSP view) untuk melihat kode Java pada sisi server yang dihasilkan NetBeans. Kode ini akan merespon interaksi user dari halaman HTML.
Membuat Klien Web Service
Seperti yang telah dikerjakan pada Java user interface, masih diperlukan lojik untuk menangani action dari tombol Greet.
Kembali ke view Design dengan klik pada kendali Design.
Klik-double pada tombol Greet pada kanvas untuk menampilkan porsi penanganan action dari kode java. Pada posisi di dalam button1_action() method:
Pada saat user melakukan klik tombol Greet, maka akan dipanggil web service yang dibuat pada proyek terakhir ini. Untuk memanggil web service, maka perlu dibuat kode di sisi client yang dapat mengakses web services melalui SOAP yang dikirim lewat HTTP dan menerima kembali respon.
Kode klien dari web service akan dipanggil dari dalam button handler, tetapi pertama kali perlu dibuat kode nya dulu. Kemudian tinggalkan method button1_action() dan buat klien yang akan memanggil method tersebut.
Pada node GreeterWebProject pada panel Projects, klik-kanan dan pilih New / Other / Web Services / Web Service Client. Klik Next. Jendela wizard akan muncul.
Pada field Project, gunakan button Browse untuk menavigasi GreetingService pada GreeterEJBProject, pilih dan klik OK.
Klik Finish untuk mengabaikan wizard.
Setelah pause sebentar, akan terlihat bahwa kode klien web service client ditambahkan pada proyek:
{Perhatikan tab Retrieve Output pada jendela Output untuk melihat web service diakses dank doe klien web service di-generated.
Akan terlihat bahwa GreetingService ditambahkan dibawah node Web Service References pada hirarki GreeterWeb Project.}
Menambah Event Handler Behavior
Sekarang, telah ada kode klien untuk meminta dari button action handler, perhatikan kembali jendela Java editor yang menampilkan kode untuk halaman GreeterWebUI.jsp.
Posisikan kursor edit dibawah dua baris komentar pada method button1_action() dan tekan Enter untuk membuat baris kosong baru.
Klik-kanan pada baris kosong dan pilih Web Service Client Resources / Call Web Service Operation. Pilih Select Operation agar jendela wizard Invoke muncul.
Kemudian kode untuk melakukan invoke klien web service akan ditambahkan pada method button1_action().
Gunakan Alt-Shift-F untuk melakukan reformat kode, hapus dua baris komentar pada bagian atas, maka method akan terlihat seperti ini:
{Sekarang ada kerangka yang dapat memanggil sisi server web service. Kita perlu mengisi sisa dari kode event handler sehingga dapat memanggil dengan data yang diperlukan (name) dan menggunakan data (greeting).}
Lakukan penyimpanan dengan Save All.
Ubah kode pada handler sehingga method tampak seperti ini:
Ini merupakan keseluruhan kode di dalam blok try yang dapat dicopy-paste:
greeting.GreetingService port = service.getGreetingServicePort(); String name = (String) nameTextField.getText();
String greeting = port.greet(name); greetingTextField.setText(greeting); System.out.println("Result = " + greeting);
{Kode tersebut melakukan:
-
Dapatkan nilai yang dimasukkan ke dalam field Name pada UI-
memanggil web service yang melewatkan nilai nama.-
Meletakkan hasil greeting dalam field user interface.-
mengirim greeting ke log file untuk tujuan debugging.}Gunakan Alt-Shift-F untuk melakukkan reformat kode sehingga lebih dapat tertata.
Akan terlihat ikon pada margin kiri yang menunjukkan masalah. Jika mouse digeser diatasnya, akan terlihat bahwa editor tidak dapat menemukan references untuk dua text fields: nameTextField dan greetingTextField. Selanjutnya ini akan diperbaiki.
Klik pada tab Design untuk kembali ke kanvas layout. Tampak ada masalah:
{Masalahnya terletak pada widget dalam layout JSP yang tidak berkaitan dengan representasi dalam kode Java dari JSF's “backing bean”}.
Ini berarti bahwa kanvas layout tidak dapat didisplay ulang karena ada sesuatu yang salah dengan kode Java.
Kembali ke view Java dan beri tanda comment (//) pada empat baris kode pada blok try:
Fitur Add Binding Attribute menambahkan kode java sehingga kita dapat mempunyai referensi yang berkaitan dengan objek seperti nameTextField dan greetingTextField yang direferensi dalam layout JSP. Misalnya, untuk text box nameTextField, baris berikut perlu ditambahkan:
private TextField nameTextField = new TextField();
public TextField getNameTextField() {
return nameTextField; }
public void setNameTextField(TextField tf) {
}
Kembali lagi ke view Design dan layout tampak seperti sebelumnya.
Klik kanan pada nameTextField (sebelah label Name) pada kanvas layout dan pilih Add Binding Attribute dari menu pop-up.
Klik-kanan pada greetingTextField (di bawah button Greet) dan pilih Add Binding Attribute.
Kembali ke view Java dan hilangkan tanda comment pada ke empat baris diatas. Ingat bahwa setelah ini tidak lagi ada masalah dengan kode.
Lakukan penyimpanan Save All.
Menguji Aplikasi Web
Lakukan kompile pada kode dengan melakukan klik-kanan pada GreeterWebProject pada panel Projects dan pilih Clean and Build.
Deploy aplikasi web ke server aplikasi dengan melakukan klik-kanan pada GreeterWebProject dan pilih Deploy.
{Perhatikan panel Output untuk pesan sebagai hasil dari Clean and Build and Undeploy and Deploy.
Clean and Build menghasilkan pesan error yang menunjukkan direktori tidak dapat dihapus. Untuk itu lakukan Build saja dan bukan Clean and Build.}
Lakukan test pada user interface berbasis browser dengan melakukan klik-kanan pada GreeterWebProject dan pilih Run.
Browser web akan terlihat dan tampak sebagai halaman kosong. Apa yang terjadi?
Seperti pengalaman sebelumnya, masalah ini merupakan masalah default pada proyek. Karena ini merupakan proyek web, ini merupakan halaman JSP. Selanjutnya akan dicek apa default halaman JSP untuk GreeterWebProject.
Programer Java EE sudah paham bahwa halaman yang pertama kali ditampilkan adalah halaman yang ditetapkan pada seting welcome file pada deployment descriptor.
Klik-double pada node web.xml dibawah hirarki
GreeterWebProject / Web Pages / WEB-INF pada jendela Projects. View design dari deployment descriptor akan ditampilkan. Klik pada tab Pages:
Lihat bahwa field Welcome Files diset untuk faces/Page1.jsp dan ini bukan halaman yang diinginkan Dan ini adalah default yang
disediakan ketika membuat aplikasi web baru. Halaman JSP yang dibuat adalah GreeterWebUI.jsp dan tampak pada bagian Web Pages dari proyek:
Selanjutnya gunakan view XML untuk membuat halaman GreeterWebUI.jsp sebagai halaman default yang ditampilkan pertama kali ketika user mengakses aplikasi. Gunakan fitur find (Ctrl-F) pada view XML secara cepat dan lakukan scroll ke area welcome-file-list dari deployment descriptor buat menjadi seperti ini:
{Untuk memudahkan melakukan copy dan paste, disini nilai baru: faces/GreeterWebUI.jsp}
Lakukan penyimpanan dengan Save All.
Sekarang, aplikasi web sudah berubah sehingga perlu di deploy ulang.
Setelah berhasil melakukan deploy ulang, coba jalankan lagi GreeterWebProject
Halaman web yang diharapkan muncul sebagai halaman default. Ketik nama di text field sebelah kanan Name.
Klik button Greet dan terlihat greeting dihasilkan dari web services. Ini terlihat di bagian greetingTextField karena button action handler:
Selanjutnya lihat kode pada button action handler. Komentar pada akhir baris mengingatkan tentang cara web service dapat dijalankan:
greeting.GreetingService port = service.getGreetingServicePort(); // Get access to web service
String name = (String) nameTextField.getText(); // Get the value in the name field
String greeting = port.greet(name);
// Use web service client to get the greeting from web service greetingTextField.setText(greeting);
// Insert the returned greeting into the text field System.out.println("Result = " + greeting);
// A debug statement to dump a message to the GlassFish log
Jika melakukan klik pada tab GlassFish V2 pada panel Output panel pada bagian bawah jendela NetBeans, akan terlihat hasil dari statemen System.out.println.
User interface berbasis web dijalankan pada server berbasis Greeter POJO menggunakan berbagai layers. Selanjutnya akan ke bagian Ringkasan dan akan direview berbagai layer tersebut.