Wicket Modal Window
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<String>("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.
End Of Line