Search code examples
grailslayoutgspreusability

Using other layouts inside a Grails GSP layout

I have a Grails 2.4.x app where ~80% of the pages use a simple.gsp layout, and the other pages are all stragglers that don't use any layout/templating at all. But they can't use simple.gsp because its contents don't apply to them.

I have a need to add a header nav to all of these pages (100%) and would like an elegant solution. Ideally, I could create a new layout, say, awesome-header.gsp that contains the header nav. Then:

  • For any pages (again, ~20%) that don't use the simple.gsp layout, I would just have them use awesome-header.gsp directly; but then...
  • I would just somehow reference/import/extend simple.gsp to (somehow) use awesome-header.gsp; which now allows the other ~80% pages to use the new header nav

Let's pretend that this is simple.gsp:

<!DOCTYPE html>
<html>
    <head>
        <title>
            <g:layoutTitle default="Some App" />
        </title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- Lots of stuff -->
        <g:layoutHead />
        <!-- Lots of stuff -->
    </head>
    <body>
        <!-- Lots of stuff -->
        <div id="page-content">
            <g:layoutBody />
        </div>
        <!-- Lots of stuff -->
    </body>
</html>

And let's pretend that this is awesome-header.gsp:

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
    <head>
        <title></title>
    </head>

    <body>
        <script id="awesome-header-bootstrap" src="/awesome-header/awesome-header-bootstrap-1.0.js"><script>
        <g:layoutBody />
    </body>
</html>

Pretty barebones. All I need this awesome-header.gsp layout to do is include a JS right at the top of the <body> element. For the purpose of this question, this JS script is "magic" and fetches the header nav magically for me.

  • How can reference/import/extend simple.gsp to use awesome-header.gsp?
  • I don't want the awesome-header.gsp to override any title or header content (either defined inside simple.gsp or in any of the straggler pages)

Any ideas how I could accomplish this setup?

Solution

  • If I well understand, you want a hierarchy between simple.gsp and awesome-header.gsp. So you may look at this link to help you to do that.

    An other solution, maybe easier because there isn't a lot of modifications to do, is to use templates:

    • Put all your HTML / JS code related to your awesome-header inside a template (let say _awesome-header.gsp, the '_' is important !)
    • Simply put that line inside your 'simple' layout and inside all others pages which are not connected to your 'simple' layout: <g:render template='awesome-header'/>