Pengantar Kerangka Gawang

1. Ikhtisar

Wicket adalah framework berorientasi komponen web sisi server Java yang bertujuan untuk menyederhanakan pembuatan antarmuka web dengan memperkenalkan pola yang diketahui dari pengembangan UI desktop.

Dengan Wicket memungkinkan untuk membangun aplikasi web hanya dengan menggunakan kode Java dan halaman HTML yang sesuai dengan XHTML. Tidak perlu Javascript, atau file konfigurasi XML.

Ini memberikan lapisan di atas siklus permintaan-respons, melindungi dari bekerja pada tingkat rendah dan memungkinkan pengembang untuk fokus pada logika bisnis.

Pada artikel ini, kami akan memperkenalkan dasar-dasar dengan membangun aplikasi icket HelloWorld W , diikuti dengan contoh lengkap menggunakan dua komponen bawaan yang saling berkomunikasi.

2. Penyiapan

Untuk menjalankan proyek Wicket, mari tambahkan dependensi berikut:

 org.apache.wicket wicket-core 7.4.0 

Anda mungkin ingin memeriksa versi terbaru Wicket di gudang Maven Central, yang pada saat Anda membaca mungkin tidak sama dengan yang digunakan di sini.

Sekarang kami siap untuk membangun aplikasi Wicket pertama kami.

3. Gawang HelloWorld

Mari kita mulai dengan membuat subclass kelas WebApplication Wicket , yang, setidaknya, memerlukan penggantian metode Kelas getHomePage () .

Gawang akan menggunakan kelas ini sebagai titik masuk utama aplikasi. Di dalam metode, cukup kembalikan objek kelas dari kelas bernama HelloWorld:

public class HelloWorldApplication extends WebApplication { @Override public Class getHomePage() { return HelloWorld.class; } }

Wicket lebih menyukai konvensi daripada konfigurasi. Menambahkan halaman web baru ke aplikasi memerlukan pembuatan dua file: file Java dan file HTML dengan nama yang sama (tetapi ekstensi berbeda) di bawah direktori yang sama. Konfigurasi tambahan hanya diperlukan jika Anda ingin mengubah perilaku default.

Di direktori paket kode sumber, pertama-tama tambahkan HelloWorld.java :

public class HelloWorld extends WebPage { public HelloWorld() { add(new Label("hello", "Hello World!")); } }

lalu HelloWorld.html :

Sebagai langkah terakhir, tambahkan definisi filter di dalam web.xml:

 wicket.examples  org.apache.wicket.protocol.http.WicketFilter   applicationClassName  com.baeldung.wicket.examples.HelloWorldApplication   

Itu dia. Kami baru saja membuat kode aplikasi web Wicket pertama kami.

Jalankan proyek dengan membuat file perang , ( paket mvn dari baris perintah) dan terapkan pada penampung servlet seperti Jetty atau Tomcat.

Mari akses // localhost: 8080 / HelloWorld / di browser. Halaman kosong dengan pesan Hello World! akan muncul.

4. Komponen Gawang

Komponen di Wicket adalah triad yang terdiri dari kelas Java, markup HTML, dan model. Model adalah fasad yang digunakan komponen untuk mengakses data.

Struktur ini menyediakan pemisahan perhatian yang bagus dan dengan memisahkan komponen dari operasi yang berpusat pada data, meningkatkan penggunaan kembali kode.

Contoh berikut ini menunjukkan cara menambahkan perilaku Ajax ke komponen. Ini terdiri dari halaman dengan dua elemen: menu dropdown dan label. Ketika pilihan dropdown berubah, label (dan hanya label) yang akan diperbarui.

Isi file HTML CafeSelector.html akan minimal, dengan hanya dua elemen, menu tarik-turun, dan label:

Address: address

Di sisi Java, mari buat label:

Label addressLabel = new Label("address", new PropertyModel(this.address, "address")); addressLabel.setOutputMarkupId(true);

Argumen pertama dalam konstruktor Label yang cocok dengan wicket: id yang ditetapkan dalam file HTML. Argumen kedua adalah model komponen, pembungkus untuk data yang mendasari yang disajikan dalam komponen.

The setOutputMarkupId metode membuat memenuhi syarat komponen untuk modifikasi melalui Ajax. Sekarang mari buat daftar dropdown dan tambahkan perilaku Ajax ke dalamnya:

DropDownChoice cafeDropdown = new DropDownChoice( "cafes", new PropertyModel(this, "selectedCafe"), cafeNames); cafeDropdown.add(new AjaxFormComponentUpdatingBehavior("onchange") { @Override protected void onUpdate(AjaxRequestTarget target) { String name = (String) cafeDropdown.getDefaultModel().getObject(); address.setAddress(cafeNamesAndAddresses.get(name).getAddress()); target.add(addressLabel); } });

Pembuatannya mirip dengan label, konstruktor menerima id wicket, model dan daftar nama kafe.

Kemudian AjaxFormComponentUpdatingBehavior ditambahkan dengan metode callback onUpdate yang memperbarui model label setelah permintaan ajax dikeluarkan. Terakhir, komponen label ditetapkan sebagai target penyegaran.

Terakhir, komponen label ditetapkan sebagai target penyegaran.

Seperti yang Anda lihat semuanya adalah Java, tidak ada satu baris Javascript yang diperlukan. Untuk mengubah tampilan label, kami hanya memodifikasi POJO. Mekanisme modifikasi objek Java yang diterjemahkan menjadi perubahan di halaman web terjadi di balik layar dan tidak relevan bagi pengembang.

Wicket menawarkan sekumpulan besar komponen yang mendukung AJAX di luar kotak. Katalog komponen dengan contoh langsung tersedia di sini.

5. Kesimpulan

Dalam artikel pengantar ini, kami telah membahas dasar-dasar Wicket kerangka web berbasis komponen di Java.

Wicket menyediakan lapisan abstraksi yang bertujuan untuk menghilangkan kode pipa.

Kami telah menyertakan dua contoh sederhana, yang dapat ditemukan di GitHub, untuk memberi Anda gambaran seperti apa pengembangan dengan kerangka kerja ini.