Wicket Modal Window

04 Kasım 2011
Programlama Wicket
No Comments

Wicket Uygulaması geliştirirken, sıklıkla ayrı ufak pencerelere ihtiyaç duyuyor insan. Özellikle Wizard tipi bileşenler oluşturmaya kalktığınızda, oluşturduğunuz bu Wizard‘ların ayrı bir pencerede görüntülenmesini istiyordum. Bunun içinde en iyi yol ModalWindow isimli wicket bileşeni.

Bu güzel ve kullanışlı Wicket bileşenini kullanırken bir çok hatalarla karşılaştım. Farklı farklı yollarla bu bileşeni yaratıp farklı farklı yollarda farklı farklı hatalar aldım. Şimdi ise elimden geldiğince bu bileşenin en kolay ve en kullanışlı şekilde nasıl oluşturulacağına anlatmaya çalışacağım.

Wicket Projesi

Öncelikle en basitinden bir Wicket projesi oluşturuyoruz. Ben bunu alışık olduğum şekilde, bir web aplicaition ve onun yönlendirdiği bir ana sayfa olarak yapacağım.

Dynamic Web Projemizi oluşturduktan sonra ilk klasımızı oluşturuyoruz.

SimpleWebApplication.java


package blg.bhdrkn.simple.application;

import org.apache.wicket.Page;
import org.apache.wicket.protocol.http.WebApplication;

import blg.bhdrkn.wordpress.pages.MainPage;

public class SimpleWicketApplication extends WebApplication{

@Override
public Class<? extends Page> getHomePage() {
return MainPage.class;
}

}

Ardından web.xml dosyamızı aşağıdaki gibi ayarlıyoruz.

web.xml


<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID" version="3.0">
<display-name>Wicket ModalWindow Example</display-name>
<filter>
<filter-name>ApplicationFilter</filter-name>
<filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>
<init-param>
<param-name>applicationClassName</param-name>
<param-value>blg.bhdrkn.simple.application.SimpleWicketApplication</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>ApplicationFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>

ModalWindow Yapısında Gösterilecek Panel

ModalWindow bileşeni yartılırken içine başka bir bileşeni içerik olarak yükleyebileceğiniz gibi, sıfırdan bir sayfa da yükleyebilirsiniz. Kaynak kodlarına iki koduda koyacağım. Fakat benim tavsiyem bir panelin içerik olarak ModalWindow klasımıza yükleniz. Bu hem panelin kullanılabilirliğini arttırıyor hem de sayfa kullanımında karşınıza çıkacak sorunlardan sizi kurtarıyor.

Sayfa kullanırken karşılaştığım en garip hata, bir form submit ettiğinizde sizi sayfadan terk etmeye zorluyor. Bu eğer bir bilgi göstermek yerine kullanıcıdan girdi almak için kullanacaksanız gerçekten çok sinir bozucu olabiliyor. Bu durumu aynı formu panel içinde kullanarak ve içeriğe yükleyerek kurtulabiliyorsunuz.

Şimdi ModalWindow içinde kullanacağımız panel yapısına bakalım. Genel olarak panelde çok birşey olmayacak. Sadece modal window’un düzgün açıldığını göstermek için bir Label bileşeni ekleyeceğim.

PanelForModalWindow.java


package blg.bhdrkn.wordpress.panels;

import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.panel.Panel;

public class PanelForModalWindow extends Panel{

private static final long serialVersionUID = -7901234959122172282L;

public PanelForModalWindow(String id) {
super(id);
createInformationLabel();
}

private void createInformationLabel() {
add(new Label("informationLabel", "*** Modal Window Opened OK! ***"));
}
}

PanelForModalWindow.html


<wicket:panel>
<div wicket:id="informationLabel"></div>
</wicket:panel>

Panel için kaynak kodunu ve Markup kodunu verdikten sonra, sıra bu paneli kullanacak ModalWindow klasımızı yaratmaya geldi.

MyModalWindow.java


package blg.bhdrkn.wordpress.modal;

import org.apache.wicket.Page;
import org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow;
import org.apache.wicket.markup.html.WebPage;

import blg.bhdrkn.wordpress.panels.PanelForModalWindow;

public class MyModalWindow extends ModalWindow {

private static final long serialVersionUID = -4132592600685752985L;

private PanelForModalWindow panelForModalWindow;

public MyModalWindow(String id) {
super(id);
panelForModalWindow = new PanelForModalWindow(this.getContentId());
setContent(panelForModalWindow);

// Modal Window Olustururken Page'te kullanilabilir.
// Fakat Form submit edildiginde sorun cikarabiliyor
// this.setPageCreator(new PageCreator() {
//
// @Override
// public Page createPage() {
// return new AWebPage();
// }
// });
}

}

Tamin edeceğiniz üzere ModalWindow sınıfımız için Markup kısmına gerek yok.

Şimdi ise AnaSayfamızda bu ModalWindow yapımızı bir AjaxLink üzerinden çağıralım. Normal Link bileşeni değilde AjaxLink bileşeni kullanmamın sebebi, ModalWindow bileşeninin show metodunu çağırırken içerisine AjaxRequest göndermemiz gerekiyor.

MainPage.java


package blg.bhdrkn.wordpress.pages;

import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.AjaxLink;
import org.apache.wicket.markup.html.WebPage;

import blg.bhdrkn.wordpress.modal.MyModalWindow;

public class MainPage extends WebPage{

private MyModalWindow myModalWindow;

public MainPage() {
createAjaxLink();
createModalWindow();
}

private void createAjaxLink() {
add(new AjaxLink&lt;String&gt;("link"){

private static final long serialVersionUID = -4317039855431131783L;

@Override
public void onClick(AjaxRequestTarget arg0) {
System.out.println("onclick");
myModalWindow.show(arg0);
}

});
}

private void createModalWindow() {
myModalWindow = new MyModalWindow("myModalWindow");
add(myModalWindow);
}
}

Şimdi ise Ana Sayfamız için Markup kısmını oluşturalım.

MainPage.html


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ModalWindow Example</title>
</head>
<body>
<a wicket:id="link">Show modal window</a>
<div wicket:id="myModalWindow"></div>
</body>
</html>

Şimdi projemizi derleyip çalıştırdığımızda sorun yaşamadan ModalWindow umuzu görebilmiş olmamız gerekiyor.

Ayrıca belirtmekte fayda var. Ben bu örneği wicket 1.4.15 versiyonunu, Apache Tomcat 7.0 altında çalıştırıyorum. Geliştirme ortamı olarakta Eclipse Helios kullanıyorum.

GitHub Adresi

Son olarak projeye tam olarak erişebilmeniz için GitHub adresini veriyorum. Bu repoda sadece bu örneğin değil, bu blog içerisinde anlattığım tüm wicket örneklerini içeriyor.