Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Need Help with Nested View stacks in Flex3

Posted on 2010-09-15
5
417 Views
Last Modified: 2012-05-10
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
0
Comment
Question by:X-quisite
  • 3
  • 2
5 Comments
 
LVL 20

Expert Comment

by:ChristoferDutz
ID: 33682832
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)
0
 

Author Comment

by:X-quisite
ID: 33683280
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

0
 
LVL 20

Accepted Solution

by:
ChristoferDutz earned 500 total points
ID: 33683543
Ok ... now I can see the problem. Even if the structure is different, the problem is the same. The callback "init" is called before the viewstack-page with the accoridon is created. So the accordion variable is null at the time the init method is executed resulting in nothing beeing bound at all.

The following code works, but it does not make use of the Bindingutils ... I'll build a version using that approach and post it in a few minutes.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<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" selectedIndex="{accordion.selectedIndex}" 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

0
 
LVL 20

Expert Comment

by:ChristoferDutz
ID: 33683591
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

0
 

Author Closing Comment

by:X-quisite
ID: 33685050
Just the right solution
Thank you.
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Converting PDF to SWF with video embedded 11 458
AS 3 Eval 5 500
looking for noob/pro flash game developers to grow with 4 659
labelFunction in AdvancedDataGrid FLEX 3 2 2,795
First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
Most MSPs worth their salt are already offering cybersecurity to their customers. But cybersecurity as a service is wide encompassing and can mean many things.  So where are MSPs falling in this spectrum?
Microsoft Active Directory, the widely used IT infrastructure, is known for its high risk of credential theft. The best way to test your Active Directory’s vulnerabilities to pass-the-ticket, pass-the-hash, privilege escalation, and malware attacks …
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question