[RESOLVIDO] Problemas para utilizar JS e CSS com VRaptor3 + NetBeans6.5

Assuntos Gerais
#1

Olá pessoal,

sou novo no GUJ e com VRaptor3, o qual estou utilizando em um pequeno sistema (juntamente com Extjs). Estou com problemas para utilizar arquivos JS e CSS, em resumo, com relação ao caminho de contexto que é utilizado para os arquivos JS e CSS importados em um JSP.

Procurei no fórum a solução antes de postar algo e encontrei um post bastante parecido (http://guj.com.br/posts/list/142536.java#768159), mas que não resolveu meu problema (o problema é resolvido para alguém que está utilizando Eclipse mas ao final do post alguém acrescenta que está tendo o mesmo problema com o NetBeans, mas que não conseguiu resolver ainda, assim como eu).

Abaixo descrevo os testes que fiz e os resultados obtidos, sendo que, para todos eles:

  • o JSP está no caminho /WEB-INF/jsp/cliente/listar.jsp
  • o CSS está no caminho /css/estilo.css (ou seja, na mesma pasta do WEB-INF)
  • o JS está no caminho /js/script.js (ou seja, na mesma pasta do WEB-INF)

[color=blue]EXEMPLO QUE FUNCIONA: [/color] utilizando @Path sem indicar o recurso

Recurso:

[code]@Resource
public class ClienteController {
…

@Get
@Path("listarClientes") // ou @Path("/listarClientes")
public void listar() {
   ...
}

…
}[/code]

JSP:

[code]<%@page contentType=“text/html” pageEncoding=“UTF-8”%>

... [/code]

ACESSO: http://localhost:8084/NomeProjeto/listarClientes => [color=blue]OK! Recurso acessado, retorno feito e caminhos para CSS e JS sem erro.[/color]

[color=red]EXEMPLO QUE NÃO FUNCIONA 1: [/color] utilizando o caminho padrão ou o @Path indicando o recurso

Recurso:

[code]@Resource
public class ClienteController {
…

@Get
@Path("/cliente/listar") // ou @Path("cliente/listar") ou sem colocar o @Path
public void listar() {
   ...
}

…
}[/code]

JSP:

[code]<%@page contentType=“text/html” pageEncoding=“UTF-8”%>

... [/code]

ACESSO: http://localhost:8084/NomeProjeto/cliente/listar => [color=red]O recurso é acessado corretamente, o retorno feito, mas os caminhos para CSS e JS apresentam erro. Eles buscam por: [/color]

http://localhost:8084/NomeProjeto/cliente/css/estilo.css e
http://localhost:8084/NomeProjeto/cliente/js/script.js

ao invés de

http://localhost:8084/NomeProjeto/css/estilo.css e
http://localhost:8084/NomeProjeto/js/script.js

[color=red]EXEMPLO QUE NÃO FUNCIONA 2: [/color] utilizando o caminho padrão ou o @Path indicando o recurso e colocando caminho absoluto no CSS e JS

Recurso:

[code]@Resource
public class ClienteController {
…

@Get
@Path("/cliente/listar") // ou @Path("cliente/listar") ou sem colocar o @Path
public void listar() {
   ...
}

…
}[/code]

JSP:

[code]<%@page contentType=“text/html” pageEncoding=“UTF-8”%>

... [/code]

ACESSO: http://localhost:8084/NomeProjeto/cliente/listar => [color=red]O recurso é acessado corretamente, o retorno feito, mas os caminhos para CSS e JS apresentam erro. Eles buscam por: [/color]

http://localhost:8084/css/estilo.css e
http://localhost:8084/js/script.js

ao invés de

http://localhost:8084/NomeProjeto/css/estilo.css e
http://localhost:8084/NomeProjeto/js/script.js

Alguém poderia me explicar o porque do EXEMPLO QUE NÃO FUNCIONA 1 não funcionar (seja porque não deveria, o que significa que eu não entendi nada então hehe, ou então porque eu estou esquecendo ou fazendo algo errado)? O segundo exemplo que não funciona eu entendo, mas o primeiro não.

Muito obrigado.

[]s

#2

na sua jsp coloca o caminho todo com

${pageContext.servletContext.contextPath}/js/script.js
#3

não funcionava pq vc tava na página /cliente/listar, e tentou acessar um js pelo caminho relativo… pensa como se fosse uma pasta de arquivos… vc tá na “pasta” clientes, vendo o “arquivo” listar, se vc ir pro caminho relativo js/meujs.js ele vai contar da pasta clientes…

use os caminhos do jeito que o zoren falou, sempre que vc quiser referenciar algo pelo caminho absoluto…

ou faça:

<c:set var="path"><c:url value="/"/></c:set>
//....
${path}/js/script.js
#4

Obrigado Lucas e zoren, ambas formas funcionaram sim. De toda forma, ainda fico com duas dúvidas:

  1. fazer o uso desses prefixos é usual (pelo menos com VRaptor) ou eu estou complicando as coisas em meu projeto? Não tenho experiência ainda, mas nos projetos da empresa onde trabalho (ainda utilizamos Struts) nunca precisei fazer isso.

  2. estou utilizando ExtJS junto com o VRaptor e o mesmo problema acontece quando utilizo caminhos para imagens dentro dos componentes do ExtJs, por exemplo:

toolbar.add({ icon: 'image/preview.png', ... });

No exemplo acima, estou adicionando em uma toolbar um botão cujo ícone é a imagem em ‘image/preview.png’. Da mesma forma, ele procura essa imagem em ‘cliente/image/preview.png’. Alguém poderia me dizer como lida-se com esse problema com o VRaptor?

Muito obrigado novamente.

#5

Bom eu sempre coloco assim para importar os .js’s e os .css’s:

        <script type="text/javascript" src="<c:url value="/js/jquery-1.3.2.min.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/js/jquery.validate.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/js/valForm.js"/>"></script>

agora qnd é imagem que eu não coloco pelo css eu faço assim:

<img src="../imagens/figura.png"/>

nos meus eu faço isso, sempre funcionou.

#6

sim, é usual fazer isso…

nos js vc tb tem q colocar o path… se estiverem na jsp vc tb usa o ${path} antes do caminho, se estiverem em um javascript importado, faça algo do tipo, antes de importá-lo:

var context = '${path}';

e usa o context pra montar as urls…

#7

Obrigado Ramon pela ajuda. Quanto ao que você falou do import de imagens, o problema é se seu @Path for algo do tipo “/algo1/algo2/algo3”, talvez nesse caso não funcione utilizar “…/” antes do caminho. Mas entendi a idéia, vlw.

Lucas, obrigado mais uma vez. Tinha tido a mesma ideía, mas esperei a resposta para ver se chegava algo diferente :smiley: . Vlw.

#8

[quote=smillodont]Obrigado Ramon pela ajuda. Quanto ao que você falou do import de imagens, o problema é se seu @Path for algo do tipo “/algo1/algo2/algo3”, talvez nesse caso não funcione utilizar “…/” antes do caminho. Mas entendi a idéia, vlw.

Lucas, obrigado mais uma vez. Tinha tido a mesma ideía, mas esperei a resposta para ver se chegava algo diferente :smiley: . Vlw.[/quote]

Flw! Mas pra usar os “…/” a pasta imagens teria que estar dentro da pasta web.

bom… Mas se vc conseguiu tah bom d+

#9