Histórico da Página

{pagetree:root=@self}

h2. 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. {color:#ff6600}(o que quer dizer esta frase?){color}

h2. Estrutura

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

{color:#ff6600}(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.){color}


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.

{color:#ff6600}(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.){color}


h2. 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.

h2. Boas Práticas

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

h2. Exemplo

\\

{flash:file=^janelaModal_error.swf|width=640|height=480|align=middle}
\\

h2. Código fonte

\\
{code}
<?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>
{code}

h2. Referências

* [http://designinginterfaces.com/]

h2. Ver Também

{sdk_doc_footer: }