Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
Comentário: Migration of unmigrated content due to installation of a new plugin

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
    startDepth2


    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

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=640|height=480|align=middle} \\ 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