Exibindo mensagens no Rails

08/12/06

Sempre tive o costume de diferenciar as mensagens que exibo ao usuário em 4 tipos: info, notice, warning e error. Dessa forma, consigo exibir cada mensagem com formato visual diferente.

Exibindo mensagens para o usuário

No Rails é muito simples fazer isso. Basta colocar o método abaixo no arquivo "application_helper.rb".

module ApplicationHelper
  def flash_message
    messages = ""
    [:notice, :info, :warning, :error].each {|type|
      if flash[type]
        messages += "<p class=\"#{type}\">#{flash[type]}</p>"
      end
    }
    
    messages
  end
end

No seu controller, você define as mensagens utilizando o flash.

flash[:notice] = "Informações salvas com sucesso."
flash[:warning] = "Preencha todos os campos obrigatórios."
flash[:error] = "Não foi possível salvar as informações."
flash[:info] = "Você tem mensagens não visualizadas."

Na sua view basta você chamar o método da seguinte maneira:

<%= flash_message %>

Uma outra vantagem de utilizar este método é que caso nenhuma mensagem tenha sido definida, ele não exibe um elemento vazio na página.

Comentários #


#1 Yuri Malheiros disse:
08 Dez 06, 10:48PM

Bem bacana essa daqui…

Nesse caso ainda é necessário definir as classes que serão usadas pela tag , por exemplo, uma classe para notice, outra para warning e assim sucessivamente?

#2 Walter Cruz disse:
09 Dez 06, 09:20AM

Muito bacana isso! Valeu pela dica.

#3 Nando Vieira disse:
09 Dez 06, 03:38PM

Yuri, você que precisa formatar a mensagem. Este método apenas cria o HTML.

#4 roberto disse:
09 Dez 06, 07:03PM

Muito bom, parabens, o mais interessante é ver nós brazucas metendo bronca no rails… e com certeza nossa fama de ótimos criadores está no mundo todo….

#5 Davis disse:
11 Dez 06, 10:07AM

Eu tinha feito um lance parecido.
Mas não era um código tão limpo! Boa Nando!

Abraço!

#6 ArthurGeek disse:
15 Dez 06, 08:03PM

Compartilha com a gente o seu css tb. :)

Ah, qual sistema de blog vc tá usando aqui? É algum em Rails? Tô tentando me virarcom o Mephisto… muito bom!

#7 Nando Vieira disse:
16 Dez 06, 02:00AM

Fala Arthur! Não é nada de mais! É algo assim:

.notice, .error, .warning, .info {
font-weight: bold;
margin: -10px 0 15px 0;
padding: 5px 5px 5px 27px;
}

.notice {
border: 1px solid #9c9;
background: #e2f9e3 url(../images/tick.png) no-repeat 5px center;
color: #060;
}

.error {
border: 1px solid #c68484;
background: #fcc url(../images/cross.png) no-repeat 5px center;
color: #c00;
}

.warning {
border: 1px solid #dd0;
background: #ffc url(../images/error.png) no-repeat 5px center;
color: #000;
}

.info {
border: 1px solid #82c2d4;
background: #ebf5f8 url(../images/information.png) no-repeat 5px center;
color: #000;
}

As imagens são do http://famfamfam.com

#8 Arthur Furlan disse:
25 Jan 07, 02:33PM

A dica é legal, mas o que eu mais gostei do post foi o layout das mensagens! Já incorporei aos meus sistemas (com algumas modificações). :)

#9 Alexandre Piccolo disse:
20 Mar 07, 04:30PM

Parabéns, NANDOVIEIRA: ótima dica.
Uma simples idéia simples - eficiente e elegante.
Novamente, parabéns.

#10 Alexandre Piccolo disse:
20 Mar 07, 06:22PM

Ah, só complementando (uma vez que usei no meu projeto as idéias que o NANDOVIEIRA publicou aqui):

Para manter o texto das mensagens sempre em HTML, pode-se alterar a linha:

messages += "#{flash[type]}"

por:

messages += "" + html_escape(flash[type]) +""

