I'm wondering can Velocity make what I want :)
For example I have
<html>
<meta>
<title>My title</title>
</meta>
<body>
<div id="content">
<!-- here is my dynamic content -->
</div>
<div id="right">static content</div>
</body></html>
Now. I have 4 actions in my Spring based application
create, update, login, home
Every action have it own template. For create is a big form, for update small form, for login, login form, for home lates news.
There are very much diffrent each from other. Now I want to dynamicly swap content in my
Can I create such template-container (i mean the header part and right div) with dynamic part ?
I don't want to get the actions response to variable and pass it to template. I want to have a simple template for example create.jsp or create.vm or create.html and I want that my app automaticly will take the template of the action and render it in my static template-container.
I hope it is clear
Why not use Tiles instead? It's designed for this scenario.
I've used Tiles 2 with JSP in several projects and I like it. However, with Velocity I prefer macros for simple templating system.
main.vm:
#macro(main)
<html>
<meta>
<title>My title</title>
</meta>
<body>
<div id="content">
$bodyContent
</div>
</body>
</html>
#end
hello.vm:
##main
Hello, World!
#end
Spring configuration:
<bean id="velocityConfigurer"
...
<property name="velocimacro.library" value="main.vm" />
</bean>
Maybe this is not so pretty, but it has the advantage that every view is the one who decides which layout applies, more like JSF does.
Related
I have a Spring-Boot project with Velocity templating all configured and working fine...
In my velocity view, I have the following;
<head>
<!-- some other meta tags here -->
<meta name="csrf-token" content="$!_csrf.token">
</head>
Here's what the output looks like when I inspect in chrome;
<meta name="csrf-token" content="$!_csrf.token">
However on this same page I have a form that looks something like this;
<form method="post" action="/post/to/wherever">
<input type="hidden" id="csrf" name="$!_csrf.parameterName" value="$!_csrf.token" data-header="$!_csrf.headerName"/>
<!-- other fields here -->
</form>
And the browser inspection shows the following;
<input type="hidden" name="_csrf" value="69799b81-7c45-4042-9269-3a83769df682" data-header="X-CSRF-TOKEN">
So obviously, the _csrf attribute gets injected and resolved within the form body but not within the head meta tags.
QUESTION: What would cause a thing like this?
Ok I eventually found out that what was happening here was due to a very simple oversight.
I had the <head>...</head> section in a separate template and was including it to other templates as follows;
#include("/pages/common/header.vm")
Well, for users of velocity, it's quite obvious that the above just includes the template as-is (i.e all content is translated as text) and wouldn't resolve any velocity context attributes declared within. So I just needed to change it to the following
#parse("/pages/common/header.vm")
This ensures that any velocity attributes declared within the header.vm template are appropriately parsed and the values accordingly read.
I was initially going to delete the question thinking it shouldn't have been asked in the first place, but I realized, well this is StackOverflow, better to just point out the mistake and save somebody else some little time. Essentially, make the world a better place for everyone... Cheers!
Good Evening,
I am creating a project based on Spring MVC for the back end and Twitter Bootstrap for the front end.
I would like to create a template for recurring my pages (header and footer fixed for all pages) only that I would like to avoid repeating the code in all the pages (as it is not good practice and can lead to mistakes). Is there a way to centralize what? I thought about the jsp (one for the header and the footer) and recall within the various view. Is there a way to do so? Or there better alternatives?
thanks
You can use the JSP... There's include tag, you can use like this:
<%# include file="/views/templates/header.jsp" %>
// Rest of the content
<%# include file="/views/templates/footer.jsp" %>
Or you can use a framework for templates, like Tiles or Freemarker.
Spring MVC with Tiles: http://java.dzone.com/articles/spring-mvc-tiles-3-integration
Using tiles, the template page:
<body>
<div class="container" style="border: #C1C1C1 solid 1px; border-radius:10px;">
<!-- Header -->
<tiles:insertAttribute name="header" />
<!-- Body Page -->
<div class="span-19 last">
<tiles:insertAttribute name="body" />
</div>
<!-- Footer Page -->
<tiles:insertAttribute name="footer" />
</div>
</body>
And you can change dynamically the "body" tiles attribute.
Hello I have some problems with templating pages.
I am returning from controller a view called list:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout/template">
<div layout:fragment="pageContent">
<p>LIST</p>
</div>
</html>
And I would like to put this into template where I have a lot of html stuff and:
<div layout:fragment="pageContent">Demo static page content</div>
But I am getting in web browser only list view.
How to put one view returned from controller to template using SpringStandardDialect?
So if i understand correctly, you want to inject that fragment which is called pageContent into some other html page (lets call it main.html for sake of it.
First thing to do is change the div in list to the following:
<div th:fragment="pageContent">
<p>LIST</p>
</div>
then in your main.html you would call the fragment via:
<div th:include="list::pageContent"></div>
or
<div th:replace="list::pageContent"></div>
Btw "list::pageContent" indicates that its in base folder, if its located in folder called example then it would be "example/list:pageContent".
here is the great example on Thymeleaf website: http://www.thymeleaf.org/doc/usingthymeleaf.html#including-template-fragments
Hope this helps, if not let me know.
I am coming from a PHP/Laravel direction and there we use the blade templating engine to load components into a specific layout like this:
Main Layout called: layout.blade.php
<html>
<head><title>Whatever</title></head>
<body>
#yield('content')
</body>
And then we load our components inside this layout by a file like this, called: content.php
#extends(layout)
#section('content')
<h1>This contents is loaded into the Layout</h1>
<p>Yada yada yada</p>
#stop
In the backend we link the route (lets call it "/content") to a controller that creates this view. And anytime we click on a menu-item with an anchor-tag, we load the views into our layout.
Now with Polymer, this is a different story, because I have no Idea how to go on about.
A layout in polymer looks more like this. Let's call this layout-one.html
<html>
<head><title>Whatever</title></head>
<body>
<core-drawer-panel>
<core-header-panel drawer></core-header-panel>
<core-header-panel content>
<core-toolbar main></core-toolbar>
<div>Main Content goes here...</div>
</core-header-panel>
</core-drawer-panel>
</body>
</html>
It's something like that, I know the structure above might have a mistake, but I am pulling this information out of my head.
Now if I have a different view I want to load inside the "content"-Area, intuitively I would have an achor-tag that loads a "content.html", which in turn would have to have all the html-tags and head-tags and so on... so I would load the complete page, which is counter-intuitive and non-dynamic.
I've seen the Polymer-Team accomplish, what I am trying to accomplish here:
http://www.polymer-project.org/components/core-elements/demo.html#core-scroll-header-panel
Just loading different contents into an existing polymer-layout.
So please in the name of god, can anyone tell me exactly how it is done, because I seriously have no idea at the moment. I am suggesting, that they used something like angular to create the views (because of the hash-tag), but my instinct says, that they made it somehow else.
I would be most glad, if you gave me besides the explanation on how it is done, also any resource on how I would be reproduce this behaviour. Maybe a good article or tutorial.
Thanks mates.
You're looking for the <content> tag. Check out how this works.
simple-layout.html
<polymer-element name="simple-layout" noscript>
<template>
<core-drawer-panel>
<core-header-panel drawer>
<content select=".title"><!-- content with class 'title' --></content>
</core-header-panel>
<core-header-panel content>
<core-toolbar main></core-toolbar>
<content><!-- all other content will show up here --></content>
</core-header-panel>
</core-drawer-panel>
</template>
</polymer-element>
home-page.html
<link rel="import" href="simple-layout.html">
<polymer-element name="home-page" noscript>
<template>
<simple-layout>
<div class="title">Home</div>
<h1>This contents is loaded into the main part of the layout.</h1>
<p>Yada yada yada. More content in the main layout.</p>
</simple-layout>
</template>
</polymer-element>
This way you can load a "page" element and it will include the layout it wants to use.
http://erikringsmuth.github.io/app-router/#/layouts
I'm working on an ASP.NET MVC 3 application. I primarily come from a ASP.NET WebForms background. I am working on an application with a complicated layout scheme. Because of this, i was hoping to have all of my layout code in, well, _Layout.cshtml. My challenge is, there is custom javascript logic associated with each page. I've found that if this JavaScript is included in the middle of my page, it doesn't work. So what I wanted to do was move it elsewhere. But in order to do this, I need something similar to the ASP.NET WebForms PlaceHolder control. Ideally, I would like to be able to do something like this:
<body>
<div id="myLayout" style="background-color:Gray; height:100%;">
<div id="myContent" style="background-color:Silver;">
#RenderBody()
</div>
<div id="myFooter" style="background-color:Silver;">
Footer
</div>
</div>
#RenderScript()
</body>
Is there a way for me to do this? Or am I going to have to write every page individually?
Thank you!
Here's what i do, in each of your views create a section like this, put any html you want in it
Any View:
#section Scripts
{
<script src="#Url.Content("~/Scripts/myscript.js")" type="text/javascript"></script>
<!-- Styles, more scripts, etc -->
}
Then back in your _Layout.cshtml you can render the section anywhere you want, the second parameter says if the page requires a Scripts section or not.
_Layout.cshtml: (anywhere you want)
<head>
#RenderSection("Scripts", false)
</head>