Navegando no viewStack 10 maneiras

, +, 6 Comentários

Share it now!

ViewStack tem um comportamento como um array de Objetos, tais objetos podem ser desde botões ou checkBoxs até telas ou estados de uma tela de aplicativo.
Existem várias maneiras de se navegar através de um viewStack já que cada child(filho) que o viewStack suporta você pode considerar sempre como um Array, tem posições iniciadas em zero.

1
2
3

 
   var view:Array = [0,1,2,3,4] // array de 5 posicoes
trace(view);

Tem vários controles de interface que podem ser usados para navegar através do ViewStack dentre eles ( mx:TabBar, mx:ComboBox, mx:List, mx:Tree, mx:ButtonBar, mx:ToggleButtonBar, mx:Button, mx:MenuBar, mx:LinkBar, mx:HSlider).

Primeiro Exemplo : Usando TabBar

Requer o Flash Player

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:fx="*"
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="vertical" width="549" height="388">
 
<mx:Style>
	VBox {
		background-color:#ffffff;
	}
</mx:Style>
 
<mx:TabBar dataProvider="{viewstck}"/>
<fx:myViewStack id="viewstck"/>
</mx:Application>

Segundo Exemplo : Usando ComoBox

Requer o Flash Player

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:fx="*"
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="vertical" width="549" height="388">
 
<mx:Style>
	VBox {
		background-color:#ffffff;
	}
</mx:Style>
 
<mx:ComboBox id="control" dataProvider="{viewstck.getChildren()}" labelField="label"/>
<fx:myViewStack selectedIndex="{control.selectedIndex}" id="viewstck"/>
</mx:Application>

Terceiro Exemplo : Usando HorizontalList, List

Requer o Flash Player

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:fx="*"
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="vertical" width="549" height="388">
 
<mx:Style>
	VBox {
		background-color:#ffffff;
	}
</mx:Style>
 
<mx:HorizontalList id="control" dataProvider="{viewstck.getChildren()}" labelField="label"/>
<fx:myViewStack selectedIndex="{control.selectedIndex}" id="viewstck"/>
</mx:Application>

Quarto Exemplo : Usando Button

Requer o Flash Player

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:fx="*"
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="vertical" width="549" height="388">
 
<mx:Style>
	VBox {
		background-color:#ffffff;
	}
</mx:Style>
<mx:Script>
	<![CDATA[
		import mx.controls.Alert;
 
		private function prox():void
		{
			viewstck.selectedIndex++;
		}
		private function prev():void
		{
			viewstck.selectedIndex--;
		}
	]]>
</mx:Script>
<mx:HBox>
<mx:Button click="prev()" label="Anterior"/>
<mx:Button click="prox()" label="Próximo"/>
</mx:HBox>
<fx:myViewStack id="viewstck"/>
</mx:Application>

Quinto Exemplo : Usando Tree

Requer o Flash Player

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:fx="*"
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="horizontal" width="549" height="388">
 
<mx:Style>
	VBox {
		background-color:#ffffff;
	}
</mx:Style>
<mx:Tree showRoot="true" id="tree" dataProvider="{viewstck.getChildren()}" labelField="label"/>
<fx:myViewStack selectedIndex="{tree.selectedIndex}" id="viewstck"/>
</mx:Application>

Sexto Exemplo : Usando HSlider

Requer o Flash Player

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:fx="*"
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="vertical" width="549" height="388">
 
<mx:Style>
	VBox {
		background-color:#ffffff;
	}
</mx:Style>
<mx:HSlider id="sl" showDataTip="true" tickValues="[1,2,3,4]" allowTrackClick="true" minimum="0" maximum="3" snapInterval="1"/>
<fx:myViewStack selectedIndex="{sl.value}" id="viewstck"/>
</mx:Application>

Vejam que o exemplo 1,2,3 e 5 exemplos podem ser usado a mesma idéia para mx:ButtonBar, mx:ToggleButtonBar, mx:MenuBar, mx:LinkBar, só alterar o tag usado no exemplo e irá funcionar, totalizando 10 exemplos.

Código fonte do componente fx usado

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?xml version="1.0" encoding="utf-8"?>
<mx:ViewStack fontSize="20" xmlns:mx="http://www.adobe.com/2006/mxml" width="500" height="300">
	<mx:VBox verticalAlign="middle" horizontalAlign="center" label="Stack 1" width="100%" height="100%">
		<mx:Label text="STACK 1"/>
	</mx:VBox>
	<mx:VBox verticalAlign="middle" horizontalAlign="center" label="Stack 2" width="100%" height="100%">
		<mx:Label text="STACK 2"/>
	</mx:VBox>
	<mx:VBox verticalAlign="middle" horizontalAlign="center" label="Stack 3" width="100%" height="100%">
		<mx:Label text="STACK 3"/>
	</mx:VBox>
	<mx:VBox verticalAlign="middle" horizontalAlign="center" label="Stack 4" width="100%" height="100%">
		<mx:Label text="STACK 4"/>
	</mx:VBox>
</mx:ViewStack>
Seja um fã
 

6 Comentários

  1. Gabriel

    05/10/2007, 10:05 am

    Muito bom, Igor!
    Cada vez mais tenho vontade de estudar esse mundo do Flex… Não vejo a hora de ter tempo para isso!
    Tenho certeza de que esse seu blog vai me ajudar muito!
    Abraço

  2. Lucius

    07/02/2007, 10:43 am

    Oi, Igor! Estou adorando suas matérias sobre o Flex. Somente com elas tenho aprendido de verdade! Muito obrigado por nos ensinar!

  3. Valdir

    08/03/2007, 06:35 pm

    Ótimos exemplos!
    Eu estou precisando de um exemplo de navegação através de botões (próximo e anterior) para um único SWFLoader, cujos “sources” dos arquivos .swf estão indicados em cada item da tree. Já tentei: LoadX.source = myTree.selectedIndex = myTree.selectedIndex +1; – mas não funciona, apenas seleciona o próximo item da tree, mas não abre. Agradeço se você tiver uma dica.

  5. Roberto Kalili

    01/13/2010, 08:38 am

    Igor,
    Parabéns pelo post, super didático.

    Por favor, como eu insiro em um viewstack dinamicamente, via AS3. Eu estou fazendo uma aplicação onde, dependendo do nível do usuário, ele vai ter um menu personalizado (linkBar + viewstack).
    Vc pode me ajudar?

    Obrigado