Solved

Flex 3 Accordion control to navigate a viewstack control

Posted on 2009-05-09
2
2,412 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
2 Comments
 
LVL 10

Accepted Solution

by:
mplord earned 500 total points
Comment Utility
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
Comment Utility
Thats great, just what i needed.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Video Playback in Flex Mobile App 4 1,442
Accessing GPS on Windows Tablet using Adobe Air 4 397
Custom Component 1 239
learning partner 1 211
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…
A procedure for exporting installed hotfix details of remote computers using powershell
Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

762 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

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now