GrailsUI Tab Layout

Using the tab view layout in grails is pretty simple

First, install the GrailsUI plugin

grails install-plugin grails-ui

Second, include the gui resource in your gsp file by adding the following within the head of your document. There are several components available in the plug-in, we're just including one here.

<gui:resources components="['tabView']"/> 

Finally, use the tags in your gsp. Note that the tags need to be used with a particular css style - something that, bafflingly, needs to be done manually.

<div class="yui-skin-sam">
<gui:tabView>
    <gui:tab label="Default Tab" active="true">
        <g:render template="myTemplate" bean="${myBeanInstance}" />
    </gui:tab>
    <gui:tab label="Tab 2" controller="myController" action="foo">
    </gui:tab>
</gui:tabView>
</div>

The first tab is the default tab, as indicated by the active attribute. The contents for the tab are contained within the template myTemplate.

The second tab is making a server call, and will display the template returned by the foo action on the controller myController.