Solved

Flex 3 Accordion control to navigate a viewstack control

Posted on 2009-05-09
2
2,424 Views
Last Modified: 2012-05-06
I need help with some code to use a accordion navigator to control a vewstack navigator.
So when the user clicks on the a specific accordion header this should change the view stack navigator.

Thanks
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Canvas x="5" y="10" id="Enquiries" label="Enquiries" width="100%" height="100%" borderStyle="solid">
		<mx:HBox borderStyle="inset" width="742" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5" height="34" y="10" x="10" backgroundColor="#585757" cornerRadius="10" dropShadowColor="#690F0F" dropShadowEnabled="true">
			<mx:Button label="New Enquiry"/>
			<mx:Button label="New Quote"/>
			<mx:Button label="Appointment"/>
		</mx:HBox>
		<mx:HDividedBox x="10" y="52" width="740" height="489"  >
			<mx:VDividedBox width="30%" height="100%">
				<mx:Accordion width="100%" height="70%">
					<mx:Canvas label="Quotes" width="100%" height="100%">
					</mx:Canvas>
				</mx:Accordion>
				<mx:TextArea width="100%" height="30%"/>
			</mx:VDividedBox>
		<mx:VDividedBox width="70%" height="100%">
			<mx:ViewStack id="VS_AllEnquires" borderStyle="solid" width="100%" height="80%">
				<mx:Canvas id="AllEnquiries" label="AllEnquiries" width="100%" height="100%">
					<mx:DataGrid id="DG_AllEnquiries" width="100%" height="100%">
						<mx:columns>
							<mx:DataGridColumn headerText="Enquiry Date" dataField="col1"/>
							<mx:DataGridColumn headerText="Enquiry Source" dataField="col2"/>
							<mx:DataGridColumn headerText="Personell" dataField="col3"/>
						</mx:columns>
					</mx:DataGrid>
				</mx:Canvas>
			</mx:ViewStack>
			<mx:TextArea width="100%" height="20%"/>
		</mx:VDividedBox>
		</mx:HDividedBox>
	</mx:Canvas>
	
</mx:Application>

Open in new window

0
Comment
Question by:X-quisite
[X]
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
2 Comments
 
LVL 10

Accepted Solution

by:
mplord earned 500 total points
ID: 24347603
Currently you only have one accordion canvas and one viewstack canvas, so to demonstrate switching these I've added second views to both.

There is a simpler way to achieve the following, just for example using BindProperty to directly set the selectedIndex of the ViewStack to equal the selectedIndex of the Accordion, but using the BindSetter let's you have some choice over how to set the selectedIndex of the ViewStack in case you need it.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">

      <mx:Script>
            <![CDATA[
                  import mx.binding.utils.BindingUtils;
                  
            
                  private function init():void
                  {
                        BindingUtils.bindSetter(setVS, accordion, "selectedIndex");      
                  }
                  
                  private function setVS(selectedIndex:Number):void
                  {
                        VS_AllEnquires.selectedIndex = selectedIndex;
                  }
            ]]>
      </mx:Script>

        <mx:Canvas x="5" y="10" id="Enquiries" label="Enquiries" width="100%" height="100%" borderStyle="solid">
                <mx:HBox borderStyle="inset" width="742" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5" height="34" y="10" x="10" backgroundColor="#585757" cornerRadius="10" dropShadowColor="#690F0F" dropShadowEnabled="true">
                        <mx:Button label="New Enquiry"/>
                        <mx:Button label="New Quote"/>
                        <mx:Button label="Appointment"/>
                </mx:HBox>
                <mx:HDividedBox x="10" y="52" width="740" height="489"  >
                        <mx:VDividedBox width="30%" height="100%">
                                <mx:Accordion id="accordion" width="100%" height="70%">
                                        <mx:Canvas label="Quotes" width="100%" height="100%">
                                        </mx:Canvas>
                                        <mx:Canvas label="View2" width="100%" height="100%">
                                        </mx:Canvas>
                                </mx:Accordion>
                                <mx:TextArea width="100%" height="30%"/>
                        </mx:VDividedBox>
                <mx:VDividedBox width="70%" height="100%">
                        <mx:ViewStack id="VS_AllEnquires" borderStyle="solid" width="100%" height="80%">
                                <mx:Canvas id="AllEnquiries" label="AllEnquiries" width="100%" height="100%">
                                        <mx:DataGrid id="DG_AllEnquiries" width="100%" height="100%">
                                                <mx:columns>
                                                        <mx:DataGridColumn headerText="Enquiry Date" dataField="col1"/>
                                                        <mx:DataGridColumn headerText="Enquiry Source" dataField="col2"/>
                                                        <mx:DataGridColumn headerText="Personell" dataField="col3"/>
                                                </mx:columns>
                                        </mx:DataGrid>
                                </mx:Canvas>
                                <mx:Canvas label="View2" width="100%" height="100%">
                                </mx:Canvas>
                        </mx:ViewStack>
                        <mx:TextArea width="100%" height="20%"/>
                </mx:VDividedBox>
                </mx:HDividedBox>
        </mx:Canvas>
       
</mx:Application>
0
 

Author Closing Comment

by:X-quisite
ID: 31579817
Thats great, just what i needed.
0

Featured Post

ScreenConnect 6.0 Free Trial

Want empowering updates? You're in the right place! Discover new features in ScreenConnect 6.0, based on partner feedback, to keep you business operating smoothly and optimally (the way it should be). Explore all of the extras and enhancements for yourself!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
FLex Calendar 3 564
Video Playback in Flex Mobile App 4 1,527
Flex Mobile - Problems with returning array results 5 484
Flex/Air App seeing online status of client from an admin user 1 405
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…
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…

726 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