Integrating Twitter Bootstrap within a SpringMVC application - spring-mvc

I'm starting out with building basic applications in SpringMVC. At the same time, I wanted to use some easy to setup UI frameworks like Twitter Bootstrap. But, No clue on how to set it up.
Question:
Where do I place the downloaded bootstrap folder?
What I have so far.

I would put these in src/main/resources NOT under WEB-INF. These don't need to be protected.
Also, make sure you tell Spring where they are in your dispatcher servlet config file as per the documentation.
<mvc:resources mapping="/resources/**" location="/resources/" />
If you're using Spring security as well you'll need to make sure that the resources are not protected.
<http pattern="/resources/**" security="none"/>

You don't need the .less files unless you plan to compile custom css. Maven projects, you typically place them in the resources folder. resources/assets/css and resources/assets/js
In the JSP:
<spring:url scope="page" var="bootstrapStylesheetUrl" value="/resources/assets/css/bootstrap.css"/>
<spring:url scope="page" var="bootstrapResponsiveStylesheetUrl" value="/resources/assets/css/bootstrap-responsive.css"/>
<spring:url scope="page" var="bootstrapJavascriptUrl" value="/resources/assets/js/bootstrap.js"/>
And then in the head tag
<script src="${pageScope.bootstrapJavascriptUrl}"></script>
<link rel="stylesheet" href="${pageScope.bootstrapStylesheetUrl}"/>
<link rel="stylesheet" href="${pageScope.bootstrapResponsiveStylesheetUrl}"/>
Also, don't forget to add the spring taglib to the top of your jsp
<%# taglib prefix="spring" uri="http://www.springframework.org/tags" %>
In your spring servlet context config(productmgmt-servlet.xml) add the line:
<mvc:resources mapping="/resources/**" location="classpath:/"/>

Related

Spring MVC resource TAG in MVC configuration

I'm trying to find a clean solution to configure spring mvc to handle requests to static resources using the tag resources in my configuration.
It works well so far for simple configuration like:
<mvc:resources mapping="/img/**" location="file:${environment_variable}/mystaticfolder/img/" cache-period="31556926" />
<mvc:resources mapping="/css/**" location="file:${environment_variable}/mystaticfolder/css/" cache-period="31556926" />
and so on..
But i would like to be able to redirect the requests coming with a path containing "content" (always static files)+ specific_folder with some kind of regular expression (like rewrite rules).
For example:
<mvc:resources mapping="/content/${specificfolder}**"
location="file:${environment_variable}/content/${specificfolder}/" cache-period="31556926" />
Without doing a configuration for each folder under content.
Is that possible ?.
I could not find some detail about what i can put in the "location" attribute of the tag (a link could be useful too)
Thanks in advance for any tips you can share.
Regards.
S.

How to use a variable set at build time in asp files

My application has to use a CDN in production. We don't want to use the same CDN in development and production. How and where can I define a property "CDN_URL" for each build profile so that it is substituted at buid time or retrieved dynamically at runtime.
I'd like to write something like:
<link rel="stylesheet" type="text/css" href="${CDN_URL}/styles/base.css" />
You will want to store the CDN URL in the app settings in the web.config.
For example:
<appSettings>
<add key="Live_CDNURL" value="http://live.cdn.com"/>
<add key="Development_CDNURL" value="http://dev.cdn.com"/>
</appSettings>
Then in the application you can use:
WebConfigurationManager.AppSettings["Live_CDNURL"];
Then simply add the stylesheet using asp following something like Adding StyleSheets Programmatically in Asp.Net
Or do:
<link rel="stylesheet" type="text/css" href="<%=ConfigurationManager.AppSettings("Live_CDNURL")%>/styles/base.css" />

Spring can't load my css files

Spring can't load my css files and this is my architecture:
Project
Webcontent
WEB-INF
pages
index.jsp
css
jquery-ui.css
You can put the css file and other files like javascript, images in the folder resources
Project
Webcontent
resources
css
jquery-ui.css
WEB-INF
pages
index.jsp
And put the following line in spring configuration
<mvc:resources mapping="/resources/**" location="/resources/" />
And give the reference in jsp pages like
<link href="${pageContext.request.contextPath}/resources/css/jquery-ui.css"
rel="stylesheet">
As fvu explained, the content inside WEB-INF is not accessible over HTTP. The Webcontent directory in
your directory structure looks like it was created for this particular purpose: storing CSS files, images and JavaScript files.
Even after you move your CSS files, they will not be accessible over HTTP automatically because Spring MVC will intercept these
HTTP requests. You need to use the <mvc:resources> tag in your bean configuration:
<mvc:resources mapping="/webcontent/**" location="/Webcontent/" />
Your CSS files will be accessible at URLs like the following:
http://localhost:8080/you-app-name/webcontent/...
There is a lot of information on <mvc:resources> at Stackoverflow.

