Связывание изображений в CSS компонента JSF - PullRequest
Новая
       3

Связывание изображений в CSS компонента JSF

1 голос
/ 20 января 2012

Я реализовал компонент jsf 2.0, который должен отображать DatePicker в jQuery. Это работает просто отлично, но изображения, на которые есть ссылки в css, не найдены. * .Js и * .css найдены, но ссылки на изображения отсутствуют.

Вот код моего компонента 

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:c="http://java.sun.com/jsp/jstl/core"
        xmlns:cc="http://java.sun.com/jsf/composite">
<head>
    <title>jQuery - Datepicker</title>

</head>
<body>
<cc:interface>
    <cc:editableValueHolder name="input"/>
</cc:interface>

<cc:implementation>
    <h:outputStylesheet library="stats" name="jquery/css/jquery-ui-1.8.16.custom.css" />
    <h:outputScript library="stats" name="jquery/js/jquery-1.7.1.min.js" target="head"/>
    <h:outputScript library="stats" name="jquery/js/jquery-ui-1.8.17.custom.min.js" target="head"/>


    <script type="text/javascript">
    var jq = jQuery.noConflict();
    jq(document).ready(function() {
        jq("[id$=#{cc.clientId}]").datepicker({
            showOn : 'focus',
            duration : 10,
            changeMonth : true,
            changeYear : true,
            dayNamesMin : ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
            currentText : 'Heute',
            dateFormat : 'dd-mm-yy',
            yearRange : '-3:+3',
            showButtonPanel : true,
            closeText : 'Schliessen',
        });
    });
  </script>


     <h:panelGroup>
        <h:inputText id="#{cc.clientId}" value="#{cc.attrs.value}" style="width:80px;"/>
     </h:panelGroup>
</cc:implementation>
</body>
</html>

в css изображения являются ссылками вот так (jQuery css): 

.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
.ui-state-active .ui-icon {background-image: url('/stats-webapp/images/ui-icons_454545_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url('/stats-webapp/images/ui-icons_2e83ff_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_f6cf3b_256x240.png); }

Мой путь к файлу следующий

datepicker.xhtml -> src / main / webapp / resources / stats / datepicker.xhtml

файлы JavaScript -> src / main / webapp / resources / stats / jquery / js / jquery * .js

css файлы -> src / main / webapp / resources / stats / jquery / css / jquery * .css

images -> src / main / webapp / resources / stats / jquery / css / images / .

Даже если я ссылаюсь на эти изображения внутри пути css с абсолютными путями, мой браузер не может его найти (когда я запускаю инструменты разработчика chrome, я не могу найти файлы)

Спасибо за помощь

Ответы [ 2 ]

9 голосов
/ 21 января 2012

Вы предоставляете файл CSS в качестве ресурса JSF.Он будет обслуживаться из папки /javax.faces.resource в URL-адресе, а также будет отображаться сопоставление FacesServlet, например /faces/* или *.xhtml в URL-адресе.Это сделало бы относящиеся к пути URL-адреса фонового изображения CSS недействительными.Вам необходимо изменить URL-адреса фонового изображения CSS, чтобы они также служили ресурсами JSF.Канонический подход заключается в использовании средства отображения ресурсов в EL #{resource}: 

.some { 
    background-image: url(#{resource['stats:jquery/css/images/foo.png']});
}

. Альтернативой является использование OmniFaces UnmappedResourceHandler, чтобы выне нужно изменять CSS-файлы.

Еще одна альтернатива - захватить библиотеку компонентов пользовательского интерфейса JSF, в которой уже есть компонент на основе средства выбора даты на основе jQuery, например PrimeFaces <p:calendar>.

0 голосов
/ 20 января 2012

Мы не можем знать, как настроена структура папок вашего сервера, но попробуйте добавить начальную косую черту в пути к файлам "/ images и т. Д."

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...