Java Spring Framework-Bootstrap Integration - java

I just started learning spring framework.
I have met a problem and decided to share it to help you.
First I added the project bootstrap library for a project.
Then I downloaded a free template from the Internet. I put the resources of this template in the project in the following location (see WebContent / WEB-INF / view / resources)
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%# taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>
<!-- Bootstrap core CSS-->
<link href="${contextPath}/WebContent/WEB-INF/view/resources/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="${contextPath}/WebContent/WEB-INF/view/resources/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template-->
<link href="${contextPath}/WebContent/WEB-INF/view/resources/css/sb-admin.css" rel="stylesheet">
</head>
Then I copied the codes of the login page from the source code into the project and defined the locations of the files used for HTML at the top.(you can see codes below)
When I compile and run my code, I do not have libraries added and I see a page with simple HTML code. What is wrong with me? How can I fix this problem? If you tell me my mistakes and you help me, I'm happy. Everyone thanks in advance

I solved the problem. First, in my project "application-context.xml"
I added the following code to the page. I moved my template files to "/ WebContent / resources / thema /" :
<mvc:resources mapping="/resources/**" location="/resources/thema/"
cache-period="31556926"/
I defined contextPath :
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
Don't forget to define this library for this :
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
After, I changed the path to the template folder in my .jsp file as follows:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>
<!-- Bootstrap core CSS-->
<link href="${contextPath}/resources/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="${contextPath}/resources/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template-->
<link href="${contextPath}/resources/css/sb-admin.css" rel="stylesheet">
</head>
This solved my problem.
I got help here for the solution:
Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
and
http://www.mkyong.com/spring-mvc/spring-mvc-how-to-include-js-or-css-files-in-a-jsp-page/
Thank you for your good help : Jorge Campos

Related

Thymeleaf didn't load css and js

Actually my question is "My html page did not load layout.html Why?"
My page's head is
<!DOCTYPE html>
<html lang="en" data-layout-decorate="~{fragments/layout.html}">
<head>
<title>Plain Page</title>
</head>
My layout under fragments folder
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title data-layout-title-pattern="$LAYOUT_TITLE | $CONTENT_TITLE">Gentellela!</title>
<!-- Bootstrap -->
<link href="/webjars/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="/webjars/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="/webjars/nprogress/0.2.0/nprogress.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="/static/css/custom.min.css" rel="stylesheet">
</head>
If i run my project, just return html page (no css, no js)
Where is my fault?
I think the problem might be because of the closing of the meta tags.
Can you please close the meta tags and try. Like
I see there is no proper closing ("/" is missing).
We must use th:insert="~{fragments/layout.html}" instead of data-layout-decorate="~{fragments/layout.html}" at Thymeleaf version 3.0.9

javax.el.ExpressionFactory.newInstance() not found on Jetty and Java 7

