I got this:
main.vm
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> test </title>
</head>
<body>
$content
</body>
</html>
This should serve as the default template for all other views which are going to be included.
For example this one:
example.vm
#define($content)
<div>
<p> Hello World ! </p>
</div>
#end
How do I include that partial as content into the main.vm file?
Am I defining my templates right?
I couldn't figure out that from the official docs.
I'm using Spring Boot, everything is set up correctly.
All the templates are in the same folder:
/resources/templates
edit:
The main idea is to have one boilerplate html file with all the script tags and link tages, head and body.
This should be the main template with a $content variable, this is a placeholder for every other page.
Now every other page should be included into that main page.
How do I achieve that?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> test </title>
</head>
<body>
$content
##the templates you want to 'execute' and render
#parse("example.vm")
#parse("example1.vm")
##...
#parse("example-n.vm")
##The templates you want to 'render' but not 'execute' as velocity templates.
#include("include.vm")
#include("include1.vm")
#include("include2.vm")
##...
#include("include-n.vm")
</body>
</html>
This would help...
Please note this:-
Using the #parse() macro would execute the template and then include it.
Using the #include() macro would include the template as plaintext.
Related
I have a problem with the navigation bar,
I have a navigation bar for my project. As you can see my code below if I use the link and get it from an external source it is working well. But there is a problem for me when the net is a bit slow I can see the navigation's loading on my screen. it is a very small duration but it disturbs me very much. So I decided to use CSS source from my project folder but could not do that. I tried many code samples but could not do it correctly. If somebody helps me, I will appreciate it. Thanks.
I am also still trying to solve it but I wanted to get some help.
function MyNavBar(params) {
//console.log(params["conpanyID"]);
return (
<div>
<head>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
</head>
1-When I use link/external source
[1]: https://i.stack.imgur.com/SO5qB.png
2-When I use CSS file from my project folder.
[2]: https://i.stack.imgur.com/MqHqo.png
you might have linked your stylesheet inside the body instead of the header section , because of which your page will load first, then your CSS
here is an example
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>file</title>
<link rel="stylesheet" href="css/s.css">
<link rel="icon" href="css/si.ico">
</head>
I'm out of solutions here. Have been trying to solve this for half a day now!!! My jsp can not read my CSS file. I've tried the very simplest file structure here. I put both jsp and CSS under "Web Pages".
So
MyProject
-Web Pages
-WEB-INF
-login.jsp
-logincss.css
-etc...
jsp code:
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="logincss.css">
<title>JSP Page</title>
</head>
<body>
<p>why you CSS wont WORK!!!</p>
</body>
</html>
css code:
body
{
background-color: red;
}
So I write href="logincss.css" because both jsp and the css are on the same level. But still this does not work! I have the simplest html and simplest css but it does not work! I think the problem is on the Project itself. I just created a new web project, create jsp and css, try it out and it worked!
Please help me I don't know how to solve this problem. Thanks.
I'm using express and public folder for loading CSS inside a tag. But I wonder if it is possible to load it as text directly on EJS template, similarly as including another EJS file. I know it is possible to load the css content using fs and sending it to the render function, but I wonder if EJS has a method for including any sort of file. Something similar to:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<% include('../public/css/style.css') %>
</head>
<body>
<% include('./partial.ejs') %>
</body>
</html>
My Grails project structure:
my-app/
grails-app/
<mostly typical grails-app structure>
views/
web/
index.gsp
app/
admin/
layouts/
main.gsp
<rest of project structure is like any other Grails app>
So you can see whereas, normally, the index page is located at grails-app/views/index.gsp, I have it at grails-app/views/web/index.gsp.
My application.properties:
app.grails.version=2.4.2
app.name=my-app
app.context=/
app.version=0.1
One section of my UrlMappings.groovy:
"/"(view:"/web/index")
My main.gsp layout:
<!DOCTYPE html>
<html lang="en">
<head>
<title><g:layoutTitle default="MyApp"/></title>
<g:resource dir="css" file="myapp.css" />
<g:layoutHead/>
</head>
<body>
<g:layoutBody/>
<g:resource dir="js" file="myapp.js" />
</body>
</html>
My index.gsp:
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main"/>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
When the app starts up and I view it in a browser, it is obvious that myapp.css is not being found because the page styling is all wrong. When I view page source I see:
<!DOCTYPE html>
<html lang="en">
<head>
<title>MyApp</title>
/css/myapp.css
<meta name="layout" content="main"/>
</head>
<body>
<h1>Hello!</h1>
/js/myapp.js
</body>
</html>
So it sounds like Grails takes your app.context and uses that as the prefix for all resources. And because I haven't wired something correctly, Grails is just translating my <g:resource> tags into plaintext and printing them out in the HTML.
I guess my question is: What do I need to do so that Grails can find my CSS/JS resources?
I don't sure that tag into tag will be work correctly, so write like this:
<link rel="stylesheet" href="${resource(dir:'css', file:'myapp.css')}" charset="utf-8"/>
According to the Documentation, The resources tag generates a link (URI) string. Can be used in an href, JavaScript, Ajax call, etc.
Use the resources tag inside script or link tags to get your css/js loaded in your page like,
<link rel="stylesheet" href="<g:resource dir="css" file="myapp.css" />" charset="utf-8"/>
You can also use resources plugin, which I would recommend as it solves the purpose and has good documentation
I'm about to generate a pdf report (roughly 20 slides long) in java using Spring MVC, Thymeleaf and Flying-saucer. I would like to be able to structure the code according to the different slides so that I can easily add and remove slides and not have all code for all slides in one chunk. In the end, after Spring MVC and Thymeleaf are done, I guess I will have a lot of XHTML and CSS ready to be sent to Flying-saucer for PDF generation.
I haven't worked that much with Spring MVC but my feeling is that you first do the controller stuff, e.g. get data, work with the data and then put necessary data on the Model so Thymeleaf can continue and render the view based on a template and the data on the Model.
How can I divide the code parts in java and Thymeleaf in a good modular way? Anyone have a good design to be inspired by or can point me somewhere on the web where I can find good information about this?
In your case I suggest to fragment Thymeleaf templates into three parts - master, slide and content templates. You can fill report content dynamically from Spring MVC controller or build it in static way just in Thymeleaf.
I providing skeleton templates structure as I think it's the best (all templates supposed to be on root template path). If you want to add slide you just create new template with content and insert new line to master template. If you want to remove slide you just delete appropriate line.
Master template - index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<th:block th:include="slide :: slide" th:with="content=${'content1'}"></th:block>
<th:block th:include="slide :: slide" th:with="content=${'content2'}"></th:block>
<th:block th:remove="tag" th:include="slide :: slide" th:with="content=${'content3'}"></th:block>
</body>
</html>
Slide template - slide.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body th:fragment="slide">
<div class="slide">
<div th:replace="${content} :: content"></div>
</div>
</body>
</html>
Content template 1 - content1.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<ul th:fragment="content">
<li>Content 1</li>
</ul>
</body>
</html>
Content template 2 - content2.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<span th:fragment="content">Content 2</span>
</body>
</html>
Content template 3 - content3.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<p th:fragment="content">
Content 3
</p>
</body>
</html>