Home Tutorials Wicket Modal Panel example in Wicket

Modal Panel example in Wicket
Posted on: October 7, 2008 at 12:00 AM

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.

ModalApplication.java :- It will call Modal.class
Modal.java :- creates links and modal components which are shown by using the ModalPage1 and ModalPage2
Modal.html :- creates html page which is used to open modal pages.
ModalPage1.java :- creates modal page to show content of first modal window
ModalPage2.java :- creates modal page to show content of another modal window
ModalPage1.html
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

Related Tags for Modal Panel example in Wicket:
c, gui, image, images, ui, application, io, size, sed, page, tutorial, dal, lock, panel, ria, this, ood, opera, ai, block, open, oo, app, create, modal, wicket, like, container, large, show, to, base, locks, sh, e, il, blocks, section, can, li, use, pe, im, in, mod, as, m, nt, par, separate, ca, operation, es, ase, age, pen, loc, how, pp, rate, pan, cat, tor, wic, when, s, at, pane, ratio, k, is, ha, ll, go, ea, and, ar, tutor, z, s, s, ri, th, sho, arge, ati, ap, hat, mage, ica, ica, pl, nd, on, o

«Previous Index Next»