Tuesday, January 12, 2010

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.

No comments:

Post a Comment