Hi am using Tapestry 5 to create a planning web application and to get around a spring security issue I have changed the url pattern in org.apache.tapestry5.TapestryFilter from /* to /planning/*
After altering the corresponding urls and file paths in any Java / .tml files accordingly the web application works as itended, however my css stylesheet is no longer being picked up.
I have a Layout.java in a components file and a corresponding Layout.tml, and then a layout.css file in a layout folder in the webapp file (outside of WEB-INF)
The stylesheet is being called in the Layout.java file by #Import(stylesheet="context:layout/layout.css") - this always worked before!
I have tried moving the css file into a planning subdirectry planning/layout/layout.css but this still doesnt seem to make a difference!
Web.xml
<display-name>Planning Tapestry 5 Application</display-name>
<context-param>
<param-name>tapestry.app-package</param-name>
<param-value>com.quartetfs.planning.tapestry</param-value>
</context-param>
<filter>
<filter-name>app</filter-name>
<filter-class>org.apache.tapestry5.TapestryFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>app</filter-name>
<url-pattern>/planning/*</url-pattern>
</filter-mapping>
Layout.java
import org.apache.tapestry5.*;
import org.apache.tapestry5.annotations.*;
import org.apache.tapestry5.ioc.annotations.*;
import org.apache.tapestry5.BindingConstants;
/**
* Layout component for pages of Planning Application.
*/
#Import(stylesheet="context:layout/layout.css")
public class Layout
{
/** The page title, for the <title> element and the <h1> element. */
#Property
#Parameter(required = true, defaultPrefix = BindingConstants.LITERAL)
private String title;
#Property
private String pageName;
#Property
#Parameter(defaultPrefix = BindingConstants.LITERAL)
private String sidebarTitle;
#Property
#Parameter(defaultPrefix = BindingConstants.LITERAL)
private Block sidebar;
#Inject
private ComponentResources resources;
public String getClassForPageName()
{
return resources.getPageName().equalsIgnoreCase(pageName)
? "current_page_item"
: null;
}
public String[] getPageNames()
{
return new String[] { "planning/Index", };// "About", "Contact" }; TODO
}
}
Layout.tml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Title : Concrete
Version : 1.0
Released : 20080825
Description: A Web 2.0 design with fluid width suitable for blogs and small websites.
-->
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"
xmlns:p="tapestry:parameter">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>${title}</title>
</head>
<body>
<!-- start header -->
<div id="header">
<div id="logo">
<h1>
<t:pagelink page="planning/index">Project and Resource Planning</t:pagelink>
</h1>
</div>
<div id="menu">
<ul>
<li t:type="loop" source="pageNames" value="pageName" class="prop:classForPageName">
<t:pagelink page="prop:pageName">${pageName}</t:pagelink>
</li>
</ul>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
<!-- start sidebar -->
<div id="sidebar">
<ul>
<li id="search" style="background: none;">
</li>
<li t:type="if" test="sidebar">
<h2>${sidebarTitle}</h2>
<div class="sidebar-content">
<t:delegate to="sidebar"/>
</div>
</li>
</ul>
</div>
<!-- end sidebar -->
<!-- start content -->
<div id="content">
<div class="post">
<div class="title">
<h2>${title}</h2>
</div>
<div class="entry">
<t:body/>
</div>
</div>
</div>
<!-- end content -->
<br style="clear: both;"/>
</div>
<!-- end page -->
<!-- start footer -->
<div id="footer">
<p class="legal">
©2009 com.example. All Rights Reserved.
•
Design by
Free CSS Templates
•
Icons by
FAMFAMFAM.
</p>
</div>
<!-- end footer -->
</body>
</html>
You should not have to move the layout.css file; if Tapestry can't find it, then it will throw an exception when loading the pages containing the Layout component.
When you have a problem like this, it is very useful to view the source of the rendered page, and see what the requests and reponses are.
I suspect that the URL for the stylsheet is coming out as "/assets/..." ... which is not picked up by Tapestry (due to how your filter mapping is set up), and you'll see a 404 error.
It is necessary to inform Tapestry that you have placed the application in a sub-folder (alas, the Servlet API does not provide introspection into how you have things configured in your web.xml).
http://tapestry.apache.org/configuration.html#Configuration-tapestry.applicationfolder
Once Tapestry knows the application folder, it can build proper URLs.
Related
I am very newbie to Thymeleaf template engine, but i have working with other template engine like blade.
I want to include fragment based on condition like i have different menus for different users for example admin, manager, super user, user etc. I have keep these menus in headers and each header is in different fragment file like adminheader, defaultheader, userheader.html.
Now i want to check what whether user is logined or not. If not logined than display layout with defaultheader or if logined, than check user is admin or not. If user is admin than display page with adminheader otherwise display page page with userheader.
Efforts:
Till now page is opening with the default header and i have design layout file like below code,
layout.html
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head layout:include="layouts/fragments/head :: headFragment">
</head>
<body>
<div class="container-fluid">
<header id="header" class="row navbar-fixed-top" layout:include="layouts/fragments/header :: headerFragment" >
</header>
<section class="row margin-top-120">
<div class="container-fluid">
<section id="main-content" class="col-lg-12" layout:fragment="content">
</section>
</div>
</section>
<footer id="footer" class="row">
<div class="container-fluid" layout:include = "layouts/fragments/footer :: footerFragment">
</div>
</footer>
</div>
</body>
</html>
I have included headerFragment in this layout file and working fine. Now don't know how to include other header fragment based on condition.
**Updated**
Controller
#Controller
public class IndexController {
private static final Logger logger = LoggerFactory.getLogger(IndexController.class);
#RequestMapping("/")
public String index(){
return "index";
}
#RequestMapping(value="/login", method=RequestMethod.GET)
public String login(User user) {
logger.info("Hello Get Login");
return "login";
}
#RequestMapping(value="/validateLogin", method=RequestMethod.POST)
public String validateLogin(#Valid #ModelAttribute("user") User user, BindingResult bindingResult) {
logger.info(user.toString());
if (bindingResult.hasErrors()) {
logger.info(bindingResult.toString());
return "login";
}
return "redirect:/";
}
#RequestMapping("/logout")
public String logout(){
return "index";
}
....
}
Please suggest me the solution.
Thanks.
You can use expressions for the include of different fragments on a condition. There is an example in the docs of thymeleaf.
In templatename :: domselector, both templatename and domselector can be fully-featured expressions. In the below example we want to include different fragments depending on a condition. If the authenticated user is an Admin, we will show a different footer than for a regular user:
<div th:replace="fragments/footer :: ${#authentication.principal.isAdmin()} ? 'footer-admin' : 'footer'">
© 2013 The Static Templates
</div>
Thanks #Patrick for your answer. But i have found the solution own.
I don't know whether it is good or not. Please tell.
layout.html
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head layout:include="layouts/fragments/head :: headFragment"></head>
<body>
<div class="container-fluid">
((${session.containsKey('user')}) ?
<header id="header" class="row navbar-fixed-top" layout:include="layouts/fragments/admin-Header :: headerFragment">
</header> :
<header id="header" class="row navbar-fixed-top" layout:include="layouts/fragments/default-Header :: headerFragment">
</header>)
<section class="row margin-top-120">
<div class="container-fluid">
<section id="main-content" class="col-lg-12" layout:fragment="content">
</section>
</div>
</section>
<footer id="footer" class="row">
<div class="container-fluid" layout:include = "layouts/fragments/footer :: footerFragment">
</div>
</footer>
</div>
</body>
</html>
Does anyone know if it's possible to hide a layout:fragment if it is not specified in the calling page?
For example, I have a page layout.html that has something like (where there is a separate fragment.html file with header and footer fragments):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
th:lang = "en">
<head>
<title layout:title-pattern="$CONTENT_TITLE">TITLE</title>
</head>
<body>
<header layout:replace="fragment :: header">HEADER</header>
<section layout:fragment="messages">MESSAGES</section>
<section layout:fragment="content">CONTENT</section>
<footer layout:replace="fragment :: footer">FOOTER</footer>
</body>
</html>
If in a calling page to the layout that I don't want to include the "messages" fragment, is there a way to do it by just not including that code? For example (say, simple.html):
<html layout:decorator="layout">
<head>
<title th:text=#{PAGETITLE_SIMPLE}>SIMPLE PAGE TITLE</title>
</head>
<body>
<section layout:fragment="content">
<p>Put in some random content for the body of the simple page</p>
</section>
</body>
This will still put into the rendered HTML the text "MESSAGES" inside a <section>-tag.
I have been able to put into this simple.html
<section layout:fragment="messages" th:remove="all"></section>
But this seems somewhat sloppy and was wondering if there was a way to hide that from the users of the layout by putting the logic in the layout to ignore that fragment altogether.
Using Spring 4.1.6, Thymleaf 2.1.4, and Layout Dialect 1.3.3.
Thanks
I was able to resolve this by applying the methods posted by Serge Ballesta in How to check Thymeleaf fragment is defined to the layout dialect.
This is what the rewritten layout.html looks like:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
th:lang = "en">
<head>
<title layout:title-pattern="$CONTENT_TITLE">TITLE</title>
</head>
<body>
<header layout:replace="fragment :: header">HEADER</header>
<section layout:replace="this :: messages">MESSAGES</section>
<section layout:fragment="content">CONTENT</section>
<footer layout:replace="fragment :: footer">FOOTER</footer>
</body>
</html>
This way, if the calling page (simple.html) only has the <section> for content, no HTML will be rendered for the section for messages. But if the page did have the following, it will be included as intended:
<section layout:fragment="messages">
<p>Message 1</p>
<p>Message 2</p>
</section>
I am trying to load a dicom image using cornerstone library. I get an error - uncaught exception: loadImage: no image loader for imageId.
I have my image file named as image-1.dcm. What am I doing wrong?
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<!-- twitter bootstrap CSS stylesheet - not required by cornerstone -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>
jsminimal/index.html
</h1>
This is an example of the minimal use of cornerstone driven by javascript
<br>
<br>
In this example, javascript is used to image enable a div.
<br>
<br>
<div id="dicomImage" style="width:512px;height:512px;">
</div>
</div>
</body>
<!-- cornerstone depends on jQuery so it must be loaded first-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- include the cornerstone library -->
<script src="cornerstone-master/dist/cornerstone.js"></script>
<!-- include special code for these examples which provides images -->
<script src="cornerstone-master/example/exampleImageIdLoader.js"></script>
<script>
$(document).ready(function() {
var imageId = 'image-1';
var element = document.getElementById('dicomImage');
cornerstone.enable(element);
cornerstone.loadImage(imageId).then(function(image) {
cornerstone.displayImage(element, image);
});
});
</script>
</html>
You need to use the cornerstoneWADOImageLoader to loader DICOM P10:
https://github.com/chafey/cornerstoneWADOImageLoader
I created a new ASP .Net MVC 5 project with all the sample views, controllers and such. It has the latest versions of jQuery and Bootstrap.
So I wanted to have a nice template on it so I downloaded this one and I added the images and css files to the content folder, modified the BundleConfig class so that the new css file is included and also changed _ViewStart.cshtml file so that it takes the new layout which I named _myLayout.cshtml.
Technically it worked very well since all the pages now use the new layout template but it is not rendering properly, the menu looks truncated, the header image and the content section are going outside of the border on the right side, and the footer is displayed with a margin at the bottom which should not exist.
I have been able to pinpoint the problem to a "collision" between the template's css and bootstrap since if I remove the bootstrap stylesheet from the BundleConfig file and then styles got rendered as expected.
I am more of a backend/javascript developer so my knowledge about css is very limited and I am way over my head with this one. So much that I don't even know which code to include and both css files are too large to include them in the question.
If anyone is able to help I would really appreciate it and/or if someone can provide some clues as to which css sections would be useful to include in the post to help pinpoint the problem please let me know.
Thanks in advance.
UPDATE:
To replicate the problem you would have to:
- Download the template I mentioned above
- Create a new ASP .Net MVC 5 project
- Add the images and styles.css file from the template on the project's content folder
- On the project's Shared folder create a new layout page called _myLayout.cshtml
- Do the following changes on these files:
BundleConfig.cs
using System.Web;
using System.Web.Optimization;
namespace SC.Web
{
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/styles.css"));
}
}
}
_ViewStart.cshtml
#{
Layout = "~/Views/Shared/_myLayout.cshtml";
}
_myLayout.cshtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewBag.Title - My ASP.NET Application</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div id="main">
<!-- start header -->
<div id="header">
<div id="logo">
<h1>metamorph_highway</h1>
<h2>Design by Metamorphosis Design</h2>
</div>
<div id="menu">
<ul>
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
<!-- end header -->
</div>
<hr />
<!-- start page -->
<div id="page">
<!-- start content -->
<div id="content">
#RenderBody()
</div>
<!-- end content -->
<div style="clear: both;"> </div>
</div>
<!-- end page -->
<hr />
<!-- start footer -->
<div id="footer">
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
<p>Copyright © 2008. Privacy Policy | Terms of Use | <abbr title="eXtensible HyperText Markup Language">XHTML</abbr> | <abbr title="Cascading Style Sheets">CSS</abbr></p>
<p>
Design by Free Site Templates, coded by Free Flash Templates
</p>
</div>
</div>
<!-- end footer -->
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Turns out that on bootstrap there is this definition:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Since the template I downloaded gets messed up with this I added the following on its own css file:
*{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
I have no idea if later this will cause bootstrap not to behave as it should and if that happens I'll have to deal with that then.
I'm working on plone 3.2.1 and I've made a formlib's form with a custom template:
from Products.Five.formlib import formbase
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
...
class MyForm(formbase.PageForm):
...
template = ViewPageTemplateFile('myform.pt')
I want to make a simple change to the standard formlib template. My question is: how do I reference the parts/zope2/lib/python/zope/formlib/pageform.pt inside my template?
<!-- myform.pt -->
<metal:macro metal:use-macro="WHAT GOES HERE??">
<div metal:fill-slot="extra-info">
I just want to put a text before the standard formlib template
</div>
</metal:macro>
Finally, I found the answer:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:metal="http://xml.zope.org/namespaces/metal"
xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:i18n="http://xml.zope.org/namespaces/i18n"
metal:use-macro="context/main_template/macros/master">
<body>
<div metal:fill-slot="main">
<div metal:use-macro="context/##base-pageform.html/macros/form">
<metal:block fill-slot="extra_info">
<!-- HERE we go -->
</metal:block>
</div>
</div>
</body>
</html>
Just watch out there (for anyone looking for this, like me): the line:
<divmetal:fill-slot="main">
needs a space in between div and metal:
<div metal:fill-slot="main">
Thanks; very helpful solution.