<f:verbatim>

JavaEvangelist Membro desde: 22/12/2006 17:31:53 Mensagens: 477 Offline

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>????

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 <h3> e <p>. 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?

JavaEvangelist Membro desde: 22/12/2006 17:31:53 Mensagens: 477 Offline

alguem tem um exemplo de facelets ai???

This message was edited 1 time. Last update was at 17/04/2008 09:52:57

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

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
          
    <head>
        
        <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>
    
</html>

Template específico de sistema contendo menu, etc.

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<ui:composition template="/template.xhtml">
    
        <ui:define name="title">
            Sistema de Controle Acadêmico - Pós-Graduaçã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êmicos
                            </a>
                        </li>
                        
                        <li>
                            <a jsfc="h:commandLink" immediate="true" action="#{inscricao.consultar}">
                                Plano de Estudo
                            </a>
                        </li>
                        
                        <li><a href="#">Exigências</a>
	                        <ul>
		                        <li>
		                            <a jsfc="h:commandLink" immediate="true" action="#{linguaEstrangeira.consultar}">
		                                Lí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ção
		                            </a>
		                        </li>
		                        <li>
		                            <a jsfc="h:commandLink" immediate="true" action="#{teseDissertacao.consultar}">
		                                Tese/Dissertação
		                            </a>
		                        </li>
	                        
	                        </ul>
                        </li>
                     
                        <li>
	                       <a jsfc="h:commandLink" immediate="true" action="#{aluno.consultarParaAproveitamento}">
                            	Aproveitamento de Créditos
                            </a>
                        </li>
                        
                        <li>
                        	<a jsfc="h:commandLink" immediate="true" action="#{lancamentoNota.consultar}">
                        		Lançamento de Notas
                        	</a>
                        </li>
                        
                        <li>
                        	<a jsfc="h:commandLink" immediate="true" action="#{prorrogacaoConclusao.consultar}">
                        		Prorrogação de prazo de conclusão
                        	</a>
                        </li>
                        
                        <li>
                        	<a jsfc="h:commandLink" immediate="true" action="#{afastamentoTemporario.consultar}">
                        		Afastamentos Temporá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ó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ção</a>
                    <ul>
                        <li>
                            <a jsfc="h:commandLink" immediate="true" action="#{periodoLetivo.consultar}">
                                Prazos Letivos
                            </a>
                        </li>
                    </ul>
                 </li>
                 
                 
                 <li><a href="#">Usuá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>
    
</html>

Página específica

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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="/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">

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

<p>
                    <label jsfc="h:outputLabel" for="dataNasc">Data Nascimento</label>
                    <h:inputText id="dataNasc" value="#{aluno.aluno.dataNascimento}"
                        converterMessage="A data de nascimento é invá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í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>

<fieldset>
                <legend>Endereç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ú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>

<fieldset>
                <legend>Telefones</legend>

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

<thead>
                            <tr>
                                <th scope="col">DDD</th>
                                <th scope="col">Nú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>

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

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

<table>
                        <thead>
                            <tr>
                                <th>Endereço Eletrônico</th>
                            </tr>
                        </thead>

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

</ui:define>
          
      </ui:composition>
    
</html>

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]

Notícias, artigos e o maior fórum brasileiro sobre Java