JSF - Validador e mensagens

Virtual Machine Man Membro desde: 05/09/2002 10:13:28 Mensagens: 635 Offline

Colegas,

Preciso de uma sugestão para exibir as mensagens retornadas dos validadores em uma tela onde não há espaço na frente dos campos para essas mensagens.
(Vide arquivo anexo).
Todos os tutoriais que vi até agora exibem as mensagens na frente do input.
Você já enfrentou uma situação assim? Como vc resolveu?

Muito obrigado,

Marques

Geralemente coloco as mensagens embaixo do campo com um tamaho bem menos ai quando elas aparecem elas deslocam o formulatio .... conforme a necessidade ...

vc tbm pode coloca um icone de esclamação ou algo do genero mas acredito que a mensagem embaixo seja melhor opção .

espero ter ajudado.

eu coloco um asterisco com a mensagem de erro ao lado do campo mas como a disposicao dos campos nesse caso ficaria bem bagunçado
entao aconselho oq o amigo sugeriu acima!

This message was edited 1 time. Last update was at 19/06/2009 13:46:52

Cara, minha sugestao é o uso do richfaces. baixe o framework e use o rich:modalPanel. Segue um exemplo de como eu o utilizei. Na ora do erro aparece uma caixa de texto no meio da tela, como se fosse o programa desktop.

<rich:modalPanel id="msgsErros" autosized="true" showWhenRendered="#{facesContext.maximumSeverity !=null}">
     <f:facet name="header">
            <h:outputText value="Mensagem" />
     </f:facet>
     <f:facet name="controls">
           <h:panelGroup>
               <h:graphicImage url="/imagens/icones/close.png" style="cursor: pointer; margin-top: 5px;" id="mensagens" width="20"/>
                <rich:componentControl for="msgsErros" attachTo="mensagens" operation="hide" event="onclick" />
           </h:panelGroup>
     </f:facet>
     <table class="blank" style="font-size: 10pt; white-space: nowrap">
           <nobr>
           <rich:messages>
               <f:facet name="errorMarker">
                     <h:graphicImage url="/imagens/icones/excluir.png" width="20" height="20"/>
               </f:facet>
               <f:facet name="warnMarker">
                     <h:graphicImage url="/imagens/icones/atencao.png" width="20" height="20"/>
               </f:facet>
               <f:facet name="infoMarker">
                     <h:graphicImage url="/imagens/icones/apply.png" width="20" height="20"/>
               </f:facet>
           </rich:messages>
           </nobr>
      </table>
</rich:modalPanel>

This message was edited 4 times. Last update was at 19/06/2009 14:30:39

Cara se voce estiver usando o richFaces voce pode usar a tag
<rich:messages> se voce estiver usando jsf sem componentes ricos utilize a tag <h:messages>

voce pode colocar essas mensagens no topo do seu formulario. soh um detalhe, qualquer excecao que der nos metodos do seu bean que voce quiser retornar uma mensagem de erro para o usuario, voce vai ter que adicionar no seu facesmessage

eu aconselho voce fazer algum util para adicionar essas mensagens jah que voce vai usar esse codigo em varios lugares da sua aplicacao. um exemplo de como voce faria para adicionar uma mensagem com severidade erro:

// voce pode alterar esses metodos por exemplo para receber um detalhe, se por acaso voce quiser exibi-los na sua pagina

/**
     * <p>
     * Enfileira uma <code>FacesMessage</code> global (nao associada a nenhum
     * componente em particular) contendo o texto sumario especificado e o
     * nivel de severidade <code>FacesMessage.SEVERITY_ERROR</code>.
     *
     * @param summary Texto sumario para esta mensagem.
     */
    public final void error(final String summary) {
        getFacesContext().addMessage(null,
                new FacesMessage(FacesMessage.SEVERITY_ERROR, summary, null));
    }

/**
     * <p>
     * Enfileira uma <code>FacesMessage</code> global associada a um
     * componente especifico, contendo o texto sumario especificado e o
     * nivel de severidade <code>FacesMessage.SEVERITY_ERROR</code>.
     *
     * @param component Componente ao qual a mensagem esta associada.
     * @param summary Texto sumario da mensagem.
     */
    public final void error(final UIComponent component,
    		final String summary) {
        getFacesContext().addMessage(component.getClientId(getFacesContext()),
                new FacesMessage(FacesMessage.SEVERITY_ERROR, summary, null));

getRequestMap().put("focus", component.getClientId(getFacesContext()));
    }

/**
     * <p>
     * Enfileira uma <code>FacesMessage</code> global associada a um
     * componente especifico, contendo o texto sumario especificado e o
     * nivel de severidade <code>FacesMessage.SEVERITY_ERROR</code>.
     *
     * @param idComponente ID do componente ao qual a mensagem esta associada.
     * @param summary Texto sumario da mensagem.
     */
    public final void error(final String idComponente, final String summary) {
        getFacesContext().addMessage(idComponente,
                new FacesMessage(FacesMessage.SEVERITY_ERROR, summary, null));

getRequestMap().put("focus", idComponente);
    }

