Indicator While Processing

Ryan Sonnek bio photo By Ryan Sonnek

Most users rely on the broswer’s “spinner” to know when the server is processing and when it has completed, but with AJAX applications, all bets are off. There’s no way for a user to know if clicking a button will take them to a new page, or swap dynamic HTML into the existing page.

The scriptaculous demos have solved this problem by showing an inline indicator while the server is processing, and I have now added this feature to wicket as well. The indicator will only display while the server is processing the AJAX request. The DraggableTarget is the first component to interact with this new Indicator component, and I think the AutocompleteTextField may have use for it as well. Here’s a short example of how to use the new Indicator.

public class DragDropExamplePage extends WebPage {
    public DragDropExamplePage() {
        Label product = new Label("product");
        product.addBehavior(new DraggableBehavior());
        add(product);

        DraggableTarget cart = new DraggableTarget("cart") {
            protected void onDrop(Component input, AjaxRequestTarget target) {
                System.out.println(input + " dropped on the target");
            }
        };
        add(cart);
    }
}

The HTML template just needs to include the indicator, and CSS can be used to customize it further.

<html xmlns:wicket="http://wicket.sourceforge.net/">
<head>
  <style type="text/css">
  div.cart-active {
    background-color: #FFF4D8;
  }
  </style>
</head>
<body>
  <img wicket:id="product" alt="Drag Me!">

  <div wicket:id="indicator" />
  <-- The contents of this div are swapped out with the page contribution -->
  <div wicket:id="cart">Drop images here.</div>

</body>
</html>

I’ve updated the drag/drop examples to use this new indicator, and I also added a short server side delay to actually show that it’s working correctly. Isn’t it odd that a user might not believe an application is working correctly if it’s too fast?