I want to develop an application using spring boot, jsp, bootstrap and hibernate. Where my each jsp page have the header, footer and left pane same but only the middle section get change based on the functionality. And i dont want to create each page with copying the same all over and even dont want impact application performance by adding all the UI dependencies in each and every JSP.
So can someone please suggest me the best approach to deal with it.
I searched and find the Angular JS an react JS options, but I already have one application built in Spring 4, JSP, Hibernate technology stack and one which i have to develop is going to integrate with old one, so I think technology stack may impact the integration. For integration i am thinking about maven multimodule project.
Hence I need suggestion as i am in initial stages of development .
You make use of jsp:include; Here is one tutorial but I'm sure there's many others. https://www.roseindia.net/jsp/include-tag-jsp.shtml
Example:
<jsp:include page="includes/header.jsp" flush="true">
<jsp:param name="title" value="Example" />
</jsp:include>
header.jsp:
<!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" />
<title>${ param.title }</title>
<link rel="stylesheet" type="text/css" href="<c:url
value="/bootstrap/3.3.6/css/bootstrap.min.css"/>" />
</head>
Related
I used JSF with PrimeFaces very long time ago for class purposes.
Right now I want to get into spring and build a website for myself where I dont get any support for.
Usually what I want to do should be straight forward but somehow I dont really get what I done wrong, as - if im not mistaken - It should be just 1 dependency and the .html itself.
I added into the pom.xml
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>11.0.0</version>
</dependency>
I created a test2.html file:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<p:spinner />
</h:body>
</html>
The outcome looks like this:
So my question is: Why dont the spinner gets shown on the test2.html site itself?
I am facing this error:
Failed to load resource: the server responded with a status of 404
Here is how I am loading css. Note that I am not using WebMvcConfigurer.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" th:href="#{https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css}">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" th:href="#{/css/mdb.min.css}">
<!-- Your custom styles (optional) -->
<link rel="stylesheet" th:href="#{/css/style.css}">
</head>
And I am loading js files at the end of the page (body).
<body>
......
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="/static/js/jquery-3.1.1.min.js" th:src="#{/js/jquery-3.1.1.min.js}"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="/static/js/popper.min.js" th:src="#{/js/popper.min.js}"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="/static/js/bootstrap.min.js" th:src="#{/js/bootstrap.min.js}"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="/static/js/mdb.min.js" th:src="#{/js/mdb.min.js}"></script>
</body>
What could be the reason?
EDIT:
Here is my directory structure
Seems you are doing mistake while you are loading jquery. Your jquery is jquery-3.3.1.min.js but you are loading jquery-3.1.1.min.js
<script type="text/javascript" src="/static/js/jquery-3.1.1.min.js" th:src="#{/js/jquery-3.1.1.min.js}"></script>
So check jquery version.
this worked for me.
this is how my files are like in the static folder:
this is how i include the files from the static folder into my html pages:
i get rid of the static folder in the path since the server i guess knows to look for static content in the static folder. so the path for my all.min.css will be.
http://127.0.0.1:8080/js/demo/all.min.css
it will search for in the static folder.
if you add static i.e
{link href="/static/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"}
the server will look for
http://127.0.0.1:8080/static/static/js/demo/all.min.css
and it won't get that path
remember to allow the routes in antmatchers if you're using spring security. see attached image
allow the routes to the folders in static folder if using spring security:
Load css
<link href="../static/assets/css/materialize.min.css" type="text/css"
rel="stylesheet" th:href="#{/assets/css/materialize.min.css}"
media="screen,projection">
Load js
<script type="text/javascript" src="../static/assets/js/materialize.min.js"
th:src="#{/assets/js/materialize.min.js}"></script>
I have a Java/Spring 3.x webapp that uses ExtJS and I use the Sencha Architect to create the front end which results in an automatically generated app.html file that loads in the JS and CSS resources that looks like this:
<!DOCTYPE html>
<!-- Auto Generated with Sencha Architect -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ui</title>
<script src="ext/ext-all.js"></script>
<script src="ext/ext-theme-neptune.js"></script>
<link rel="stylesheet" href="ext/resources/ext-theme-neptune/ext-theme-neptune-all.css">
<link rel="stylesheet" href="css/custom.css">
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
I want to protect this html file with Spring security and this seems to work except that it is often cached in the browser so that it appears to reload even when the user is not logged in. Here is my Spring XML that configures security for my webapp:
<beans:beans xmlns="http://www.springframework.org/schema/security"
xmlns:beans="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/security
http://www.springframework.org/schema/security/spring-security-3.2.xsd">
<http auto-config="true" use-expressions="true">
<intercept-url pattern="/ui/app.html" access="hasRole('ROLE_USER')" />
<intercept-url pattern="/ui/**" access="permitAll" />
<form-login
login-page="/login"
default-target-url="/ui/app.html"
authentication-failure-url="/login?error"
username-parameter="username"
password-parameter="password" />
<logout logout-success-url="/login?logout" />
<csrf/> <!-- enable csrf protection -->
</http>
<authentication-manager>
<authentication-provider >
<user-service>
<user name="test" password="test" authorities="ROLE_USER" />
</user-service>
</authentication-provider>
</authentication-manager>
</beans:beans>
As you can see I have configured it to protect the ui/app.html resource as well as redirect to that page after log in. This works fine until the browser caches the page and causes confusion when the user is logged out and tries to access the same URL.
I was wondering if Spring MVC could be used to load the page via a controller, perhaps modifying the HTTP headers to force the page to expire, but as this is a page that is normally delivered directly by the servlet container and not MVC I'm not sure how I would configure that.
I'd also like to be able to leave my app.html file in-situ as it uses resources that are relative to it, and it's also easier to leave it there when working with Sencha Architect.
This will prevent browser caching:
<http>
<!-- ... -->
<headers>
<cache-control />
</headers>
</http>
It adds Cache-Control, Pragma and Expires headers for every response. More information can be found in reference documentation, section Security HTTP Response Headers.
Update: This answer was written for version 3.2 of Spring Security. As of version 4, these headers are included by default.
You can choose one of the below which depends on how your application is going to serve the resource requests.
Using Spring Security
http://docs.spring.io/spring-security/site/docs/current/reference/html/headers.html#headers-cache-control
Using Extjs
http://www.sencha.com/forum/showthread.php?257086-Is-there-a-simple-way-to-disable-caching-for-an-entire-ExtJS-4-application
Using HTML
http://www.htmlgoodies.com/beyond/reference/article.php/3472881
I have a problem with import css files in decorator.jsp file. My files structure looks following:
WEB-INF
css
style.css
decorators
decorator.jsp
How can I access style.css? I tried with different combinations an still didn't get effect.
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="/WEB-INF/css/style.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" />
However contextPath, servletPath, pathInfo always returns null.
Thanks in advance for any help.
Try the below:
<link href="/css/style.css" rel="stylesheet" type="text/css" />
I have pretty much the same structure as you and the above works...
i'm working in a project with jsp, i need to start to use ajax too.
i'm enjoying jsf , is possible work with these together (JSP, JSF and AJAX) ?
I'm asking this cause i could run jsf with ajax
<h:commandButton id="bt_save" value="Save" title="Save" action="#personMBean.clickSave()}">
<f:ajax execute="#form" render="lblMessage" />
</h:commandButton>
<br/>
<h:outputLabel id="lblMessage" value="#{personMBean.message}" />
But when i try input this code in my jsp page it doesn't work, even if i insert on my jsp page:
<%#page contentType="text/html"%>
<%#page pageEncoding="UTF-8"%>
<%#taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%#taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
Any ideas ?
Ensure that you're using JSF 2.x (the <f:ajax> doesn't exist in JSF 1.x) and that you've a <h:head> instead of <head> in the master template (so that JSF can auto-include necessary Ajax JavaScripts).
Said that, you should really consider Facelets as replacement of JSP. JSP is an outdated view technology and ill suited for templating and has been replaced by Facelets as per JSF 2.0 / Java EE 6.
Yes - try richfaces or primefaces
I don't see why you couldn't do this but certainly not on the same page.
To do this you need to map the *.jsp extension to the JSP servlet while mapping the *.jsf or *.xhtml to FacesServlet.