Quando usar

Uma aplicação informa aos usuários em uma Caixa de Mensagem de Erro quando um erro ocorre. Esta informação diz ao usuário que um sério problema ocorreu e que este requer a intervenção ou correção antes que o trabalho possa continuar.

• Para situação onde sistema esta reportando uma mensagem. (o que quer dizer esta frase?)

Estrutura

A caixa tem um símbolo, mensagem, e botões Repetir/Cancelar ou OK (Ajuda é recomendável).

(O exemplo traz uma caixa com apenas um botão "Fechar". Texto da estrutura e exemplo não estão fechando. Isto vale para outros componentes que tratam de mensagens.)

Mensagens de erro se concentram no procedimento para correção do erro, não na causa do erro. Um botão que leve à funcionalidade necessária para a correção do erro pode ser fornecido. Para um erro repetido, a mensagem inclui recomendações para ações preventivas.

(O exemplo traz apenas uma mensagem com o texto "Message". Este tipo de exemplo é válido se o público são desenvolvedores, mas para usabilistas o exemplo deve trazer as recomendações aqui descritas aplicadas, de preferência em seu caso mais completo. Assim, deveria trazer uma mensagem com a forma de corrigir o erro e até com um botão extra levando para onde o erro pode ser corrigido. Isto também vale para outros componentes que tratam de mensagens.)

Comportamentos

A Janela Modal é carregada na interface com o efeito de Zoom-in quando é carregada.
Para ação de fechar a Janela Modal é utilizado o efeito de Zoom-out.

Boas Práticas

Sugerir sempre uma ação focal no rodapé e que irá receber o tecla de ação Enter pelo teclado.

Exemplo

Código fonte

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
	creationComplete="startUp()">
	<mx:Script>
		<![CDATA[
			import com.datasul.framework.ui.msg.model.UIMessage;
			[Bindable]
			public var _model:SampleMessagesModel = new SampleMessagesModel();

			[Bindable]
			public var _controller:SampleMesssagesController;

			private function startUp():void {
				_controller = new SampleMesssagesController(this);
			}

		]]>
	</mx:Script>
	<mx:VBox horizontalAlign="center" horizontalCenter="0" verticalCenter="0">
		<mx:HBox>
			<mx:Button label="Error" id="btnError" styleName="ErrorMessageButton"
click="_controller.onMessage(UIMessage.ERROR, String(SampleMessagesModel.SHOW_MESSAGE))"/>
		</mx:HBox>
	</mx:VBox>
</mx:Canvas>

Referências

Ver Também