Home Tutorials Wicket Modal Panel example in Wicket

Related Tutorials


 
 

Share on Google+Share on Google+

Modal Panel example in Wicket

Advertisement
Modal Panel is like a container that blocks the operation of base page when the modal panel is open.

Modal Panel example in Wicket

     

Modal Panel is like a container that blocks the operation of base page when the modal panel is open. This can be used to create a good GUI application. Here in this section of Wicket tutorial we will use the modal panel to show images in the separate modal panel and in large size.

 In this example we have created these following class files and corresponding to it there are HTML files as well.

  1. ModalApplication.java :- It will call Modal.class
  2. Modal.java :- creates links and modal components which are shown by using the ModalPage1 and ModalPage2
  3. Modal.html :- creates html page which is used to open modal pages.
  4. ModalPage1.java :- creates modal page to show content of first modal window
  5. ModalPage2.java :- creates modal page to show content of another modal window
  6. ModalPage1.html
  7. ModalPage2.html

ModalApplication.java

package com.roseindia.wicket;

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

public class ModalApplication extends WebApplication{
  public ModalApplication(){  
  
  }  
  public Class getHomePage(){
  return Modal.class;
  }
}

ModalApplication extends WebApplication and calls Modal class. Here is the Modal class as follows:

Modal.java

package com.roseindia.wicket;

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

public class Modal extends WebPage
{
  public Modal()
  {
 final ModalWindow modal1;
  add(modal1 = new ModalWindow("modal1"));

  modal1.setPageMapName("modal-1");
  modal1.setCookieName("modal-1");
  modal1.setPageCreator(new ModalWindow.PageCreator()
  {
  public Page createPage()
  {
  return new ModalPage1(Modal.this, modal1);
  }
  });
  
  add(new AjaxLink("showModal1")
  {
  public void onClick(AjaxRequestTarget target)
  {
  modal1.show(target);
  }
  });
  
  final ModalWindow modal2;
  add(modal2 = new ModalWindow("modal2"));

  modal2.setPageMapName("modal-2");
  modal2.setCookieName("modal-2");
  modal2.setPageCreator(new ModalWindow.PageCreator()
  {
  public Page createPage()
  {
  return new ModalPage2(Modal.this,modal2);
  }
  });
  
  add(new AjaxLink("showModal2")
  {
  public void onClick(AjaxRequestTarget target)
  {
  modal2.show(target);
  }
  });
  
}

Modal.java extends WebPage and creates two ModalWindows and these are shown on the screen when request for them is generated by clicking on the ajax links by their id's "showModal1" and "showModal2". Corresponding to Modal class its HTML file is as follows:

Modal.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title>Wicket Modal Page View</title>
  <style> 
  body img:hover{
  height:60;
  width:60
  vertical-align:middle;
 }
  .borderedHeader {
 background: #F87D0E;
 color: blue;
 font-weight: bold;
 border: solid #F5F2AD;
 border-width: medium;
 padding: 2px 2px 2px 6px;
 margin: 2px;
 text-align:center;
  }
  .borderedBlock {
 background: #DEDEDE;
 color: blue;
 font-weight: bold;
 border: solid #E9601A;
 border-width: thin;
 padding: 2px 2px 2px 6px;
 margin: 2px;
  }
  
