Erro ao incluir CSS no pageTemplate

6 de abril de 2020 14 respostas Resolvido

Moreira89 6 de abril de 2020

Boa tarde!

Estou fazendo alguns testes com Spring MVC e JSP Template e não consegui incluir o CSS, testei algumas formas, mas ele dá erro 404 (no console) para o arquivo .css

Meu projeto tem a seguinte estrutura:

WEB-INF >
        ressources >
            css
                reset.css
        tags >
            pageTemplate.jsp
        views >
            cadastro >
                form-pessoa.jsp
            cabecalho.jsp
            rodape.jsp
            home.jsp

Tentei incluir a referencia:

<link rel="stylesheet" href="/resources/css/reset.css" />

no head do pageTemplate ou no form-pessoa, mas não funcionou… Como posso incluir corretamente?

pageTemplate.jsp

<%@ attribute name="titulo" required="true" %>
<%@ attribute name="bodyClass" required="false" %>
<%@ attribute name="extraScripts" fragment="true" %>

<!DOCTYPE html>

<html>

    <head>
        <meta charset="UTF-8" />        
        <title>${titulo } - Controle de Peso</title>
    </head>

    <body class="${bodyClass}" >

    <%@ include file="/WEB-INF/views/cabecalho.jsp" %>

    <jsp:doBody />

    <jsp:invoke fragment="extraScripts"></jsp:invoke>

    <%@ include file="/WEB-INF/views/rodape.jsp" %>

    </body>

</html>

form-pessoa.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib tagdir="/WEB-INF/tags" prefix="tags"%>

<c:url value="/" var="contextPath" />

<tags:pageTemplate titulo="Cadastro de Pessoa">

    <jsp:body>    

        <h1>Dados Pessoais</h1>

        <form:form action="enviaPessoa" method="post">

            <label for="nome">Nome: </label>
            <input type="text" name="nome" required/> 

            <label for="dataNascimento">Data Nascimento:  </label>
            <input name="dataNascimento" type="date" required>

            <fieldset>
            <legend>Altura: </legend>
            <input type="range" id="vol" name="vol" value="0" min="0.30" max="2.50" step="0.01"
                        oninput="altura.value=value" onchange="altura.value=value">
                    <input type="text" id="altura" name="altura" oninput="vol.value=value" onchange="vol.value=value" readonly>
            </fieldset>

            <fieldset>
                <legend>Sexo: </legend>
                <select name="sexo">
                    <option selected disabled>Selecione...</option>
                    <option value="Masculino">Masculino</option>
                      <option value="Feminino">Feminino</option>
                    </select>
            </fieldset>

            <input type="submit" value="Enviar cadastro" />
        </form:form>


    </jsp:body>

</tags:pageTemplate>

14 Respostas

vicentingr 6 de abr. de 2020

Acredito que isso esteja acontecendo pq sua pasta de recursos está dentro de WEB-INF. Essa pasta não aceita requisições. Experimente colocá-la na pasta webapp.

Moreira89 6 de abr. de 2020

Obrigado!

FIz alguns testes, mas não funcionou, subi a pasta para debaixo do webapp, mesmo nível do WEB-INF.

Tentei incluir no pageTemplate com os seguintes apontamentos, nenhum funcionou:

<link rel="stylesheet" href="../resources/css/reset.css" />
<link rel="stylesheet" href="/../resources/css/reset.css" />
<link rel="stylesheet" href="./resources/css/reset.css" />
<link rel="stylesheet" href="resources/css/reset.css" />
<link rel="stylesheet" href="/resources/css/reset.css" />

<link rel="stylesheet" href="webapp/resources/css/reset.css" />
<link rel="stylesheet" href="/webapp/resources/css/reset.css" />
<link rel="stylesheet" href="../webapp/resources/css/reset.css" />
<link rel="stylesheet" href="/../webapp/resources/css/reset.css" />
<link rel="stylesheet" href="./webapp/resources/css/reset.css" />

Moreira89 6 de abr. de 2020

O correto seria incluir no pageTemplate.tag mesmo, certo?

vicentingr 6 de abr. de 2020

Tente agora adicionar essa linha no arquivo de configuraçao servlet.xml:
<resources mapping="/resources/**" location="/resources/">

Moreira89 6 de abr. de 2020 1 like

Vou tentar… Obrigado!

Minha configuração está toda em classe Java, vou verificar como incluir esse mapeamento via código.

Obrigado!

Moreira89 6 de abr. de 2020 1 like

@vicentingr Não achei como fazer essa mapeamento via código java, mas consegui fazer funcionar, não sei se é o jeito certo ou um tipo de gambi, mas deu certo incluindo no head do pageTemplate.jsp

<style> 
			<%@include file="/resources/css/reset.css"%> 
			<%@include file="/resources/css/cabecalho.css"%>
	</style>

eliseu2203 6 de abr. de 2020

