[RESOLVIDO] - Como carregar no header.jsp de um projeto VRaptor: imagem png + js + css

Front-end
#1

Pessoal,

Iniciando no VRaptor, não consigo em meu projeto de estudo fazer o cabeçalho (header.jsp) ser lido por completo. Não carrega o logo nem os js e css.

Testei os caminhos absoluto e relativo, jstl etc, mas sem resultados.

A única coisa que me veio em mente seria o VRaptor. Algo sobre o contexto, mapeamento enfim… com estou vendo o framework pela primeira vez, fico sem muitas ideias para tentar resolver este problema.

A estrutura Webcontent do projeto está na imagem anexa.

Segue código do header.jsp:

obs: no código vocês verão que tentei algumas formas distintas de carregar o dito PNG, mas todas sem sucesso.

[code]
<%@ 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://java.sun.com/jsp/jstl/fmt” prefix=“fmt” %>

Cabeçalho 
	<link type="text/css" href="/WEB-INF/jsp/resources/css/smoothness/jquery-ui-1.8.21.custom.css" rel="stylesheet">
	<script type="text/javascript" src="/WEB-INF/jsp/resources/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="/WEB-INF/jsp/resources/js/jquery-ui-1.8.21.custom.min.js"></script>
</head>
<body>

		<c:set var="path"><c:url value="/" /></c:set>
		
		<c:url value="${path}/WEB-INF/jsp/layout/caelum.png" var="imagem" />
		<img src="${imagem}" />

		
		<img src="caelum.png" />
		
		<img src="<%=request.getContextPath() %>//WEB-INF/jsp/layout/caelum.png" />
		
		<img src="/caelum.png" />
		
		<img src="../caelum.png" />
		
		<h2>Controle de Produtos</h2>
		
		<hr />

</body>
[/code]
2012/7/7/706ab947702db70683c5b5d097c34baa_145848.png_469×619 39.1 KB

#2

os css, js e imagens não podem estar dentro da WEB-INF

e sempre use o <c:url value="/caminho/pro/arquivo">

#3

[quote=Lucas Cavalcanti]os css, js e imagens não podem estar dentro da WEB-INF

e sempre use o <c:url value="/caminho/pro/arquivo">[/quote]

Os arquivos podem sim estar em WEB-INF, mas terá que fazer um Controller faça o handle desses resources.

#4

[quote=Lucas Cavalcanti]os css, js e imagens não podem estar dentro da WEB-INF

e sempre use o <c:url value="/caminho/pro/arquivo">[/quote]

Obrigado Lucas!

Foi apenas alterar a pasta. Já consegui apontar corretamente para o jquery, imagem e css poelo caminho absoluto.

#5

[quote=guilherme.dio][quote=Lucas Cavalcanti]os css, js e imagens não podem estar dentro da WEB-INF

e sempre use o <c:url value="/caminho/pro/arquivo">[/quote]

Os arquivos podem sim estar em WEB-INF, mas terá que fazer um Controller faça o handle desses resources.[/quote]

Obrigado pela sugestão Guilherme. Quando me aprofundar mais neste framework vou utilizar sua dica .

#6

A menos que vc tenha algo dinâmico nesses arquivos, vc não ganha nada fazendo um Controller pra eles.

Deixe os arquivos fora do WEB-INF, que já resolve o problema.

#7

Bom dia,

tenho um problema similar, soh que eh com o jquery UI e o css.

Dentro do arquivo de css do jquery UI temos caminhos lá pra algumas imagens da lib
exemplo

.ui-widget-header { border: 1px solid #4297d7; background: #5c9ccc url(images/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }

bem, o caminho de images está como vem na UI

Porem meu projeto com vraptor está:

META-INF
WEB-INF

jsps
WEBCONTENT
css
js
img

Ele acha de boa na pagina, carrega e tudo, soh que não consegue achar as imagens dentro do CSS

Obrigado

#8

existe a pasta images dentro da pasta css?

#9

Não a pasta css soh possui CSS

ai o WebContent ficou assim

WebContent

css

jqueryUI.css
images

todas as imagens do UI
js

arquivos js

Quando mando executar o projeto ele não acha as imagens necessárias do UI.

#10

Resolvi colocando o caminho absoluto da aplicação. o Caminho do meu site. é correto esse metodo?

#11

no css do ui tá:

url(images/ui-bg_gloss-wave_55_5c9ccc_500x100.png)

se quiser que a pasta images fique fora da pasta css, vc precisa substituir todas as urls parecidas com a acima por:

url(../images/ui-bg_gloss-wave_55_5c9ccc_500x100.png)
#12