The example below displays notification dialog, which appears over HTML content, bounces few times and finally disappears. There is also small CSS to give it some nice look.Such dialog can be used as a central point for asynchronous application notifications.
The implementation is based on single Wicket Web Page - this should be redesigned to reusable component, but simple page is usefull to get an idea.
At the beginning the dialog is hidden - Wicket Web Markup Container is being rendered as empty div (effectDialog).
Clicking on "Show Dialog" button sends Wicket Ajax Event to the server, and as response browser receives new HTML part, which replaces empty effectDialog. This new HTML code contains our Info Dialog, and also jQuery code. This code will play bounce effect once dialog is painted, and hide it after one second.
Java Code
public class FeedbackWebPage extends WebPage { public FeedbackWebPage() { String infoHeader = "Info Header"; String infoContent = "Variables containing text content for our dialog " + "should be extracted to proper Wicket Model - we keep it simple" + " for demonstration proposals"; // div containing info dialog final WebMarkupContainer infoDialog = new WebMarkupContainer("effectDialog"); // hide dialog, but leave empty HTML tag in order to display it later infoDialog.setOutputMarkupId(true); infoDialog.setOutputMarkupPlaceholderTag(true); infoDialog.setVisible(false); add(infoDialog); // HTML ID for java script references final String infoDialogId = "#" + infoDialog.getMarkupId(); // initialize jquery add(new JQueryBehavior(infoDialogId, "effect")); // labels building info dialog Label feedbackHeader = new Label("feedbackHeader", infoHeader); infoDialog.add(feedbackHeader); Label feedbackMessage = new Label("feedbackMessage", infoContent); infoDialog.add(feedbackMessage); // submit button - it will show our dialog Form<Void> form = new Form<Void>("form"); add(form); form.add(new AjaxButton("open-dialog", form) { @Override protected void onSubmit(AjaxRequestTarget target, Form<?> form) { // replace empty #effectDialog with real content infoDialog.setVisible(true); target.add(infoDialog); // after setting dialog to visible play bounce effect JQueryEffectBehavior effectBehavior = new JQueryEffectBehavior(infoDialogId, "bounce", 500); // dialog should disappear after one second effectBehavior.setCallback(new JQueryAjaxBehavior(this) { @Override public CharSequence getCallbackScript() { // add timer, to hide dialog after one second // TODO move this JavaScript to notifier.js (next blog post) String callbackScript = "setTimeout(function(){$(\"" + infoDialogId + ":visible\").fadeOut();}, 1000);"; return callbackScript; } @Override protected JQueryEvent newEvent(AjaxRequestTarget target) { return null; } }); String jsEffect = effectBehavior.toString(); target.appendJavaScript(jsEffect); } @Override protected void onError(AjaxRequestTarget target, Form<?> form) { } }); } }
HTML Page - FeedbackWebPage.html
<!DOCTYPE html> <html xmlns:wicket="http://wicket.apache.org"> <wicket:head> <wicket:link> <link rel="stylesheet" type="text/css" href="feedbackWebPage.css" /> </wicket:link> </wicket:head> <body> <div wicket:id="effectDialog" class="ed-content"> <div wicket:id="feedbackHeader" class="ed-header">Message Header</div> <div wicket:id="feedbackMessage" class="ed-message">Message Body Text</div> </div> <table border="1"> <tr><th>COL1</th> <th>COL2</th> <th>COL3</th> </tr> <tr><td>value 1</td> <td>test message</td> <td>some more text</td></tr> <tr><td>value 1</td> <td>test message</td> <td>some more text</td></tr> <tr><td>value 1</td> <td>test message</td> <td>some more text</td></tr> <tr><td>value 1</td> <td>test message</td> <td>some more text</td></tr> <tr><td>value 1</td> <td>test message</td> <td>some more text</td></tr> <tr><td>value 1</td> <td>test message</td> <td>some more text</td></tr> <tr><td>value 1</td> <td>test message</td> <td>some more text</td></tr> </table> <form wicket:id="form"> <button wicket:id="open-dialog">Show Dialog</button> </form> </body> </html>
CSS - feedbackWebPage.css
.ed-content {
font-size: 12px;
height: 100px;
width: 240px;
padding: 4px;
position: fixed;
background-color: #EDEDED;
border-color: #BFBFBF;
border-width: 1px;
border-style: solid;
border-radius: 4px;
}
.ed-header {
background-color: #F5A729;
border-color: #E78F08;
border-style: solid;
border-width: 1px;
color: white;
font-weight: bold;
border-radius: 4px;
margin: 0;
padding: 4px;
text-align: center;
}
.ed-message {
padding-top: 6px;
}
POM.XML - dependencies
<dependency> <groupId>org.apache.wicket</groupId> <artifactId>wicket-core</artifactId> <version>1.5.5</version> </dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-log4j12</artifactId> <version>1.6.2</version> </dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</artifactId> <version>1.6.2</version> </dependency> <dependency> <groupId>org.apache.tomcat</groupId> <artifactId>tomcat-servlet-api</artifactId> <version>7.0.22</version> <scope>compile</scope> </dependency> <dependency> <groupId>commons-lang</groupId> <artifactId>commons-lang</artifactId> <version>2.1</version> </dependency> <dependency> <groupId>com.googlecode.wicket-jquery-ui</groupId> <artifactId>jquery-ui-core</artifactId> <version>1.1</version> </dependency>
No comments:
Post a Comment