Home Tutorial Flex Flex4 Components Accordion Navigator Container in Flex4

 
 

Share on Google+Share on Google+
Accordion Navigator Container in Flex4
Posted on: May 15, 2010 at 12:00 AM
Advertisement
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

Advertisement

Related Tags for Accordion Navigator Container in Flex4:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: May 15, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com