Lets say I have a gsp page that I want to load all the scripts in a particular folder:
<html>
<head>
{each file in $path}
<asset:javascript src="file" />
</head>
</html>
assuming $path is a directory path. Most templating languages have a way to do this so I'm sure Grails can accomplish it. But I'm not sure how to make it happen. My end goal is this:
ndex
<html>
<head>
<asset:javascript src="js/util.js" />
<asset:javascript src="js/util2.js" />
<asset:javascript src="js/index.js" />
</head>
</html>
Please help.
You can do something like this:
<html>
<head>
<g:each var="file" in="${(new File(path)).listFiles()*.path}">
<asset:javascript src="${file}" />
</g:each>
</head>
</html>
The GSP g:each tag is how iteration is performed in Grails when using GSP. The in attribute is used to specify the Iterable to iterate through. In this case it's the expression:
(new File(path)).listFiles()*.path
The expression means:
new File(path) - Create a Java File object to represent the directory path.
.listFiles() - Returns a list of all files and directories (excluding sub-directories) each represented by File objects.
*.path - A spread operator expression which returns a list of file path Strings, effectively converting the File objects into Strings. It's the equivalent of .collect { it.path }.
Related
Thymeleaf 3 has build-in fragments support (no need for nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect dependency).
I am not experienced with Thymeleaf and would like to see code that allows to define some script tags for inclusion inside head tag and some tags for inclusion before </body> end tag.
A HTML file like this ...
<!DOCTYPE html>
<html xmlns:th=“http://www.thymeleaf.org”>
<head th:fragment=“head”>
<script>
…
</script>
<head>
<body>
<div th:fragment="foot">
…
</div>
</body>
</html>
... defines two fragments: head and foot which can then be referenced in other Thymeleaf templates like so:
<!DOCTYPE html>
<html xmlns:th=“http://www.thymeleaf.org”>
<head>
<!—/*/ <th:block th:include=“fragments/main :: head"><.th:block> /*/—>
… other stuff specific to this template
</head>
<body>
… other stuff specific to this template
<!—/*/ <th:block th:include=“fragments/main :: foot"><.th:block> /*/—>
</body>
</html>
The include instruction (<th:block th:include=“fragments/main :: head") describes the location of the file which contains the fragment (fragments/main) and the name of a specific fragment within that file (head) so my example assumes that the HTML file containing the fragments is named main and that it is located in a folder named fragments relative to the location of the template file(s) which use these fragments. For example:
+- templates
|
+- fragments
|
+ main.html
+- index.html
+- … etc
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>
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>
Through my journey of dart, I stumbled upon a "blocker" in terms of loading a component.
While having my component defined as followed:
<!DOCTYPE html>
<element name="x-foo" constructor="FooComponent" extends="button">
<template>
<button type="button" class="btn {{classes}}"> {{text}} </button>
</template>
<script type="application/dart">
import 'package:web_ui/web_ui.dart';
String classes = '';
String text = '';
class FooComponent extends WebComponent {
}
</script>
</element>
and referencing the component as followed:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>example</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- '../web/foo.html' or '../web/out/foo.html.dart' -->
<link rel="components" href='foo.html'>
</head>
<body>
<h1>example</h1>
<p>Hello world from Dart!</p>
<x-foo></x-foo>
<script type="application/dart">void main() { }</script>
<script type="text/javascript" src="dart.js"></script>
</body>
</html>
and my build script not creating a html file (output folder: foo.html.dart), I'm not sure to which file I have to reference.
The manual is also not declarative enough to solve my issue:
http://www.dartlang.org/articles/dart-web-components/spec.html#loading-components
Referencing to either the definition of the component (foo.html) or it's generated output (foo.html.dart) is not working. I've also double checked the paths of both files through inspection, which just downloaded both files with chromium.
My concluding question:
Is this reference (link element href) pointing to an internal intelligence or to a "physical" available file at runtime? And if secondly, which one (generated (html/dart) or source)?
To avoid misunderstandings, I've added a list of my repo:
foo
packages
examples
assets
dart.js
example.html
web
out
foo.html.dart
foo.html
build.dart
Component file (foo.html) is missing the <html><body>...</body></html> tags:
<!DOCTYPE html>
<html>
<body>
<element name="x-foo" constructor="FooComponent" extends="button">
...
</element>
</html>
</body>
Both files (examples.html and foo.html) must be in the same base directory:
web
examples.html
foo.html
...
Then, examples.html need be used as argument inside build.dart:
build(new Options().arguments, ['web/example.html']);
And, finally, foo.html (that is, web/foo.html) must be the one to be linked:
<link rel="components" href='foo.html'>
The way you have it in your main HTML file is correct. You reference foo.html because the referencing HTML document needs to be compiled with dwc. dwc will take the main HTML file and compile it and all the the components it includes. The component are completely compiled to Dart and they .html files won't be used anymore.
If you're trying to edit example.html to include your component, you'll need to compile example.html, and not foo.html. You'll still generate foo.html.dart, but also example.html.dart and a bootstrap script to load everything up.