Spring 3 doesn't return css

I just started with Spring 3 MVC today. Running into a dilemma...
web.xml maps everything ("/") to Spring. But as a result, when I put something like:
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/navigation.css" />
It is not returned by the container...
Perhaps someone could suggest how to handle this?
Thanks.
Use mvc:resources, as explained in the documentation. This allows service static resources from the web app, but also from the classpath.
How are you trying to serve it? If you are trying to serve it from the webapp itself (ie WEB-INF/static/css) You would need to include a servlet to do that for you. In the spring context you can include something like
<mvc:resources mapping="/resources/**" location="/resources/" />
You can see more here
How to handle static content in Spring MVC?
As suggested by others, use mvc:resource to serve your static resources.
<mvc:resources mapping="/resources/**" location="/resources/" />
It is also recommended to avoid using scriptlets in your JSP code if possible. You should instead use JSTL to build the correct path to your CSS file.
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
...
<link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/navigation.css" />"/>

MVC: I have deployed my application, but CSS only works when I log in

I have deployed my MVC app but when I browse from IIS I find that the forms authentication seems to block the CSS.
This does not happen on my dev server.
Why would this happen?
My master page look like this;
<head id="Head1" runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.js" type="text/javascript" language="javascript"></script>
<script src="http://nje.github.com/jquery-tmpl/jquery.tmpl.js" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery.form.js")%>" type="text/javascript"></script>
<!-- note that the order scripts are included in is important -->
<script src="<%=Url.Content("~/Scripts/jquery.Validate.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/MicrosoftMvcJQueryValidation.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/ConfusedValidation.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/Awesome.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/MicrosoftAjax.debug.js") %>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js") %>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery.jcacher-1.0.0.min.js")%>" type="text/javascript"></script>
<link href="<%=Url.Content("~/Content/jquery.ui.autocomplete.css")%>" rel="stylesheet" type="text/css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/overcast/jquery-ui.css"
type="text/css" rel="Stylesheet" class="ui-theme" />
<link href="<%=Url.Content("~/Scripts/Awesome.css")%>" rel="stylesheet" type="text/css" />
* EDIT *
In Firebug I get the message;
Failed to load source for: http://192.168.100.999/Content/Site.css
In fact I get this for all the local files.
I have also faced the same kind of problem. My local server IIS configuration was not working but Development server worked properly. That time had to add "User Permission" to my Hosed folder by right click on hoted site in IIS.
Just follow the step.
and then add uesr called IUSER by Add User panel.
Are you on shared host? Does yours script *.js load? If it does it means youre relative path is not good, you probably could refer to your css file the same way you do to your .js using Url.Content.
<link href="<%=Url.Content("~/Content/Site.css)%>" rel="stylesheet" type="text/css" />
I suggest you to take a look at SquishIt : http://www.codethinked.com/squishit-the-friendly-aspnet-javascript-and-css-squisher it will combine and minimize your CSS and javascript for browser optimization.
Hope it helps!
The answer was to do with assigning permissions to the user IIS_IUSR to the folders in which the application is deployed. A colleague discovered this for me. I have to admit I am not sure why this is necessary but it fixed the problem.
You should explicitly enable anonymous access to the resources you want publicly available. The way to do this is to add a web.config in the folder containing the public content with the following settings:
<configuration>
<appSettings/>
<connectionStrings/>
<system.web>
<authorization>
<allow users="*"/>
</authorization>
</system.web>
</configuration>
It probably works on the dev server becuase windows authentication means you are not anonymous.
You need to simply change your application pool identity property. It is under advanced settings --> Identity. Change identity value to "ApplicationPoolIdentity" from the drop down. It should fix the issue.
The reason here is that you are not logged in while accessing contents of the website e.g. style sheet or script. So site is not loading those contents. If you are authenticated, it will load all the contents. The identity value is usually Network service or local service.
this is a permission issue: Please add BOTH: IIS_USR and IUSR permissions to the folder structure

Resources