xaloon / wicket components

2009-12-04 23:30 | Author: vytautas.racelis

Default wicket tab implementation validates only active tab. Sometimes there are requirements that tabs should be validated only on form submit. Also if there are many tabs, maybe we do not want them all to be loaded at once. How to deal with such requirements?

Using jQuery tabs is one of solutions,so let's discuss it.

Single commit

This part is easy. I think you already know a solution:
1. You should be able to create a list of ITab;
2. Each implementation of ITab should provide a Panel implementation. This Panel should contain a form inside;
3. You are able to create tab definitions with early loaded panels while iterating through ITab list;
4. Tabs should be placed inside a global form;
Result: You have a form with Tabs and nested forms inside. All panels are visible, so they should be validated by default Apache Wicket mechanism once submitted. Now you are able to click on every tab and no validation and partial submit will be performed. You also will not loose your information.

Lazy loaded tabs

So far so good. But wait!. These panels are early loaded - that means, that they are loaded when page is rendered. How to make that panels should be loaded on request only? jQuery supports ajax mode, that means it is able to load information from external page for you. It seems it should be enough for us, right? Something like this:

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Early loaded tab</a></li>
		<li><a href="ajax/content1.html">Lazy loaded 
		tab</a></li>
	</ul>
	<div id="tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, 
		commodo a, risus.</p>
	</div>
</div>
					
				

But here we have an issue: It is an external page! No matter if it has a form inside, this form will not be validated by Wicket!This form is not assumed as nested form. Also such tab will loose all information, because every time we click on such tab, it will be reloaded. Cause it is in jquery ajax mode:) Everything is correct.

So what to do?

1. While constructing jQuery tab panels we need a container for every tab panel;
2. Real Panel (wich contains business information) should be hidden by default (and not rendered by wicket);
3. We add hidden Ajax link to Panel container;
4. jQuery tabs have an event named show. We invoke hidden Ajax link in this function using $(link).click();. Purpose of such Ajax link - make required panel visible - and load it;
5. Also we need to remember state of tab - we do not need to load the Panel every time we click on tab;
6. Seems pretty easy, right? But here we have some issues: After $(link).click(); method is invoked jQuery somehow loses focus on selected tab. That means that all panels are shown in all tabs and all tabs are displayed as selected. jQuery goes crazy. We need to fix it.
6.a. For this reason we need to hide all panels with jQuery:

$('#CONTAINER_ID').children().hide();

6.b. Show current panel:

$('#CONTAINER_ID').find(elem).show();

6.c. Make all tabs deselected:

$('#TITLE_CONTAINER_ID').find('li').
removeClass('ui-tabs-selected ui-state-active').
addClass('ui-state-default');

6.d. Add selection class to current tab:

$('#TITLE_CONTAINER_ID').find('li.ui-state-hover').
removeClass('ui-state-hover').addClass('ui-tabs-selected ui-state-active');

That's it! We have enhanced Wicket tabs with jQuery. Seems pretty easy, right?

P.S. Oh, i forgot to mention: on form submit you still are required to check if all required fields are filled :) If any tab was not loaded, but has required information - you need to show an alert in that case!