Histórico da Página

Visão Geral

As mensagens modais, são parte do mecanismo de diálogo do sistema para se comunicar com o usuário. Elas podem ser modais ou toaster. Sendo que as modais interropem a atividade corrente do usuário requerendo sua atenção para prosseguir através geralmente de botões de ok ou confirmação.
As comunicações podem ser dos tipos informação, alerta, erro e confirmação.

Devemos optar sempre que possível pelas mensagens do tipo Toaster , para evitar interromper a atividade corrente do usuário.

Quando usar

Quando o sistema precisa de uma confirmação do usuário;
Para alertar sobre situações críticas, inesperadas ou erros que necessitam de atenção
Para informar que algo foi executadao e retornou erro.

Estrutura

A Mensagem segue a mesma estrutura de Janelas Modais , contendo:

Barra de título
Cabeçalho (opcional)
Conteúdo
Painel de ações no Rodapé

Image Added

As Mensagens podem ser dos tipos:
Page Tree
root @self
startDepth 2

Comportamentos
O botão fechar no rodapé ou no topo direito fecham a mensagem
Ao haver mais de uma mensagem o fechar fica desabilitado até o usuário ver a última
Caso o usuário selecione o checkbox do rodapé, permite fechar sem ler todas
Os textos são selecionáveis para permitir copiar
A Janela é carregadacom o efeito de Zoom In quando carregada e Zoom Out quando fecha.

Boas Práticas

Evitar sempre que possível mensagens modais para não interromper o usuário, preferir toaster
Aplicar mensagens curtas, de leitura rápida
Utilizar termos comuns ao negócio, evitar termos técnicos ou em outro idioma
Evite textos em negrito.

Exemplos

Referências

http://designinginterfaces.com/

Veja Também

dts_pagetree

h1. Visão Geral h1. Quando usar * Quando existem ações que necessitam bloquear a atividade do usuário. h1. Estrutura * Informação; * Advertência/Alerta; * Erro; * Confirmação. h1. Comportamentos h1. Boas Práticas h1. Exemplo \\ {flash:file=^Messages_Meiu.swf|width=800|height=600} \\ h1. 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:ComboBox id="cbTypeMessage" dataProvider="{_model.collection}"/> <mx:HBox> <mx:Button label="Info" id="btnInfo" click="_controller.onMessage(UIMessage.INFO, String(cbTypeMessage.selectedItem.data) )"/> <mx:Button label="Confirm" id="btnConfirm" click="_controller.onMessage(UIMessage.CONFIRM, String(cbTypeMessage.selectedItem.data))"/> <mx:Button label="Warning" id="btnWarning" styleName="WarningMessageButton" click="_controller.onMessage(UIMessage.WARNING, String(cbTypeMessage.selectedItem.data))"/> <mx:Button label="Error" id="btnError" styleName="ErrorMessageButton" click="_controller.onMessage(UIMessage.ERROR, String(cbTypeMessage.selectedItem.data))"/> </mx:HBox> </mx:VBox> </mx:Canvas> {code} h1. Referências h1. Ver Também {sdk_doc_footer: }

sdk_doc_footer
Wiki Markup

Páginas filhas

Versões comparadas

Versão antiga 9

Nova versão Atual

Chave