  </style>
 \<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <div class=" borderedHeader">
  Wicket Modal Panel example
  </div>
 <div class=" borderedBlock">
   Click on Images to view them separately.
   <p>
  <div wicket:id="modal1" >Beach1</div>
  <a wicket:id="showModal1">
  <img  src="images/beach1icon.gif" width="50" height="50"/>
  </a>
  <div wicket:id="modal2">Beach2</div>
  <a wicket:id="showModal2">
  <img src="images/beach2icon.gif" width="50" height="50" />
  </a>  
  </p>
  </div>
</html>

ModalPage1.java

package com.roseindia.wicket;

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

public class ModalPage1 extends WebPage{
  public ModalPage1(Modal modal,ModalWindow modalwindow){  
  }
}

ModalPage1.html

<html>
  <head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
  <img src="images/beach1.gif"/>  
  </body>
</html>

ModalPage2.java

package com.roseindia.wicket;

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

public class ModalPage2 extends WebPage{
  public ModalPage2(Modal modal,ModalWindow modalwindow){  
  }
}

ModalPage2.html

<html>
  <head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
  <img src="images/beach2.gif"/>  
  </body>
</html>

One most important thing is to make entry of ModalApplication class file into the XML file web.xml following is the code fragments of web.xml file.

<filter>
<filter-name>ModalApplication</filter-name>
<filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>
   <init-param>
  <param-name>applicationClassName</param-name>
  <param-value>com.roseindia.wicket.ModalApplication</param-value>
   </init-param>
  <init-param>
   <param-name>debug</param-name>
   <param-value>2</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>ModalApplication</filter-name>
  <url-pattern>/wicket/modal/*</url-pattern>
</filter-mapping>

To run this example start your web server and type the following URL on to web browser address bar:
  http://localhost:8080/WicketExample/wicket/modal

Output:

When you will click on the images icon then it will show that image in the Modal Panel.

Download Source Code

     

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: October 7, 2008

Related Tutorials

Discuss: Modal Panel example in Wicket  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:1
surendranath
December 30, 2011
error

im getting this error please help meDec 30, 2011 2:30:46 PM org.apache.catalina.core.StandardContext filterStart SEVERE: Exception starting filter ModalApplication java.lang.NoClassDefFoundError: org/apache/wicket/Resource at org.apache.wicket.extensions.Initializer.init(Initializer.java:36) at org.apache.wicket.Application.callInitializers(Application.java:605) at org.apache.wicket.Application.initializeComponents(Application.java:515) at org.apache.wicket.Application.initApplication(Application.java:808) at org.apache.wicket.protocol.http.WicketFilter.init(WicketFilter.java:346) at org.apache.wicket.protocol.http.WicketFilter.init(WicketFilter.java:286) at org.apache.catalina.core.ApplicationFilterConfig.getFilter(ApplicationFilterConfig.java:295) at org.apache.catalina.core.ApplicationFilterConfig.setFilterDef(ApplicationFilterConfig.java:422) at org.apache.catalina.core.ApplicationFilterConfig.<init>(ApplicationFilterConfig.java:115) at org.apache.catalina.core.StandardContext.filterStart(StandardContext.java:4072) at org.apache.catalina.core.StandardContext.start(StandardContext.java:4726) at org.apache.catalina.core.ContainerBase.start(ContainerBase.java:1057) at org.apache.catalina.core.StandardHost.start(StandardHost.java:840) at org.apache.catalina.core.ContainerBase.start(ContainerBase.java:1057) at org.apache.catalina.core.StandardEngine.start(StandardEngine.java:463) at org.apache.catalina.core.StandardService.start(StandardService.java:525) at org.apache.catalina.core.StandardServer.start(StandardServer.java:754) at org.apache.catalina.startup.Catalina.start(Catalina.java:595) at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25) at java.lang.reflect.Method.invoke(Method.java:597) at org.apache.catalina.startup.Bootstrap.start(Bootstrap.java:289) at org.apache.catalina.startup.Bootstrap.main(Bootstrap.java:414) Caused by: java.lang.ClassNotFoundException: org.apache.wicket.Resource at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1680) at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1526) ... 24 more Dec 30, 2011 2:30:46 PM org.apache.catalina.core.StandardContext start SEVERE: Error filterStart Dec 30, 2011 2:30:46 PM org.apache.catalina.core.StandardContext start SEVERE: Context [/ModalPanel] startup failed due to previous errors COnnected log4j:WARN No appenders could be found for logger (org.apache.wicket.util.file.WebXmlFile). log4j:WARN Please initialize the log4j system properly. log4j:WARN See http://logging.apache.org/log4j/1.2/faq.html#noconfig for more info. ******************************************************************** *** WARNING: Wicket is running in DEVELOPMENT mode. *** *** ^^^^^^^^^^^ *** *** Do NOT deploy to your live server(s) without changing this. *** *** See Application#getConfigurationType() for more information. *** ******************************************************************** Dec 30, 2011 2:30:48 PM org.apache.coyote.http11.Http11Protocol start INFO: Starting Coyote HTTP/1.1 on http-8080 Dec 30, 2011 2:30:48 PM org.apache.jk.common.ChannelSocket init INFO: JK: ajp13 listening on /0.0.0.0:8009 Dec 30, 2011 2:30:48 PM org.apache.jk.server.JkMain start INFO: Jk running ID=0 time=0/109 config=null Dec 30, 2011 2:30:48 PM org.apache.catalina.startup.Catalina start
DMCA.com