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
