You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@wicket.apache.org by sv...@apache.org on 2020/07/07 11:54:52 UTC
[wicket] branch master updated: updated ModalDialog in user guide
This is an automated email from the ASF dual-hosted git repository.
svenmeier pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/wicket.git
The following commit(s) were added to refs/heads/master by this push:
new 267fb06 updated ModalDialog in user guide
267fb06 is described below
commit 267fb06eec31e8e530fb5f0a4f691a0782e3d5b8
Author: Sven Meier <sv...@apache.org>
AuthorDate: Tue Jul 7 13:53:38 2020 +0200
updated ModalDialog in user guide
---
.../ajax/markup/html/modal/ModalDialog.java | 61 ++++++++++++-----
.../src/main/asciidoc/ajax/ajax_2.adoc | 72 +++++++--------------
.../img/modal-dialog-example-screenshot.png | Bin 0 -> 59551 bytes
.../img/modal-window-example-screenshot.png | Bin 13460 -> 0 bytes
4 files changed, 68 insertions(+), 65 deletions(-)
diff --git a/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/modal/ModalDialog.java b/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/modal/ModalDialog.java
index ce88ae4..c550ddd 100644
--- a/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/modal/ModalDialog.java
+++ b/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/modal/ModalDialog.java
@@ -23,11 +23,27 @@ import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.attributes.AjaxCallListener;
import org.apache.wicket.ajax.attributes.AjaxRequestAttributes;
import org.apache.wicket.ajax.attributes.AjaxRequestAttributes.EventPropagation;
+import org.apache.wicket.extensions.ajax.markup.html.modal.theme.DefaultTheme;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.panel.Panel;
/**
- * Presents a modal dialog to the user. See {@link #open(Component, AjaxRequestTarget)} and {@link #close(AjaxRequestTarget)} methods.
+ * Presents a modal dialog to the user. See {@link #open(Component, AjaxRequestTarget)} and
+ * {@link #close(AjaxRequestTarget)} methods.
+ * <p>
+ * Unlike the deprecated {@link ModalWindow} this component offers no UI controls, you should use
+ * any components as you need in the content of this dialog.
+ * <p>
+ * Note: This component does not provide any styling by itself, so you have can add a
+ * {@link DefaultTheme} to this component if aren't styling these CSS classes by yourself:
+ * <dl>
+ * <dt>modal-dialog-overlay</dt>
+ * <dd>the wrapper around the actual dialog, usually used to overlay the rest of the document</dd>
+ * <dt>modal-dialog</dt>
+ * <dd>the actual dialog</dd>
+ * <dt>modal-dialog-content</dt>
+ * <dd>any additional styling for the content of this dialog</dd>
+ * </dl>
*
* @author Igor Vaynberg (ivaynberg)
* @author svenmeier
@@ -41,12 +57,18 @@ public class ModalDialog extends Panel
private static final String DIALOG_ID = "dialog";
+ /**
+ * The id for the content of this dialoh.
+ *
+ * @see #setContent(Component)
+ * @see #open(Component, AjaxRequestTarget)
+ */
public static final String CONTENT_ID = "content";
- private WebMarkupContainer overlay;
-
- private WebMarkupContainer dialog;
-
+ private final WebMarkupContainer overlay;
+
+ private final WebMarkupContainer dialog;
+
private boolean removeContentOnClose;
public ModalDialog(String id)
@@ -58,7 +80,7 @@ public class ModalDialog extends Panel
overlay = newOverlay(OVERLAY_ID);
overlay.setVisible(false);
add(overlay);
-
+
dialog = newDialog(DIALOG_ID);
overlay.add(dialog);
}
@@ -118,13 +140,14 @@ public class ModalDialog extends Panel
* an optional Ajax target
* @return this
*
+ * @see #setContent(Component)
* @see #close(AjaxRequestTarget)
*/
public ModalDialog open(Component content, AjaxRequestTarget target)
{
setContent(content);
removeContentOnClose = true;
-
+
overlay.setVisible(true);
if (target != null)
@@ -146,10 +169,11 @@ public class ModalDialog extends Panel
*/
public ModalDialog open(AjaxRequestTarget target)
{
- if (overlay.size() == 0) {
+ if (overlay.size() == 0)
+ {
throw new WicketRuntimeException("no content set");
}
-
+
overlay.setVisible(true);
if (target != null)
@@ -173,7 +197,8 @@ public class ModalDialog extends Panel
/**
* Close this dialog.
* <p>
- * If opened via {@link #open(Component, AjaxRequestTarget)}, the content is removed from the component tree
+ * If opened via {@link #open(Component, AjaxRequestTarget)}, the content is removed from the
+ * component tree
*
* @param target
* an optional Ajax target
@@ -184,7 +209,8 @@ public class ModalDialog extends Panel
public ModalDialog close(AjaxRequestTarget target)
{
overlay.setVisible(false);
- if (removeContentOnClose) {
+ if (removeContentOnClose)
+ {
dialog.removeAll();
}
@@ -220,10 +246,12 @@ public class ModalDialog extends Panel
*/
public ModalDialog closeOnClick()
{
- overlay.add(new CloseBehavior("click") {
+ overlay.add(new CloseBehavior("click")
+ {
protected CharSequence getPrecondition()
{
- return String.format("return attrs.event.target.id == '%s';", overlay.getMarkupId());
+ return String.format("return attrs.event.target.id == '%s';",
+ overlay.getMarkupId());
}
});
return this;
@@ -242,7 +270,7 @@ public class ModalDialog extends Panel
return this;
}
-
+
private abstract class CloseBehavior extends AjaxEventBehavior
{
private CloseBehavior(String event)
@@ -255,7 +283,7 @@ public class ModalDialog extends Panel
{
super.updateAjaxAttributes(attributes);
- // has to stop immediately to prevent an enclosing dialog to close too
+ // has to stop immediately to prevent an enclosing dialog to close too
attributes.setEventPropagation(EventPropagation.STOP_IMMEDIATE);
attributes.getAjaxCallListeners().add(new AjaxCallListener()
@@ -268,7 +296,8 @@ public class ModalDialog extends Panel
});
}
- protected CharSequence getPrecondition() {
+ protected CharSequence getPrecondition()
+ {
return "";
}
diff --git a/wicket-user-guide/src/main/asciidoc/ajax/ajax_2.adoc b/wicket-user-guide/src/main/asciidoc/ajax/ajax_2.adoc
index 04ecd49..f188819 100644
--- a/wicket-user-guide/src/main/asciidoc/ajax/ajax_2.adoc
+++ b/wicket-user-guide/src/main/asciidoc/ajax/ajax_2.adoc
@@ -73,25 +73,23 @@ AutoCompleteTextField field = new AutoCompleteTextField<T>("field", model) {
Wicket module wicket-examples contains page class _AutoCompletePagePage.java_ which shows an example of autocomplete text field. The running example is available on {wicket_examples_url}/ajax/autocomplete[examples site] .
-=== Modal window
+=== Modal dialog
-Class _org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow_ is an implementation of a http://en.wikipedia.org/wiki/Modal_window[modal window] based on AJAX:
+Class _org.apache.wicket.extensions.ajax.markup.html.modal.ModalDialog_ is an implementation of a http://en.wikipedia.org/wiki/Modal_dialog[modal dialog] based on AJAX:
-image::../img/modal-window-example-screenshot.png[]
+image::../img/modal-dialog-example-screenshot.png[]
-The content of a modal window can be either another component or a page. In the first case the id of the component used as content must be retrieved with method getContentId().
+The content of a modal dialog is another component. The id of this component used as content must be _ModalDialog#CONTENT_ID_.
-If instead we want to use a page as window content, we must implement the inner interface _ModalWindow.PageCreator_ and pass it to method _setPageCreator_. The page used as content will be embedded in a <iframe> tag.
-
-To display a modal window we must call its method _show(AjaxRequestTarget target)_. This is usually done inside the AJAX callback method of another component (like an _AjaxLink_). The following markup and code are taken from project _BasicModalWindowExample_ and illustrate a basic usage of a modal window:
+To display a modal dialog we must call its method _open(AjaxRequestTarget target)_. This is usually done inside the AJAX callback method of another component (like an _AjaxLink_). The following markup and code are taken from project _BasicModalDialogExample_ and illustrate a basic usage of a modal dialog:
*HTML:*
[source,html]
----
<body>
- <h2>Modal Windod example</h2>
- <a wicket:id="openWindow">Open the window!</a>
- <div wicket:id="modalWindow"></div>
+ <h2>Modal Dialog example</h2>
+ <a wicket:id="open">Open the Dialog!</a>
+ <div wicket:id="modal"></div>
</body>
----
@@ -100,52 +98,28 @@ To display a modal window we must call its method _show(AjaxRequestTarget target
----
public HomePage(final PageParameters parameters) {
super(parameters);
- final ModalWindow modalWindow = new ModalWindow("modalWindow");
- Label label = new Label(modalWindow.getContentId(), "I'm a modal window!");
+ final ModalDialog modal = new ModalDialog("modal");
+ modal.add(new DefaultTheme());
+ modal.closeOnClick();
+ Label label = new Label(ModalDialog.CONTENT_ID, "I'm a modal dialog!");
- modalWindow.setContent(label);
- modalWindow.setTitle("Modal window");
+ modal.setContent(label);
- add(modalWindow);
- add(new AjaxLink<Void>("openWindow") {
- @Override
- public void onClick(AjaxRequestTarget target) {
- modalWindow.show(target);
- }
+ add(modal);
+ add(new AjaxLink<Void>("open") {
+ @Override
+ public void onClick(AjaxRequestTarget target) {
+ modal.open(target);
+ }
});
}
----
-Just like any other component also _ModalWindow_ must be added to a markup tag, like we did in our example using a <div> tag. Wicket will automatically hide this tag in the final markup appending the style value display:none.
-The component provides different setter methods to customize the appearance of the window:
-
-* *setTitle(String)*: specifies the title of the window
-* *setResizable(boolean)*: by default the window is resizeable. If we need to make its size fixed we can use this method to turn off this feature.
-* *setInitialWidth(int) and setInitialHeight(int)*: set the initial dimensions of the window.
-* *setMinimalWidth(int) and setMinimalHeight(int)*: specify the minimal dimensions of the window.
-* *setCookieName(String)*: this method can be used to specify the name of the cookie used on client side to store size and position of the window when it is closed. The component will use this cookie to restore these two parameters the next time the window will be opened. If no cookie name is provided, the component will not remember its last position and size.
-* *setCssClassName(String)*: specifies the CSS class used for the window.
-* *setAutoSize(boolean)*: when this flag is set to true the window will automatically adjust its size to fit content width and height. By default it is false.
-
-The modal window can be closed from code using its method _close(AjaxRequestTarget target)_. The currently opened window can be closed also with the following JavaScript instruction:
-
-[source,java]
-----
-Wicket.Window.get().close();
-----
+Just like any other component also _ModalDialog_ must be added to a markup tag, like we did in our example using a <div> tag. Wicket will automatically hide the content of this tag in the final markup, as long as the dialog is not opened.
+This component does not provide any styling by itself, so you have can add a
+_DefaultTheme_ to this component if aren't styling these CSS classes by yourself.
-_ModalWindow_ gives the opportunity to perform custom actions when window is closing. Inner interface _ModalWindow.WindowClosedCallback_ can be implemented and passed to window's method _setWindowClosedCallback_ to specify the callback that must be executed after window has been closed:
-
-[source,java]
-----
-modalWindow.setWindowClosedCallback(new ModalWindow.WindowClosedCallback() {
-
- @Override
- public void onClose(AjaxRequestTarget target) {
- //custom code...
- }
-});
-----
+The modal dialog can be closed from code using its method _close(AjaxRequestTarget target)_.
=== Tree repeaters
diff --git a/wicket-user-guide/src/main/asciidoc/img/modal-dialog-example-screenshot.png b/wicket-user-guide/src/main/asciidoc/img/modal-dialog-example-screenshot.png
new file mode 100644
index 0000000..d4c2c30
Binary files /dev/null and b/wicket-user-guide/src/main/asciidoc/img/modal-dialog-example-screenshot.png differ
diff --git a/wicket-user-guide/src/main/asciidoc/img/modal-window-example-screenshot.png b/wicket-user-guide/src/main/asciidoc/img/modal-window-example-screenshot.png
deleted file mode 100644
index afbc644..0000000
Binary files a/wicket-user-guide/src/main/asciidoc/img/modal-window-example-screenshot.png and /dev/null differ