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