ejemplos - jsp include
Adición de recursos externos(CSS/JavaScript/imágenes, etc.) en JSP (2)
Agregué una hoja de estilo CSS externa a mi proyecto y la coloqué en la carpeta WEB-CONTENTS de mi proyecto en Eclipse. Cuando lo implementé en el Tomcat, la hoja de estilo no se aplicó. Cuando lo depuré en Chrome y lo abrí, me dio un error de 404 file not found . ¿Por qué es eso y cómo solucionarlo?
Aquí está el código:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>joined now </title>
<link href="globalCSS.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div>this is at the top</div>
<c:import url="header.jsp" />
<c:import url="navigationBar.jsp" />
<c:import url="leftpane.jsp" />
<c:import url="mainContent.jsp" />
<c:import url="rightpane.jsp" />
<c:import url="footer.jsp" />
</body>
</html>
La razón por la que obtiene el error 404 File Not Found , es que a su ruta a CSS dada como valor al atributo href le falta la ruta de contexto .
Una URL de solicitud HTTP contiene las siguientes partes:
http://[host]:[port][request-path]?[query-string]
La ruta de solicitud se compone además de los siguientes elementos:
Ruta de contexto : una concatenación de una barra diagonal (/) con la raíz de contexto de la aplicación web del servlet. Ejemplo:
http://host[:port]/context-root[/url-pattern]Ruta de Servlet : la sección de ruta que corresponde al alias de componente que activó esta solicitud. Este camino comienza con una barra diagonal (/).
Información de ruta : la parte de la ruta de solicitud que no forma parte de la ruta de contexto o la ruta de servlet.
Lea más here .
Soluciones
Hay varias soluciones para su problema, aquí están algunas de ellas:
1) Usando la etiqueta <c:url> de JSTL
En mis aplicaciones web de Java solía usar la etiqueta <c:url> de JSTL al definir la ruta a CSS / JavaScript / image y otros recursos estáticos. Al hacerlo, puede estar seguro de que se hace referencia a esos recursos siempre en relación con el contexto de la aplicación (ruta de contexto).
Si dices que tu CSS está ubicado dentro de la carpeta WebContent , esto debería funcionar:
<link type="text/css" rel="stylesheet" href="<c:url value="/globalCSS.css" />" />
La razón por la que funciona se explica en el capítulo 7.5 de la specification versión 1.2 de la " Biblioteca de etiquetas estándar de JavaServer Pages ™ ":
7.5 <c: url>
Construye una URL con las reglas de reescritura apropiadas aplicadas.
...
La URL debe ser una URL absoluta que comience con un esquema (por ejemplo, "http: // server / context / page.jsp") o una URL relativa como se define en JSP 1.2 en JSP.2.2.1 "Especificación de URL relativa". Como consecuencia, una implementación debe anteponer la ruta de contexto a una URL que comienza con una barra (por ejemplo, "/page2.jsp") para que el navegador del cliente pueda interpretar correctamente dichas URL.
NOTA
No olvide utilizar la directiva Taglib en su JSP para poder hacer referencia a las etiquetas JSTL . También vea un ejemplo de la página JSP here .
2) Uso de lenguaje de expresión JSP y objetos implícitos
Una solución alternativa es usar Expression Language (EL) para agregar contexto de aplicación:
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/globalCSS.css" />
Aquí hemos recuperado la ruta de contexto del objeto de solicitud . Y para acceder al objeto de solicitud hemos utilizado el objeto implícito pageContext .
3) Usando la etiqueta <c:set> de JSTL
RENUNCIA
La idea de esta solución fue tomada desde here .
Para que el acceso a la ruta de contexto sea más compacto que en la solución 2, primero puede usar la etiqueta JSTL <c:set> , que establece el valor de una variable EL o la propiedad de una variable EL en cualquiera de los ámbitos JSP ( página, solicitud, sesión o aplicación) para un acceso posterior.
<c:set var="root" value="${pageContext.request.contextPath}"/>
...
<link type="text/css" rel="stylesheet" href="${root}/globalCSS.css" />
NOTA IMPORTANTE
De forma predeterminada, para establecer la variable de tal manera, se debe acceder a la JSP que contiene esta etiqueta establecida al menos una vez (incluso en el caso de establecer el valor en el ámbito de la aplicación usando el atributo de alcance , como <c:set var="foo" value="bar" scope="application" /> ), antes de usar esta nueva variable. Por ejemplo, puede tener varios archivos JSP donde necesita esta variable. Por lo tanto, debe ajustar a) tanto la nueva variable que contiene la ruta del contexto en el ámbito de la aplicación Y acceder primero a esta JSP, antes de usar esta variable en otros archivos JSP, o b) establecer esta variable de la ruta del contexto que contiene en CADA archivo JSP, donde necesite para acceder a ella.
4) Utilizando ServletContextListener
La manera más efectiva de hacer que el acceso a la ruta del contexto sea más compacto es establecer una variable que mantenga la ruta del contexto y la almacene en el scope la aplicación utilizando un Listener . Esta solución es similar a la solución 3, pero el beneficio es que ahora la variable que contiene la ruta del contexto se establece justo al inicio de la aplicación web y está disponible en toda la aplicación, sin necesidad de pasos adicionales.
Necesitamos una clase que implemente la interfaz ServletContextListener . Aquí hay un ejemplo de tal clase:
package com.example.listener;
import javax.servlet.ServletContext;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
import javax.servlet.annotation.WebListener;
@WebListener
public class AppContextListener implements ServletContextListener {
@Override
public void contextInitialized(ServletContextEvent event) {
ServletContext sc = event.getServletContext();
sc.setAttribute("ctx", sc.getContextPath());
}
@Override
public void contextDestroyed(ServletContextEvent event) {}
}
Ahora en un JSP podemos acceder a esta variable global usando EL:
<link type="text/css" rel="stylesheet" href="${ctx}/globalCSS.css" />
NOTA
@WebListener anotación @WebListener está disponible desde la versión 3.0 de Servlet. Si utiliza un contenedor de servlets o un servidor de aplicaciones que admita especificaciones de Servlet anteriores, elimine la anotación @WebServlet y, en su lugar, configure el agente de escucha en el descriptor de implementación (web.xml). Este es un ejemplo del archivo web.xml para el contenedor que admite la versión 2.5 de Servlet máxima (otras configuraciones se omiten por razones de brevedad):
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
...
<listener>
<listener-class>com.example.listener.AppContextListener</listener-class>
</listener>
...
</webapp>
5) Utilizando scriptlets
Según lo suggested por el usuario @gavenkoa , también puede usar scriptlets como este:
<%= request.getContextPath() %>
Para una cosa tan pequeña, probablemente esté bien, solo tenga en cuenta que generalmente se desaconseja el uso de scriptlets en JSP .
Conclusión
Personalmente prefiero la primera solución (utilizada en mis proyectos anteriores la mayor parte del tiempo) o la segunda, ya que son más claras, intuitivas y sin ambigüedades (IMHO). Pero tú eliges lo que más te convenga.
Otros pensamientos
Puede implementar su aplicación web como la aplicación predeterminada (es decir, en el contexto raíz predeterminado ), por lo que se puede acceder sin especificar la ruta del contexto . Para más información lea la sección "Actualizar" here .
Uso del código siguiente Resuelve esta pregunta .... Si ejecuta un archivo con un servidor localhost, este problema se resuelve siguiendo el Código de página Jsp. Este código se coloca entre la etiqueta principal en el archivo jsp
<style type="text/css">
<%@include file="css/style.css" %>
</style>
<script type="text/javascript">
<%@include file="js/script.js" %>
</script>