Get Loom

Tabs

Tabs are rendered as a group of <div> tags to be handled using javascript. When the browser displays the page the currently selected tab is extracted from the URL hash (the bit after '#'). Browsers with javascript disabled will see all the tabs at once.

A typical tab example would look like this:

<a:tabContainer id="tabs">
	<a:tab id="tab1">
		Tab1 contents
	</a:tab>
	<a:tab id="tab2">
		Tab2 contents
	</a:tab>
</a:tabContainer>

Tabs can be bookmarked or opened in different windows, and with disabled javascript all tabs will be displayed in a single page.

new loom.ui.Tabs($('tabs'));

Ajaxified tabs

Downloading tab contents using Ajax

For cases where a tab is too heavy to be included on each request (or pages with just too many tabs) the tabs can include an action/event pair. These tabs will only get rendered when the current request is the same pointed by the tab.

<a:tabContainer id="tabs">
	<a:tab id="tab1" action="Dummy" event="foo">
		Tab1 contents
	</a:tab>
	<a:tab id="tab2" action="Dummy" event="bar" param-parameter1="baz">
		Tab2 contents
	</a:tab>
</a:tabContainer>

In this example, tab1 contents will only get rendered if the current request has executed the event Dummy.foo. The contents will get downloaded using Ajax when the user clicks the tab header, but if javascript is off (the case for web crawlers or when ctrl + clicking tab headers) the entire page will get downloaded including the ajax tab, which results in a seamless user experience.

Popup ajaxified tabs

An different alternative would render the target link in a popup window (just specify target="window_id"), in which case the JSP page should only display the tab contents (again, if javascript is active the tab contents will be downloaded using Ajax just as the previous version).

Tabs.jsp:

<a:tabContainer id="tabs">
	<a:tab id="tab1" action="Dummy" event="foo">
	</a:tab>
</a:tabContainer>

Tab1.jsp:

Tab contents come here

Dummy action class:

public class DummyAction extends AbstractAction {

  public Resolution event1 {
      ...
      return forward("tabs.jsp");
  }

  public Resolution foo {
      ...
      return forward("tab1.jsp");
  }

}

Note that, if possible, the recommended approach is _not_ to use popup tabs.

Unauthorized tabs

Tabs pointing to unauthorized events will not be rendered by default.

FOUC with tabs

There is a race situation where a user could see all tabs open the instant after the page has been loaded but before the execution of any javascript code. This can be fixed by doing this:

style.css

.tab { display: none; }
.tab.selected { display: block; }

Layout.tag:

<head>
<noscript>
<style type="text/css">.tab { display: block !important; }</style>
</noscript>
</head>

For the explanation of this, go here.