may I know what's the difference between <body> and <g:layoutBody>, and how do I use these tags?
body tag is a HTML tag. (nothing to do with grails)
g:layoutBody should be used in templates to allow the concrete views to inject their data into the template.
Official documentation on g:layoutBody is quite helpful.
In particular, this is their example of a decorator layout a.k.a. main.gsp. In this example <g:layoutBody /> will be replaced with the body of the document to be decorated (e.g. index.gsp) and, of course, <g:layoutHead /> will be replaced with the head of the document to be decorated.
<html>
<head>
<script src="global.js" />
<g:layoutHead />
</head>
<body><g:layoutBody /></body>
</html>
Related
To working my static file (CSS, JS) I have to write absolute path like /AppName/templates/style/main.css. Is there any solution, that I could write relative path like style/main.css?
If your actual concern is the dynamicness of the webapp context (the "AppName" part), then just retrieve it dynamically by HttpServletRequest#getContextPath().
<head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/templates/style/main.css" />
<script src="${pageContext.request.contextPath}/templates/js/main.js"></script>
<script>var base = "${pageContext.request.contextPath}";</script>
</head>
<body>
link
</body>
If you want to set a base path for all relative links so that you don't need to repeat ${pageContext.request.contextPath} in every relative link, use the <base> tag. Here's an example with help of JSTL functions.
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%# taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
...
<head>
<c:set var="url">${pageContext.request.requestURL}</c:set>
<base href="${fn:substring(url, 0, fn:length(url) - fn:length(pageContext.request.requestURI))}${pageContext.request.contextPath}/" />
<link rel="stylesheet" href="templates/style/main.css" />
<script src="templates/js/main.js"></script>
<script>var base = document.getElementsByTagName("base")[0].href;</script>
</head>
<body>
link
</body>
This way every relative link (i.e. not starting with / or a scheme) will become relative to the <base>.
This is by the way not specifically related to Tomcat in any way. It's just related to HTTP/HTML basics. You would have the same problem in every other webserver.
See also:
Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
Is it recommended to use the <base> html tag?
Just use <c:url>-tag with an application context relative path.
When the value parameter starts with an /, then the tag will treat it as an application relative url, and will add the application-name to the url.
Example:
jsp:
<c:url value="/templates/style/main.css" var="mainCssUrl" />`
<link rel="stylesheet" href="${mainCssUrl}" />
...
<c:url value="/home" var="homeUrl" />`
home link
will become this html, with an domain relative url:
<link rel="stylesheet" href="/AppName/templates/style/main.css" />
...
home link
You start tomcat from some directory - which is the $cwd for tomcat. You can specify any path relative to this $cwd.
suppose you have
home
- tomcat
|_bin
- cssStore
|_file.css
And suppose you start tomcat from ~/tomcat, using the command "bin/startup.sh".
~/tomcat becomes the home directory ($cwd) for tomcat
You can access "../cssStore/file.css" from class files in your servlet now
Hope that helps, - M.S.
Instead using entire link we can make as below (solution concerns jsp files)
With JSTL we can make it like:
To link resource like css, js:
<link rel="stylesheet" href="${pageContext.request.contextPath}/style/sample.css" />
<script src="${pageContext.request.contextPath}/js/sample.js"></script>
To simply make a link:
<a id=".." class=".." href="${pageContext.request.contextPath}/jsp/sample.jsp">....</a>
It's worth to get familiar with tags
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
There is also jsp method to do it like below, but better way like above:
<link rel="stylesheet" href="<%=request.getContextPath()%>/style/sample.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/js/sample.js"></script>
To simply make a link:
<a id=".." class=".." href="<%=request.getContextPath()%>/jsp/sample.jsp">....</a>
This could be done simpler:
<base href="${pageContext.request.contextPath}/"/>
All URL will be formed without unnecessary domain:port but with application context.
This is a derivative of #Ralph suggestion that I've been using. Add the c:url to the top of your JSP.
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:url value="/" var="root" />
Then just reference the root variable in your page:
<link rel="stylesheet" href="${root}templates/style/main.css">
In Grails 2.3.7, is there a way to use an expression in a GSP page to add an attribute to a body element? In the code below, the expression in the p element works, but the same expression in the body element causes a error: Expecting '=' after attribute name (${raw('this="that"')}).
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body ${raw('this="that"')}>
<p ${raw('this="that"')}>Hello!</p>
</body>
</html>
I'm trying to do this in a layout and pick up the corresponding attribute from the original page with pageProperty, but the same error occurs on the body element in the page layout as well.
Replacing an attribute value does work in a body element like this:
<body this="${that}">
but this won't work because I do not want the attribute to appear at all if it has no value.
the problem is, that the body tag is replaced by the <g:layoutBody /> tag and therefore could not be set like this.
One solution is to use to set different stuff in the sitemesh layout.
An example of this is shown here:
<html>
<head>
<g:layoutHead/>
</head>
<body class="${pageProperty( name:'body.class' )}">
<g:layoutBody/>
</body>
</html>
I am trying angular.dart and saw that its slow. When am html page is loaded containing angular, angular directive is seen first, which are then converted appropriately. Shouldn't it be converted instantaneously and the user should not see whether we are using angular ?
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello, World!</title>
</head>
<body>
<h3>Hello {{name}}!</h3>
name: <input type="text" ng-model="name">
<script type="application/dart" src="main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>
Surround {{name}} with a tag having class="ng-cloak". I used span tag. Keep it hidden by specifying css rule .ng-cloak{ display:none; }.
When angular is loaded, it will remove class="ng-cloak" from the span tag and everything will work as expected.
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello, World!</title>
<style>
.ng-cloak{ display:none;}
</style>
</head>
<body>
<h3>Hello <span class="ng-cloak">{{name}}</span>!</h3>
name: <input type="text" ng-model="name">
<script type="application/dart" src="main.dart"></script>
</body>
</html>
An alternative way is to use ng-bind as demonstrated in this youtube video: AngularJS MTV Meetup: Best Practices (2012/12/11) (after about 12 minutes)
Quoted from the API doc of NgBindDirective class
Typically, you don't use ngBind directly, but instead you use the
double curly markup like {{ expression }} which is similar but less
verbose.
It is preferrable to use ngBind instead of {{ expression }} when a
template is momentarily displayed by the browser in its raw state
before Angular compiles it. Since ngBind is an element attribute, it
makes the bindings invisible to the user while the page is loading.
This way you can display default content that get's replaced when Angular is ready
instead of showing a blank page or a progress icon.
I'm experienced with .NET MVC and wanting to learn a Python framework. I chose Pyramid.
.NET MVC has the concept of a master page, views and partial views. A master page would look something like:
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
</head>
<body>
<div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</body>
</html>
I can then create a view that would fill in the space identified by MainContent in the master page.
Going through the Pyramid wiki tutorial here, I see the author has repeated much of the same content in each of his templates--content that would normally be defined in a master page--and totally violated DRY.
Is there a concept of a master page in Pyramid?
Just like MVC.NET Pyramid can use any number of templating languages - and almost all of them support concepts similar to master pages. None of them call them that though ;-)
Chameleon is probably the most far out there - the tools that you use to define slots in master pages ContentPlaceholder, etc.) are called macros in Chameleon and referred to by the rather heavy acronym METAL (Macro Expansion Template Attribute Language).
In Jinja2 and Mako they are called blocks and Breve calls them slots.
Here is what a master page might look like in each of them:
Chameleon:
<!-- Caveat Emptor - I have never used Chameleon in anger -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal"
xmlns:i18n="http://xml.zope.org/namespaces/i18n">
<!-- We don't *need* all of this in Chameleon, but it's worth
remembering that it adds it for us -->
<head>
<title metal:define-macro="title"><span metal:define-slot="title"></span></title>
</head>
<body metal:define-macro="content">
<div metal:define-slot="content"></div>
</body>
</html>
Jinja2:
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
Mako:
<!DOCTYPE html>
<html>
<head>
<title><%block name="title" /></title>
</head>
<body>
<%block name="content" />
</body>
</html>
Breve:
html [
head [
title [ slot("title") ]
]
body [
slot("content")
]
]
I am building a web application using Grails. I decided to use dojo and I added a dojo fisheye menu for begining in the main.gsp so it would be available on all the application's pages.
It works fine for the (home) index.gsp page, but once I select another one, the fisheye menu disapears. If I go back to home it is there. I revised my settings and everything looks ok to me. I am not using anything fancy, just simple things. I am missing something but not able to figure it out.
here is the code in my main.gsp simplified for clarity:
<html>
<head>
...
<g:layoutHead />
<!-- use dojo library ... this has not effect at all -->
<g:javascript library="dojotk"/>
<!-- Load Dojo -->
<script type="text/javascript" src="js/dojotk/dojo/dojo.js"
djConfig="parseOnLoad:true, isDebug:false"></script>
<!-- need fisheye -->
<g:javascript type="text/javascript">
dojo.require("dojox.widget.FisheyeList");
</g:javascript>
<!-- required css for dojo fisheye -->
<style type="text/css">#import "js/dojotk/dojox/widget/FisheyeList/FisheyeList.css";</style>
</head>
<body >
...
<!-- fisheye bar -->
<div id="fisheyebar"><g:render template="/common/fisheyebar"/></div>
<g:layoutBody />
</body>
And here is the _fisheyebar.gsp
<g:javascript>
function load_app(target){
window.location.href=target
}
</g:javascript>
<center >
<div class="outerbar">
<div dojoType="dojox.widget.FisheyeList"
itemWidth="50" itemHeight="50"
itemMaxWidth="200" itemMaxHeight="200"
orientation="horizontal"
effectUnits="2"
itemPadding="10"
attachEdge="top"
labelEdge="bottom"
>
<div dojoType="dojox.widget.FisheyeListItem"
onClick= "load_app('${createLinkTo(dir:'/something')}');"
iconsrc="images/icon_something.png" caption="Web Browser">
</div>
.....
</div>
</div> <!-- outbar -->
</center>
All the pages including the index.gsp have the following:
<head>
<title>some titel</title>
<meta name="layout" content="main" />
</head>
Please not that the usage of template (_fisheyebar) is not the cause, I put the code directly in the main and had the same effect. So what am I missing?
it is in the relative url to dojo's location. it is relative to the root so that's why the index works and not the other pages.
using absolute URLs fixes the problem.
Did you try to move your dojo declaration and imports to your layout template page instead of putting it in your main.gsp ?