I use thymeleaf. Templates are in root folder templates.
resources:
-templates
--accountTemplates
---myTemplate.html
--adminTemplates
--commonFragment.html
I need to insert a commonFragment into the myTemplate.html located in folder accountTemplates
<html>
----
<section th:insert="??????????::commonFragment"/>
</html>
use th:replace instead of th:insert:
<html>
----
<section th:replace="accountTemplates/commonFragment::commonFragment"/>
</html>
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
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 }.
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 my Grails app I need to serve links to actual text (*.txt) files. If the user clicks the link, they should view the text file as plaintext inside their browser:
MyFiles.groovy controller:
==========================
class MyFiles {
def index() {
render(view: "myfiles")
}
}
myfiles.gsp:
============
<!DOCTYPE html>
<html>
<head>
<!-- Omitted for brevity -->
</head>
<body>
Click me to view a file
</body>
</html>
My questions:
Where should I place myfile01.txt inside the Grails project? Directly inside web-app? Inside a web-app/myfiles dir? Inside WEB-INF?; and
What should the link be in the GSP, such that Grails correctly resolves correctly and displays the file? I don't see anything under g:links that stands out as an obvious choice.
I'd recommend creating another folder where you have images/css.
<a href='<g:resource dir="somedirectory" file=myfiles01.txt" absolute="true" />'>my file</a>
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 ?