Home › Blogs › Gonzalo Aguilar Delgado's blog

Wicket: Sending ajax forms easy with wicket-dojo

Thu, 10/06/2011 - 15:55 — Gonzalo Aguilar...
It's nice to be able to use new technologies in a way easy and agile. What we want to do is to be able to send a form with ajax and at the same time be able to tell the user that the form is being submitted. Like this (colors are degraded because it's gif):       First we have to put the html needed to handle the form. This is the easy part.     
  1. </p>
  2. <form style="width: 50%;"> <!-- overlay-<form-name> must be added if we want greyed form -->
  3. <div id="overlay-event-form" style="width: 100%;">
  4. <table style="width: 100%;" border="0">
  5. <caption>My simple calendar</caption> 
  6. <tbody>
  7. <tr>
  8. <th>Date</th><th>Hour</th><th>Comment</th>
  9. </tr>
  10. <tr>
  11. <td><input type="text" /></td>
  12. <td><input type="text" /></td>
  13. <td><input type="text" /></td>
  14. </tr>
  15. <tr>
  16. <td colspan="3" align="center"><button>Add new event (10 sec delay)</button></td>
  17. </tr>
  18. </tbody>
  19. </table>
  20. </div>
  21. </form>
  22. <div style="width: 50%;">
  23. <table style="width: 100%;" border="0">
  24. <caption>My Events</caption> 
  25. <tbody>
  26. <tr>
  27. <th>Date</th><th>Hour</th><th>Comment</th>
  28. </tr>
  29. <tr>
  30. <td><span></span><br /></td>
  31. <td><span></span><br /></td>
  32. <td><span></span><br /></td>
  33. </tr>
  34. </tbody>
  35. </table>
  36. </div>
  37. <p>
We can add the code that will handle the form. With the new wicket-dojo this is easy:   
  1. final DojoForm eventForm = new DojoForm("event-form")
  2. {
  3.  
  4. 	/**
  5. 	 * 
  6. 	 */
  7. 	private static final long serialVersionUID = 1L;
  8.  
  9. 	@Override
  10. 	protected void onSubmit() {
  11. 		// TODO Auto-generated method stub
  12. 		super.onSubmit();
  13. 		Date eventDate = null;
  14.  
  15. 		// Insert delay
  16. 		long currentTime = System.currentTimeMillis();
  17.  
  18. 		while(System.currentTimeMillis() &lt; currentTime + 5000)
  19. 		{
  20. 			try {
  21. 				Thread.sleep(1000);
  22. 			} catch (InterruptedException e) {
  23. 				// TODO Auto-generated catch block
  24. 				e.printStackTrace();
  25. 			}
  26. 		}
  27.  
  28.  
  29. 		eventDate = calendar.getConvertedInput();
  30.  
  31. 		if(eventDate!=null)
  32. 		{
  33. 			SimpleEventModel event = new SimpleEventModel(eventDate);
  34. 			if(event!=null)
  35. 			{
  36. 				event.setTime(time.getModelObject());
  37. 				event.setComment(comment.getModelObject());
  38. 				eventList.add(event);
  39. 			}
  40. 		}
  41. 	}
  42.  
  43. };
  44.  
  45. this.add(eventForm);
  Adding the submit button is piece of cake:   
  1. // Add button to the form
  2. 		DojoButton button = new DojoButton("button-add")
  3. 		{
  4.  
  5. 			/**
  6. 			 * 
  7. 			 */
  8. 			private static final long serialVersionUID = 1L;
  9.  
  10. 			@Override
  11. 			protected void onClick(AjaxRequestTarget target) {
  12. 				// TODO Auto-generated method stub
  13.  
  14. 			}
  15.  
  16. 			@Override
  17. 			protected void onMouseOver(AjaxRequestTarget target) {
  18. 				// TODO Auto-generated method stub
  19.  
  20. 			}
  21.  
  22. 			@Override
  23. 			protected void onSubmit(AjaxRequestTarget target, Form<!--?--> form) {
  24. 				if(listContainer!=null)
  25. 				{
  26. 					target.addComponent(listContainer);
  27. 				}
  28. 			}
  29.  
  30. 		};
  31. eventForm.add(button);<p>&nbsp;</p>
We can add two custom control for the date and time controls:   
  1. // Add a input type text
  2. calendar = new TextField("form-calendar", new Model(new Date()), Date.class)
  3. 		{
  4.  
  5. 			@Override
  6. 			public IConverter getConverter(Class<!--?--> type) {
  7. 				IConverter converter = super.getConverter(type);
  8. 				if(type.getName().equalsIgnoreCase("java.util.Date"))
  9. 					converter = new DojoDateConverter();
  10. 				if(type.getName().equalsIgnoreCase("java.lang.String"))
  11. 					converter = new DojoDateConverter();
  12. 				return converter;
  13. 			}
  14.  
  15. 			/**
  16. 			 * 
  17. 			 */
  18. 			private static final long serialVersionUID = 1L;
  19.  
  20. 		};
  21. calendar.add(new DojoDateTextBoxBehavior(){
  22.  
  23. 	/**
  24. 	 * 
  25. 	 */
  26. 	private static final long serialVersionUID = 1L;
  27.  
  28. });
  29.  
  30. eventForm.add(calendar);
  31.  
  32.  
  33. // Add a input type text
  34. time = new TextField("form-time", new Model(new Date()), Date.class)
  35. 	{
  36.  
  37. 		@Override
  38. 		public IConverter getConverter(Class<!--?--> type) {
  39. 			IConverter converter = super.getConverter(type);
  40. 			if(type.getName().equalsIgnoreCase("java.util.Date"))
  41. 				converter = new DojoTimeConverter();
  42. 			if(type.getName().equalsIgnoreCase("java.lang.String"))
  43. 				converter = new DojoTimeConverter();
  44. 			return converter;
  45. 		}
  46.  
  47. 		/**
  48. 		 * 
  49. 		 */
  50. 		private static final long serialVersionUID = 1L;
  51.  
  52. 	};
  53. time.add(new DojoTimeTextBoxBehavior(){
  54.  
  55. 	/**
  56. 	 * 
  57. 	 */
  58. 	private static final long serialVersionUID = 1L;
  59.  
  60. });
  61.  
  62. eventForm.add(time);
  We add also a new control to let the user imput a comment. 
  1. // Add a input type text
  2. 		comment = new TextField("form-comment", new Model(""));
  3. 		comment.add(new DojoTextBoxBehavior(){
  4.  
  5. 			/**
  6. 			 * 
  7. 			 */
  8. 			private static final long serialVersionUID = 1L;
  9.  
  10. 		});
  11.  
  12. 		eventForm.add(comment);