One of the things we must take care of when we use AJAX is to notify user when an AJAX request is already in progress. This is usually done displaying an animated picture as activity indicator while the AJAX request is running.
Wicket comes with a variant of components that display a default activity indicator during AJAX request processing.These components are respectively IndicatingAjaxButton, IndicatingAjaxLink and
IndicatingAjaxFallbackLink. you can check the official documentation for more details.
Here i will show you my prefered way of making ajax lazy loading indicator : first i want to make global ajax indicator that will be displayed when any component in that page make an ajax process, then i want to display a specific ajax indicator for specific component like submit button, of course with custom indicator picture and styling.
Global AJAX indicator
if you want to show an ajax indicator when any component in a page does an ajax process just make the wicket page implement the interface IAjaxIndicatorAware then override the method getAjaxIndicatorMarkupId(), this method should return the markup id of div panel which contain the custom loading picture.
JAVA code
public class pageWithAjaxProcess extends WebPage implements IAjaxIndicatorAware {
...
@Override
public String getAjaxIndicatorMarkupId() {
return "loadingIndicator_id";
}
....
HTML code
<div id="loadingIndicator_id" style="display:none;">
<img src="assets/lazyLoading.gif" width="48" height="48" alt="loading"/>
</div>
like this you can make your custom loading indicator, it is just a question of css styling.
Specific Ajax indicator
Sometimes we want to display a loading picture only for submit button which has a long processing time, so we can use IndicatingAjaxButton component and we override its getAjaxIndicatorMarkupId() method for customizing its loading panel.
