the.blog

Home / Apache Wicket / Wicket Ajax Confirmation Modal window

Wicket Ajax Confirmation Modal window

Posted by kinabalu on 10 Feb 2010 / 5 Comments

(Editor’s note: Tomasz Dziurko contributed this column from Code Hard Go Pro.)

While developing web application with Wicket I sometimes need to check whether the user really, really does want to do something, for example to delete an entity from the database. The first and easiest choice that comes to my mind is to use JavaScript window.

So we have HomePage.html:

^?View Code HTML

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" >
    <head>
        <title>Wicket Ajax 'Are you sure?' Modal Window</title>
    </head>
    <body>
        <div align="center">
            <strong>Wicket Ajax 'Are you sure?' Modal Window</strong>
            <form action="" wicket:id="formWithJavaScript">
                <input type="submit" wicket:id="buttonWithJavaScript" value="Action!"/>
            </form>
        </div>
    </body>
</html>

and corresponding Java class:

^?View Code JAVA

package pl.tdziurko.ajaxmodalwindowapp;
 
// imports omitted
 
/**
 * Author: Tomasz Dziurko
 */
 
public class HomePage extends WebPage {
 
    private static final long serialVersionUID = 1L;
 
    public HomePage(final PageParameters parameters) {
 
        Form formWithJavaScript = new Form("formWithJavaScript");
 
        Button buttonWithJavaScript = new Button("buttonWithJavaScript") {
 
            @Override
            public void onSubmit() {
                System.out.println("Doing my job");
            }
        };
        buttonWithJavaScript.add(new SimpleAttributeModifier(
                "onclick", "if(!confirm('Do you really want to perform this action?')) return false;"));
 
        formWithJavaScript.add(buttonWithJavaScript);
        add(formWithJavaScript);
 
    }
 
}

Finally, we can see how it looks:

It solves our problem but in the era of Web2.0, rounded corners and shiny looks it isn’t enough. Why can’t we use ajax modal window to ask user for confirmation? It would make our application look good and our css magician could make it look even better.

So let’s try with creating reusable ‘Are you sure?’ ajax modal window with Wicket.

At the beginning we must prepare panel which will be displayed in our modal window. Let’s name it YesNoPanel.

^?View Code HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:wicket>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title></title>
    </head>
    <body>
        <wicket:panel>
            <form wicket:id="yesNoForm" action="">
                <span wicket:id="message">Are you sure?</span>
                <table style="width: 65%;" align="center">
                    <tr>
                        <td align="left">
                            <input type="submit" wicket:id="noButton" value="No" />
                        </td>
                        <td align="right">
                            <input type="submit" wicket:id="yesButton" value="Yes" />
                        </td>
                    </tr>
                </table>
            </form>
        </wicket:panel>
    </body>
</html>

and Java class:

^?View Code JAVA

package pl.tdziurko.ajaxmodalwindowapp.areyousuremodal;
 
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.form.AjaxButton;
import org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow;
import org.apache.wicket.markup.html.basic.MultiLineLabel;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.panel.Panel;
import pl.tdziurko.ajaxmodalwindowapp.areyousuremodal.AreYouSurePanel.ConfirmationAnswer;
 
public class YesNoPanel extends Panel {
 
    public YesNoPanel(String id, String message, final ModalWindow modalWindow, final ConfirmationAnswer answer) {
        super(id);
 
        Form yesNoForm = new Form("yesNoForm");
 
        MultiLineLabel messageLabel = new MultiLineLabel("message", message);
        yesNoForm.add(messageLabel);
        modalWindow.setTitle("Please confirm");
        modalWindow.setInitialHeight(200);
        modalWindow.setInitialWidth(350);
 
        AjaxButton yesButton = new AjaxButton("yesButton", yesNoForm) {
 
            @Override
            protected void onSubmit(AjaxRequestTarget target, Form form) {
                if (target != null) {
                    answer.setAnswer(true);
                    modalWindow.close(target);
                }
            }
        };
 
        AjaxButton noButton = new AjaxButton("noButton", yesNoForm) {
 
            @Override
            protected void onSubmit(AjaxRequestTarget target, Form form) {
                if (target != null) {
                    answer.setAnswer(false);
                    modalWindow.close(target);
                }
            }
        };
 
        yesNoForm.add(yesButton);
        yesNoForm.add(noButton);
 
        add(yesNoForm);
    }
 
}

Everything looks pretty straightforward. We pass to the constructor text which will be displayed as a confirmation question, references to ModalWindow object in which YesNoPanel is placed and to ConfirmationAnswer object.
ConfirmationAnswer class will be created in the next paragraph and will be used to store information whether user pressed ‘Yes’ or ‘No’ button in our panel.

Now it’s time to prepare wrapping form to our YesNoPanel. We could simply achieve it by creating panel with form and one button in it. In our example it will be AreYouSurePanel class:

^?View Code HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:wicket>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title></title>
    </head>
    <body>
        <wicket:panel >
            <form wicket:id="confirmForm" action="" style="display: inline;">
                <input type="submit" wicket:id="confirmButton" value="Default name" />
                <span style="display: none;" wicket:id="modal"></span>
            </form>
        </wicket:panel>
    </body>
</html>

and in Java:

^?View Code JAVA

package pl.tdziurko.ajaxmodalwindowapp.areyousuremodal;
 
import java.io.Serializable;
import java.util.Map;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.form.AjaxButton;
import org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.Model;
 
 
public abstract class AreYouSurePanel extends Panel {
 
    protected ModalWindow confirmModal;
    protected ConfirmationAnswer answer;
    protected Map<string,string> modifiersToApply;
 
 
    public AreYouSurePanel(String id, String buttonName, String modalMessageText) {
        super(id);
        answer = new ConfirmationAnswer(false);
        addElements(id, buttonName, modalMessageText);
    }
 
