Home Tutorial Flex Flex4 Components NavigatorcontentContainer in Flex4

 
 

NavigatorcontentContainer in Flex4
Posted on: May 14, 2010 at 12:00 AM
The NavigatorContent Container is a Flex4 container that's used to switch between multiple children which are other containers.

NavigatorContent Container in Flex4:

The NavigatorContent Container is a Flex4 container that's used to switch between multiple children which are other containers. It is place inside of MX navigator containers. In this example we have create a NavigatorContent container. A NavigatorContent must be the child of an MX navigator container. If user want to use this container use <s:NavigatorContent> tag in the application.

Example:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx">

<s:Panel title="NavigatorContent container Example">

<mx:TabNavigator width="270" height="462">

<s:NavigatorContent label="User Login" backgroundColor="0x808080">

<s:layout>

<s:VerticalLayout paddingTop="10" paddingLeft="5"/>

</s:layout>

<mx:Form>

<mx:FormItem label="User Name:">

<s:TextInput id="username" width="100%"/>

</mx:FormItem>

<mx:FormItem label="Password:">

<s:TextInput id="userpassword" width="100%" displayAsPassword="true"/>

</mx:FormItem>

</mx:Form>

<s:HGroup>

<s:Button label="Login"/>

</s:HGroup>

</s:NavigatorContent>

<s:NavigatorContent label="New Registration" backgroundColor="0x408080">

<s:layout>

<s:VerticalLayout paddingTop="10" paddingLeft="5"/>

</s:layout>

<mx:Form>

<mx:FormItem label="First Name:">

<s:TextInput id="firstname" width="100%"/>

</mx:FormItem>

<mx:FormItem label="Last Name:">

<s:TextInput id="lastname" width="100%"/>

</mx:FormItem>

<mx:FormItem label="Email:">

<s:TextInput id="email" width="100%"/>

</mx:FormItem>

<mx:FormItem label="Age:">

<s:TextInput id="age" width="100%"/>

</mx:FormItem>

<mx:FormItem label="Contect Number:">

<s:TextInput id="contect" width="100%"/>

</mx:FormItem>

<mx:FormItem label="Address:">

<s:TextArea id="address" width="127"/>

</mx:FormItem>

<mx:FormItem label="State:">

<s:TextInput id="state" width="100%"/>

</mx:FormItem>

<mx:FormItem label="Country:">

<s:TextInput id="country" width="100%"/>

</mx:FormItem>

</mx:Form>

<s:HGroup>

<s:Button label="Save"/>

</s:HGroup>

</s:NavigatorContent>

<s:NavigatorContent label="Admin Login" backgroundColor="0xC0C0C0">

<s:layout>

<s:VerticalLayout paddingTop="10" paddingLeft="5"/>

</s:layout>

<mx:Form>

<mx:FormItem label="Admin Name:">

<s:TextInput id="adminname" width="100%"/>

</mx:FormItem>

<mx:FormItem label="Password:">

<s:TextInput id="password" width="100%" displayAsPassword="true"/>

</mx:FormItem>

</mx:Form>

<s:HGroup>

<s:Button label="Login"/>

</s:HGroup>

</s:NavigatorContent>

</mx:TabNavigator>

</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 NavigatorcontentContainer in Flex4:


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.