The application we're developing consists of two pages:
- The main page (LaunchPage.java and LaunchPage.html)
- The modal window page (ModalContentPage.java and ModalWContentPage.html)
The main page defines and displays the content of a variable and it also has a link to open the modal window page.
The modal window page displays the content of the same variable. But when the modal window is closed, the variable is changed by the modal window page.
Let's start by creating the HTML-file of the main page.
<html>
<head>
<title>Launch Page</title>
</head>
<body>
<div wicket:id="modal"></div>
<span wicket:id="passValueLabel">Value of passValue variable.</span>
<a wicket:id="showModalLink">Open modal window.</a>
</body>
</html>
This page defines the modal page with id "modal". The next line is the location where the content of the variable "passValue" is displayed. Finally, a link is defined that opens the modal window.
Next, the corresponding Java class:
package com.javaeenotes;
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;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.model.PropertyModel;
public class LaunchPage extends WebPage {
private String passValue;
@SuppressWarnings("serial")
public LaunchPage() {
passValue = "This value is passed to the modal window.";
// Display the current content of the passValue variable. The
// PropertyModel must be used, as the value can be changed.
final Label passValueLabel;
add(passValueLabel = new Label("passValueLabel",
new PropertyModel<String>(this, "passValue")));
passValueLabel.setOutputMarkupId(true);
// Create the modal window.
final ModalWindow modal;
add(modal = new ModalWindow("modal"));
modal.setCookieName("modal-1");
modal.setPageCreator(new ModalWindow.PageCreator() {
public Page createPage() {
// Use this constructor to pass a reference of this page.
return new ModalContentPage(LaunchPage.this.getPageReference(),
modal);
}
});
modal.setWindowClosedCallback(new ModalWindow.WindowClosedCallback() {
public void onClose(AjaxRequestTarget target) {
// The variable passValue might be changed by the modal window.
// We need this to update the view of this page.
target.add(passValueLabel);
}
});
modal.setCloseButtonCallback(new ModalWindow.CloseButtonCallback() {
public boolean onCloseButtonClicked(AjaxRequestTarget target) {
// Change the passValue variable when modal window is closed.
setPassValue("Modal window is closed by user.");
return true;
}
});
// Add the link that opens the modal window.
add(new AjaxLink<Void>("showModalLink") {
@Override
public void onClick(AjaxRequestTarget target) {
modal.show(target);
}
});
}
public String getPassValue() {
return passValue;
}
public void setPassValue(String passValue) {
this.passValue = passValue;
}
}
The class file displays the content of "passValue" and creates the modal window class with its methods. Look carefully at the code and comments in the modal window methods. We can see that the passValueLabel is expected to change in the window close callback method. We can also see that the variable is actually changed using a setter in the close button callback method. This happens when the user clicks on the close button of the modal window. Finally, an AJAX link is defined and added to the page.
The second part is the modal window page:
<html>
<head>
<title>Modal Content Page</title>
</head>
<body>
<span wicket:id="passValueLabel">Current content of passValue variable.</span>
</body>
</html>
The modal page only displays the content of the "passValue" variable. The variable is owned by the main page.
package com.javaeenotes;
import org.apache.wicket.PageReference;
import org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
public class ModalContentPage extends WebPage {
public ModalContentPage(final PageReference modalWindowPage,
final ModalWindow window) {
// Retrieve the passValue content for display.
String passValue = ((LaunchPage) modalWindowPage.getPage())
.getPassValue();
add(new Label("passValueLabel", passValue));
// You can use the
// ((LaunchPage)modalWindowPage.getPage()).setPassValue() method to
// change the passValue variable of the launch/caller page.
}
}
This class is pretty simple. The first parameter refers to the main page that created the modal window page. Go back, and look how the modal window page is constructed in the main page. The main page is casted and the variable is retrieved using the getter-method. The content is then displayed in the modal window page.
Now run the code and the main page will look like this:
After clicking the link, the modal window page is opened:
We can see the same variable is displayed in the modal window page. Now, we close the modal window page. Because of this event, the variable is changed as instructed in the callback code:
As expected, the variable is changed in the main window.
Thanks Gin-Lung! I was implementing a model window with a Panel as content but since there are issues with having a Form inside a Panel in a modal window, I'm trying with a Page instead. Your fine example has helped alot :-)
ReplyDeleteHi Gin-Lung!,
ReplyDeleteIt seems that the modal window uses new markup (DIV) to render the Model Content, do you have any idea to render the model window in same markup in which corresponding wicket:id is given.
Your help will be appreciable.
Is there a way to hide the close button?
ReplyDeleteThis comment has been removed by the author.
ReplyDeletethank good work
ReplyDeleteGreat work... thnx for posting lung cheng..
ReplyDeleteI tried the same example Today,But After clicking on the link ,Model Window is not opening. I tried several times.Can anyone explain me why it is not working in latest browsers?
ReplyDelete