I am using thymeleaf with spring-mvc to create template in my application. I have created 3 files (head, layout and content) as below;
head.html
<title>layout<title>
layout.html
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:include="head"></head>
</html>
content.html
<html layout:decorator="layout" xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>content</title>
</head>
</html>
Now with this setup, when I run my application and open content.html page I see title as "layout" instead of "content".
Am I doing something wrong in the configuration?
Specific answer
In the layout files title, make the title as content
<title layout:title-pattern="$CONTENT_TITLE"></title>
Further description
Lets assume the application main title is "My Web" and you are viewing the page content with the title "Content"
To make the page display the title as "My Web - Content"
Layout File
<title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">My Web</title>
ContentFile
<html layout:decorator="layout" xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>Content</title>
</head>
</html>
Related
How can I include _Layout.cshtml in Razor Content Page ?
For example I created two cshtml files in root of my project.
First file is _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>Main Layout</h1>
<br>
<br>
#RenderBody();
</body>
</html>
Second File is Product.cshtml
#inherits ServiceStack.Razor.ViewPage
#{
Layout = "~/_Layout.cshtml";
}
<h1>Product Page</h1>
When I call http://localhost:6000/product
The result is in browser is
Product Page
but it should be
Main Layout
Product Page
Why ?
What's the problem ?
Layout names should be the name of the file not a path and you should never need to reference _Layout as it's the default.
Also if you want your Views and Content Pages to share the same _Layout.cshtml pages add them once to /Views/_Layout.cshtml or /Views/Shared/_Layout.cshtml instead.
If this is Self hosting HttpListener project you need to ensure all *.cshtml are set to Copy to Output Directory or the WebHostPhysicalPath references your project path.
I'm using Thymeleaf for layouts in my project, but unable to get the page title dynamic.
Layout.jsp
<head th:fragment="headerfragment">
<title th:text="#{page-title}"></title>
<!-- Bootstrap Core CSS -->
<link th:href="#{/resources/css/bootstrap.min.css}" rel="stylesheet"
type="text/css" />
</head>
Page.jsp
<head th:include="layout :: headerfragment"></head>
When the final page is rendered i see title as page-title not the actual text
In my controller I set the page-title attribute
modelMap.addAttribute("page-title", "Home");
I might not be doing it right as i'm new to thymeleaf. Please help me to find out the solution.
The correct syntax is ${page-title} so in your example it should be changed to <title th:text="${page-title}"></title>
What is the most correct way to include another XHTML page in an XHTML page? I have been trying different ways, none of them are working.
<ui:include>
Most basic way is <ui:include>. The included content must be placed inside <ui:composition>.
Kickoff example of the master page /page.xhtml:
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title>Include demo</title>
</h:head>
<h:body>
<h1>Master page</h1>
<p>Master page blah blah lorem ipsum</p>
<ui:include src="/WEB-INF/include.xhtml" />
</h:body>
</html>
The include page /WEB-INF/include.xhtml (yes, this is the file in its entirety, any tags outside <ui:composition> are unnecessary as they are ignored by Facelets anyway):
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h2>Include page</h2>
<p>Include page blah blah lorem ipsum</p>
</ui:composition>
This needs to be opened by /page.xhtml. Do note that you don't need to repeat <html>, <h:head> and <h:body> inside the include file as that would otherwise result in invalid HTML.
You can use a dynamic EL expression in <ui:include src>. See also How to ajax-refresh dynamic include content by navigation menu? (JSF SPA).
<ui:define>/<ui:insert>
A more advanced way of including is templating. This includes basically the other way round. The master template page should use <ui:insert> to declare places to insert defined template content. The template client page which is using the master template page should use <ui:define> to define the template content which is to be inserted.
Master template page /WEB-INF/template.xhtml (as a design hint: the header, menu and footer can in turn even be <ui:include> files):
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title><ui:insert name="title">Default title</ui:insert></title>
</h:head>
<h:body>
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="content"><ui:insert name="content">Default content</ui:insert></div>
<div id="footer">Footer</div>
</h:body>
</html>
Template client page /page.xhtml (note the template attribute; also here, this is the file in its entirety):
<ui:composition template="/WEB-INF/template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<ui:define name="title">
New page title here
</ui:define>
<ui:define name="content">
<h1>New content here</h1>
<p>Blah blah</p>
</ui:define>
</ui:composition>
This needs to be opened by /page.xhtml. If there is no <ui:define>, then the default content inside <ui:insert> will be displayed instead, if any.
<ui:param>
You can pass parameters to <ui:include> or <ui:composition template> by <ui:param>.
<ui:include ...>
<ui:param name="foo" value="#{bean.foo}" />
</ui:include>
<ui:composition template="...">
<ui:param name="foo" value="#{bean.foo}" />
...
</ui:composition >
Inside the include/template file, it'll be available as #{foo}. In case you need to pass "many" parameters to <ui:include>, then you'd better consider registering the include file as a tagfile, so that you can ultimately use it like so <my:tagname foo="#{bean.foo}">. See also When to use <ui:include>, tag files, composite components and/or custom components?
You can even pass whole beans, methods and parameters via <ui:param>. See also JSF 2: how to pass an action including an argument to be invoked to a Facelets sub view (using ui:include and ui:param)?
Design hints
The files which aren't supposed to be publicly accessible by just entering/guessing its URL, need to be placed in /WEB-INF folder, like as the include file and the template file in above example. See also Which XHTML files do I need to put in /WEB-INF and which not?
There doesn't need to be any markup (HTML code) outside <ui:composition> and <ui:define>. You can put any, but they will be ignored by Facelets. Putting markup in there is only useful for web designers. See also Is there a way to run a JSF page without building the whole project?
The HTML5 doctype is the recommended doctype these days, "in spite of" that it's a XHTML file. You should see XHTML as a language which allows you to produce HTML output using a XML based tool. See also Is it possible to use JSF+Facelets with HTML 4/5? and JavaServer Faces 2.2 and HTML5 support, why is XHTML still being used.
CSS/JS/image files can be included as dynamically relocatable/localized/versioned resources. See also How to reference CSS / JS / image resource in Facelets template?
You can put Facelets files in a reusable JAR file. See also Structure for multiple JSF projects with shared code.
For real world examples of advanced Facelets templating, check the src/main/webapp folder of Java EE Kickoff App source code and OmniFaces showcase site source code.
Included page:
<!-- opening and closing tags of included page -->
<ui:composition ...>
</ui:composition>
Including page:
<!--the inclusion line in the including page with the content-->
<ui:include src="yourFile.xhtml"/>
You start your included xhtml file with ui:composition as shown above.
You include that file with ui:include in the including xhtml file as also shown above.
I have a custom page template for my home page.
It does not display the carousel.
The template is as follows:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal"
xmlns:i18n="http://xml.zope.org/namespaces/i18n"
lang="en"
metal:use-macro="context/main_template/macros/master"
i18n:domain="plone">
<body>
<metal:content-core fill-slot="content-core">
Hello
</metal:content-core>
</body>
</html>
The configure.zcml snippet looks like this:
<browser:page
for="Products.CMFPlone.browser.interfaces.INavigationRoot"
name="homepage"
template="homepage.pt"
layer=".interfaces.IThemeSpecific"
permission="zope2.View"
/>
I tried:
<tal:block tal:replace="structure here/carousel/##banner-base" />
but get an AttributeError for banner-base.
The correct context cannot be found, if a default-page is set to the folder or siteroot, like "front-page" is by default.
To resolve that, change its view to yours or any other view, which isn't a content-item, like 'Summary view' f.e.
The view has to be satisfy the is_view_template criterion as enforced by the update() method of the Carousel viewlet.
To do this simply use the setLayout() of the folder.
Looking for an better understanding of how an mvc project should define javascript and css includes. I'm working with sample code where includes are defined like:
<head id="Head1" runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" />Affiliate Checkout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="pragma" content="no-cache">
<script type="text/javascript" src="/Scripts/jquery.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.7.2.custom.min.js"></script>
.
.
.
<asp:ContentPlaceHolder runat="server" ID="HeadContent"></asp:ContentPlaceHolder>
</head>
I'm reading that to be that _all pages looking at this MasterPage will get jquery and jqueryUI and, additionally, each page will have the opportunity to add head elements thankx to the content placeholder HeadContent tag.
The specific problem i'm troubleshooting is an instance where my rendered page is not including the 'prama no-cache' tag - as you see, it's defined in the upper level header section. Other .js and .css elements are making it into the rendered page so it very confusing to see that the no-cache tag isn't.
When execute a 'View Generated Source' - the 'charset' is present the 'no-cache' is not.
Could it be because the pragma meta tag is not closed properly?