Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Modal compatible with wicket ModalWindow interface #228

Closed
lubert opened this issue Oct 3, 2013 · 6 comments
Closed

Modal compatible with wicket ModalWindow interface #228

lubert opened this issue Oct 3, 2013 · 6 comments
Assignees
@martin-g
Labels
bootstrap2 bootstrap3 feature

Comments

@lubert
Copy link

lubert commented Oct 3, 2013

Any chance for a Bootstrap Modal that implements most of the methods of a Wicket modal window so it can be easily swapped in? Is it possible to add a panel as the body for Bootstrap Modals? Thanks
@martin-g
Copy link
Owner

martin-g commented Oct 4, 2013

I am not sure this is a good idea.
Wicket's ModalWindow has a special behavior for being contained in Form that I still don't understand.
Additionally it has dual responsibility - it can be used with a Panel or with a Page. I've never liked this. There must be two implementations instead. But to keep it backward compatible it still has this problem.

Is it possible to add a panel as the body for Bootstrap Modals?

Wicket Bootstrap Modal is a Panel that you should extend. Whatever you add to it will be its body.
de.agilecoders.wicket.core.markup.html.bootstrap.dialog.TextContentModal is a simple implementation that uses a Label as a body to render a simple String. But if you need more complex body then just extend Modal and add your components.

@lubert
Copy link
Author

lubert commented Oct 5, 2013

Thanks Martin, that makes sense. I'm curious, for my own education, why don't you like ModalWindow's dual use with pages and panels? Is it that to compensate for using both panels and pages, the interface gets bloated, or is it something else?

@martin-g
Copy link
Owner

martin-g commented Oct 7, 2013

My reasons are:

  1. the interface got bloated
  2. the number of opened issues for this component in Wicket's JIRA. Some issues cannot be properly solved for both ways (panel and iframe).

@ignl
Copy link

ignl commented Oct 14, 2013

I have actually extended Modal class and added setContent method to it (it was useful because content was constructed only on action) so maybe this could be useful addition to component. Also to add a save button was a bit complicated, i solved it by providing ajax submit button content panel (one added to modal) in constructor, and then getting all fields from its form in onSubmit method, but maybe there could be easier way?

@tahitiangabriel
Copy link
Contributor

To add a panel in a Modal I've done something like that (in a ModalWindow way) :

/**
 * A modal that display a panel load with ajax.
 */
public class PanelContentModal extends Modal {
    /** serialVersionUID. */
    private static final long serialVersionUID = -5002663900158560343L;
    /** content ID. */
    private static final String CONTENT_ID = "content";

    /**
     * @param varMarkupId modal markup Id
     */
    public PanelContentModal(final String varMarkupId) {
        super(varMarkupId);
        setContent(new EmptyPanel(getContentId()));
    }

    /**
     * @param varMarkupId modal markup Id
     * @param varPanel panel to set in the modal
     */
    public PanelContentModal(final String varMarkupId, final Panel varPanel) {
        super(varMarkupId);
        setContent(varPanel);
    }

    /**
     * @return the contentId
     */
    public static final String getContentId() {
        return CONTENT_ID;
    }

    /**
     * Sets the panel of the modal.
     * 
     * @param component component to set
     * @return this;
     */
    public Modal setContent(final Panel component) {
        if (!component.getId().equals(getContentId())) {
            throw new WicketRuntimeException("Modal content id is wrong. Component ID:" + component.getId()
                    + "; content ID: " + getContentId());
        }

        component.setOutputMarkupId(true);
        addOrReplace(component);
        return this;
    }

    /**
     * Shows the modal window.
     * 
     * @param target
     *            Request target associated with current ajax request.
     */
    public void show(final AjaxRequestTarget target) {
        target.add(this);
        appendShowDialogJavaScript(target);
    }
}
<html xmlns:wicket="http://wicket.apache.org">
    <head>
        <title>PanelContentModal</title>
    </head>
    <body>
        <wicket:extend>
            <div wicket:id="content"></div>
        </wicket:extend>
    </body>
</html>

Using it that way :

PanelContentModal modal = new PanelContentModal("modal");
modal.header(Model.of("My Modal title"));
add(modal);
...
add(new AjaxLink<Void>("editLink") {
    @Override
     public void onClick(final AjaxRequestTarget varTarget) {
        modal.setContent(new MyPanel(PanelContentModal.getContentId(), myModel));
        modal.show(varTarget);
     }
});

@martin-g I can add it to the project if you think it can be useful and improved by other

@martin-g
Copy link
Owner

Yes. Maybe it is OK to add it.
The implementation is quite simple but maybe developers who have not much experience with Wicket don't find it so simple.

I just want to avoid having a new monster like Wicket's ModalWindow.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@martin-g martin-g

Labels
bootstrap2 bootstrap3 feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@martin-g @tahitiangabriel @ignl @lubert