Accordion Navigator Container in Flex4

Home Tutorial Flex Flex4 Components Accordion Navigator Container in Flex4

Accordion Navigator Container in Flex4
Posted on: May 15, 2010 at 12:00 AM

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>

<mx:FormItem id="sinformation6" label="Mobile No:">

<mx:TextInput id="sMobile"/>

</mx:FormItem>

<mx:FormItem>

<s:Button id="btn1" label="Submit" color="#000000"/>

</mx:FormItem>

</mx:Form>

<mx:Form id="studentlibararyinformation" label="2. Library Information"

color="#900099">

<mx:FormHeading label="Library Information"/>

<mx:FormItem id="linformation" label="Student Name:">

<mx:TextInput id="slName"/>

</mx:FormItem>

<mx:FormItem id="linformation0" label="Roll No:">

<mx:TextInput id="slrollNo"/>

</mx:FormItem>

<mx:FormItem id="linformation00" label="Course:">

<mx:TextInput id="lCourse"/>

</mx:FormItem>

<mx:FormItem id="linformation1" label="Book Name:">

<mx:TextInput id="slbookName"/>

</mx:FormItem>

<mx:FormItem id="linformation2" label="Issue Date:">

<mx:TextInput id="slissueDate"/>

</mx:FormItem>

<mx:FormItem id="linformation3" label="Return Date:">

<mx:TextInput id="slreturnDate"/>

</mx:FormItem>

<mx:FormItem id="linformation4" label="Fine:">

<mx:TextInput id="slfine"/>

</mx:FormItem>

<mx:FormItem>

<s:Button id="btn2" label="Submit" color="#000000"/>

</mx:FormItem>

</mx:Form>

<mx:Form id="studentinfo" label="3. Student Sessional Marks" color="Blue">

<mx:FormHeading label="Session Marks Information"/>

<mx:FormItem id="sminformation" label="Student Name:">

<mx:TextInput id="smName"/>

</mx:FormItem>

<mx:FormItem id="sminformation0" label="Roll No:">

<mx:TextInput id="smrollNo"/>

</mx:FormItem>

<mx:FormItem id="sminformation00" label="Course:">

<mx:TextInput id="smCourse"/>

</mx:FormItem>

<mx:FormItem id="sminformation1" label="Subject1:">

<mx:TextInput id="smSubject1"/>

</mx:FormItem>

<mx:FormItem id="sminformation2" label="Subject2:">

<mx:TextInput id="smSubject2"/>

</mx:FormItem>

<mx:FormItem id="sminformation3" label="Subject3:">

<mx:TextInput id="smSubject3"/>

</mx:FormItem>

<mx:FormItem id="sminformation4" label="Subject4:">

<mx:TextInput id="smSubject4"/>

</mx:FormItem>

<mx:FormItem>

<s:Button id="btn3" label="Submit" color="#000000"/>

</mx:FormItem>

</mx:Form>

</mx:Accordion>

</s:Panel>

</s:Application>

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Related Tags for Accordion Navigator Container in Flex4:

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics