Menu Tree

[Giovani 104]

Boa tarde pessoal,

 

Fiquei na dúvida entre postar aqui ou no sub de Flash para Aplicações, mas vamos lá.

 

Comecei a "brincar" com o Flex essa semana e gostaria de saber se podem me ajudar, pois meu conhecimento em ActionScript é pequeno.

Criei dois Panel's, um a esquerda (menu) e outro a direita (conteúdo).

 

Quero colocar um MenuTree no panel da esquerda e quando clicar em algum item quero que apareça algo (um formulário, uma Datagrid,...), espero que tenham me entendido.

 

Alguém pode me ajudar?

 

Abraços! http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif

[Eder Fortunato 15]

Ola Gio, que milagre o senhor aparecer por aqui :D

 

 

 

 

então só para ver como funciona o Tree, você pode testar essa exemplo(é do help do flex)

 

 

<?xml version="1.0" encoding="utf-8"?>
<!-- Tree control example. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

	<mx:Script>
		<![CDATA[

			[Bindable]
			public var selectedNode:XML;

			// Event handler for the Tree control change event.
			public function treeChanged(event:Event):void {
				selectedNode=Tree(event.target).selectedItem as XML;
			}
		]]>
	</mx:Script>

	<mx:XMLList id="treeData">
		<node label="Mail Box">
			<node label="Inbox">
				<node label="Marketing"/>
				<node label="Product Management"/>
				<node label="Personal"/>
			</node>
			<node label="Outbox">
				<node label="Professional"/>
				<node label="Personal"/>
			</node>
			<node label="Spam"/>
			<node label="Sent"/>
		</node>	
	</mx:XMLList>

	<mx:Panel title="Tree Control Example" height="75%" width="75%" 
		paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

		<mx:Label width="100%" color="blue" 
			text="Select a node in the Tree control."/>

		<mx:HDividedBox width="100%" height="100%">
			<mx:Tree id="myTree" width="50%" height="100%" labelField="@label"
				showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
			<mx:TextArea height="100%" width="50%"
				text="Selected Item: {selectedNode.@label}"/>
		</mx:HDividedBox>
		
	</mx:Panel>
</mx:Application>

 

dentro da função treeChanged você poderia fazer um IF para verificar qual é o valor ( if(selectedNode.@label=="Sent") )

e baseado nisso jogar o painel correto dentro do conteudo

 

 

qualquer coisa é só falar

 

 

[]´s

[Giovani 104]

Fala Eder Fortunato, tudo bem?

Pois é, pode ser que eu apareça amis vezes por aqui para incomodar vocês http://forum.imasters.com.br/public/style_emoticons/default/natal_happy.gif

To começando a gostar desse tal de Flex.

 

Pois é cara, esse exemplo ai eu tenho...mas como estou começando agora não to conseguindo assimilar direito.

Sei que parece amador, mas não entendi o "jogar o painel correto dentro do conteudo".

 

Você tem algum exemplo ou algum link que mostre como clicar no link e no Panel conteudo aparcer o conteúdo propriamente dito.

Se puder me ajudar ficarei grato.

 

Muito, muito obrigado!

 

Grande abraço!

Giovani

[Eder Fortunato 15]

Eu tb gostei muito do flex, tava até pensando em criar uma área deditaca a ele aqui, mas eu tb não manjo muito..., deixa mais para frente essa ideia

 

bem, agora eu axo que entendi o que você quer, veja esse exemplo que eu fiz:

 

 

<?xml version="1.0" encoding="utf-8"?>
<!-- Tree control example. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

	<mx:Script>
		<![CDATA[

			[Bindable]
			public var selectedNode:XML;

			// Event handler for the Tree control change event.
			public function treeChanged(event:Event):void {
				selectedNode=Tree(event.target).selectedItem as XML;

						 myViewStack.selectedIndex=Number(selectedNode.@tela);


			}
		]]>
	</mx:Script>

	<mx:XMLList id="treeData">
		<node label="Mail Box">
			<node label="telas">
				<node tela="0" label="tela amarela"/>
				<node tela="1" label="tela verde"/>
				<node tela="2" label="tela azul"/>
			</node>
			
		</node>	
	</mx:XMLList>

	<mx:Panel title="Tree Control Example" height="75%" width="75%"
		paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

		<mx:Label width="100%" color="blue"
			text="Select a node in the Tree control."/>

		<mx:HDividedBox width="100%" height="100%">
			<mx:Tree id="myTree" width="50%" height="100%" labelField="@label"
				showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
		  
		<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">

			<mx:Canvas  backgroundColor="#FFFF00"  width="100%" height="100%">
				<mx:Label  text="tela amarela"/>
			</mx:Canvas>

			<mx:Canvas  backgroundColor="#00FF00"  width="100%" height="100%">
				<mx:Label   text="tela verde"/>
			</mx:Canvas>

			<mx:Canvas backgroundColor="#66CCFF"  width="100%" height="100%">
				<mx:Label   text="tela azul"/>
			</mx:Canvas>
		</mx:ViewStack>
		</mx:HDividedBox>
		
	</mx:Panel>
</mx:Application>

 

 

o componente ViewStack é ótimo para separa as "telas" da sua aplicação, em cada parte onde tem um label ai no exemplo, você pode colocar qualquer coisa, como um formulario ou um datagrid, e é facil "trocar de tela" basta alterar o valor do selectedIndex

 

 

seria algo assim que você queria?

 

 

[]´s

[Giovani 104]

Eder, vou ver se consigo testar agora a noite. Caso contrário só amanhã.

Mesmo assim, obrigado por enquanto.

 

Abraço e até o próximo post!

 

http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif

[Giovani 104]

Fala Eder, tudo bem?

Ainda não esqueci deste post...só que estou com tempo reduzido para estudar.

 

Estive olhando e achei esse link aqui: http://examples.adobe.com/flex3/componente...r/explorer.html

É mais ou menos isso que quero fazer, menu tree na esquerda, dentro de um panel e o conteúdo em outro panel.

 

Ainda não testei o código que você passou, mas para avisar, é bem parecido com o link acima que quero fazer.

 

Quando conseguir alguma coisa, volto a postar,

 

Abraço!

http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif

[Eder Fortunato 15]

Fala gio

 

 

esse link é muito bom mesmo,ótimo guia de referencia dos componente,

 

um outro que pode ser util é esse AQUI, mostra de forma fácil como personalizar os componentes (com CSS até :) ), além deles tem a documentação do AS3, esses são indispensáveis na hora de aprender, caso seu ingles seja bom, AQUI tem umas video-aulas para iniciantes em flex

 

 

 

 

sobre o exemplo que você postou, ele difere um pouco do que o que eu te passei ai em cima, no exemplo que eu fiz as tela ja estariam prontas separadas dentro do componente ViewStack, e você usaria o Tree para controlar qual é mostrado

 

ja nesse exemplo que você mostrou, ele carrega as telas, que são arquivos swf separados, caso você queira fazer dessa forma, use o exemplo mostrado AQUI, lá tem um link com os arquivos de exemplo(parece coisa avançada, mas o exemplo é simples)

 

é isso cara, até o próximo post

 

 

 

[]´s