I am new to spring MVC coming with experience using PHP MVC frameworks and ROR. I am having a hard time finding the appropriate way to organize and include front end assets into the view templates.
Here is the default code Roo produces for the default style sheet:
<spring:theme code="styleSheet" var="roo_css"/>
<spring:url value="/${roo_css}" var="roo_css_url"/>
<spring:url value="/static/images/favicon.ico" var="favicon" />
<link rel="stylesheet" type="text/css" media="screen" href="${roo_css_url}"></link>
This seems totally unnecessary to me. We are calling a variable from the spring:theme code list. Assigning it to a variable in the view scope/ and then calling that view variable for the
Ideally I would like to have some path tokens like: ${imagePage}, ${stylePath}, etc. That we could drop in and use for soft linking.
Hopefully somebody can point me to some quality SpringMVC documentation or give some examples. Thanks
Update:
I have seen a few examples and engfer has posted one below that suggest using the spring tags within the html to ouput the href like so
About
This would be acceptable however I am getting the following error from jetty
Caused by: org.apache.jasper.JasperException: /WEB-INF/views/footer.jspx(6,22) The value of attribute "href" associated with an element type "null" must not contain the '<' character.
Am I missing something with the encoding? or DTD?
Update:
So apparently the in-line href style only works with .jsp files as .jspx (What im using) is strict xml. What are the benefits of .jspx over .jsp and
The code you have provided from Roo is a little unnecessary. If you look at the Spring MVC documentation as tkeE2036 pointed out... you will see the themes section http://static.springsource.org/spring/docs/3.0.x/spring-framework-reference/html/mvc.html#mvc-themeresolver
<link rel="stylesheet" href="<spring:theme code='styleSheet'/>" type="text/css"/>
The Spring theme tag gives you the ability to internationalize your CSS/images/js (imagine an image that has the word 'Hello' which needs to be changed for English/Spanish/etc) into separate internationalized theme files that follow the http://java.sun.com/javase/6/docs/api/java/util/ResourceBundle.html convention and Spring will automatically resolve the correct resource bundled theme.
If you still want your ${imagePath} or whatever, you can use the <spring:url/> tag to get your job done.
<spring:url value="/images" var="imagePath"/>
<link rel="stylesheet" href="${imagePath}/foo.png" type="text/css"/>
Related
Error Message From Dev Tools
The Folder Structure of the project
How I linked this
So I am trying to Link local css file to thymeleaf but it has not been working. I was wondering how to link css to thymeleaf in this case. Thank you.
You are using href="#{/css/signup.css}", but you need to use th:href like this:
<link rel="stylesheet" th:href="#{/css/signup.css}" />
I'm using JHipster and searching for an example of templating emails with Thymleaf. My problem is that the CSS and JS (static files) aren't injected into my templates..
<link href="../static/css/bootstrap.min.css" th:href="#{/css/bootstrap.min.css}"
rel="stylesheet" media="screen" />
I am getting the following error:
org.thymeleaf.exceptions.TemplateProcessingException: Link base "/css/Boostrap.min.css" cannot be context relative (/) or page relative unless you implement the org.thymeleaf.context.IWebContext interface
Below is my Spring boot resource structure :
--- resources
|--- i18n
|--- mails
|--- static
|--- css
|--- boostrap.min.css
What is the problem here?
Your message template should refer to absolute external URL of your CSS with domain name, it should not use relative URL. If you don't do so the mail reader does not know where to download this CSS from.
This is why there is jhipster.mail.base-url property in application-prod.yml
The generated templates already use it for favicon:
<link rel="shortcut icon" th:href="#{|${baseUrl}/favicon.ico|}" />
I would add that external CSS could be blocked by mail readers depending on users settings especially when not using https and there's nothing you can do against it. This is why most people will recommend inlining styles rather than linking to external stylesheets. Styling in HTML mail is hard and you will find many resources explaining why and how to workaround some of these issues. View the source of HTML mails you received in your inbox to get an idea.
For Email templates apparently you have to remove the preceding "/"
<link href="../static/css/bootstrap.min.css" th:href="#{css/bootstrap.min.css}" rel="stylesheet" media="screen" />
I've been making a simple site using thymeleaf for my html pages, and typically my css is linked a little something like this.
<link href="../static/css/bootstrap.css"
th:href="#{css/bootstrap.css}" rel="stylesheet" media="screen"/>
and I was under the impression that the th:href tags used the normal href to find the correct path for the CSS.
My custom 404 is in a different directory so its css link is a little different, and when I test it in browser it works, but when the server is actually started it doesn't.
<link href="../../static/css/bootstrap.css"
th:href="#{css/bootstrap.css}" rel="stylesheet" media="screen"/>
What am I missing that keeps it from working when the server is started?
When you're using:
<link href="../static/css/bootstrap.css"
th:href="#{css/bootstrap.css}" rel="stylesheet" media="screen"/>
The th:href tag will eventually have some final value which will replace the original href value.
For example:
Let's say that th:href="#{css/bootstrap.css}" will end up to be
href=/css/bootstrap.css
that value of: /css/bootstrap.css will replace the ../static/css/bootstrap.css value of the original href.
with that being said, the page source code to figure out what value does your href is getting from the th:href tag
I would suggest taking a look in your spring context file and check whether resources are mapped to a folder.
<mvc:resources mapping="/resources/**" location="<path to resources>" />
I have a layout page which is shared across all of the views in my app. That view references the .css in my app. For the sake of reference, I currently have the following at the top of my _layout.cshtml file:
<link rel="stylesheet" href="/css/themes/default/app.css" />
I am planning on taking this app and loading into a phone app via PhoneGap. Because of that, I cannot use /css/themes/default.app.css. Instead, I need to get it converted to a string that is relative to the path of the file. For instance, I need to dynamically generate a value that looks something like the following:
<link rel="stylesheet" href="../../../css/themes/default/app.css" />
The number of "../" will be determined based on how deep it is. I figured there would be a utility or something built into the ASP.NET MVC 3 framework to do this. However, I can't find anything. I have a LOT of files and I don't want to have to manually update all of the url patterns. Is there a utility that will automatically handle what I'm trying to acomplish? If so, how?
Thank you
Use the UrlHelper.Content HTML Helper method .
This method Converts a virtual (relative) path to an application absolute path.
<link href="#Url.Content("~/css/themes/default/app.css")"
rel="stylesheet" type="text/css" />
You may drop your css folder under the Content directory in the root of your MVC project
I am using Spring roo and STS Insight server. I want to create a javascripts folder to add my javascript files and link them in my JSP. however, I don't know where to put the javascript files because, my JSP never can find it.
More interestingly, the dojo.js is located with no fuss. I looked in my sts directory. It appears insight.war could be housing the dojo.js. but I still can't figure out how the path is setup.
resources/dojo/dojo.js is located.
in file system, we have insight.war/dojo/dojo/dojo.js. So clearly, resources is pointed to insight.war/dojo/dojo.js. Where is this configuration? I want to change it, Preferably best load it from within my application.
Can someone help me please?
You can put all your files (images, css, javascript ...) in src\main\webapp
include a css like
<style type="text/css">
#import "${pageContext.request.contextPath}/your_dir_in_src_main_webapp/your_css.css";
</style>
include a js like
if you js contains jsp tag then
<script type="text/javascript" charset="utf-8">
<%# include file="/your_dir_in_src_main_webapp/your_js.js" %>
</script>
if you js doesnt contant jsp tag than
<script type="text/javascript" charset="utf-8" src="/your_dir_in_src_main_webapp/your_js.js"></script>