Problema ao carregar CSS - JSF - Facelets

Front-end
#1

Olá pessoal.

Olhei o fórum e encontrei vários tópicos parecidos, porém nenhum resolveu o meu problema, por isso abro esse novo tópico.
Trabalhando com Facelets, criei uma página “Template” e o utilizei nas minhas páginas.

O Template possui CSS (carregado normalmente), mas as páginas que o consomem não tem o seu próprio CSS carregado.
Já tentei todas as dicas do fórum, pode ter sido desatenção minha… Segue um exemplo do que eu fiz.

Agradeço!!!

OBS: o arquivo existe, está no mesmo lugar que o CSS do template… No navegador, verifiquei que não há referência ao CSS da página que consome o template.

<<template.xhtml>>

<?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:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<title>Teste - <ui:insert name="titulo" /></title>
    <h:outputStylesheet library="css" name="principal.css" />
    <!-- tentei a gambiarra abaixo para utilizar isso nas páginas que consomem o modelo... -->
    <ui:insert name="infoHeader" />
</h:head>
<h:body>
    <div id="container">
        <div id="cabecalho">
            <ui:include src="cabecalho.xhtml" />
        </div>
        <div id="barraLateral">
            <ui:include src="barralateral.xhtml" />
        </div>
        <div id="conteudo">
            <ui:insert name="conteudo" />
        </div>
        <div id="rodape">
            <ui:include src="rodape.xhtml" />
        </div>
    </div>
</h:body>
</html>

<<index.xhtml>>

<?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:p="http://primefaces.prime.com.tr/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <!-- tentei aqui do lado de "fora" da composição -->
    <h:outputStylesheet library="css" value="index.css" />
    <ui:composition template="/templates/principal.xhtml">
        <!-- tentei "dentro" da composição -->
        <h:outputStylesheet library="css" value="index.css" />
        <ui:define name="infoHeader">
            <!-- tentei utilizar o insert/define -->
            <h:outputStylesheet library="css" value="index.css" />
        </ui:define>
        <ui:define name="titulo">
            Welcome to JSF!!!
        </ui:define>
        <ui:define name="conteudo">
            <!-- tem um monte de coisa aqui, tudo é carregado normalmente -->
            <div id="login">
                <h:form>
                    <p:fieldset legend="Área Restrita">
                        <h:outputLabel value="Usuário" for="login"/>&nbsp;
                        <h:inputText id="login" value="#{contextoBean.login}" required="true" />&nbsp;&nbsp;
                        <h:outputLabel value="Senha" for="senha" />&nbsp;
                        <h:inputSecret id="senha" value="#{contextoBean.senha}" required="true" />&nbsp;&nbsp;
                        <p:commandButton value="Login" action="#{contextoBean.fazerLogin}" ajax="false" />
                    </p:fieldset>
                </h:form>
            </div>
        </ui:define>
    </ui:composition>
</html>
[Resolvido] Problema ao carregar CSS em subpaginas com JSF+Primefaces
#2

Tive um problema parecido devido o template estar numa pasta e os consumidores deles em outras diferentes eu resolvi o meu problema fazendo da seguinte forma:

<style type="text/css"> @import url(#{facesContext.externalContext.request.contextPath}/css/principal.css) </style>

1 curtida
#3

Rapaz, tentei isso mas não funcionou.

Só para ratificar: o CSS do meu template é carregado normalmente. Em compensação não consigo inserir CSS nas páginas que usam o meu template (realmente, elas estão em outra pasta).

Toda ajuda é bem vinda. :smiley:

#4

Já tentou dessa forma ??

Aqui uso o arquivo de CSS que eu criei

<link rel="stylesheet" href="/AcademiaWeb/Style/style.css" type="text/css"/>

Aqui referencio o Skin do primefaces

<link href="#{facesContext.externalContext.requestContextPath}/resources/primefaces-bluesky/theme.css" rel="stylesheet" type="text/css" />

Abraços

#5

tive um problema bem parecido com o teu e resolvi com a ajuda de um camarada do javasf, veja no thread:

http://groups.google.com/group/javasf/browse_thread/thread/b0008add3dbfb568

boa sorte.
[]'s
t++

#6

Nenhuma dessas dicas resolveu.

Observei que mesmo utilizando <h:outputStyleSheet> ou , em qualquer parte da página que usa o template, a tag do CSS simplesmente não vai para lá quando é renderizada. O CSS do template está lá, normalmente. Mas o CSS da página específica não… :frowning:

Achei que fosse um problema de caminhos relativos também, mas não é… Simplesmente não tem tag para o CSS que eu desejo.

Existe alguma forma de dizer ao template que eu quero carregar CSS específicos dependendo da página? Ou seja, quando utilizar o template no cadastroCliente.xhtml vai carregar clientes.css, cadastroProduto.xhtml vai carregar produtos.css e assim em diante?

Abraços!

#7

se vc criar no teu template mestre.xhtml, no head:

<html xmlns="http://www.w3.org/1999/xhtml"
   ...>
   <head>
      <ui:insert name="head">
      </ui:insert>
   </head>
   <body>
   ...
   <ui:insert name="conteudo">
   </ui:insert>
   ...
   </body>
</html>

e no cadastroCliente.xhtml

vc usar:


<ui:composition xmlns="http://www.w3.org/1999/xhtml"
   ...>
   template="/templates/mestre.xhtml">

   <ui:define name="head">
         <a4j:loadStyle src="resource:///resources/css/clientes.css"/>
   </ui:define>

   <ui:define name="conteudo">
   ...
   </ui:define>
</ui:composition>

creio vai funcionar e resolver teu “problema”.

creio q para cada consumidor do teu mestre.xhtml vc pode usar isso sem problemas. vc só deve lembrar q parte do teu mestre deve ter um .css próprio caso vc tenha menus, cabeçalho, etc. com formatação diferenciada.

comigo isso funfou hj (parece q aprendi a usar este recurso 8) ) e tirei todas aquelas referências “confusas” o q melhorou visualmente o código!!! 8)

ah, lembre-se q /resource/css/clientes.css deve apontar pro teu .css à partir da raiz do projeto.

entendeu?!

qq coisa estamos aÊ… :smiley:

[]'s
t++

#8

Resolvido com essa dica!!!

Muito obrigado! :slight_smile:

[Como é que encerra esse tópico?!]

#9

q bom meu amigo, fico muito feliz em poder ajudar!!! :smiley:

acho q ñ tem um procedimento para fechar como em outros fóruns. eu geralmente coloca [RESOLVIDO] no assunto do meu primeiro post.

[]'s
t++

#10

brother… pra utilizar o

    &lt;h:outputStylesheet library="css" name="principal.css" /&gt;

o seu projeto deve estar com esse layout

/WebContent/[color=red]resources[/color]/css/principal.css

o Jsf só acha a pasta que vc vai indicar en “library”
apenas se a mesma estiver dentro da pasta “resources”…

:wink: é mais fácil doq fazer esse esquema com ajax…

eu sei q o tópico está fechado… mas estou postando só pra ajudar outras
pessoas que tiverem o mesmo problema… o/*

abraços… :smiley:

#11