e, assim, as mensagens saem todas em plain-HMLT (e isso ajuda bastante em idiomas como o nosso, com acentos e demais caracteres especiais.

É isso. A idéia continua simples e bacana.

#11 André disse:
23 Mar 07, 10:42AM

Fala Nando, essa personalização das mensagens é uma ótima idéia. No caso do spesa você dispara um effect para mostrar as mensagens. Essa chamada aos effects é feita a partir de onde?

Estou querendo usar as mesmas cores e icones no meu projeto, tem problema?

#12 Nando Vieira disse:
23 Mar 07, 02:17PM

Olá André. O efeito é chamado no arquivo Javascript. Existe uma função genérica que faz isso automaticamente. Você pode usar o ícones sim. Abraço!

#13 Carlos Aquino disse:
31 Maio 07, 06:00PM

aqui ta dando o erro

Status: 500 Internal Server Error Content-Type: text/html
We're sorry, but something went wrong.

We've been notified about this issue and we'll take a look at it shortly.

#14 Nando Vieira disse:
01 Jun 07, 09:53AM

Dá uma olhada no log que lá irá dizer o que está dando de errado. Se quiser, posta no pastebin.com (lembre-se de marcar a opção "forever") e colocar um link que tento ajudar! ;)

#15 Weldys Santos disse:
11 Set 07, 05:02PM

Nando, realmente está dando um erro 500 como ocarlos falou acima,

dá uma olhada no erro!
http://pastebin.com/f3471029e

#16 Nando Vieira disse:
11 Set 07, 05:14PM

Weldys, o WP estava convertendo dois apóstrofos para uma aspa! Estúpido. O código foi corrigido!

#17 Weldys Santos disse:
11 Set 07, 05:19PM

rsrs.. eu tinha acabado de decifrar o problema… eu tinha mudado pq tinha achado estranho só a abertura das aspas, mas tudo bem. tah tudo certo! Agora o código tá redondim!

Valeu e parabéns pela dica :)

#18 Arthur Martins disse:
19 Mar 08, 04:14PM

Nando,
Parabéns, muito útil e simples.
Já estou usando em minha aplicação.

#19 Eduardo M. disse:
26 Set 08, 02:54PM

Eu estava tentando fazer a exibição deste flash_message responder a uma chamada RJS. Tenho uma função que posta comentários e ela adiciona os posts por ajax, ou seja, a página não é renderizada novamente e portanto o flash_message não é acionado, ficando sem mensagem.

Neste método que posta comentários eu tenho:

render :update do |page|
…
# No caso de ser uma mensagem no formato notice eu faço o seguinte
page['feedback'].replace("#{@comentario.comentario}")
page['feedback'].show
end

Na view eu tenho:

…

…

Na primeira vez que eu posto um comentário, funciona corretamente, mas seu eu tentar postar outro comentário logo em seguida dá o seguinte erro:

RJS error:

TypeError: $("feedback") is null

#20 Eduardo M. disse:
26 Set 08, 02:57PM

Opa,

corrigindo o último post que ficou sem a parte da view:

Na view eu tenho um div com id "feedback" e dentro dele o a chamada rails para "flash_message"

Obrigado por qualquer dica.

Eduardo M.

#21 Eduardo M. disse:
26 Set 08, 03:54PM

Sobre os dois últimos posts, consegui!

Se alguém estiver querendo usar o flash_message com RJS faça da seguinte forma:

No application_helper eu fiz o método:

# Mostra a mensagem informativa utilizada em operações realizadas com sucesso.
# O elemento (div, td…) da página que contém o método "flash_message" deve ter id='feedback'
# @page Página usada no "render update do |page|"
# @tipo notice, warning, info, error
# @mensagem String que será a mensagem renderizada
def flash_message_now (page,tipo,mensagem)
page.replace_html 'feedback', "#{mensagem}"
page.show 'feedback'
end

No controller eu tenho, por exemplo:

render :update do |page|
…
flash_message_now(page,"notice","Comentário enviado com sucesso")
end

Eduardo Mucelli.

#22 Eduardo M. disse:
26 Set 08, 03:57PM

Desculpe mais um post, mas no post anterior eu esqueci do html, que foi comido pelo na postagem.

Na linha "page.replace_html 'feedback', "#{mensagem}"" deveria ser:
page.replace_html 'feedback', "menor p class='#{tipo}' maior #{mensagem} menor barra p maior"

Eduardo Mucelli.

#23 Guilherme disse:
11 Out 08, 02:36AM

Nando, estou tentando utilizar aquele efeito que faz as mensagens aparecem e desaparecem automaticamente mas não estou conseguindo. Pode me dar uma dica ou postar algo sobre a utilização desse efeito ?

Muito obrigado e desculpe qualquer coisa ;)

Abraços.

Deixe um comentário




Este blog usa o Gravatar.


Não é aceito código HTML:
adicione-o no pastie.caboo.se ou paste.milk-it.net e poste apenas o link.

Se este é seu primeiro comentário, ele terá que ser aprovado antes de ser exibido.