I have a Sprint Boot Web Maven project created from Spring Initlializer with Mustache templating engine.
So far, its working and I can do the basic things but I want to set a layout (template) that will include the main body of html e.g. <html>...</html> whilst my view template will only include the page content e.g. <h1>Hello World</h1>
I can get partials to work so I could do {{>header}}<h1>Hello World</h1>{{>footer}}
What I want to be able to do is:
index.html
{{>header}}{{>content}}{{>footer}}
home.html
<h1>Hello World</h1>
I can't find any tutorial or documentation how do this.
If it helps, I found some reference documentation here:
https://spring.io/blog/2016/11/21/the-joy-of-mustache-server-side-templates-for-the-jvm
See the section on Natural Templates.
{{!
<!doctype html>
<html lang="en">
<body>
}}
{{>header}}
<h1>Demo</h1>
<div>Hello World</div>
{{>footer}}
{{!
</body>
</html>
}}
Related
I am fighting the css/js access problem in my gwt+spring security simple application. So, i have secutiy controller with the next method:
#GetMapping(value = "/notes")
public ModelAndView index(ModelAndView modelAndView) {
modelAndView.setViewName(VIEW_NOTES);
return modelAndView;
}
By the way, I integrated these technologies according to this article. So, thanks to this controller method (I use RestController) we've got resolved view (simple as ****):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Notes</title>
<link rel="stylesheet" type="text/css" media="all"
href="../static/css/notes-main.css"></link>
</head>
<body>
<!-- This script tag is what actually loads the GWT module. The -->
<!-- 'nocache.js' file (also called a "selection script") is -->
<!-- produced by the GWT compiler in the module output directory -->
<!-- or generated automatically in development mode. -->
<script language="javascript" src="notesgwtapp/notesgwtapp.nocache.js">
</script>
<!-- Include a history iframe to enable full GWT history support -->
<!-- (the id must be exactly as shown) -->
<iframe src="javascript:''" id="__gwt_historyFrame"
style="width:0;height:0;border:0"></iframe>
<div id="notes"></div>
</body>
</html>
Now is the most interesting thing that I have these two errors:
GET http://localhost:8080/static/css/notes-main.css 403
GET http://localhost:8080/notesgwtapp/notesgwtapp.nocache.js 403
I dont have problems with resolving resources for other views, btw.
Please help, how can I handle it? If i miss some important part of code, I will add it. Just ask. Thank you in advance.
By default Sprint Boot permits all access to /js/**, /css/**, /images/**. But you try to access /static/** and /notesgwtapp/** which will result in the 403 error (see here).
There are two solutions:
Make sure that the notesgwtapp.nocache.js and the notes-main.css file end up in one of the above folders or
Override the SecurityConfig of your Spring Boot app and add the /static/** and /notesgwtapp/** folder to the permitted locations.
I`m trying to build an app with spring boot and freemarker as template engine. The problem I have is, I want to make a "master template" for all my pages to use. I found out that this is achievable in Freemarker with macros. This is how my indexmaster.ftl looks like:
[#macro indexmaster title="defaultTitle"]
<html>
<head> css stuff </head>
<body>
<div id="content">[#nested /]</div>
</body>
</html>
[/#macro]
and in the other pages, I use the macro like this:
[#import "/WEB-INF/ftl/master/indexmaster.ftl" as layout /]
[#layout.indexmaster title="My title"]
...rest of the page
[/#layout.indexmaster]
The problem I`m facing is, the freemarker "code" is interpreted as text when I access the page
click me
What am I doing wrong? Is there any extra spring boot configuration needed?
Use "<>" instead of "[]" for Freemarker tags.
You need to set the tag_syntax configuration setting of FreeMarker to auto_detect or square_bracket. The default is angle_bracket for backward compatibility. Another option is to start the template with [#ftl], which turns on square bracket syntax even if tag_syntax is angle_bracket.
I have spring mvc supplied text boxes and buttons in form page how to include twitter bootstrap in those tags. Where do I place bootstrap related files in the folder structure and which jar do I required to use bootstrap?
Example text boxes are:
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<form:form method="post" commandName="stdcmd">
username:<form:form path="txtUname">
password:<form:form path="txtPwd">
<input type="submit" value="register"/>
</form:form>
To use the bootstrap, you need to place the bootstrap files in the web folder. For example, resources/bootstrap folder. Then add the link to those files in jsp like:
<link rel='stylesheet' href='resources/bootstrap/bootstrap.min.css'>
<script type="text/javascript" src="resources/bootstrap/bootstrap.min.js"></script>
Also on your spring config file include this one:
<mvc:resources mapping="/resources/**" location="/resources/bootstrap
Check this link for more info
You should be able to access the classes from bootstrap and apply in your jsp.
I created a JSF page with PrimeFaces components. The project runs fine, but the PrimeFaces UI look and feel is completely missing. I'm only noticing below message in server log:
One or more resources has the target of 'head' but not 'head' component has been defined within the view
What does this mean and how can I fix the PrimeFaces UI styling?
This means that you're using plain HTML <head> instead of JSF <h:head> in your XHTML template. The JSF <h:head> allows automatic inclusion of CSS/JS resources in the generated HTML <head> via #ResourceDependency annotations. PrimeFaces as being a jQuery based JSF component library needs to auto-include some jQuery/UI JS/CSS files and this really requires a <h:head>.
So, search for a
<head>
<title>Some title</title>
...
</head>
in your templates and replace it by
<h:head>
<title>Some title</title>
...
</h:head>
See also:
What's the difference between <h:head> and <head> in Java Facelets?
Unable to understand <h:head> behaviour
How to programmatically add JS and CSS resources to <h:head>
How to include another XHTML in XHTML using JSF 2.0 Facelets?
I would like to use Spring theme resolvers' feature (see: here) in my Thymeleaf template.
What is the Thymeleaf's equivalent to the spring:theme JSP tag?
See JSP code sample below:
<%# taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<html>
<head>
<link rel="stylesheet" href="<spring:theme code='styleSheet'/>" type="text/css"/>
</head>
<body style="background=<spring:theme code='background'/>">
...
</body>
</html>
I don't think this was the case at the time that you asked your question, but the current version of thymeleaf-spring3 (2.0.18 as of this writing) has as part of the SpringStandard dialect a themes function, which can be used like this:
<body th:style="'background-color: ' + ${#themes.code('backgroundColor')}">