Arquivo Discussoes de Programacao e Tecnologia 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!
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>
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:
} catch (Exception e) {
// TODO Tratar o erro, aqui soh estou exibindo uma mensagem para o usuario
AlgumUtil.getInstance().error(
"Ocorreu um erro na consulta por exemplo!");
}
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
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>
Fiz uns testes aqui e achei fantástico. A grande sacada é o “showWhenRendered…”!