    protected void addElements(String id, String buttonName, String modalMessageText) {
 
        confirmModal = createConfirmModal(id, modalMessageText);
 
        Form form = new Form("confirmForm");
        add(form);
 
        AjaxButton confirmButton = new AjaxButton("confirmButton", new Model(buttonName)) {
 
            @Override
            protected void onSubmit(AjaxRequestTarget target, Form form) {
                confirmModal.show(target);
            }
        };
 
        form.add(confirmButton);
 
 
        form.add(confirmModal);
 
    }
 
    protected abstract void onConfirm(AjaxRequestTarget target);
    protected abstract void onCancel(AjaxRequestTarget target);
 
    protected ModalWindow createConfirmModal(String id, String modalMessageText) {
 
        ModalWindow modalWindow = new ModalWindow("modal");
        modalWindow.setCookieName(id);
        modalWindow.setContent(new YesNoPanel(modalWindow.getContentId(), modalMessageText, modalWindow, answer));
        modalWindow.setWindowClosedCallback(new ModalWindow.WindowClosedCallback() {
 
            @Override
            public void onClose(AjaxRequestTarget target) {
                if (answer.isAnswer()) {
                    onConfirm(target);
                } else {
                    onCancel(target);
                }
            }
        });
 
        return modalWindow;
    }
 
    public class ConfirmationAnswer implements Serializable {
 
        private boolean answer;
 
        public ConfirmationAnswer(boolean answer) {
            this.answer = answer;
        }
 
        public boolean isAnswer() {
            return answer;
        }
 
        public void setAnswer(boolean answer) {
            this.answer = answer;
        }
    }
 
}

Here we do following steps:

Create form with one AjaxButton which shows modalWindow when clicked.
Create modalWindow with YesNoPanel in it. As mentioned earlier, we pass there references to our modal window and to confirmationAnswer object.
Add WindowClosedCallback to modalWindow and basing on user choice perform onConfirm or onCancel method. These methods are both abstract to force developer extending AreYouSurePanel to implement them according to his needs.

That’s it, we are done. To test how it’s working we must change a bit our page class and html file:

^?View Code HTML

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" >
    <head>
        <title>Wicket Ajax 'Are you sure?' Modal Window</title>
    </head>
    <body>
 
 
 
 
        <div align="center">
            <strong>Wicket Ajax 'Are you sure?' Modal Window</strong>
 
 
 
 
            <form action="" wicket:id="formWithJavaScript">
                <input type="submit" wicket:id="buttonWithJavaScript" value="Action!"/>
            </form>
        </div>
 
 
 
        <div align="center">
            <span wicket:id="yesNoPanel"/>
        </div>
 
    </body>
</html>

and

^?View Code JAVA

package pl.tdziurko.ajaxmodalwindowapp;
 
// imports omitted
 
public class HomePage extends WebPage {
 
    private static final long serialVersionUID = 1L;
 
    public HomePage(final PageParameters parameters) {
 
        Form formWithJavaScript = new Form("formWithJavaScript");
 
        Button buttonWithJavaScript = new Button("buttonWithJavaScript") {
 
            @Override
            public void onSubmit() {
                System.out.println("Doing my job");
            }
        };
        buttonWithJavaScript.add(new SimpleAttributeModifier(
                "onclick", "if(!confirm('Do you really want to perform this action?')) return false;"));
 
        formWithJavaScript.add(buttonWithJavaScript);
        add(formWithJavaScript);
 
        AreYouSurePanel yesNoPanel = new AreYouSurePanel("yesNoPanel", "Ajax Action!", "Do you really want to perform this action?") {
 
            @Override
            protected void onConfirm(AjaxRequestTarget target) {
                System.out.println("Doing my job after ajax modal");
            }
 
            @Override
            protected void onCancel(AjaxRequestTarget target) { }
 
        };
 
        add(yesNoPanel);
    }
 
}

And after clicking ‘Ajax Action!’ we could see that it’s working as intended:

Share this:

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

5 Comments for Wicket Ajax Confirmation Modal window

Fuad Efendi

2 yearss ago

I still DO prefer Client-Side processing (without network client-server roundtrips!):
if(!confirm(‘Do you really want to perform this action?’)) return false;”));

It is faster than AJAX call.

Nowaker

1 years ago

Faster but how ugly. Brrrrr.

Anurag

1 years ago

I need the values submitted with the form . Where do i get them from. for example . I need the selected value in dropdownchoice.

Thanks

Anurag

1 years ago

I want the message to be include values submitted by my form . How can i do that . I am talking about message ” Do you really want to … ” .. I want to replace it with ” You have updated [variable] to [this variable] . I get the variables after i submit the form .

Thanks.

Paolo

1 years ago

thanks! pretty neat code. i’ll try this.

We develop software that helps you reach more customers.
Front end development and NoSQL solutions are our specialty and more…
Recent Posts
- Idea: Restaurant Coloring BookJanuary 27, 2012
- Idea: Mobile Meditation AppJanuary 26, 2012
- Idea: Virtual Competition GlassesJanuary 26, 2012
Testimonial
Mystic has consulted with us on many of our applications, provided penetration testing to assess security readiness, and kept the servers humming along with our mish-mash of hardware and software that was required. They redesigned the network architecture to better support our growing needs and were always available for questions or concerns a phone call away.
Amit Samtani, Head of Development

the.blog

Wicket Ajax Confirmation Modal window

5 Comments for Wicket Ajax Confirmation Modal window

Leave a Reply

Recent Posts

Testimonial