Erros no JSF com Templates, commandlink e CSS [Resolvido]

4 respostas
M

Olha eu aqui de novo…:slight_smile:
Somente venho perguntar depois de ficar muito tempo batendo no assunto.

Estou seguindo o curso Criando uma Aplicação Completa com JavaServer Faces, e fazendo alguma modificações.

Então vamos lá:
Tenho a estrutura assim:

- Paginas Web
  - WEB-INF
  - template
    - geral.css
    - menu.xhtml
    - template.xhml
  - tipodoc
    - addtipodoc.xhtml
    - edittipodoc.xhtml
    - listtipodoc.xhtml
  index.xhtml

Código do menu.xhtml:

<?xml version='1.0' encoding='UTF-8' ?>
<!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:f="http://java.sun.com/jsf/core">

    <h:head>
    </h:head>
    <h:body>
        <h:form>
            <h:commandLink value="Tipos de Documentos" action="listTipoDoc"></h:commandLink>
        </h:form>
    </h:body>
</html>

Código do template.xhtml:

<?xml version="1.0" encoding="UTF-8" ?>

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:head>
        <link rel="StyleSheet" type="text/css" href="template/geral.css" media="screen" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            <ui:insert name="pageTitle">
                <h:outputText value="Funciona?"></h:outputText>
            </ui:insert>
        </title>
    </h:head>

    <h:body>
        <div id="container">
            <div id="header">
                SGD - Sistema de Gestão de Documentos
            </div>
            <div id="leftBar">
                <ui:include src="menu.xhtml" />
            </div>
            <div id="content">
                Conteúdo principal
                <ui:insert name="content"></ui:insert>     
            </div>
            <!--
            <div id="rightBar">
                Tipo Documentos<br/>
                Documentos<br/>
            </div>
            -->
            <div id="footer">
                Rodapé
            </div>
        </div>
    </h:body>
</html>

Menu problema é:

Abro a página, ela fica legal e mostra o único link. Clico nele, ele vai para listtipodoc.xhtml. Porém, como eu uso template, se na tela listtipodoc.xhtml eu clicar no link Tipos de Documentos o sistema buga.

Outro problema que tá foda, é o fato da página addtipodoc.xhtml não está pegando o CSS.

O código do listTipoDoc é:

<!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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="/template/template.xhtml">

        <ui:define name="pageTitle">
            <h:outputText value="Templante funcionando"></h:outputText>
        </ui:define>

        <ui:define name="content">
            <h:form>
                <h:dataTable var="item" value="#{tiposDocumentosFaces.tipoDoc}">
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="ID"/>
                        </f:facet>
                        <h:outputText value="#{item.tipoID}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="Descrição"/>
                        </f:facet>
                        <h:outputText value="#{item.descricao}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="Ações"/>
                        </f:facet>
                        <h:commandLink value="delete" action="#{tiposDocumentosFaces.removeTipoDoc}">
                            <f:setPropertyActionListener target="#{tiposDocumentosFaces.selectedTipoDoc}" value="#{item}"/>
                        </h:commandLink>
                    </h:column>
                </h:dataTable>
                <h:commandButton value="Adicionar novo tipo documento" action="#{tiposDocumentosFaces.startAddTipoDoc}"/>
            </h:form>
        </ui:define>
    </ui:composition>
</html>

O código da addtipodoc é:

<!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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">

    <ui:composition template="/template/template.xhtml">

        <ui:define name="pageTitle">
            <h:outputText value="Templante funcionando"></h:outputText>
        </ui:define>

        <ui:define name="content">
            <h:form>
                <h1>Adicionando novo tipo de documento</h1>
                Código:<h:inputText value="#{tiposDocumentosFaces.selectedTipoDoc.tipoID}"/>
                Descrição:<h:inputText value="#{tiposDocumentosFaces.selectedTipoDoc.descricao}"/>
                <br/>
                <h:commandButton value="Salvar" action="#{tiposDocumentosFaces.finishAddTipoDoc}"/>
            </h:form>
        </ui:define>
    </ui:composition>
</html>

O war completo está aqui: http://www.mtsys.com.br/sgdapp.war
A aplicação funcionando está aqui: http://www.sgdonline.com.br/sgdapp/

Valeu pela ajuda e paciência galera.

4 Respostas

dev.rafael

O problema é q o seu p/ o css está assim “template/geral.css” quando na verdade ele devia estar assim “/MyApp/template/geral.css”. O browser busca o css com base na
url da página atual assim o sem “template/styles.css” indica um caminho relativo ao do diretório em q a página se encontra. Logo, se a página está em tipodoc o browser vai buscar em
“tipodoc/template/geral.css”. O chato é ter q colocar o nome da app em todas as urls.

Na verdade, com JSF 2, a melhor solução será usar a tag <h:outputStylesheet value="" />. Nesse caso coloque os seus estilos em um diretório “resources” tipo:

- Paginas Web
  - WEB-INF
  - template
    - menu.xhtml
    - template.xhtml
  - tipodoc
    - addtipodoc.xhtml
    - edittipodoc.xhtml
    - listtipodoc.xhtml
  - resources
    - geral.css

Então vc pode referenciar assim:

<h:outputStylesheet value="geral.css" />
M

Valeu pela resposta…
Pesquisando na internet, a implementação do JSF 2.0, você monta as pastas assim:

- resources
  - css
    - geral.css
  - js
  - components

Ai para chamar o css você faz:

<h:outputStylesheet library="css" name="geral.css"/>

ou como você falou…

[]s

Marlon

dev.rafael

As tags:

<h:outputStylesheet name="" />
<h:outputScript name="" />
<h:outputImage name="" />

Em JSF2 não precisam identificar o diretório “resources” pois é ali que elas procuram os valores por default. Porém se vc tiver algum “sub-estrutura” de diretórios
dentro de “resources” então você precisará identificar os sub-diretórios. Ou seja, se sua estrutura for:

- WebContent
  - resources
    - css
      - styles.css

Então no seu código:

<h:outputStylesheet name="css/styles.css" />

Agora se a estrutura de diretórios for:

- WebContent
  - resources
    - styles.css

o seu código deve estar:

<h:outputStylesheet name="styles.css" />

Pegou?:wink:

danilocmiranda

@dev.rafael

Eu tenho uma chamada de estilo CSS assim:

Acontece que se eu tentar colocar o outputStylesheet a página não carrega o estilo…
Acredito que tenha alguma coisa relacionado com este media=“screen”, o que pode estar acontedendo?

Valeu!

Criado 11 de setembro de 2010
Ultima resposta 11 de jun. de 2011
Respostas 4
Participantes 3