Accordion Navigator Container in Flex4


 

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

Download this code

Ads