...
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:
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
| sdk_doc_footer |
|---|
Geral
A Janela Modal tem como objetivo capturar ações e tomadas de decisões que precisam ser realizada antes de continuar o processo corrente que está em forma de background.
h1. Quando usar
* Quando existem ações que necessitam bloquear a atividade do usuário.
h1. Estrutura
A janela é composta por um ícone, informações e botões de ação.
Este tipo de mensagem pode ter quatro tipos de conteúdo:
* Informação
* Advertência/Alerta
* Erro
* Confirmação
h1. 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.
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
\\
* [Janela Modal - Informação|UIE:Janela Modal - Informação]
* [Janela Modal - Advertência e Alerta|UIE:Janela Modal - Advertência e Alerta]
* [Janela Modal - Erro|UIE:Janela Modal - Erro]
* [Janela Modal - Confirmação|UIE:Janela Modal - Confirmação]
{sdk_doc_footer: } |
|---|
|