I've been going through the book "The Definitive Guide to Grails" (Rocher/Brown) and in Chapter 04, this mysterious thing called a "layout" just appeared with no explanation. (And there's no "layout" in the index. As far as I know, it's never explained.)
How does the system know to "inherit" the pages from layout/main.gsp? There's nothing about "layouts" in the index, and it seems to have just appeared.
On their sample app, a simple store site, the URL mappings for the / homepage say
"/"(controller:"store")
and store controller's empty "index" closure
package com.g2one.gtunes
class StoreController {
def index = {
}
}
simply tells it to render store/index.gsp
The store/index.gsp just has a few lines of HTML; no layout gets included with any directive
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="layout" content="main">
<title>gTunes Store</title>
<g:javascript library="prototype"></g:javascript>
</head>
<body id="body">
<h1>Your online music store and storage service!</h1>
<p>Manage your own library, browse music and purchase new tracks as they become available</p>
</body>
</html>
When I run the sample the page shown for "/" isn't just this simple HTML, it's the contents of "layouts/main.gsp" with this information magically inserted inside it.
I don't see how the information in layout/main.gsp gets applied to the page, how the elements get mixed together. I've been following through the book page by page and this functionality just "appeared" with no explanation.
The <meta name="layout" content="main"> tag includes the layout in the gsp page.
You can view the grails-app/views/layouts/main.gsp to view and modify the layout. You can copy main.gsp to mymain.gsp, modify it, then change layout entry in the gsp page to reference mymain.gsp instead of main.gsp and experiment with customizing your layout preserving your ability to easily back out your changes.
Grails uses sitemesh under the covers (like it uses hibernate and spring) to do view layouts. There is a web-app/WEB-INF/sitemesh.xml configuration file in the project directory as well. This particular file isn't that helpful, but it references a class in the groovy project if you wanted to deeply understand how grails is using sitemesh (this probably isn't necessary).
Here's your directive:
<meta name="layout" content="main">
main.gsp contains <g:layoutHead> and <g:layoutBody>, where the <head> and <body> content of the index.gsp are folded into the layout to create the final page.
One recent trick that appears to work, if you name your layout to match your controller it appears (in Grails 2.3.4 at least) to automatically use that template.
For example, my controller:
// grails-app/controllers/myapp/HomeController.groovy
package myapp
class HomeController {
def index() {
[ myvar: "Test" ]
}
}
my layout:
// grails-app/views/layouts/home.gsp
<html>
<head></head>
<body>
<h1>Home</h1>
<g:layoutBody />
</body>
</html>
my view:
// grails-app/views/home/index.gsp
<p>${ myvar }</p>
renders using the home layout.
Also, you can specify a layout for all your actions in a controller like this:
class HomeController {
static layout = "someotherlayout"
// actions will render using grails-app/views/layouts/someotherlayout.gsp
}
Related
If you have a controller action, but don't want the view to be rendered with the default layout (in my case layout/main.gsp), is there a render option you can enter into the controller action or something similar?
def comingSoon {
static layout = none; //not correct, but something like this?
}
In your view file, you might see something like this
<html>
<head>
<meta name="layout" content="main"/> // delete this line
<title>Coming Soon</title>
</head>
...
Remove the meta tag with the name="layout". This meta tag is the one that tells sitemesh to use the main layout
Without more details it's difficult to say 100% what case you are in so I'll attempt to answer both.
If you are using dynamically scaffolded views then you'll need to generate the GSPs so you can remove the <meta name="layout" tag from them. This will keep any layout from being used.
Alternatively you could alter the scaffolding templates (within the scaffolding plugin) to include some additional logic about not applying a layout when the domain class has some static property (as your question contains).
You can remove <meta name="layout" content="main"/> to vanish exists layout. Or you may customize layout by edit that main.gsp page in your-project\grails-app\views\layouts\
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?
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'/>
I am trying to include one gsp into another but avoid the navbar that I have in the layout rendered twice. Below is my attempt to show this as briefly as possible.
main.gsp
...
<g:render template="dashboardNavbar"></g:render>
...
page1.gsp
...
<meta name="layout" content="main"/>
...
page2.gsp
...
<meta name="layout" content="main"/>
<g:include action="page1"></g:include>
...
Page2 needs to be on its own so removing the meta tag is out of the question. I tried adding g:if block with a flag to control the rendering of the navbar template in main.gsp and pass that flag to the include directive as model but that causes both the navbars to disappear. Not sure why that happens. Any suggestions?
Why don't you extract meta section from page1.gsp and save whole content as a separate template, which will be rendered either page1 or page2:
page1.gsp
...
<meta section for page1/>
<g:render template="contentDuplicatedInGsp1AndGsp2"></g:render>
...
page2.gsp
...
<meta section for page2/>
<g:render template="contentDuplicatedInGsp1AndGsp2"></g:render>
...
Of course remember to set apropriate variables in controller before rendering page2.gsp
I have a grails app named qotd which has a controller named quote. I have written view file for this controller named as random.gsp file as :
<html>
<head>
<title>Random Quote</title>
</head>
<body>
<div id ="quote">
<q>${content}</q>
<p>${author}</p>
</div>
</body>
Now i have to write down the Grails Layout for this controller. For example i have to locate my .css and images files etc, how to do that(better if an example is shown)? And where i should place that file?
Thanks in advance.
When you create a Grails application with grails create-app qotd, you get a file grails-app/views/layout/main.gsp. Take a look at that file, as it shows you how to include css, js and images. This file is the default Sitemesh layout file. To use it, change your random.gsp to
<head>
<meta name='layout' content='main'/>
<title>Random Quote</title>
</head>
<body>
<div id ="quote">
<q>${content}</q>
<p>${author}</p>
</div>
</body>
Then the layout file main.gsp will be wrapped around your content.
To learn more about Sitemesh, take a look at chapter 7 in the Grails documentation
Can someone tell me if there is a recommended way to add Meta information to MVC3 pages. The kind of information that I would like to add is title, description, keywords.
Thanks,
Gemma
I'd use ViewBag for the title and RenderSection for the rest of the head content. This goes in the Master Layout file (_Layout.cshtml):
<head>
<title>#ViewBag.Title</title>
#RenderSection("head", false);
</head>
In your individual views, you will add:
#{
ViewBag.Title = "My Page Title";
}
#section head {
<meta name="description" content="best site ever">
}
EDIT:
Note that the #section head {...} block is optional. You will not get a compilation error if you omit this block. On views where you want metadata you'd supply it.
I'd add it as a seperate view - that way you can call:
#{Html.RenderAction("Head", "Header");}
from within your various layouts and have the same correct header data rendered.
hth
Usually, in master page, we put a ContentPlaceHolder control, call it TitleContent like this:
<head>
<title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</title>
</head>
And in children pages:
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Some Title
</asp:Content>
The same thing can be done for Meta Tags, or you could make a full ContentPlaceHolder for HeadContent and fill it with (title/meta...) in each page individually.
You have to put metatags inside the HEAD tag of HTML. For MVC application it depends there you have HEAD. It could be either page (*.cshmtl) of layout (Layout.cshtml). It is quite better to place into layout, since meta info is shared throught the rest of pages.
// *.cshtml
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<meta ... />
</html>
</head>