<f:verbatim>

Front-end
#1

Eu estou usando JSF1.1 RI + Rich 3.1.4

porque eu tenho que usar essa tag: <f:verbatim> toda vez q quero colocar um html na minha pagina jsf??? existe algum jeito de eu colocar html na minha pagina sem precisar dessa tag <f:verbatim>???

#2

Bom, eu uso JSF 1.2 com Facelets e nunca precisei de <f:verbatim>, mesmo tendo toneladas de HTML nas páginas.

Não tenho nenhum exemplo real nem experiência de uso de JSF sem Facelets, mas o código na figura em anexo, que preparei recentemente para uma curso introdutório de JSF funcionou perfeitamente com JSF 1.2 sem Facelets e com elementos HTML como

e

. Por sinal, em todo o material preparado (que é bem básico) há vários exemplos simples e nenhum deles precisou de <f:verbatim>. Será que esta necessidade que você falou vale para JSF 1.2?

2008/4/16/8b2783e7d21e92cdcb4a9a55d088e2db_7361.png646×542 22.5 KB

#3

alguem tem um exemplo de facelets ai???

#4

Exemplo de Facelets

Aqui usamos um template para todos os sistemas e subtemplates para sistemas específicos. As tecnologias da camada de visão são XHTML/CSS/Facelets/JSF 1.2/JavaScript.

Template principal

[code]<?xml version='1.0' encoding='UTF-8' ?>

<head>
    <!-- <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1" /> -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
        <ui:insert name="title"/>
    </title>
    <link href="#{facesContext.externalContext.request.contextPath}/css/default.css" rel="stylesheet" type="text/css" />
    <ui:insert name="links" />
</head>

<body>
        
    <div id="todaPagina">
    
        <form jsfc="h:form">
            <a jsfc="h:commandLink" action="#{sistema.logout}" 
                title="Efetuar logout do sistema" immediate="true">
                <img id="botaoFechar" src="#{facesContext.externalContext.request.contextPath}/figuras/botao_fechar.png" />
            </a>
        </form>
        
        <div id="corpo">
            <div id="menu">
            	<form jsfc="h:form">
                	<ui:insert name="menu" />
                </form>
            </div>
            
            <div id="conteudo">
            
            	<form jsfc="h:form" id="formulario">
            	
                    <h1><ui:insert name="titulo" /></h1>
                    
                    <p>
                        <h:messages showSummary="true" showDetail="false"/>
                    </p>
                    
                    <ui:insert name="conteudo" />
                </form>
                
                <form jsfc="h:form" enctype="multipart/form-data">
                	<ui:insert name="upload" />
                </form>
            </div>
        </div>
        
        <div id="cabecalho" />
        
        <div id="rodape">
        	<p id="topoPagina">
                	<a href="#todaPagina">Ir ao Topo</a>
            </p>
            <ui:insert name="rodape">
                <address>
                    
                </address>
            </ui:insert>
        </div>
            
    </div>

</body>
[/code]

Template específico de sistema contendo menu, etc.

