0

Всем привет! Пишу веб приложения. Использую сервлет, jetty и freemarker для генерации html шаблона. При запуске программы, страница отображается корректно, но если добавить стиля css через отдельный файл, то он не применяется, а через инструменты разработчика (в браузере ), файл css`шный пустой(

Собственно вопрос, как правильно добавить css файл в шаблон? Если нужен будет код, скажите, напишу.

css добавляю так:

 <link rel="stylesheet" href="library/material/material.css"/>

Структура проекта:

`- CamService
  - src
  |  -main
  |  |  -java
  |  |     -main
  |  |       -App.java
  |  |       -PageGenerator.java
  |  |       -PageServlet.java
  |  -resources
  |    -webapp.WEB-INF
  |       -web.xml
  - templates
    -style.css
    -page.ftl

` App.java

package main;

import org.eclipse.jetty.server.Server;
import org.eclipse.jetty.servlet.ServletContextHandler;
import org.eclipse.jetty.servlet.ServletHolder;

public class App
{
    public static void main(String[] args) throws Exception {

    PageServlet pageServlet = new PageServlet();

    ServletContextHandler context = new ServletContextHandler(ServletContextHandler.SESSIONS);
    context.addServlet(new ServletHolder(pageServlet), "/");

    Server server = new Server(1603);
    server.setHandler(context);

    server.start();
    server.join();

    }
}

PageServlet.java

package main;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

public class PageServlet extends HttpServlet {

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{

    PageGenerator pageGenerator = new PageGenerator();

        response.getWriter().println(pageGenerator.getPage(createPageVariables(request)));

    response.setContentType("text/html;charset=utf-8");
    response.setStatus(HttpServletResponse.SC_OK);

}
private static Map<String, Object> createPageVariables (HttpServletRequest request) {
    Map<String, Object> pageVariables = new HashMap<String,Object>();
    pageVariables.put("name", "Alex");
    pageVariables.put("contextPath", request.getContextPath());
    return pageVariables;
    }
}

PageGenerator.java

package main;

import freemarker.template.*;

import java.io.File;
import java.io.IOException;
import java.io.StringWriter;
import java.io.Writer;

import java.util.HashMap;
import java.util.Map;

public class PageGenerator {


private Configuration cfg;

public PageGenerator() {
    cfg = new Configuration(Configuration.VERSION_2_3_24);
}

public String getPage (Map<String, Object> data) throws IOException {
    Writer stream = new StringWriter();

    cfg.setDirectoryForTemplateLoading(new File("templates"));
    try {
        Template template = cfg.getTemplate("page.ftl");
        template.process(data, stream);
    } catch (Exception e){
        e.printStackTrace();
    }
    return stream.toString();
    } 
}

page.ftl

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="style.css" />
    <title>Document</title>
</head>
<body>
<p>Hello ${name}</p>
<p>${contextPath}</p>
</body>
</html>

contextPath в принципе не передается - пусто. Изменил немного структуру, добавил просто файлик style.css с изменением цвета .body

6
  • Покажите как Вы добавляете css в шаблон
    – Sergey
    12 мая 2016 в 0:57
  • Отписал сверху как добавляю css
    – Vorobey.A
    12 мая 2016 в 4:29
  • Ваше приложение называется library? Открывается по такому адресу http://localhost:port/library?
    – Sergey
    12 мая 2016 в 4:32
  • Нет. Само приложение называется CamService. А директория Library находится в одной с папкой с файлом html. Структура добавил в сообщении.
    – Vorobey.A
    12 мая 2016 в 4:51
  • а где html? он получается из page.ftl? как в браузере открывается эта страница? http://localhost/camservice/templates/page.html? href="library/material/material.css" должно быть верно с точки зрения браузера, а не структуры папок исходного кода.
    – Sergey
    12 мая 2016 в 5:00

2 ответа 2

1

Что может видеть браузер?

root (localhost:8080/camservice)
  |- templates
  |     |- library
  |     |     `- material
  |     |           `-material.css
  |     `- page.ftl
  `- page.html

Где находится material.css относительно page.html? href="templates/library/material/material.css"

Лучше когда получается такая итоговая структура

root (localhost:8080/camservice)
  |- templates
  |     `- page.ftl
  |- library
  |     `- material
  |           `-material.css
  `- page.html

Получаем href="library/material/material.css"
Ещё лучше так

root (localhost:8080/camservice)
  |- WEB-INF - это папка браузеру не доступна никак. так прячем свои шаблоны от прямого доступа
  |     `- templates
  |            `- page.ftl
  |- library
  |     `- material
  |           `-material.css
  `- page.html

