asked on

Need Help with Nested View stacks in Flex3

I am in the process of learning Flex and experimenting various controls and layout properties.
In my application i have viewstack1 which is controlled by a buton bar which is working fine, then inside viewstack1 and in one of the stacks i have a another view stack (viewstack_2) which i am trying to control by the accordion.

View stack 2 does work in view stack 1, but if take out viewstack 2 from viewstack 1 then view stack 2 works.

Is this not possible in Flex or i am doing something wrong?

Thanks

ChristoferDutz

Is the Accordeon on the same view-stack page of viewstack1?

Even if you have created the viewstack2 inside the viewstack1, flex doesn't automatically create it right away. Usually as soon as you switch to the tab containing viewstack2 this will be created. I assume that the Accordeon is outside the viewstack1. Then it will try to bind to an object that doesn't exist. When changing to the layer containing viewstack2 the two components are not completely linked together.

If you paste your code here, I'll try to fix it for you and explain why it didn't work (This way you'll have it working and know why it didn't work)

X-quisite

ASKER

on test 2, there is another viewstack which i am trying to control

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
            <![CDATA[
                  import mx.binding.utils.BindingUtils;
                  
            
                  private function init():void
                  {
                        BindingUtils.bindSetter(setVS, accordion, "selectedIndex");      
                  }
                  
                  private function setVS(selectedIndex:Number):void
                  {
                        viewstack2.selectedIndex = selectedIndex;
                  }
            ]]>
      </mx:Script>

	
	<mx:ApplicationControlBar x="27" y="10" width="624">
		<mx:ButtonBar dataProvider="viewstack1">
		</mx:ButtonBar>
	</mx:ApplicationControlBar>
	<mx:ViewStack x="27" y="62" id="viewstack1" width="624" height="264">
		<mx:Panel label="test1" width="100%" height="100%">
			<mx:Label text="its view 1"/>
		</mx:Panel>
		<mx:Panel label="test2" width="100%" height="100%">
			<mx:VDividedBox width="100%" height="100%">
				<mx:HDividedBox width="100%" height="100%">
					<mx:Accordion id="accordion" width="200" height="200">
						<mx:Canvas label="Accordion Pane 1" width="100%" height="100%">
						</mx:Canvas>
						<mx:Canvas label="second" width="100%" height="100%">
						</mx:Canvas>
					</mx:Accordion>
					<mx:ViewStack id="viewstack2" width="200" height="200">
						<mx:Canvas label="View 1" width="100%" height="100%">
							<mx:Label x="64" y="135" text="accordion 1"/>
						</mx:Canvas>
						<mx:Panel label="second view" width="100%" height="100%">
						</mx:Panel>
					</mx:ViewStack>
				</mx:HDividedBox>
			</mx:VDividedBox>
		</mx:Panel>
	</mx:ViewStack>
	
</mx:Application>

Open in new window

ASKER CERTIFIED SOLUTION

ChristoferDutz

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ChristoferDutz

Ok ... it worked a lot faster than I anticipated :-)

While doing it I could notice that your init method was propably never called. In my example I added the init method as listener for the creationComplete event of the second viewstack page of viewstack1. This event is fired as soon as the element is finished initializing and therefore the bindingutils can do the binding magic.

Hope this makes things a little clearer for you :-)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.binding.utils.BindingUtils;
			
			private function init():void
			{
				BindingUtils.bindSetter(setVS, accordion, "selectedIndex");      
			}
			
			private function setVS(selectedIndex:Number):void
			{
				viewstack2.selectedIndex = selectedIndex;
			}
		]]>
	</mx:Script>
	
	<mx:ApplicationControlBar x="27" y="10" width="624">
		<mx:ButtonBar dataProvider="viewstack1">
		</mx:ButtonBar>
	</mx:ApplicationControlBar>
	<mx:ViewStack x="27" y="62" id="viewstack1" width="624" height="264">
		<mx:Panel label="test1" width="100%" height="100%">
			<mx:Label text="its view 1"/>
		</mx:Panel>
		<mx:Panel label="test2" width="100%" height="100%">
			<mx:VDividedBox width="100%" height="100%">
				<mx:HDividedBox width="100%" height="100%" creationComplete="init()">
					<mx:Accordion id="accordion" width="200" height="200">
						<mx:Canvas label="Accordion Pane 1" width="100%" height="100%">
						</mx:Canvas>
						<mx:Canvas label="second" width="100%" height="100%">
						</mx:Canvas>
					</mx:Accordion>
					<mx:ViewStack id="viewstack2" width="200" height="200">
						<mx:Canvas label="View 1" width="100%" height="100%">
							<mx:Label x="64" y="135" text="accordion 1"/>
						</mx:Canvas>
						<mx:Panel label="second view" width="100%" height="100%">
						</mx:Panel>
					</mx:ViewStack>
				</mx:HDividedBox>
			</mx:VDividedBox>
		</mx:Panel>
	</mx:ViewStack>
	
</mx:Application>

Open in new window

X-quisite

ASKER

Just the right solution
Thank you.