Flex/ Flex 3 para Flex 4/ Flex 4

Flex 3 para Flex 4: Layout, layout="vertical,horizontal,absolute"

Duvido que você não tenha encontrado esse problema quando você começou seus estudos no Flex 4, Como eu faço o posicionamento de objetos? Tarefa básica que no Flex 3 era tudo automático, coisinha linda. Porém tudo que é fácil tem-se um preço a pagar. Performance.

No Flex 3 você define layouts simplesmente fazendo o uso de VBox, HBox, HDividedBox,Canvas, VDividedBox, TitleWindow, Panel, Window, Application. Todos esses componentes tiram proveito das propriedades, verticalScrollPolicy, horizontalScrollPolicy, layout, align, padding(todos). O que torna todo o desenvolvimento uma diversão. O preço pago por isso é que seu Flex 3 sempre faz calculo de posição no updateDisplayList() e measure(), ocasionando uma certa lentidão quando se tem um container com vários objetos.

Então para você fazer no Flex 3 o uso de Layout, você aplica das seguintes maneiras:

Setando o Application a aceitar posicionamento vertical:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
 
	<!-- O Application quanto o Panel, TitleWindow, WindowedApplication,Application
		aceitam os valores na propriedade layout:
 
		 *vertical (ignora x)
		 *horizontal (ignora y)
		 *absolute (respeita x,y) -->
 
		 <mx:Panel width="400" height="400" layout="horizontal">
		 		<mx:Label text="Texto 01"/>
		 		<mx:Label text="Texto 02"/>
		 		<mx:Label text="Texto 03"/>
		 </mx:Panel>
 
		 <mx:TitleWindow width="400" height="400" layout="vertical">
		 		<mx:Label text="Texto 01"/>
		 		<mx:Label text="Texto 02"/>
		 		<mx:Label text="Texto 03"/>
		 </mx:TitleWindow>
		 <mx:HBox width="100" height="100">
		 		<mx:Label text="Texto 01"/>
		 		<mx:Label text="Texto 02"/>
		 		<mx:Label text="Texto 03"/>
		 </mx:HBox>
		 <mx:VBox width="100" height="100">
		 		<mx:Label text="Texto 01"/>
		 		<mx:Label text="Texto 02"/>
		 		<mx:Label text="Texto 03"/>
		 </mx:VBox>
</mx:Application>

Você sempre usa diversos artificios para posicionar objetos, ai acima são apenas alguns exemplos reais da coisa. Agora veja as mudanças.

No Flex 4, temos agora um novo conceito, leve 3 pague 2 ou pague o que usa estilo Cloud, diferente do Flex 3, toda vez que você faz um mesure() ou updateDisplayList() afeta tanto o Child (componentes internos) quanto externos, o Flex 4 ele altera apenas a instancia do layout. Assim, você reduz o uso da fluidez da tela, já pensou nos benefícios que isso pode trazer, veja alguns deles:

  • Composição de layouts : Imagine que você pode usar qualquer container e aplicar um layout a ele, e/ou melhor mudar em tempo de execução
  • Uso de 3D: Todos os elementos dentro de um container implementam uma interface em comum IVisualElement, o que é passível de transformação 3D usando a própria API do Flash Player 10
  • Eliminação do re-uso de mesureWidth, mesureHeight, unscaleWidth, unscaleHeight sempre que você for afetar o seu componente visualmente.
  • Mudar a ordem (depth) de um objeto dentro do layout através da classe GroupBase.

Em fim, uma gama de outras novidades que você pode aplicar no Flex 4, coisa que no Flex 3 você vai suar para fazer. Principalmente em customização de componentes.

Então como eu aplico novos Layouts ao Flex 4?

Exemplo 1:
Esse exemplo mostra como aplicar Layout ao Application e mudando em tempo de execução

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<?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="955" minHeight="600"
			   xmlns:layouts="com.riacycle.layouts.*">
 
<fx:Declarations>
		<s:VerticalLayout id="vertical"/>
		<s:BasicLayout id="basico"/>
		<s:HorizontalLayout id="horizontal"/>
		<s:TileLayout id="tile"/>
		<layouts:LayoutPessoal id="personalizado"/>
</fx:Declarations>
 
	<fx:Script>
		<![CDATA[
			import spark.layouts.BasicLayout;
			import spark.layouts.HorizontalLayout;
			import spark.layouts.VerticalLayout;
 
			protected function mudarLayout(valor:int):void
			{
 
				switch(valor){
						case 1:
								this.layout = vertical;
						break;
						case 2:
								this.layout = horizontal;
						break;
						case 3:
								this.layout = basico;
						break;
						case 4:
								this.layout = tile;
						break;
						case 5:
								this.layout = personalizado;
						break;
				}
			}
		]]>
	</fx:Script>
 
 
	<s:controlBarContent>
		<s:Button label="Vertical" click="mudarLayout(1)"/>
		<s:Button label="Horizontal"  click="mudarLayout(2)"/>
		<s:Button label="Basico"  click="mudarLayout(3)"/>
		<s:Button label="Tile"  click="mudarLayout(4)"/>
		<s:Button label="Personalizado"  click="mudarLayout(5)"/>
	</s:controlBarContent>
	<s:Label fontSize="30" text="Item 01" x="58" y="239"/>
	<s:Label fontSize="30" text="Item 02" x="136" y="136"/>
	<s:Label fontSize="30" text="Item 03" x="279" y="100"/>
	<s:Label fontSize="30" text="Item 04" x="58" y="35"/>