I have this JSP:
<%# page pageEncoding="UTF-8" %>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="contextPath" value="http://localhost:8000/"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link type="text/css" rel="stylesheet" href="${contextPath}/css/styles.css"/>
</head>
<body>
<!-- some html -->
</body>
When I navigate to this page, I get next error:
java.lang.NoSuchMethodError: javax.el.ExpressionFactory.newInstance()Ljavax/el/ExpressionFactory;
at org.apache.jasper.compiler.JspUtil.getExpressionFactory(JspUtil.java:1182)
at org.apache.jasper.compiler.JspUtil.validateExpressions(JspUtil.java:644)
at org.apache.jasper.compiler.Validator$ValidateVisitor.visit(Validator.java:752)
at org.apache.jasper.compiler.Node$ELExpression.accept(Node.java:946)
at org.apache.jasper.compiler.Node$Nodes.visit(Node.java:2291)
at org.apache.jasper.compiler.Node$Visitor.visitBody(Node.java:2341)
at org.apache.jasper.compiler.Node$Visitor.visit(Node.java:2347)
at org.apache.jasper.compiler.Node$Root.accept(Node.java:498)
at org.apache.jasper.compiler.Node$Nodes.visit(Node.java:2291)
[...]
The environment to execute this page is Java 7 and Jetty.
If I remove ${contextPath} works fine.
Why i have this error?
Best regards
The cause of your error is 2 different EL language jars in your classpath.
EL version 2.1 is what is actively being used by your webapp, and is the cause of your error (that method doesn't exist in EL 2.1)
EL version 2.2 is what your webapp needs to be using for javax.el.ExpressionFactory.newInstance(), as that method was introduced in EL 2.2
Make sure you are using the correct version of the EL lib, and that you don't have multiple versions of it present in your webapp
Also, why not just use ...
<link type="text/css" rel="stylesheet"
href="${pageContext.request.contextPath}/css/styles.css"/>
and skip the whole <c:set> you are using? (your choice of a fully qualified URI is a bad idea anyway)

Thymeleaf namespace in html files display errors in Netbeans - How can I get it pass HTML checking?

Netbeans HTML checking doesn't like my thymeleaf namespace.
Here is my HTML Thymleaf file:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head">
<object th:include="fragments/meta :: meta" th:remove="tag" />
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'/>
<link href="/../../../webjars/Semantic-UI/2.0.6/semantic.min.css" rel="stylesheet" th:href="#{/webjars/Semantic-UI/2.0.6/semantic.min.css}"/>
<link href="../../../css/core.css" rel="stylesheet" th:href="#{/css/core.css}" />
<link href="../../../css/product.css" rel="stylesheet" th:href="#{/css/product.css}" />
</head>
<body>
</body>
</html>
This is the error displayed in Netbeans:
How can I get Netbeans to play nicely with Thymeleaf?
Try to fix it in this way you may ignore spring security thing.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<meta charset="utf-8"/>
<title>Sample</title>
<link th:href="#{/resources/css/bootstrap.css}" rel="stylesheet" type="text/css"/>
<link th:href="#{/resources/css/bootstrap-theme.css}" rel="stylesheet" type="text/css"/>
</head>
I found out how to disable these errors when I was taking this spring security tutorial
Simply by adding this to html tag:
xmlns="http://www.w3.org/1999/xhtml"
what's even cooler, netbeans now tracks if you closed every tag with slash "/" in document.

load the css from tiles definition xml

How can i load the css from tiles definition file in springs?
My JSP:
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%# taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- <tiles:importAttribute name="cssList" /> --%>
<tiles:useAttribute id = "stylesList" name="styles" classname="java.util.List"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%-- <link href="<c:url value="/styles/cssreset-min.css"/>" rel="stylesheet" type="text/css" /> --%>
<%-- <link type="text/css" rel="stylesheet"
href="<tiles:getAsString name="cssList"/>"/> --%>
<%-- <link href="<c:url value="cssList"/>" rel="stylesheet" type="text/css" /> --%>
<c:forEach var="eachStyle" items="${styles}">
<link type="text/css" rel="stylesheet" href="<c:out value='${eachStyle}'/>" />
</c:forEach>
<title>Insert title here</title>
</head>
This is my tiles xml file?
<definition name="template-main" template="/WEB-INF/jsp/layouts/main.jsp">
<!-- <put-attribute name="cssList" value="/resources/styles/cssreset-min.css" type="string"/> -->
<put-attribute name="banner-content" value="/WEB-INF/jsp/sections/banner.jsp" />
<put-attribute name="title-content" value="Pet Type" />
<put-attribute name="primary-content" value="" />
<put-attribute name="footer-content" value="/WEB-INF/jsp/sections/footer.jsp" />
<put-list-attribute name="styles">
<add-list-attribute>
<add-attribute value="/resources/styles/cssreset-min.css"></add-attribute>
</add-list-attribute>
</put-list-attribute>
</definition>
I just want to load the css from tiles definition xml file. How can i do this?
Can anyone please help . I am new to this one
You have a mistake on the var id to retrieve the items list (at the c:forEach tag).
You are referencing the name (used by tiles:useAttribute) to retrieve the Tiles value, and not the id (which is the key to find the list retrieved at the JSP, in short, the defined variable name).
Your code should look like this:
<c:forEach var="eachStyle" items="stylesList">
<link type="text/css" rel="stylesheet" href="<c:out value='${eachStyle}'/>" />
</c:forEach>

Base URL in Internet Explorer and JSP

Internet Explorer doesn't support HTML <base> tag and even other browsers do, there are some problems when redirect takes place inservletsto some.jsppages for examplerequest dispatching.`
It's feasible to add ${pageContext.request.contextPath} with each URL
nor request.getServletPath()
JSP relative links for CSS and images with servlets forwarding may change things a lot. This link : Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
Is there a better approach with JSP / servlets or it's just an IE issue?
Link : HTML <base> TAG and local folder path with Internet Explorer
And if it is an IE issue:
1. how to fix the IE issue as the above post is unable to give a valid answer?
2. how to solve it with JSP / servlets?
My website is now showing CSS and images.
E.g. HTML output is:
<base href="http://localhost:8080/Alpinema/" /> is not working for
<link media="all" rel="stylesheet" type="text/css" href="css/all.css">
It works in other browsers like Firefox and Chrome.
My JSP code portion:
<head>
<base href="${fn:substring(url, 0, fn:length(url) - fn:length(uri))}${req.contextPath}/" />
<meta charset="utf-8">
<title>Alpinema.com</title>
<link media="all" rel="stylesheet" type="text/css" href="css/all.css">
/css?family=Merriweather|PT+Sans:700|Nobile:400italic' rel='stylesheet' type='text/css'>
</head>
Use <c:url> tag from JSTL to reference CSS/JavaScript resources inside my JSP files. By doing so you can be sure that the CSS/JavaScript resources are referenced always relative to the application context (context path).
Example
index.jsp:
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<title>Some Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="<c:url value="/css/main.css" />" />
<script type="text/javascript" src="<c:url value="/js/utils.js" />"></script>
<script type="text/javascript" src="<c:url value="/js/jquery-1.8.3.js" />"></script>
</head>
<body>
...
</body>
</html>
For even more solutions see my answer here:
Adding external resources (CSS/JavaScript/images etc) in JSP.

Categories