[code]<?xml version='1.0' encoding='UTF-8' ?>

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

    <ui:define name="title">
        Sistema de Controle Acad&#x00EA;mico - P&#x00F3;s-Gradua&#x00E7;&#x00E3;o
    </ui:define>
    
    <ui:define name="menu">
        <ul>
            
            <li><a href="#">Aluno</a>
                <ul>
                	<li>
                        <a jsfc="h:commandLink" immediate="true" action="#{aluno.consultar}">
                            Aluno
                        </a>
                    </li>
                
                    <li>
                        <a jsfc="h:commandLink" immediate="true" action="#{dadosAcademicos.consultar}">
                            Dados Acad&#x00EA;micos
                        </a>
                    </li>
                    
                    <li>
                        <a jsfc="h:commandLink" immediate="true" action="#{inscricao.consultar}">
                            Plano de Estudo
                        </a>
                    </li>
                    
                    <li><a href="#">Exig&#x00EA;ncias</a>
                        <ul>
	                        <li>
	                            <a jsfc="h:commandLink" immediate="true" action="#{linguaEstrangeira.consultar}">
	                                L&#x00ED;ngua Estrangeira
	                            </a>
	                        </li>
	                        <li>
	                            <a jsfc="h:commandLink" immediate="true" action="#{defesaProjeto.consultar}">
	                                Defesa de Projeto
	                            </a>
	                        </li>
	                        <li>
	                            <a jsfc="h:commandLink" immediate="true" action="#{qualificacao.consultar}">
	                                Qualifica&#x00E7;&#x00E3;o
	                            </a>
	                        </li>
	                        <li>
	                            <a jsfc="h:commandLink" immediate="true" action="#{teseDissertacao.consultar}">
	                                Tese/Disserta&#x00E7;&#x00E3;o
	                            </a>
	                        </li>
                        
                        </ul>
                    </li>
                 
                    <li>
                       <a jsfc="h:commandLink" immediate="true" action="#{aluno.consultarParaAproveitamento}">
                        	Aproveitamento de Cr&#x00E9;ditos
                        </a>
                    </li>
                    
                    <li>
                    	<a jsfc="h:commandLink" immediate="true" action="#{lancamentoNota.consultar}">
                    		Lan&#x00E7;amento de Notas
                    	</a>
                    </li>
                    
                    <li>
                    	<a jsfc="h:commandLink" immediate="true" action="#{prorrogacaoConclusao.consultar}">
                    		Prorroga&#x00E7;&#x00E3;o de prazo de conclus&#x00E3;o
                    	</a>
                    </li>
                    
                    <li>
                    	<a jsfc="h:commandLink" immediate="true" action="#{afastamentoTemporario.consultar}">
                    		Afastamentos Tempor&#x00E1;rios
                    	</a>
                    </li>
                    
                    <li>
                    	<a jsfc="h:commandLink" immediate="true" action="#{afastamentoDefinitivo.consultar}">
                    		Afastamentos Definitivos
                    	</a>
                    </li>
                     
                </ul>
            </li>  

            <li><a href="#">Cadastro</a>
                <ul>
                    
                    <li>
                        <a jsfc="h:commandLink" immediate="true" action="#{programa.consultar}">
                            Programa
                        </a>
                    </li> 
                    <li>
                        <a jsfc="h:commandLink" immediate="true" action="#{curso.consultar}">
                            Curso
                        </a>
                    </li>
                </ul>
            </li>
            
            <li><a href="#">Disciplina</a>
                <ul>
                    <li>
                        <a jsfc="h:commandLink" immediate="true" action="#{disciplina.consultar}">
                            Disciplina
                        </a>
                    </li>
                    <li>
                        <a jsfc="h:commandLink" immediate="true" action="#{turma.consultar}">
                            Turma
                        </a>
                    </li>
                </ul>
            </li>
            
            <li><a href="#">Relat&#x00F3;rio</a>
             	<ul>
                    <li>
                    	<a jsfc="h:commandLink" immediate="true" action="#{prazoRegimental.consultar}">
                    		Prazos Regimentais
                   		</a>
                    </li>
                    <li>
                    	<a jsfc="h:commandLink" immediate="true" action="#{reportNadaConsta.consultar}">
                    		Nada Consta
                    	</a>
                    </li>
                    <li>
                    	<a jsfc="h:commandLink" immediate="true" action="#{reportTempoCurso.consultar}">
                    		Tempo de Curso
                    	</a>
                    </li>
                </ul>
            </li>
            
            <li><a href="#">Manuten&#x00E7;&#x00E3;o</a>
                <ul>
                    <li>
                        <a jsfc="h:commandLink" immediate="true" action="#{periodoLetivo.consultar}">
                            Prazos Letivos
                        </a>
                    </li>
                </ul>
             </li>
             
             
             <li><a href="#">Usu&#x00E1;rios</a>
                <ul>
                    <li><a jsfc="h:commandLink" action="#{sistema.cadastrarUsuario}" immediate="true">Cadastrar</a></li>
                    <li><a jsfc="h:commandLink" action="#{sistema.alterarSenha}" immediate="true">Alterar Senha</a></li>
                </ul>
            </li>
        </ul>
    </ui:define>
    