</s:Application>

Veja que qualquer objeto que não seja visual eu preciso ter a certeza que ele esteja declarado dentro do tag , é obrigatório estar lá, caso contrário você vai receber um erro.
Caso você seja esperto ou curioso, vai notar que se eu setar do vertical para depois setar basic Layout, não funciona. Esse bug persiste desde o SDK 4.0 Beta, só que eles sempre colocam como fechado e vai empurrando com a barriga, o que é um erro. Eu voltei a postar novamente o erro Bug(SDK-27871), assim com mais detalhes inspirado nesse post.

Criando seus próprios layouts.

Então eu posso criar meus próprios sem depender muito da Adobe? Claro que pode, é ai que a coisa vai ficar bem legal. Veja só.
Para criar é simples, você vai criar uma nova classe que estenda da classe LayoutBase, que é a base de tudo para você aplicar seus layouts.

Exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
package com.riacycle.layouts
{
	import mx.core.ILayoutElement;
 
	import spark.layouts.supportClasses.LayoutBase;
 
	public class LayoutPessoal extends LayoutBase
	{
		public function LayoutPessoal()
		{
			super();
		}
		override public function updateDisplayList(width:Number, height:Number):void
		{
			super.updateDisplayList(width,height);
 
		}
	}
}

Assim que você estende, você vai ver que terá que utilizar 2 métodos simples, se você quer usar o mesure para recalcular o elemento e seu tamanho ótimo, se você quer apenas modificar e brincar, com sua posição é super simples, ai você vai apenas estender o updateDisplayList como eu fiz nessa classe acima.

Para continuar, já que eu estender, agora eu vou modificar a posição de cada objeto mesmo que ele seja adicionado em tempo de execução.

1
2
3
4
5
6
7
8
9
10
11
12
13
			//faz um loop para pegar todos os elementos
			var x:Number = 2;
			var y:Number = 3;
			for (var i:int = 0; i < target.numElements; i++) {
 
				var element:ILayoutElement = target.getElementAt(i);
 
				x = x + element.getLayoutBoundsWidth() - element.getLayoutBoundsWidth()/2;
				y = y + element.getLayoutBoundsHeight();
 
				element.setLayoutBoundsPosition(x, y);
 
			}

Você usa a palavra reservada target, para percorrer todos os elementos que fazem parte do layout e assim setar as propriedades x,y. Esse código acima dá uma efeito de cascata, vai colocando 1 item abaixo do outro em sequencia.

O código completo fica assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
package com.riacycle.layouts
{
	import mx.core.ILayoutElement;
 
	import spark.layouts.supportClasses.LayoutBase;
 
	public class LayoutPessoal extends LayoutBase
	{
		public function LayoutPessoal()
		{
			super();
		}
		override public function updateDisplayList(width:Number, height:Number):void
		{
			super.updateDisplayList(width,height);
			//faz um loop para pegar todos os elementos
			var x:Number = 2;
			var y:Number = 3;
			for (var i:int = 0; i < target.numElements; i++) {
 
				var element:ILayoutElement = target.getElementAt(i);
 
				x = x + element.getLayoutBoundsWidth() - element.getLayoutBoundsWidth()/2;
				y = y + element.getLayoutBoundsHeight();
 
				element.setLayoutBoundsPosition(x, y);
 
			}
		}
	}
}

Você falou que daria para fazer 3D também?Certo, falei sim, que tal aprender já com exemplos bem legais que você pode achar aqui.

2 thoughts on “Flex 3 para Flex 4: Layout, layout="vertical,horizontal,absolute"

  1. Ola, achei muito interressante seu artigo, espero que vc possa me ajudar a resolver um probleminha, que estou procurando resolver desesperadamente em Flex 4.
    Já montei o layout da minha aplicação (sem usar nenhum definição de layout simplesmente fui colocando as coisas na tela) e meu monitor é 1920 x 1080 agora queria fazer algo para que se a aplicação rodasse em 800 x 600 ou outra qualquer que o usuario usar o meu layout se adaptasse diminuindo ou aumentando os objetos e os espaços, letras e tudo mais. Como faço, já fucei por tudo mas ainda não achei um exemplo.
    Grata
    Janaina

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *