Wicket Indicator

Wicket projelerimde, genelde Wicket’ın Ajaxt bileÅŸenlerini kullanıyorum. Böylelikle bir alanı güncellemem gerektiÄŸinde tüm sayfayı güncellemekten kurtulmuÅŸ oluyorum. Tabi durum böyle olunca kullanıcıya bir dönüş yapmak gerekiyor. Kullanıcıya iÅŸleminin gerçekleÅŸmek olduÄŸunu, ilgili alanın birazdan güncellenip iÅŸleminin sonucunu bildirmek gerekiyor.

İşleminin sonucunu bildirmeyi rahatlıkla FeedbackPanel bileÅŸeniyle yapılabilir. Benim sıkıntı duyduÄŸum kısım kullanıya iÅŸlemini yapmakta olduÄŸumu bildirmek. İşte tam bu noktada wicket’ın indicator özelliÄŸi yardımıma koÅŸuyor.

Öncelikle geçmiş örneklerdeki gibi basit bir Web Application oluşturuyoruz. Bu oluşturduğumuz application bizim ana sayfamızı çağırıyor.

Åžimdi wicket’ta bir bileÅŸene indicator özelliÄŸi ekleyebileceÄŸiniz gibi, hazır indicator özelliÄŸi olan bileÅŸenlerde kullanabilirsiniz. Ben bu örnekte IndicatorAjaxLink ve IndicatingAjaxButton bileÅŸenlerini kullanacağım. Sonra ise bir DropDownChoice bileÅŸenine, AjaxFormComponentUpdatingBehavior davranışı ekleyip, her DropDownChoice seçimi deÄŸiÅŸtiÄŸinde bir indicator‘ın çalışmasını saÄŸlayacağım.

IndicatorAjaxLink Kullanımı

Bu bileşeni kullanmak için aşağıdakine benzer bir koda parçası kullanabilirsiniz.


...

add(new IndicatingAjaxLink<String>("indiLink") {

private static final long serialVersionUID = 1950266229701768559L;

@Override
public void onClick(AjaxRequestTarget arg0) {
testMethod();
}
});

...

Ve bu bileşeni kullanırken yazmanız gereken markup


...

<a wicket:id="indiLink">Indicator Ajax Link</a>

...

IndicatingAjaxButton Kullanımı

Bu bileşeni kullanmak için aşağıdakine benzer bir kod ve markup kullanmanız yeterli.


...

Form<Void> testForm = new Form<Void>("testForm");
testForm.add(new IndicatingAjaxButton("indiButton") {

private static final long serialVersionUID = 8622275727240710989L;

@Override
protected void onSubmit(AjaxRequestTarget arg0, Form<?> arg1) {
testMethod();

}
});
add(testForm);

...

Ve Markup…


....

TestForm<br/>
<form wicket:id="testForm">
<button wicket:id="indiButton">Indicator Ajax Button</button>
</form>

...

Burada dikkat etmeniz gereken kısım, IndicatorAjaxButton aslen bir form bileşeni olduğundan önce ilgili form bileşeninide yaratmanız ve markup kısmınızda belirtmeniz gerekiyor.

DropDownChoice Yapısına Indicator Eklenmesi

Bunun için öncelikle AjaxIndicatorAppender sınıfından bahsetmek istiyorum. Bu sınıf yaratıldığında wicket’ın belirlediÄŸi bir lokasyondaki indicator’ı çağırıyor ve ekrana basıyor. Isterseniz kendi oluÅŸturduÄŸunuz bir indicator’ıda yaratabilirisniz. Tek yapmanız gereken AjaxIndicatorAppender sınıfı içinde bulunan getIndicatorUrl() metodu yeniden yazmanız. Bunu yaparken wicket tarafından geçerli olacak bir adres vermeniz yeterli olacaktır.

Åžimdi ise AjaxFormComponentUpdatingBehavior sınıfından bahsetmek istiyorum. Bu sizin için bileÅŸen üzerindeki olayları yakalıyor. Biz bu örnekte DropDownChoice’in seçili olan kısmının deÄŸiÅŸimini yakalayacağız.


...

private String selected;
private AjaxIndicatorAppender appender;

...

List<String> choices = new ArrayList<String>();
choices.add("choice 1");
choices.add("choice 2");
choices.add("choice 3");
selected = "choice 2";
DropDownChoice<String> choice = new DropDownChoice<String>(
"dropDownChoice", new PropertyModel<String>(this, "selected"),
choices);
choice.add(new AjaxFormComponentUpdatingBehavior("onchange") {

private static final long serialVersionUID = -965699876933426907L;

@Override
protected void onUpdate(AjaxRequestTarget arg0) {
System.out.println("SELECTED CHOICE CHANGED: " + selected);
testMethod();
}

@Override
protected String findIndicatorId() {
return appender.getMarkupId();
}
});
appender = new AjaxIndicatorAppender();
choice.add(appender);
add(choice);

...


Test Choice
<select wicket:id="dropDownChoice"></select>

DropDownChoice kısmında farkettiyseniz, AjaxIndicatorAppender sınıfımı, DropDownChoice bileÅŸenime ekliyorum. EÄŸer siz Indicator‘ın DropDownChoice’inizde deÄŸilde baÅŸka bir yerde görülmesini istiyorsanız, mesela Sayfada, AjaxIndicatorAppender sınıfınızı, sayfanıza eklemeniz gerekmektedir. Tabi sayfanıza eklediÄŸinizde normal bir bileÅŸen gibi davranılacağından en son bileÅŸeninizin peÅŸi eklemesi gibi durumlarda söz konusu. EÄŸer sayfanıza eklerseniz CSS kısmıyla uÄŸraşırken dikatli olmanızı öneririm.

Belirtmekte fayda var. Bu örnek wicket 1.4.15  versiyonuyla gerçeklenmiştir. Aslında wicket 1.5 çıktı. Yakın zamanda kütüphanemi güncellesem çok iyi olacak.

GitHub Adresi

Bu örneğin tam ve çalışır haline aşağıdaki GitHub adresinden erişebilirisniz.

https://github.com/bhdrkn/Wicket-Examples

End Of Line