wicket and ajax

I’ve been messing around with a Sakai tool I’m coining profile2 – essentially a drop in replacement for the existing profile tool in Sakai but with some new features, and social matching/searching functionality as well. And as you might have guessed, its written in Wicket.

I’ve modelled my new profile on the new Facebook layout, including editable panels of content. So by default you get the view mode, then you click edit and that particular panel switches to be an editable panel. Pretty simple stuff for a normal webapp, but to have it load in front of you without a page refresh/flicker requires AJAX or at least some Javascript. And this is where Wicket is really cool. You see, AJAX is essentially Javascript (a point I’ll come back to in a sec). So in order for me to do this AJAX call to switch the panels between display and edit you’d think I’d need to get into some Javascript right?

Wrong! Wicket has built in methods that you can use with pure Java code to perform AJAX calls without having to write a line of Javascript.

This is all I added to my two panels. One has an edit link, one has a cancel button. Each toggles the mode between the two views without a page refresh:

//get handle on this panelfinal Component thisPanel = this;

//edit buttonAjaxFallbackLink editButton = new AjaxFallbackLink("editButton", new ResourceModel("button.edit")) {   public void onClick(AjaxRequestTarget target) {       Component newPanel = new MyInfoEdit("myInfo", userProfileModel);       newPanel.setOutputMarkupId(true);       thisPanel.replaceWith(newPanel);       if(target != null) {           target.addComponent(newPanel);       }   }};

What puts the icing on the cake is that if Javascript is disabled, it still works! The link is a fallback link that degrades to a normal link if Javascript is not available. Neat? Yup!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s