</ui:composition>
[/code]

Página específica

[code]<?xml version='1.0' encoding='UTF-8' ?>

  <ui:composition template="/geral/template-posgrad.xhtml">
      
    <ui:define name="titulo">Cadastro do Aluno - Dados Pessoais</ui:define>

    <ui:define name="links">
        <script type="text/javascript" src="/posgrad/script/mascaras.js"></script>
        <link rel="stylesheet" type="text/css" href="/posgrad/css/irPara.css"/>
    </ui:define>

    <ui:define name="conteudo">

		<p>
            <h:outputText value="Aluno: "/>
            <h:outputText value="#{aluno.aluno.matricula}"/>
            <h:outputText value=" - "/>
            <h:outputText value="#{aluno.aluno.nome}"/>
        </p>

        <fieldset>
            <legend>Dados Gerais</legend>

            <p>
                <label jsfc="h:outputLabel" for="nome">Nome</label>
                <input jsfc="h:inputText" type="text" id="nome" maxlength="80" 
                    value="#{aluno.aluno.nome}" required="true" size="50"
                    requiredMessage="O nome &#x00E9; obrigat&#x00F3;rio"/>
            </p>

            <p>
                <label jsfc="h:outputLabel" for="pai">Pai</label>
                <input jsfc="h:inputText" type="text" id="pai" maxlength="80" 
                    size="50" value="#{aluno.aluno.pai}"/>
            </p>

            <p>
                <label jsfc="h:outputLabel" for="mae">M&#x00E3;e</label>
                <input jsfc="h:inputText" type="text" id="mae" maxlength="80" 
                    size="50" value="#{aluno.aluno.mae}"/>
            </p>

            <p>
                <label jsfc="h:outputLabel" for="sexo">Sexo</label>
                <select jsfc="h:selectOneMenu" id="sexo" value="#{aluno.aluno.sexo}">
                    <option jsfc="f:selectItems" value="#{pato.sexoItens}" />
                </select>
            </p>

            <p>
                <label jsfc="h:outputLabel" for="dataNasc">Data Nascimento</label>
                <h:inputText id="dataNasc" value="#{aluno.aluno.dataNascimento}"
                    converterMessage="A data de nascimento &#x00E9; inv&#x00E1;lida"
                    onkeypress="return mascaraData(this, event)" size="10" maxlength="10">
                    <f:convertDateTime pattern="dd/MM/yyyy" timeZone="Brazil/East" />
                </h:inputText>

            </p>

            <p>
                <label jsfc="h:outputLabel" for="estadoCivil">Estado Civil</label>
                <select jsfc="h:selectOneMenu" id="estadoCivil" value="#{aluno.aluno.estadoCivil}">
                    <option jsfc="f:selectItems" value="#{pato.estadosCivilItens}" />
                </select>
            </p>

            <p>
                <label jsfc="h:outputLabel" for="paisOrigem">Pa&#x00ED;s de Origem</label>
                <select jsfc="h:selectOneMenu" id="paisOrigem" onchange="submit()"
                    value="#{aluno.aluno.paisOrigem}" immediate="true">
                   <option jsfc="f:selectItems" value="#{pato.paisItens}" />
                </select>
            </p>

            <h:panelGroup rendered="#{!aluno.aluno.estrangeiro}">

                <p>
                    <label jsfc="h:outputLabel" for="naturalidade">Naturalidade</label>
                    <select jsfc="h:selectOneMenu" id="naturalidade" value="#{aluno.aluno.naturalidade}">
                        <option jsfc="f:selectItems" value="#{pato.estadosItem}" />
                    </select>
                </p>

            </h:panelGroup>

            <h:panelGroup rendered="#{aluno.aluno.estrangeiro}">

                <p>
                    <label jsfc="h:outputLabel" for="anoChegada">Ano Chegada</label>
                    <input jsfc="h:inputText" type="text" id="anoChegada" maxlength="4" size="4"
                        value="#{aluno.aluno.anoChegada}" />
                </p>

            </h:panelGroup>
        </fieldset>

        <fieldset>
            <legend>Nacionalidades</legend>

            <h:panelGroup rendered="#{!empty aluno.nacionalidadeDataModel}">
                <table>
                    <thead>
                        <tr>
                            <th>Nacionalidade</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr jsfc="ui:repeat" value="#{aluno.nacionalidadeDataModel}" var="nacionalidade">
                            <td>#{nacionalidade.gentilicoFeminino}</td>
                        </tr>
                    </tbody>
                </table>
            </h:panelGroup>

            <a jsfc="h:commandLink" value="Cadastro de Nacionalidade" action="#{aluno.irParaPaginaNacionalidade}" />
        </fieldset>

        <fieldset>
            <legend>Endere&#x00E7;os</legend>

            <h:panelGroup rendered="#{!empty aluno.enderecoDataModel}">
                <table>
                    <colgroup>
                        <col class="colunaTexto" />
                        <col class="colunaNumero" />
                        <col class="colunaNumero" />
                    </colgroup>

                    <thead>
                        <tr>
                            <th scope="col">Logradouro</th>
                            <th scope="col">N&#x00FA;mero</th>
                            <th scope="col">CEP</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr jsfc="ui:repeat" value="#{aluno.enderecoDataModel}" var="endereco">
                            <td>#{endereco.logradouro}</td>
                            <td>#{endereco.numero}</td>
                            <td>#{endereco.cep}</td>
                        </tr>
                    </tbody>
                </table>
            </h:panelGroup>

            <a jsfc="h:commandLink" value="Cadastro de Endere&#x00E7;o" action="#{aluno.irParaPaginaEndereco}" />
        </fieldset>

        <fieldset>
            <legend>Telefones</legend>

            <h:panelGroup rendered="#{!empty aluno.telefoneDataModel}">
            
                <table>

                    <colgroup>
                        <col class="colunaNumero" />
                        <col class="colunaNumero" />
                        <col class="colunaTexto" />
                    </colgroup>

                    <thead>
                        <tr>
                            <th scope="col">DDD</th>
                            <th scope="col">N&#x00FA;mero do Telefone</th>
                            <th scope="col">Tipo</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr jsfc="ui:repeat" value="#{aluno.telefoneDataModel}" var="telefone">
                            <td>#{telefone.ddd}</td>
                            <td>#{telefone.numero}</td>
                            <td>#{telefone.tipoTelefone.descricao}</td>
                        </tr>
                    </tbody>

                </table>
                
            </h:panelGroup>

            <a jsfc="h:commandLink" value="Cadastro de Telefone" action="#{aluno.irParaPaginaTelefone}" />
        </fieldset>

        <fieldset>
            <legend>E-mails</legend>

            <h:panelGroup rendered="#{!empty aluno.emailDataModel}">

                <table>
                    <thead>
                        <tr>
                            <th>Endere&#x00E7;o Eletr&#x00F4;nico</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr jsfc="ui:repeat" value="#{aluno.emailDataModel}" var="email">
                            <td><h:outputText value="#{email}" /></td>
                        </tr>
                    </tbody>
                </table>
                
            </h:panelGroup>

            <a jsfc="h:commandLink" value="Cadastro de E-mail" action="#{aluno.irParaPaginaEMail}" />
        </fieldset>

        <p>
            <input jsfc="h:commandButton" type="submit" value="Gravar Inclus&#x00E3;o/Altera&#x00E7;&#x00E3;o" 
                action="#{aluno.salvarDadosPessoais}" />
        </p>
        
        <p>
            <span id="irPara">Ir para:</span>
            <ul>
                <li><a jsfc="h:commandLink" action="paginaDocumentacao">Documenta&#x00E7;&#x00E3;o</a></li>
                <li><a jsfc="h:commandLink" action="paginaFormacaoAcademica">Forma&#x00E7;&#x00E3;o</a></li>
                <li><a jsfc="h:commandLink" action="paginaFoto">Foto</a></li>
            </ul>
        </p>

    </ui:define>
      
  </ui:composition>
[/code]

Espero que ajude.

[edit]
Não há qualquer referência nas páginas a formatação visual porque delegamos 100% disto para o CSS, segundo os padrões W3C.
[/edit]

#5