Как добавить фоновые изображения в приложение JSF, используя richfaces и CSS? - PullRequest
Новая
       12

Как добавить фоновые изображения в приложение JSF, используя richfaces и CSS?

10 голосов
/ 18 июня 2009

Я делаю сайт, используя JSF и richfaces, но мне нужно сделать несколько фоновых изображений на ярлыках выпадающего меню Я видел, что вы можете использовать атрибут style, выполнив 

.rich-ddmenu-label {

    background-image: url("images/the_image.gif");

}

Но, похоже, это даже не попытка поместить изображение куда-либо.

Я могу использовать изображение, используя 

<h:graphicImage/>

Я не знаю, как поместить текст поверх него.

Что я делаю не так? Как вставить фоновое изображение позади текста?

Ответы [ 5 ]

66 голосов
/ 09 января 2010

У меня была такая же проблема с JSF 2.0 . Мне пришлось использовать CSS, и решение с относительным путем у меня тоже не сработало (как писал Чогер).

В моей книге я читал, что , когда вы используете Facelets в качестве VDL (язык декларации), можно использовать выражения даже на простой HTML-странице . Таким образом, у меня появилась идея поместить EL непосредственно в мой CSS. Примечание: мне не нужно было менять имя файла или что-то еще.

Вот что я сделал. но сначала моя файловая структура

  • / resources / common / overlay.xhtml -> этот включает в себя следующие CSS (это составной компонент)
  • / ресурсы / общие / overlay.css
  • / ресурсы / изображения / logo.png

Теперь вот CSS 

.someclass { 
    background-image:url("#{resource['images:logo.png']}"); 
}

в этом случае ресурс - это неявный объект из JSF 2, images - это библиотека , куда должен смотреть JSF (jsf ожидает все библиотеки / файлы в ресурсах, как минимум ResourceHandler по умолчанию), а затем имя ресурса.

Для более глубоких структур это будет 

#{resource['images/folder:logo.png']}

Надеюсь, это поможет;)

5 голосов
/ 18 июня 2009

Если предположить, что к рассматриваемому элементу применяется class="rich-ddmenu-label", проблема, вероятно, связана с путем к фоновому изображению.

Путь относительно того, где находится CSS. Если это во внешнем файле, это должно быть относительно этого, например ::10000 

/css/styles.css
/images/the_image.gif

CSS должен быть: 

background-image: url("../images/the_image.gif");

Если CSS-код встроен в HTML-страницу, он будет относительно текущего пути. Поэтому, если страница расположена на http://server/path/to/page, она будет искать изображение на http://server/path/to/page/images/the_image.gif, когда вы, вероятно, имели в виду http://server/images/the_image.gif.

Если это не отвечает, пожалуйста, опубликуйте сгенерированный HTML.

2 голосов
/ 28 апреля 2010

Моя структура папок выглядит следующим образом:

веб-страницы-> ресурсы-> css // css pages

веб-страницы-> ресурсы-> фото // изображения

веб-страницы // файлы xhtml

Попробуйте следующее: 

background-image :url("../pics/logo.gif");

.. перемещает вас на один уровень вверх по папке / PICS перемещает вас в каталог фото /logo.gif выдает файл

Надеюсь, это поможет.

2 голосов
/ 18 июня 2009

Следуете ли вы примеру на демонстрационном сайте Richfaces ? то есть. используйте фасет и поместите изображение и текст внутри включающего элемента (например, span или div) 

<rich:dropDownMenu>
    <f:facet name="label"> 
        <h:panelGroup>
            <h:graphicImage value="/images/icons/copy.gif" styleClass="pic"/>
            <h:outputText value="File"/>
        </h:panelGroup>
    </f:facet>
    <rich:menuItem submitMode="ajax" value="New"
        action="#{ddmenu.doNew}" icon="/images/icons/create_doc.gif">
    </rich:menuItem>
    ...
</rich:dropDownMenu>
1 голос
/ 25 января 2011

Я получил это решение: создайте новый файл .css с этим содержимым 

body {
background-image: url(../resources/images/Fondo.GIF);
}

это загрузит файл так же, как это сделал бы html. При этом вы сможете загрузить фоновый файл на уровне тела (на всей странице). После вардов вы можете загрузить файл css с помощью этой инструкции в файле jsf: 

<h:head>
    <h:outputStylesheet name="ps-pagolinea.css" library="css" />
    <h:outputScript name="corrigePoliza.js" library="scripts"/>
</h:head>
...