Através da dúvida de um dos nossos leitores, chegamos a uma solução até interessante para centralizar componentes na tela, através de uma simples função estática, que pode ser adicionada a sua biblioteca de classes Action Script.

O código está logo abaixo:

<?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"
                    minWidth="1" minHeight="600">

<fx:Script>
<![CDATA[
	import mx.core.UIComponent;

	import spark.effects.Move;
	import spark.effects.easing.Bounce;

	public function Centralizar(c:UIComponent,
                                       useBounce:Boolean=true):void
	{
		var containerWidth:int = c.parent.width;
		var xCenter:int = (containerWidth-c.width)/2;

		var containerHeight:int = c.parent.height;
		var yCenter:int = (containerHeight-c.height)/2;

		var m:Move = new Move();

                if (useBounce)
	           m.easer = new Bounce();

		m.target = c;
		m.xFrom = c.x;
		m.yFrom = c.y;
		m.xTo = xCenter;
		m.yTo = yCenter;
		m.play();
	}

]]>
</fx:Script>

<s:Button id="btn" x="10" y="10">
	<s:click>
		<![CDATA[
		Centralizar(btn);
		]]>
	</s:click>
</s:Button>

</s:Application>

Neste post iremos aprender como utilizar as famosas janelas MDI que tanto fizeram sucesso no Delphi… agora não são muito usadas, mas para a criação de sistemas comerciais não existe nada melhor.

Crie um projeto no Flex Builder e adicione a biblioteca Flexlib, encontrada no endereço:

http://code.google.com/p/flexlib/downloads/list

Baixe o Zip da última versão disponível.

Descompacte o Zip e copie o arquivo bin/flexlib.swc para o seu projeto. Depois adicione a biblioteca flexlib.swc no seu projeto, indo em propriedades do objeto e acessando “Flex Build Path”. Vá na aba Library Path e acione o botão “Add SWC”. Encontre flexlib.swc e adicione ao seu projeto.

Após incluir a flexLib, acesse o modo design da sua aplicação e veja na aba “Componentes”, na pasta “Custom”, diversos componentes que foram inseridos devido a FlexLib. Encontre o componente MDICanvas e arraste-o para a sua aplicacao.

Defina um ID para o MDICanvas, como por exemplo “MDI”. Neste canvas poderemos inserir janelas MDI a vontade.

O próximo passo é criar uma janela MDI, indo em Adicionar, MXML Component. No assistente que surge, crie um componente que herde de MDIWindow. conforme a figura abaixo:

Voltando a aplicação principal, crie um botão que possa simular o click em um menu. Esse botão executa o seguinte código:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="flexlib.mdi.containers.*">
    <ns1:MDICanvas x="12" y="10" width="295" height="351" id="MDI">
    </ns1:MDICanvas>
    <mx:Button x="10" y="369" label="Button">
        <mx:click>
            <![CDATA[
                MDI.windowManager.add(new Tela01());
            ]]>
        </mx:click>
    </mx:Button>
</mx:Application>

Ou seja, quando clicamos no botão, adicionamos uma nova tela MDI. Com o canvas ocupando toda a tela da aplicação, podemos simular melhor o MDI.

O Fábio Vedovelli criou uma aplicação em Flex que aborda diversos fatores sobre as aplicações RIA.

Acesso aqui: http://rialabs.com.br/exemplos/cadastroempresas/