Accordion Navigator Container in Flex4
The Accordion Navigator container is used for Form navigation. You can make many Forms in a single screen and navigate from one form to another form very easily by clicking on navigation button.
The Accordion Navigator container is used for Form navigation. You can make many Forms in a single screen and navigate from one form to another form very easily by clicking on navigation button.
Accordion Navigator Container in Flex4:
The Accordion Navigator container is used for Form
navigation. You can make many Forms in a single screen and navigate from one
form to another form very easily by clicking on navigation button. Navigation
button use the numChildren, selectedIndex, selectedChild properties. The tag of
Accordion Navigation control is <mx:Accordion>.
For example colleges maintain a students record like
student information, student library informatiom, sessional marks information
etc. So all these form are shown in a single screen and you can navigate from
one form to another form. You can see it in a Running Application and know how
to use a Accordion navigation container in Flex4.
Example:
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx=" http://ns.adobe.com/mxml/2009 "
xmlns:mx="
library://ns.adobe.com/flex/mx "
xmlns:s="
library://ns.adobe.com/flex/spark " >
<s:Panel
id=" pnl " title=" Accordion
Navigator Container Example " width=" 365 "
height=" 419 "
color=" #009900 " >
<mx:Accordion
id=" accordion1 "
height=" 344 " x=" 20 "
y=" 19 " width=" 323 "
fontWeight=" bold " >
<mx:Form
id=" studentinformation "
label=" 1. Student Information "
color=" #990000 " >
<mx:FormHeading
label=" Student Information " />
<mx:FormItem
id=" sinformation "
label=" Student Name: " >
<mx:TextInput
id=" sName " />
</mx:FormItem>
<mx:FormItem
id=" sinformation1 "
label=" Father's Name: " >
<mx:TextInput
id=" sfatherName " />
</mx:FormItem>
<mx:FormItem
id=" sinformation2 "
label=" D.O.B.: " >
<mx:TextInput
id=" sdateofBirth " />
</mx:FormItem>
<mx:FormItem
id=" sinformation3 "
label=" Address: " >
<mx:TextInput
id=" sAddress " />
</mx:FormItem>
<mx:FormItem
id=" sinformation4 "
label=" City: " >
<mx:TextInput
id=" sCity " />
</mx:FormItem>
<mx:FormItem
id=" sinformation5 "
label=" Pincode: " >
<mx:TextInput
id=" sPincode " />
</mx:FormItem>
0
<mx:FormItem
id=" sinformation6 "
label=" Mobile No: " >
<mx:TextInput
id=" sMobile " />
</mx:FormItem>
1
<mx:FormItem>
<s:Button
id=" btn1 " label=" Submit "
color=" #000000 " />
</mx:FormItem>
2
</mx:Form>
<mx:Form
id=" studentlibararyinformation "
label=" 2. Library Information "
color=" #900099 " >
3
<mx:FormHeading
label=" Library Information " />
<mx:FormItem
id=" linformation "
label=" Student Name: " >
<mx:TextInput
id=" slName " />
4
</mx:FormItem>
<mx:FormItem
id=" linformation0 "
label=" Roll No: " >
<mx:TextInput
id=" slrollNo " />
5
</mx:FormItem>
<mx:FormItem
id=" linformation00 "
label=" Course: " >
<mx:TextInput
id=" lCourse " />
6
</mx:FormItem>
<mx:FormItem
id=" linformation1 "
label=" Book Name: " >
<mx:TextInput
id=" slbookName " />
7
</mx:FormItem>
<mx:FormItem
id=" linformation2 "
label=" Issue Date: " >
<mx:TextInput
id=" slissueDate " />
8
</mx:FormItem>
<mx:FormItem
id=" linformation3 "
label=" Return Date: " >
<mx:TextInput
id=" slreturnDate " />
9
</mx:FormItem>
<mx:FormItem
id=" linformation4 "
label=" Fine: " >
<mx:TextInput
id=" slfine " />
0
</mx:FormItem>
<mx:FormItem>
<s:Button
id=" btn2 " label=" Submit "
color=" #000000 " />
1
</mx:FormItem>
</mx:Form>
<mx:Form
id=" studentinfo "
label=" 3. Student Sessional Marks "
color=" Blue " >
2
<mx:FormHeading
label=" Session Marks Information " />
<mx:FormItem
id=" sminformation "
label=" Student Name: " >
<mx:TextInput
id=" smName " />
3
</mx:FormItem>
<mx:FormItem
id=" sminformation0 "
label=" Roll No: " >
<mx:TextInput
id=" smrollNo " />
4
</mx:FormItem>
<mx:FormItem
id=" sminformation00 "
label=" Course: " >
<mx:TextInput
id=" smCourse " />
5
</mx:FormItem>
<mx:FormItem
id=" sminformation1 "
label=" Subject1: " >
<mx:TextInput
id=" smSubject1 " />
6
</mx:FormItem>
<mx:FormItem
id=" sminformation2 "
label=" Subject2: " >
<mx:TextInput
id=" smSubject2 " />
7
</mx:FormItem>
<mx:FormItem
id=" sminformation3 "
label=" Subject3: " >
<mx:TextInput
id=" smSubject3 " />
8
</mx:FormItem>
<mx:FormItem
id=" sminformation4 "
label=" Subject4: " >
<mx:TextInput
id=" smSubject4 " />
9
</mx:FormItem>
<mx:FormItem>
<s:Button
id=" btn3 " label=" Submit "
color=" #000000 " />
0
</mx:FormItem>
</mx:Form>
</mx:Accordion>
1
</s:Panel>
</s:Application>
Output:
2
Running Application:
To view this page ensure that Adobe Flash Player version
10.0.0 or greater is installed.
3
Either scripts and active content are not permitted to run or Adobe Flash Player version
10.0.0 or greater is not installed.
Download this code
