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
Related
I'm creating a Grails plugin which has a template. The idea is that the developer can just call and get all of the rendering functionality that I build in the template.
The issue I'm facing has to do with the head tags of both the view and the template. Currently, the template in the plugin has a <head> tag with multiple JS files. If the developer of another Grails project decides to use <g:render/>and call my template, the head tag of the view is getting replaced by the head tag of the template.
Is there any way to combine the two? Essentially, if view.gsp has a head tag and my own template (pulled in from another plugin) has a head tag, I want them to be combined.
From this
http://docs.grails.org/3.1.1/guide/theWebLayer.html#layouts
It shows that you can have the head tag of a template and view exists as long as the :
<g:layoutHead />
is in the head of the template to load the head of the view
8.2.4 Layouts with Sitemesh
Creating Layouts
Grails leverages Sitemesh, a decorator engine, to support view layouts. Layouts are located in the grails-app/views/layouts directory. A typical
<html>
<head>
<title><g:layoutTitle default="An example decorator" /></title>
<g:layoutHead />
</head>
<body onload="${pageProperty(name:'body.onload')}">
<div class="menu"><!--my common menu goes here--></div>
<div class="body">
<g:layoutBody />
</div>
</body>
</html>
The key elements are the layoutHead, layoutTitle and layoutBody tag invocations:
layoutTitle - outputs the target page's title
layoutHead - outputs the target page's head tag contents
layoutBody - outputs the target page's body tag contents
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'/>
Generally Rails main application views/layout omits the <html> tag, focusing on defining what should be inside of it, like the <head> and <body> tags.
What I'm actually trying to do is to define a simple attribute inside of the <html> top level tag, but I don't know where to write it.
Any tips?
It's available in application.html.erb in the views/layout folder
This file in included by default in all your views.
I have the following content in an HTML file placed under public/company/ with a CSS file css/style.css:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
</head>
<body>
<div class="title">Name {name}</div>
</body>
</html>
I want to render this HTML file with the CSS stylesheet from an action and replace {name} without changing the physical file content and place. I can render the HTML file but the CSS file would not be found. Can anyone help me render the HTML file with the CSS file and replace the {name}?
css/style.css when called from company/file.html will try to load company/css/style.css.
Click here to see an article the way you can do that. Hope it will help!
But, I'm not sure why you are looking to render that way where Rails has all the features in place.
If your CSS file is located at /public/company/css/style.css, then your static HTML file should link it with an absolute path. Use a leading / in the resource's path indicate an absolute path.:
<link href="/company/css/style.css" rel="stylesheet" type="text/css" media="all"/>
Note that the Rails router will likely catch this request and raise an exception. Depending on the web server, you may need to enable static assets or serve directly, bypassing Rails altogether.
Changing the content of a static HTML file server-side without actually modifying it (ie. adding ERb) isn't straightforward. You could:
inject some javascript into the response to perform modifications client-side. (ugly)
load the static HTML file using Nokogiri, et. al., modify the content, and send the output to the client. (expensive)
Sounds to me like these vanilla HTML/CSS files are third party (designer? client?) and you would like to drop it in /public and have it work automatically with Rails. That would be nice, but it's not that easy. You'd be better off using Rails' built-in templating system, but that means modifying files and moving them to the expected locations.
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
}