Software Technology Tips

Wicket Framework provides its own implementation class for using AJAX with Web Application. It Provides some normal components like AjaxFallBackLink,AjaxSubmitButton etc with AJAX behavior.

Here I am going to discuss how to use the "AbstractDefaultAjaxBehavior" class for targetting any component by clicking that component. I am taking "Label" as a component here for example to make it simple.When we click at "Label" in a page the content of Label will be changed. This will be caused by AJAX.

Here are the steps you need to follow:

1. First create a Wicket component and add it to page.

2. Set "OutPutMarkupId" as true for that component.

3. Create an "AbstractDefaultAjaxBehavior" object and override the    "respond(AjaxRequestTarget target)" method.

4. Whatever change you want to make for that component do here and     then add that component in target by calling

   "target.addComponent(Component);".

5. Add the created "AbstractDefaultAjaxBehavior" object to page.

6. Now create "WebMarkupContainer" object and override the method    "onComponentTag(ComponentTag tag)".

7. From the body of "onComponentTag(ComponentTag tag)" method now    call the method "put(String event/key,String value)" of    ComponentTag class.

8. Add "WebMarkupContainer" to page and done.

Code Example:  ExamplePage.java

public class ExamplePage extends WebPage {

   public AbstractDefaultAjaxBehavior click;

   Label label;

  /*

   * constructor here

   */

     public ExamplePage(PageParameters parameters) {

           super(parameters);

      /* created label whose wicket:id is "label" and the second String parameter is content        * for this label.

       */

         label = new Label("label","I AM CONTENT FOR LABEL");

      /* Setted "OutputMarkupId" true for label.It is a very important step because it          * generates an ID for Label to recognize which component will be targetted.

       */

         label.setOutputMarkupId(true);

      //added label to page

         add(label);

      /*

       * created "bstractDefaultAjaxBehavior" object and also overides the method respond().          * Under this method we change the Label content by calling

       * "setDefaultModelObject(String newContent" of Label.

       * After that added LAbel to target calling "target.addComponent(label);".

       * /

         click = new AbstractDefaultAjaxBehavior() {

            @Override

               protected void respond(AjaxRequestTarget target) {

          // Setted new content for label

         label.setDefaultModelObject("I AM NEW CONTENT FOR LABEL");

         //Added the label to target

               target.addComponent(label);

            }

         };

      //Added "AbstractDefaultAjaxBehavior" object to page.

         add(click);

      /*

       * Created WebMarkupContainer object and overrides the

       * "onComponentTag(ComponentTag tag)" method to call the respond() method of       

       * "AbstractDefaultAjaxBehavior".

       */

         WebMarkupContainer container = new WebMarkupContainer("container") {

            @Override

               public void onComponentTag(ComponentTag tag) {

         /*

          * The first parameter of put() method is event like "onClick","onMouseDown" etc..           * i.e it defines on which event you want to call respond() method of *                      * "AbstractDefaultAjaxBehavior" . The second parameter is little tricky. Here we call           * "wicketAjaxGet()" method under which we call a method named "getCallbackUrl()" of                   * AbstractDefaultAjaxBehavior class.This "getCallbackUrl" returns the url that                   * references this handler.

          */

               tag.put("onclick", "wicketAjaxGet('"+click.getCallbackUrl()+"')");

              }

            };

        //added container to page

            add(container);

         }

}

Now, its time to write markup for above page.One thing to remember here Wicket:id under <div> is of WebMarkupContainer added in above ExamplePage.

ExamplePage.html

<html>

<body>

<span wicket:id="label"></span>

<div wicket:id="container">Here is the div</div>

</body>

</html>

This is the simplest use of "AbstractDefaultAjaxBehavior" class of wicket. We can use it for targetting any component through Ajax request. Wicket provides an Ajax console where you can see what happens in background. Hope this will be useful for developers interested in Wicket Framework.