This is the dispatcher-servlet.xml:
<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:beans="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.2.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop-3.2.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-3.2.xsd">
<mvc:annotation-driven />
<context:component-scan base-package="com.web.controllers" />
<mvc:resources mapping="/resources/**" location="/resources/" />
<!-- <mvc:default-servlet-handler /> -->
<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<beans:property name="prefix" value="/WEB-INF/views/" />
<beans:property name="suffix" value=".jsp" />
</beans:bean>
</beans:beans>
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%# taglib prefix="core" uri="http://java.sun.com/jsp/jstl/core" %>
<%# taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head>
<title>mypage</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="${pageContext.request.contextPath}/WebContent/resources/mycustom/fabrication.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/WebContent/resources/mycustom/boxmodel.css" rel="stylesheet">
<link href="<c:url value="/resources/css/bootstrap.min.css" />" rel="stylesheet">
<link href="${pageContext.request.contextPath}/WebContent/resources/css/moslake_style.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/WebContent/resources/css/boxmodel.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/WebContent/resources/css/font.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/WebContent/resources/css/media.css" rel="stylesheet">
<script src="<c:url value="/resources/js/jquery.min.js" />"></script>
<script src="<c:url value="/resources/js/bootstrap.min.js" />"></script>
</head>
<body bgcolor="#F5FAFA">
<h1>${pageContext.request.contextPath}</h1>
<div class="header">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<div class="col-md-5"></div><!--end of first row columns-->
<div class="col-md-2">
<a class="navbar-brand" href="#"><img src="img/swing.png" alt="swing logo" height="50" width="100"></a>
</div>
<div class="col-md-5"></div>
</div><!--end of row-->
<div class="row">
<div class="col-md-5">
<ul class="nav nav-pills">
<li>
<button class="dropdown-toggle btn-primary btn-sm" data-toggle="dropdown" type="button">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
<ul class="dropdown-menu">
<li><p align="center">Projects List</p></li>
<li class="divider"></li>
<li><b>Project1</b></li>
<li><b>Project2</b></li>
<li><b>Project3</b></li>
<li><b>Project4</b></li>
<li><b>Project5</b></li>
</ul>
</li>
<li class="dropdown">
<button type="button" class="dropdown-toggle btn-primary btn-sm" data-toggle="dropdown">
<span class="glyphicon glyphicon-plus"></span>
</button>
<ul class="dropdown-menu">
<li><p align="center">Add</p></li>
<li class="divider"></li>
<li><b>New Project</b></li>
</ul>
</li>
<li>
<form class="navbar-search" id="srch" action="#">
<input type="text" class="form-control" placeholder="Search">
</li>
<li>
<button class="btn btn-primary btn-md" type="submit"><span class="glyphicon glyphicon-search"></span>Search</button>
</form>
</li>
</ul>
</div><!--end of col-md-5-->
<div class="col-md-4"></div><!--end of col-md-4-->
<div class="col-md-3">
<ul class="nav nav-pills">
<li>
<a class="btn btn-basic">hello!
<span class="badge">Abbas Kapasi</span>
</a>
</li>
<li class="dropdown">
<button class="dropdown-toggle btn-primary btn-sm" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-chevron-down"></i></button>
<ul class="dropdown-menu">
<li>Profile</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div><!--end of col-md-3-->
</div><!--end of nested row-->
</div><!--end of main container-->
</div><!--end of nav-->
</div><!--end of header-->
</body>
</html>
This causes following error:
org.springframework.beans.factory.parsing.BeanDefinitionParsingException: Configuration problem: Cannot locate BeanDefinitionParser for element [resources]
Offending resource: ServletContext resource [/WEB-INF/containers/dispatcher-servlet.xml]
Related
I'm trying to use the jquery-bootgrid plugin, but running into some issues using a simple initialization.
The button pagination isn't styled properly and the pageSize/column selection button throws an error in the console when you click on the button:
a.default is not a constructor
This is my markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Dashboard </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.css" />
</head>
<body>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">BRANDING</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search" />
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap"> <a class="nav-link" href="#">Sign out</a> </li>
</ul>
</nav>
<div id="content-container" class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="sidebar-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item"> <a class="nav-link active" href="#">Menu Item 1 <span class="sr-only">(current)</span> </a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Menu Item 2</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Menu Item 3</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Menu Item 4</a> </li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
<h1 class="h2 pt-3 pb-2 mb-3 border-bottom">Users</h1>
<!-- jquery-bootgrid starts here -->
<table id="grid-basic" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="id" data-type="numeric">ID</th>
<th data-column-id="email">Sender</th>
<th data-column-id="firstName">First Name</th>
<th data-column-id="lastName" data-order="desc">Last Name</th>
<th data-column-id="deactivated">Deactivated</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>user#domain.com</td>
<td>John</td>
<td>Smith</td>
<td>true</td>
</tr>
</tbody>
</table>
</main>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.fa.min.js"></script>
<script>
$(document).ready(function() {
$("#grid-basic").bootgrid();
});
</script>
</body>
</html>
I don't feel like I'm doing anything overly complicated here and I'm following the example in the documentation.
This leads me to believe it is a version conflict with bootstrap 4.5.
<ul class="nav navbar-nav navbar-right">
<li>SHOPPING CART</li>
<li><a sec:authorize="isAnonymous()" th:href="#{/login}">MY ACCOUNT</a></li>
<li><a sec:authorize="isAuthenticated()" th:href="#{/myProfile}">MY ACCOUNT</a></li>
<li><a sec:authorize="isAuthenticated()" th:href="#{/logout}">LOGOUT</a></li>
</ul>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:sec="http://www.w3.org/1999/xhtml">
<head th:fragment="common-header">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Le's Bookstore</title>
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet" />
<link href="/css/non-responsive.css" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="/css/style.css" rel="stylesheet" />
<link rel="icon" href="/image/applie-touch-icon.png" />
</head>
<body>
<div th:fragment="navbar">
<div class="page-top"
style="width: 100%; height: 20px; background-color: #f46b42;"></div>
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">LE'S BOOKSTORE</a>
</div>
<div id="navbar">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">BOOKS <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Browse the bookshelf</li>
<li>Store hours & Directions</li>
<li>FAQ</li>
</ul></li>
<form class="navbar-form">
<div class="form-group">
<input type="text" name="keyword" class="form-control"
placeholder="Book title" />
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>SHOPPING CART</li>
<li><a sec:authorize="isAnonymous()" th:href="#{/login}">MY ACCOUNT</a></li>
<li><a sec:authorize="isAuthenticated()" th:href="#{/myProfile}">MY ACCOUNT</a></li>
<li><a sec:authorize="isAuthenticated()" th:href="#{/logout}">LOGOUT</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<div th:fragment="body-bottom-scripts">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</div>
</body>
</html>
Your namespace is not correct. You may need to add thymeleaf & springsecurity5 as shown below:
<!DOCTYPE HTML>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<!-- head, body, etc -->
</html>
Try to use !isAuthenticated(). Edit your code like this:
<ul class="nav navbar-nav navbar-right">
<li>SHOPPING CART</li>
<li><a sec:authorize="!isAuthenticated()" th:href="#{/login}">MY ACCOUNT</a></li>
<li><a sec:authorize="isAuthenticated()" th:href="#{/myProfile}">MY ACCOUNT</a></li>
<li><a sec:authorize="isAuthenticated()" th:href="#{/logout}">LOGOUT</a></li>
</ul>
Like in topic, Can I use Thymeleaf layout dialect with spring?
Do I have to use Spring Standard Dialect?
There is so many materials on web, which makes me really confused.
I've started with Layout dialect, but I cant get to work whole app.
Here is my template main file:
<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="pl" lang="pl" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>DERP></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="all" href="../../css/template.css" th:href="#{/css/template.css}" />
<link rel="stylesheet" type="text/css" media="all" href="../../lib/font-awesome-4.2.0/css/font-awesome.min.css" th:href="#{/lib/font-awesome-4.2.0/css/font-awesome.min.css}" />
<link rel="stylesheet" type="text/css" media="all" href="../../lib/bootstrap-3.3.1-dist/css/themes/slate/bootstrap.min.css" th:href="#{/lib/bootstrap-3.3.1-dist/css/themes/slate/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" media="all" href="../../lib/animate/animate.css" th:href="#{/lib/animate/animate.css}" />
</head>
<body>
<div th:include="fragments/bodyHeader" th:remove="tag">
for prototyping
</div>
<div id="mainMenu">
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">DERP</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">Active</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="fa fa-home"></i> Customer <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-user"></i> User <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- #mainMenu ENDS-->
<div layout:fragment="header">Static header</div>
<div layout:fragment="pageContent">Demo static page content</div>
<div id="pageFooter" class="panel panel-default">
<div class="panel-body">Copyright Daniel Korbel 2014</div>
</div>
<div id="javaScriptSection">
<script type="text/javascript" src="../../lib/jquery/jquery-2.1.1.min.js" th:src="#{lib/jquery/jquery-2.1.1.min.js}"></script>
<script type="text/javascript" src="../../js/template.js" th:src="#{/js/template.js}"></script>
<script type="text/javascript" src="../../lib/noty-2.3.1/js/noty/packaged/jquery.noty.packaged.min.js" th:src="#{/lib/noty-2.3.1/js/noty/packaged/jquery.noty.packaged.min.js}"></script>
<script type="text/javascript" src="../../lib/noty-2.3.1/js/noty/layouts/topRight.js" th:src="#{/lib/noty-2.3.1/js/noty/layouts/topRight.js}"></script>
<script type="text/javascript" src="../../js/notyStarter.js" th:src="#{/js/notyStarter.js}"></script>
<script type="text/javascript" src="../../lib/bootstrap-3.3.1-dist/js/bootstrap.min.js" th:src="#{/lib/bootstrap-3.3.1-dist/js/bootstrap.min.js}"></script>
</div>
</body>
</html>
and my sample body file which is returned by controller:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout/template">
<div layout:fragment="pageContent">
<p>LIST</p>
</div>
</html>
But unfortunatelly this code works only with Layout dialect.
Can anyone help me transform that code to work with spring standard dialect?
My thymeleaf config:
public class ThymeleafConfig {
#Bean
public ServletContextTemplateResolver templateResolver() {
ServletContextTemplateResolver resolver = new ServletContextTemplateResolver();
resolver.setPrefix("/WEB-INF/view/");
resolver.setSuffix(".html");
resolver.setTemplateMode("HTML5");
resolver.setOrder(1);
resolver.setCacheable(false);
return resolver;
}
#Bean
public SpringTemplateEngine templateEngine() {
SpringTemplateEngine templateEngine = new SpringTemplateEngine();
templateEngine.setTemplateResolver(templateResolver());
templateEngine.setDialect(new SpringStandardDialect());
//templateEngine.setDialect(new LayoutDialect());
return templateEngine;
}
#Bean
public ThymeleafViewResolver viewResolver() {
ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
viewResolver.setTemplateEngine(templateEngine());
viewResolver.setCharacterEncoding("UTF-8");
return viewResolver;
}
}
Adding the layoutdialect to the templateengine should be enough to get it working. Don't use setDialect. You should have an addDialect or setAdditionalDialects method or something like that. (I use the xml config so i don't know the exact names)
UPDATE: added xml config
<beans:bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
<beans:property name="templateResolvers">
<beans:set>
<beans:ref bean="servletContextTemplateResolver" />
<beans:ref bean="classLoaderTemplateResolver" />
</beans:set>
</beans:property>
<beans:property name="dialects">
<beans:set>
<beans:ref bean="thymeleafSpringDialect" />
</beans:set>
</beans:property>
<beans:property name="additionalDialects">
<beans:set>
<beans:bean class="nz.net.ultraq.thymeleaf.LayoutDialect" />
<beans:bean
class="org.thymeleaf.extras.springsecurity3.dialect.SpringSecurityDialect" />
<beans:bean class="ch.mfrey.thymeleaf.extras.with.WithDialect" />
<beans:bean class="ch.mfrey.thymeleaf.extras.cache.CacheDialect" />
</beans:set>
</beans:property>
</beans:bean>
In my Spring project, one of the my controllers have the following views:
login -> /WEB-INF/jsp/acesso/login.jsp
logout -> /WEB-INF/jsp/acesso/logout.jsp
start -> /WEB-INF/jsp/acesso/start.jsp
which are working almost fine, except with this little problem with the the first view (login):
When I call it for the first time (aka, when I start the application), the page is displayed correctly. But after I call logout from inside start, I have a link to login. When I click in this link, the view login is displayed wrong, without reach none of the css files included in the html code.
The JSP files above are:
login.jsp
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>HorarioLivre - Login</title>
<link href="<c:out value="bootstrap/css/bootstrap.min.css"/>" rel="stylesheet">
<link href="<c:out value="extras/css/signin.css"/>" rel="stylesheet">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-signin" role="form" method="post" action="<c:out value="acesso/doLogin.html"/>">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="text" class="form-control" name="username" placeholder="Username" required autofocus>
<input type="password" class="form-control" name="password" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
start.jsp
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>HorarioLivre</title>
<!-- Bootstrap core CSS -->
<link href="<c:out value="../bootstrap/css/bootstrap.min.css"/>" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="<c:out value="../extra/css/starter-template.css"/>" rel="stylesheet">
<script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">HorarioLivre</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Eventos</li>
<li>Listar Horários</li>
<li>Cadastrar Horários</li>
<li>Usuários</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
${usuario.primeiroNome} ${usuario.ultimoNome}<b class="caret"></b>
<ul class="dropdown-menu">
<li>Perfil</li>
<li>Configurações</li>
<li>Sair</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="starter-template">
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="<c:out value="../jquery/js/jquery-2.1.0.min.js"/>"></script>
<script src="<c:out value="../jquery/js/jquery-ui-1.10.4.custom.min.js"/>"></script>
<script src="<c:out value="../bootstrap/js/bootstrap.min.js"/>"></script>
</body>
</html>
logout.html
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Saida do sistema</title>
<!-- Bootstrap core CSS -->
<link href="<c:out value="../bootstrap/css/bootstrap.min.css"/>" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="<c:out value="../extra/css/jumbotron-narrow.css"/>" rel="stylesheet">
<script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<h3 class="text-muted">HorarioLivre</h3>
</div>
<div class="jumbotron">
<h1>Você saiu do sistema</h1>
<p class="lead"></p>
<p><a class="btn btn-lg btn-success" href="<c:out value="login.html"/>" role="button">Entrar novamente</a></p>
</div>
<div class="footer">
<p>Kleber Mota de Oliveira © 2014</p>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
Someone knows how to correct set the mapping for this files, to work don't matter how it's called?
ps.: my web.xml is:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>HorarioLivre2</display-name>
<welcome-file-list>
<welcome-file>acesso/login.html</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>HorarioLivre2</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>HorarioLivre2</servlet-name>
<url-pattern>*.html</url-pattern>
</servlet-mapping>
</web-app>
my HorarioLivre2-servlet.xml:
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-2.0.xsd">
<context:component-scan base-package="com.horariolivre"/>
<bean id="viewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
<property name="viewClass" value="org.springframework.web.servlet.view.JstlView" />
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
<context:annotation-config>
<bean class="com.horariolivre.resources.HibernateConfig">
</bean>
</context:annotation-config>
<tx:annotation-driven transaction-manager="transactionManager"/>
</beans>
In your HorarioLivre2-servlet.xml it seems that you have not mapped the static resources. Check out this link to see how this is done
I'm quite new to coding and I have a question. I have checked out several forums already, but none of them helped me out.
I have a image gallery (I used this one to get started: http://startbootstrap.com/thumbnail-gallery) and I want to get a popup with the image on full size when a viewer clicks on one of the thumbnails. Does anyone know how I can implent this function?
My HTML:
<!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">
<meta name="author" content="">
<meta name="description" content="">
<title></title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,300' rel='stylesheet'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- HEADER -->
<div class="top-header section-content align-center">
<header>
<img class="logo" src="images/logo.png">
<ul class="inline">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
</div>
<!-- CONTENT -->
<section>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/2.png" class="grayscale" alt="Portfolio Item 1">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/1.png" class="grayscale" alt="Portfolio Item 2">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/3.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/5.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/4.png" class="grayscale" alt="Portfolio Item 1">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/6.png" class="grayscale" alt="Portfolio Item 2">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/8.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/7.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/1.png" class="grayscale" alt="Portfolio Item 1">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/4.png" class="grayscale" alt="Portfolio Item 2">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/3.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/6.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
</div>
</div>
</section>
<hr />
<!-- QUOTE AREA -->
<section>
<div class="quote-container section-content align-center">
<h2 class="interested">Interested?</h2>
<p>Do you like my work? Do you want more information about me and the services I provide? Feel free to shoot me a message!</p>
Contact
</div>
</section>
<!-- FOOTER -->
<div id="footer">
<div class="copyright">
© Copyright 2014 Distinction Portfolio Theme.
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You can use LightBox for this. It is not included in the bootstrap framework but i'm sure there are extensions made for it.
For example, you can try Bootstrap 3 lightbox : http://ashleydw.github.io/lightbox/
Use this HTML code to implement simple image pop up on click of thumbnail and have an image close option:
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-toggle="modal" data-target=".bs-example1-modal-lg">
<img class="img-responsive" src="img/clinic1.jpg" alt="">
</a>
<div class="modal fade bs-example1-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<!-- /.modal-dialog -->
<div class="modal-content">
<!-- /.modal-content -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myLargeModalLabel">Image-1</h4>
</div>
<div class="modal-body">
<img src="img/clinic1.jpg" class="img-responsive img-rounded center-block" alt="">
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>