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

Leaderboard takes shape

Now that SakaiAdminX is released, I’ve been able to get back into developing my Leaderboard app for Sakai. Its already taken great shape, thanks to the Wicket framework.

This is my first venture into Wicket and I must admit its refreshing to be able to code pure Java and pure HTML and watch them come together into a fully functional application. No messy mixes of HTML with some other type of coding (JS Trimpath control loops, Java wrapped around JSP when there was no JSP tag to suit <insert other messy framework here>). What’s even better is Wicket has its own AJAX API for making your app more asyncronous, and works 100% with jQuery for some cool UI enhancements.

Lots of prototyping at this stage, should have something concrete shortly. Stay tuned.