Wicket + JQuery = JQWicket

Wicket bildiğiniz üzere JavaScipt kısmı yoğun olan bir framework. Kendi içerisinde bir çok bileşeni olmasına rağmen bir web uygulaması tasarlarken bu bileşenlerin hepsi yeterli olmuyor. Yeterli olmadığı yerde proje içerisinde JQuery bileşenleri ya da Javascipt’ler kullanmaya başlıyoruz. Bu projemizi istediğimiz düzeye getirse de ne yazıkki yeniden kullanılabilir bir kod üretmiş olmuyoruz. Yazdıklarımız projede kaldığı gibi diğer projelerde de aynı sorunla karşılaşıyoruz. JQWicket ise kendi içinde barındırdığı güzel ve çok kullanılan JQuery bileşenleri sayesinde bizi proje içerisinde jqery ve javascript yazmaktan büyük ölçüde kurtarıyor. Barındırdığı bileşenlerin başında, JQuery UI, FancyBox, Google Map ve CK Editor geliyor.

Kurulum

Öncelikle Maven ile Wicket projemizi oluşturuyoruz. Ardından ise JQWicket bağımlılığımızı pom.xml dosyamıza kaydediyoruz. Bunun için öncelikle JQWicket’ın kütüphanesini yayımladığı siteyi pom.xml dosyamıza kaydediyoruz.

pom.xml

<pre><repositories>
...
<repository>
<id>googlecode</id>
<url>http://jqwicket.googlecode.com/svn/m2-repo/releases/</url>
</repository>
...
</repositories></pre>

Ardından ise JQWicket bağımlılığımızı kaydediyoruz.

pom.xml

<pre><dependencies>
...
<!-- JQWicket DEPENDENCIES -->
<dependency>
<groupId>com.google.code.jqwicket</groupId>
<artifactId>jqwicket</artifactId>
<version>0.8</version>
</dependency>
...
</dependencies></pre>

Burdan sonra tek yapmamız gereken gerekli *.css ve *.js dosyalarını yüklemek kalıyor. Test için kendi sitelerinde kullandıkları ayarları kullanabilirsiniz. Fakat profesyonel birşey yapacaksanız *.css dosyalarını kendiniz oluşturmalısınız. Kendinizin bunu nasıl oluşturacağızıda birazdan anlatacağım.

Gerekli dosyaların eklenmesi için wicket uygulamamızın yani WebApplication sınıfından türemiş uygulamanın, genelde WicketApplication sınıfı olarak geçmekte, init() metodunun içerisine aşağıdaki satırları ekliyoruz.

WicketApplication.java


@Override
public void init() {
super.init();
...

JQContributionConfig config = new JQContributionConfig();
config.withDefaultJQueryUi();
getComponentPreOnBeforeRenderListeners().add(
new JQComponentOnBeforeRenderListener(config));

...
}

Bundan sonra istediğiniz JQWicket bileşenini ekleyip kullanabilirsiniz. JQWicket bileşenlerinin nasıl eklendiğini ve nasıl kullanıldığını JQWicket Demo sayfasından öğrenebilirsiniz.

Bu arada belirtmekte fayda var, JQWicket sayfasındaki kurulum bilgileri biraz eski olduğundan, wicket 1.5 ile tam olarak çalışmıyorlar. Güncellenmeleri gerekiyor.

CSS ve JS Sınıflarının Eklenmesi

JQWicket genel olarak JQuery’nin UI bileşenini temel alıyor. Tüm renklendirmeler ve boyutlandırmalar onu temel  alıyor. Bundan dolayı eğer temayı değiştirmek isterseniz JQuery UI‘den değiştirebilirsiniz. Burada sadece init() fonksiyonunun içi biraz değişiyor. Geri kalan yapılan işlemler aynı.

Örnek olması açısından indirdiğimiz temadan çıkardığımız dosyaların *.js olanlarını js isimli bir klasöre ve *.css olanları css isimli bir klasöre çıkardığımızı varsayalım. Bu bilgiler ışığında WicketApplication içersiindeki init fonksiyonumuza aşağıdakini eklemeliyiz.

WicketApplication.java


@Override
public void init() {
super.init();
...

JQContributionConfig config = new JQContributionConfig(
"http://localhost:8080/js/jquery-1.7.1.min.js")
.withJQueryUiJs(
"http://localhost:8080/js/jquery-ui-1.8.17.custom.min.js")
.withJQueryUiCss(
"http://localhost:8080/css/jquery-ui-1.8.17.custom.css");

getComponentPreOnBeforeRenderListeners().add(
new JQComponentOnBeforeRenderListener(config));

...
}

Son olarak burada eklediğimiz başlıkların html dosyalarımıza eklenmesi için öncellikle JQWicket bileşenlerini eklememiz gerekecek. Aksi halde bu başlıklar sayfalarımıza yüklenmeyecek.

Kaynaklar:

End Of Line