já tentou acessar os links por meio da c:url?
,
<link rel="stylesheet" href="<c:url value="webapp/resources/css/reset.css"/>" />

,
usa este código em todos os links.
e se mesmo assim não estiver a dar certo.
verifica a tags no xml se o caminho está correto…

Moreira89 7 de abr. de 2020

Desta forma não funcionou…

Inclui no pageTemplate:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<c:url value="/" var="contextPath" />

<link rel="stylesheet" type="text/css"  href="<c:url value="webapp/resources/css/reset.css"/>" >
<link rel="stylesheet" type="text/css"  href="<c:url value="webapp/resources/css/cabecalho.css"/>" >

No inspecionar consta o seguinte erro:

1. Request URL:

http://localhost:8080/webapp/resources/css/reset.css

  2. Request Method:

GET

  3. Status Code:

404

  4. Remote Address:

[::1]:8080

  5. Referrer Policy:

no-referrer-when-downgrade

1. Response Headersview source

  1. Connection:

keep-alive

  2. Content-Language:

pt-BR

  3. Content-Length:

763

  4. Content-Type:

text/html;charset=utf-8

  5. Date:

Tue, 07 Apr 2020 00:38:10 GMT

  6. Keep-Alive:

timeout=20

eliseu2203 7 de abr. de 2020

<link rel="stylesheet" type="text/css" href="<c:url value="/webapp/resources/css/cabecalho.css"/>
O link estava a faltar uma barra invertida.
podes me mostrar qual é o caminho do resource ai no xml? talvez o erro esteja na declaração do resource ai no seu xml.

Moreira89 7 de abr. de 2020

Minha classe ServletSpringMVC

public class ServletSpringMVC extends AbstractAnnotationConfigDispatcherServletInitializer {

	@Override
	protected Class<?>[] getRootConfigClasses() {
		return new Class[] { SecurityConfiguration.class, AppWebConfiguration.class, JPAConfiguration.class };
	}

	@Override
	protected Class<?>[] getServletConfigClasses() {
		return new Class[] {};
	}

	@Override
	protected String[] getServletMappings() {
		return new String[] { "/" };
	}

}

Classe AppWebConfiguration

@EnableWebMvc
@ComponentScan(basePackageClasses = { HomeController.class, PesoDAO.class, Usuario.class })
public class AppWebConfiguration extends WebMvcConfigurerAdapter {

	@Autowired
	private RequestMappingHandlerAdapter requestMappingHandlerAdapter;

	@Bean
	public InternalResourceViewResolver internalResourceViewResolver() {
		InternalResourceViewResolver resolver = new InternalResourceViewResolver();
		resolver.setPrefix("/WEB-INF/views/");
		resolver.setSuffix(".jsp");
		return resolver;
	}

	@Bean
	public MessageSource messageSource() {
		ReloadableResourceBundleMessageSource messageSource = new ReloadableResourceBundleMessageSource();
		messageSource.setBasename("/WEB-INF/messages");
		messageSource.setDefaultEncoding("UTF-8");
		messageSource.setCacheSeconds(1);
		return messageSource;
	}

	@PostConstruct
	public void init() {
		requestMappingHandlerAdapter.setIgnoreDefaultModelOnRedirect(true);
	}
	
}

eliseu2203 7 de abr. de 2020

Olha só agora que notei um pequeno erro no caminho.
no href diz resources e o pasta está com nome de ressources.
e faltam um metodo na class AppWebConfiguration, este método se encarrega de verificar qual a pasta de resource onde está os arquivos meios externos.

Solucao aceita

eliseu2203 7 de abr. de 2020 1 like

o methodo é como este, para registar o resource de sua aplicação…

<a class="mention" href="/u/override">@Override</a>

public void addResourceHandlers(ResourceHandlerRegistry registry) {

registry.addResourceHandler("/resources/**")

.addResourceLocations("/public-resources/")

.setCacheControl(CacheControl.maxAge(1, TimeUnit.HOURS).cachePublic());

}

Moreira89 7 de abr. de 2020 1 like

@eliseu2203 Muuuuuuuito Obrigado!

Funcionou!

Inclui no AppWebConfiguration

@Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("*.css").addResourceLocations("/resources/css/");
    }

E a pageTemplate ficou assim:

<link rel="stylesheet" type="text/css" href="reset.css">
		<link rel="stylesheet" type="text/css" href="cabecalho.css"

Inclusive a importação de imagens no código funcionou também, inclui o

registry.addResourceHandler("*.png").addResourceLocations("/resources/images/");

E da mesma forma que o CSS, as imagens estão funcionando.

Obrigado!

eliseu2203 7 de abr. de 2020 1 like

Boa continuação ai…
só te faltava mesmo o método e alterar o resources q estava com outro nome.

Criado 6 de abril de 2020

Ultima resposta 7 de abr. de 2020

Respostas 14

Participantes 3

14 Respostas

Topicos relacionados