Для ссылки на статические ресурсы, чтобы не зависеть от пути html (например переместили page.html в pages/page.html, тогда придётся переписывать ссылки с libarary на ../library) используют contextPath: href = contexPath + "/library/material/material.css". Сам contextPath = request.getContextPath().
href="/camservice/library/material/material.css"

11
  • Я поправил Вашу структуру. Файл page.ftl и является html файлом. Ftl это расширение шаблонизатора freemarker, который и генерирует в дальнейшем page.html. Где находится css относительно page.ftl - показано, собственно, на структуре. Если даже положить файл рядом с page, то он все равно не видит его. То есть сам браузер видит этот файл, но не применяет стили.
    – Vorobey.A
    12 мая 2016 в 5:30
  • В браузере адрес page.html такой http://localhost:8080/camservice/page.html или такой http://localhost:8080/camservice/templates/page.html? В ответе предполагается первый вариант
    – Sergey
    12 мая 2016 в 5:37
  • Да нет. Адрес абсолютно не такой. Просто localhost:8080
    – Vorobey.A
    12 мая 2016 в 6:26
  • Ну если просто, то это почти ничего не меняет. Просто вычёркивается camservice. Всё остальное остаётся в силе
    – Sergey
    12 мая 2016 в 6:44
  • А у вас в структуре присутствует page.html он ведь мне не нужен. Его нет. Вместо него используется файл с расширением ftl. Сейчас буду пробовать через contextPath задавать.
    – Vorobey.A
    12 мая 2016 в 6:58
0

Подсказку нашел тут (много полезной информации, читаем не только главный ответ): https://stackoverflow.com/questions/14548998/adding-external-resources-css-javascript-images-etc-in-jsp

У себя (embedded Tomcat9 + DinamicWebProject + Maven) решил проблему в два шага:

  1. в pom.xml проекта webapp явно указал где web-ресурсы:

<build>
		<finalName>NameProject</finalName>
		<resources>
			<resource>
				<filtering>false</filtering>
				<directory>src/main/resources</directory>
			</resource>
			<resource>
				<filtering>false</filtering>
				<directory>Dir/To/Web/Resources</directory>
				<includes>
					<include>**/*</include>
				</includes>
				<excludes>
					<exclude>**/*.java</exclude>
				</excludes>
			</resource>
	   	</resources>
		<testResources>
			<testResource>
				<filtering>false</filtering>
				<directory>src/main/resources</directory>
			</testResource>
			<testResource>
				<filtering>false</filtering>
				<directory>Dir/To/Web/Resources</directory>
				<includes>
					<include>**/*</include>
				</includes>
				<excludes>
					<exclude>**/*.java</exclude>
				</excludes>
			</testResource>
		</testResources>
	</build>

  1. Из-за того, что я использовал структуру jsp in jsp, возникли сложности с адекватным применением контента в зависимых файлах. Таблетка - <%@include file="/jspfile.jsp" %>. Пример:

index.jsp:

<%@include file="/jsp/header.jsp" %>
            <form action="MainServlet" method="get" id="inputForm" role="form">
                <div class="class">
                ...
                </div>
            </form>
<%@include file="/jsp/footer.jsp" %>

header.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
    	<title>Title</title>
		<link rel="shortcut icon" href="/images/favicons.png" type="image/x-icon">
		
		<style type="text/css">
		    <%@include file="/css/bootstrap.min.css" %>
		</style>
		<script type="text/javascript">
		    <%@include file="/js/jquery-3.2.1.min.js" %>
		</script>
		<script type="text/javascript">
		    <%@include file="/js/bootstrap.min.js" %>
		</script>
		<script type="text/javascript">
		    <%@include file="/js/other.js" %>
		</script>
    </head>

    <body>
		<h2>VFS Systems</h2>

etc

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.