Jak dodać obrazy tła do aplikacji JSF przy użyciu interfejsów rich i CSS?

Question

Robię stronę internetową Korzystanie z JSF i richfaces, ale muszę zrobić kilka obrazów tła na etykietach menu rozwijanego. Widziałam, że możesz używać atrybutu stylu, wykonując Ale wydaje się, że nawet nie próbujesz umieścić obrazu w dowolnym miejscu.

mogę użyć obrazu za pomocą

<h:graphicImage/> 

nie wiem jak umieścić tekst na nim chociaż.

Co robię źle? Jak wstawić obraz tła za tekstem?

Answer 1

Zakładając element w pytaniu jest coraz class="rich-ddmenu-label" do niego stosować, problem jest prawdopodobnie ścieżka do tła obraz.

Ścieżka jest względna względem miejsca, w którym znajduje się CSS. Jeśli jest to w zewnętrznym pliku, powinien on być w stosunku do tego, na przykład:

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

CSS powinno być:

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

Jeśli CSS jest inline na stronie HTML, to będzie w stosunku do obecna ścieżka. Jeśli więc strona znajduje się pod adresem http://server/path/to/page, będzie szukała obrazu pod numerem http://server/path/to/page/images/the_image.gif, kiedy prawdopodobnie oznaczałeś http://server/images/the_image.gif.

Jeśli to nie odpowiada, opublikuj wygenerowany kod HTML.

Answer 2

Czy podążacie za przykładem na Richfaces demo site? to znaczy. używać aspekt i umieścić obraz i tekst wewnątrz elementu otaczającego (np. rozpiętość lub 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> 

Answer 3

Po prostu miałem ten sam problem z JSF 2.0. Musiałem użyć css i rozwiązanie z względną ścieżką też nie działało dla mnie (tak jak opublikował Choghere).

W mojej książce przeczytałem, że , gdy używasz Facetów jako VDL (View Declaration Language), można używać wyrażeń nawet na zwykłej stronie HTML. Więc wpadłem na pomysł, aby umieścić EL bezpośrednio w moich css. Uwaga: nie musiałem zmieniać nazwy pliku ani niczego.

Oto co zrobiłem. ale najpierw mój filestructure

• /resources/common/overlay.xhtml -> ten liście ostoi następujące css (ITS kompozyt komponentu)
• /resources/common/overlay.css
• /zasoby/obrazy/logo.PNG

Teraz tutaj jest CSS

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

w tym przypadku zasób jest niejawna przedmiot z JSF 2, zdjęć jest biblioteka gdzie JSF powinien wyglądać (JSF oczekuje wszystkie biblioteki/pliki w zasobach, przynajmniej domyślny ResourceHandler), a następnie nazwa zasobu.

Dla głębszych struktur byłoby

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

nadzieję, że pomoże;)

Answer 4

Moja struktura folderów jest następująca:

internetowych pages-> resources-> css // stron css

strony internetowe-> zasoby-> zdjęcia // obrazy

www strony // xhtml pliki

Spróbuj poniżej:

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

.. przenosi nas o jeden poziom wyżej folderu /fotki przenosi cię do katalogu pics /logo.gif daje plik

Mam nadzieję że to pomoże.

Answer 5

mam z tego rozwiązania: utworzyć nowy plik .css z tej zawartości

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

będzie załadować plik w taki sam sposób html zrobi. Dzięki temu będziesz mógł załadować plik tła na poziomie ciała (na całej stronie). Po obciążeniu możesz załadować plik css z tą instrukcją w pliku jsf:

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