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 <svenme...@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
