Páginas filhas
  • Mensagem de Informação - Toaster

Você está vendo a versão antiga da página. Ver a versão atual.

Comparar com o atual Ver Histórico da Página

« Anterior Versão 13 Próxima »

The root page UIE:@self could not be found in space User Interface Explorer.

Quando usar

  • Para informar o usuário sobre ações que aconteceram no sistema.

Estrutura

  • Barra de título;
  • Ícone fechar;
  • Cor variável (azul, amarelo, vermelho);
  • Ícone representado o tipo de toaster;
  • Área de texto para mensagens breves.

Comportamentos

  • Desliza sobre a interace debaixo para cima
  • Após alguns instantes desliza novamanete para baixo ocultando a informação.

Boas Práticas

  • O conteúdo do toaster deve ser breve, pois o tempo de sua leitura deverá ser equivalente ao tempo de exibição na interface.

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: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>

Referências

Ver Também

  • Sem rótulos