ae no bean, voce teria um codigo +- assim:

This message was edited 2 times. Last update was at 19/06/2009 14:27:06

faltou soh a pagina, vai ficar alguma coisa parecida com isso:

<h:form id="formulario">
			<rich:messages layout="list" tooltip="true" showDetail="false"
				showSummary="true" passedLabel="Nenhum erro"
				errorLabelClass="errorLabel" fatalLabelClass="warnLabel"
				infoLabelClass="infoLabel" warnLabelClass="fatalLabel"
				warnMarkerClass="markerWarn" infoMarkerClass="markerInfo"
				errorMarkerClass="markerError" fatalMarkerClass="markerFatal"
				errorClass="errorClass" fatalClass="errorClass"
				warnClass="warnClass" infoClass="infoClass" labelClass="labelClass"
				styleClass="class">
				<f:facet name="errorMarker">
					<h:graphicImage url="algumaimagem1.gif" />
				</f:facet>
				<f:facet name="fatalMarker">
					<h:graphicImage url="algumaimagem2.gif" />
				</f:facet>
				<f:facet name="infoMarker">
					<h:graphicImage url="algumaimagem3.gif" />
				</f:facet>
				<f:facet name="warnMarker">
					<h:graphicImage url="algumaimagem4.gif" />
				</f:facet>
				<f:facet name="passedMarker">
					<h:graphicImage url="algumaimagem5.gif" />
				</f:facet>
			</rich:messages>

se voce quiser voce pode ainda colocar do lado de cada input soh com uma imagem para dizer se o campo passou validacao ou nao, mas ae voce ia ter que ter um atributo no bean para dizer se esse marcado eh renderizado ou nao, tipo voce mudaria esse valor depois do submit do formulario, lembrando sempre de limpar ele antes de abrir a pagina de novo ... alguma coisa assim:

<h:outputText styleClass="class"
                                  value="Input: " />
                    <rich:inplaceInput defaultLabel="Clique aqui e digite"
                                       id="inputId"
                                       required="true"
                                       requiredMessage=" Digite um input"
                                       converterMessage=" Campo 'input' inválido."
                                       value="#{Bean.input}">
                    </rich:inplaceInput>
                    <rich:message for="inputId" errorLabelClass="msgErro"
 rendered="#{Bean.isFormSubmited}"
                                  labelClass="msgSucesso" passedLabel=" OK!">
                        <f:facet name="passedMarker">
                            <h:graphicImage value="/imagens/tick.png" />
                        </f:facet>
                        <f:facet name="errorMarker">
                            <h:graphicImage value="/imagens/cross.png" />
                        </f:facet>
                    </rich:message>

eh .. acho que alguma coisa mais ou menos assim, ae voce ia ficar com um grid em cima do seu formulario com as mensagens de erro detalhadas e uma imagem (pequena) do lado de cada input que soh vai aparecer depois que o formulario submeteu dizendo se teve algum problema com o campo ou nao

** EDIT **
se voce nao estiver usando richfaces nao tem problema eh soh trocar as tags ae que tao usando ele e fazer as devidas alteracoes

thimor wrote:Cara, minha sugestao é o uso do richfaces. baixe o framework e use o rich:modalPanel. Segue um exemplo de como eu o utilizei. Na ora do erro aparece uma caixa de texto no meio da tela, como se fosse o programa desktop.

<rich:modalPanel id="msgsErros" autosized="true" showWhenRendered="#{facesContext.maximumSeverity !=null}"> <f:facet name="header"> <h:outputText value="Mensagem" /> </f:facet> <f:facet name="controls"> <h:panelGroup> <h:graphicImage url="/imagens/icones/close.png" style="cursor: pointer; margin-top: 5px;" id="mensagens" width="20"/> <rich:componentControl for="msgsErros" attachTo="mensagens" operation="hide" event="onclick" /> </h:panelGroup> </f:facet> <table class="blank" style="font-size: 10pt; white-space: nowrap"> <nobr> <rich:messages> <f:facet name="errorMarker"> <h:graphicImage url="/imagens/icones/excluir.png" width="20" height="20"/> </f:facet> <f:facet name="warnMarker"> <h:graphicImage url="/imagens/icones/atencao.png" width="20" height="20"/> </f:facet> <f:facet name="infoMarker"> <h:graphicImage url="/imagens/icones/apply.png" width="20" height="20"/> </f:facet> </rich:messages> </nobr> </table> </rich:modalPanel>

Gostei demais da sua solução. Muito legal!

Fiz uns testes aqui e achei fantástico. A grande sacada é o "showWhenRendered..."!

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