Dica Flex – Abrindo um Popup com o componente TitleWindow

Colocado por Pablo Souza na(s) categoria(s): 1, 2009, 4, action, Actionscript, ActionScript 3, Actionscript 3.0, Adobe, app, AR, blog, class, classe, classes, Componente, demo, Dica, event, Evento, Flex, for, function, handle, label, layout, library, MXML, O, on, pt, RIA, Ria’s Geral, singleton, spark, TextInput, UI, window, XML em 01 31st, 2011 | Sem comentários

A dica flex de hoje mostra como podemos criar um componente TitleWindow que será aberto como um popup em nossa aplicação.

Primeiro vamos definir nosso componente que terá como sua base class a classe TitleWindow.

“MyPopup.mxml“:

?
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   title="My popup"
			   close="close_handler()"
			   width="400" height="300">
	<fx:Script>
		[CDATA[
			import mx.managers.PopUpManager;
?
			protected function close_handler():void
			{
				PopUpManager.removePopUp(this);
			}
		]]>
	fx:Script>
?
	<mx:Form>
		<mx:FormItem label="User">
			<s:TextInput width="200" />
		mx:FormItem>
		<mx:FormItem label="Passwd">
			<s:TextInput width="200" />
		mx:FormItem>
		<mx:FormItem>
			<s:Button label="Cancel" click="close_handler()"/>
		mx:FormItem>
	mx:Form>
?
s:TitleWindow>

Repare que o evento close do componente faz uma chamada ao método close_handler(). Na implementação desse método utilizamos a classe Singleton PopUpManager para remover o popup. Entre outras atribuições essa classe gerencia a criação, o posicionamento e a remoção de janelas.

Em seguida vamos implementar nossa application que será responsável por instanciar o componente e abri-lo como um popup.

?
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx">
?
	<s:layout>
		<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
	s:layout>
?
	<fx:Script>
		[CDATA[
			import mx.managers.PopUpManager;
?
			protected function add_clickHandler(event:MouseEvent):void
			{
				PopUpManager.createPopUp(this, MyPopup, true);
			}
?
		]]>
	fx:Script>
?
	<s:Button id="add" label="Add TitleWindow Popup" click="add_clickHandler(event)" />
?
s:Application>